/* PickBazaar Theme — Main Styles */
/* ════════════════════════════════════════
   PREMIUM ANIMATION LIBRARY
   Beyond the original — richer, deeper
════════════════════════════════════════ */

/* ── Core entrance animations ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ── Hero text stagger ── */
@keyframes heroWord {
  from { opacity:0; transform:translateY(100%) rotateX(40deg); }
  to   { opacity:1; transform:translateY(0) rotateX(0deg);     }
}

/* ── Glow pulse (original enhanced) ── */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0   0px rgba(99,102,241,0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 32px 8px rgba(99,102,241,0.25); transform: scale(1.02); }
}

/* ── Floating orbs ── */
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(20px,-30px) scale(1.06); }
  66%  { transform: translate(-18px,18px) scale(0.96); }
  100% { transform: translate(0,0) scale(1); }
}

/* ── Shimmer skeleton ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── Card flip reveal ── */
@keyframes cardReveal {
  from { opacity:0; transform:translateY(32px) scale(0.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Ticker marquee ── */
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Number count bounce ── */
@keyframes countBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Gradient shift ── */
@keyframes gradShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Border march (tracker modal) ── */
@keyframes borderMarch {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Wishlist heart pop ── */
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ── Button ripple ── */
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ────────── UTILITIES ────────── */
.view-animate   { animation: fadeSlideUp 0.55s cubic-bezier(.16,1,.3,1) forwards; }
.glow-pulse     { animation: glowPulse 3s infinite ease-in-out; }
.gradient-shift {
  background-size: 200% 200%;
  animation: gradShift 5s ease infinite;
}
.card-reveal    { animation: cardReveal 0.6s cubic-bezier(.16,1,.3,1) both; }
.orb1           { animation: orbFloat 9s  ease-in-out infinite; }
.orb2           { animation: orbFloat 11s ease-in-out 2s infinite reverse; }
.orb3           { animation: orbFloat 7s  ease-in-out 4s infinite; }
.hero-word      { animation: heroWord .7s cubic-bezier(.16,1,.3,1) both; }
.shimmer-bg {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Magnetic button effect */
.btn-magnetic   { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }

/* Custom scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:#6366f1; border-radius:3px; }

/* Stagger helpers */
.stagger-1 { animation-delay:.05s; }
.stagger-2 { animation-delay:.12s; }
.stagger-3 { animation-delay:.19s; }
.stagger-4 { animation-delay:.26s; }
.stagger-5 { animation-delay:.33s; }
.stagger-6 { animation-delay:.40s; }

/* Reveal on scroll */
.reveal        { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in     { opacity:1; transform:translateY(0); }
.reveal-left   { opacity:0; transform:translateX(-28px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left.in{ opacity:1; transform:translateX(0); }

/* Progress bar */
#nprogress { position:fixed; top:0; left:0; height:2.5px; z-index:9999; background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899); width:0%; transition:width .12s linear; }

/* Ticker */
.ticker-track { display:flex; gap:40px; width:max-content; animation:ticker 22s linear infinite; }

/* Card hover gradient overlay */
.card-hover-overlay { opacity:0; transition:opacity .4s; background:linear-gradient(to top, rgba(79,70,229,.12) 0%, transparent 100%); }
.group:hover .card-hover-overlay { opacity:1; }

/* Nav pill active */
.nav-link-active { color:#6366f1; position:relative; }
.nav-link-active::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:#6366f1; border-radius:1px; animation:slideUp .3s ease; }

/* Tracker modal gradient border */
.tracker-border {
  position:relative;
}
.tracker-border::before {
  content:''; position:absolute; inset:-1px; border-radius:calc(1.5rem + 1px);
  background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899,#6366f1);
  background-size:200% 100%;
  animation:borderMarch 3s linear infinite;
  z-index:-1;
}

/* Category btn active state */
.cat-active {
  background: #4f46e5 !important;
  color: white !important;
  box-shadow: 0 8px 20px rgba(79,70,229,.3) !important;
  transform: translateY(-1px);
}

/* Wishlist button */
.wish-btn { transition: all .2s; }
.wish-btn.wished { color: #e11d48; }
.wish-btn.wished i { animation: heartPop .4s cubic-bezier(.34,1.56,.64,1); }

/* Ripple container */
.ripple-wrap { position:relative; overflow:hidden; }
.ripple-circle {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:scale(0); animation:ripple .5s linear;
  pointer-events:none;
}

/* Toast notification */
#toast-box {
  position:fixed; bottom:24px; right:24px; z-index:9998;
  display:flex; flex-direction:column; gap:8px;
}
.toast-item {
  background:#1e293b; color:#fff;
  padding:10px 18px; border-radius:12px;
  font-size:12.5px; font-weight:600;
  animation:fadeSlideLeft .4s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  display:flex; align-items:center; gap:8px;
  max-width:280px;
}
.toast-item.green { background:#065f46; }
.toast-item.red   { background:#7f1d1d; }

/* Star rating */
.stars-fill { color:#f59e0b; }
.stars-empty{ color:#d1d5db; }

/* Price badge */
.discount-badge {
  background:linear-gradient(135deg,#dc2626,#e11d48);
  color:white; font-size:9.5px; font-weight:800;
  padding:2.5px 8px; border-radius:20px; letter-spacing:.4px;
}

/* Platform badge */
.platform-badge {
  font-size:8.5px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════
   MOBILE-FIRST RESPONSIVE FIXES
   Tested for 320px–430px viewport width
═══════════════════════════════════════ */

/* ── Hamburger menu ── */
.hamburger { display:none; flex-direction:column; gap:4.5px; cursor:pointer; padding:6px; background:none; border:none; }
.hamburger span { display:block; width:22px; height:2px; background:#374151; border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px); }
.hamburger.open span:nth-child(2) { opacity:0; transform:translateX(-8px); }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px); }

/* Mobile drawer */
#mobileMenu {
  display:none; position:fixed; top:53px; left:0; right:0;
  background:rgba(255,255,255,.98); backdrop-filter:blur(16px);
  border-bottom:1px solid #e5e7eb;
  padding:16px; z-index:49;
  flex-direction:column; gap:2px;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  animation:fadeSlideDown .3s cubic-bezier(.16,1,.3,1);
}
#mobileMenu.open { display:flex; }
#mobileMenu button, #mobileMenu a {
  padding:12px 14px; border-radius:10px; font-size:14px;
  font-weight:600; color:#374151; text-align:left;
  background:none; border:none; cursor:pointer; width:100%;
  transition:background .15s;
}
#mobileMenu button:active, #mobileMenu a:active { background:#f3f4f6; }
#mobileMenu .mob-tracker {
  margin-top:6px;
  background:#eef2ff; color:#4f46e5;
  border-radius:10px; display:flex; align-items:center; gap:8px;
}

/* ── Category scroll on mobile ── */
@media (max-width:767px) {
  /* Hamburger visible, nav links hidden */
  .hamburger { display:flex !important; }
  #desktopNav { display:none !important; }

  /* Hero tighter */
  .hero-mobile-pad { padding-top:52px !important; padding-bottom:68px !important; }
  .hero-space-y { gap:18px !important; }

  /* Search bar — stack on very small */
  .search-wrap { flex-wrap:wrap; }
  .search-wrap input { font-size:13px !important; }
  .search-wrap button { width:100%; margin-top:6px; margin-right:0 !important; border-radius:10px !important; }

  /* Stats row tighter */
  .stats-row { gap:16px !important; }
  .stats-row .w-px { display:none; }
  .stats-num { font-size:20px !important; }

  /* Category filter — horizontal scroll */
  .cat-filter-wrap {
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    justify-content:flex-start !important;
    scrollbar-width:none;
    padding-bottom:4px;
    padding-left:16px; padding-right:16px;
    -webkit-overflow-scrolling:touch;
  }
  .cat-filter-wrap::-webkit-scrollbar { display:none; }
  .cat-filter-wrap button { flex-shrink:0; }

  /* Product grid — single column on mobile */
  .product-grid { grid-template-columns:1fr !important; }

  /* Modals — full-width friendly */
  .modal-content-inner { max-width:100% !important; margin:12px !important; border-radius:20px !important; }

  /* About/Privacy cards — less padding */
  .page-card-pad { padding:20px !important; }

  /* Footer 2-col → 1-col */
  .footer-grid { flex-direction:column !important; gap:28px !important; }
  .footer-grid > div { width:100% !important; }

  /* Toast — full width friendly */
  #toast-box { bottom:16px; right:12px; left:12px; }
  .toast-item { max-width:100%; }

  /* Hero eyebrow text wrap gracefully */
  .hero-eyebrow-text { letter-spacing:.5px !important; font-size:9px !important; }

  /* Tracker / detail modal sheet */
  .modal-sheet-inner { margin:8px !important; max-height:88vh !important; }

  /* About founder card */
  .founder-card-flex { flex-direction:column !important; }

  /* 3-col grids in about/disclaimer → 1-col */
  .three-col-grid { grid-template-columns:1fr !important; }
}

/* Hide mobile-only elements on desktop */
@media (min-width:768px) {
  .hamburger-wrap { display:none !important; }
  #mobileMenu { display:none !important; }
}

/* Extra small — 320px */
@media (max-width:380px) {
  .hero-title-size { font-size:28px !important; }
  .stats-row { gap:10px !important; }
  .cat-filter-wrap button { padding:8px 12px !important; font-size:11px !important; }
}