/* ══════════════════════════════════════
   RIBBETSHOP — STYLES v3
   Red-orange palette matching landing page
══════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080010;--bg2:#0d0018;--surface:#130020;--surface2:#1a0028;
  --border:rgba(255,102,196,.2);--border-glow:rgba(255,102,196,.5);
  --primary:#ff66c4;--primary-dk:#cc44a0;--secondary:#7c3aed;
  --gradient:linear-gradient(135deg,#ff66c4 0%,#7c3aed 100%);
  --gradient-h:linear-gradient(135deg,#ffaadd 0%,#a78bfa 100%);
  --cyan:#ff66c4;--green:#10b981;--orange:#f97316;--red:#ef4444;
  --text:#f1f5f9;--text2:#cbd5e1;--text3:#64748b;
  --nav-h:90px;--radius:12px;--radius-lg:20px;
  --shadow:0 4px 24px rgba(0,0,0,.55);--shadow-lg:0 8px 48px rgba(0,0,0,.75);
  --glow:0 0 32px rgba(255,102,196,.55);
  /* PERFORMANCE: this variable used to be `.22s cubic-bezier(...)` with no
     property — which CSS expanded to `transition: all`. Animating ALL
     properties on every hover/state change forced the compositor to track
     paint-affecting properties site-wide and was the biggest contributor
     to "feels laggy". The new value targets only the properties that
     actually animate visually (transform/opacity for motion, background/
     border/color for state, box-shadow for elevation), so the compositor
     can stay on its fast path. */
  --transition:
    background-color .22s cubic-bezier(.4,0,.2,1),
    border-color     .22s cubic-bezier(.4,0,.2,1),
    color            .22s cubic-bezier(.4,0,.2,1),
    transform        .22s cubic-bezier(.4,0,.2,1),
    opacity          .22s cubic-bezier(.4,0,.2,1),
    box-shadow       .22s cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth}

/* PERFORMANCE: respect users who've disabled motion in their OS. Cuts
   transition durations to ~0 and disables the auto-rotate carousel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* PERFORMANCE: tell the browser it's safe to skip rendering sections that
   aren't on screen yet. The home page has 4-5 stacked sections — without
   this, the browser paints all of them on every scroll + every resize.
   `contain-intrinsic-size` reserves a sane space so the scrollbar doesn't
   jump as sections lazily render. */
.home-section,
.home-best-sellers {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.6}
.bg-texture{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:var(--bg);background-image:repeating-linear-gradient(-45deg,rgba(255,102,196,.04) 0,rgba(255,102,196,.04) 1px,transparent 1px,transparent 18px),repeating-linear-gradient(45deg,rgba(124,58,237,.04) 0,rgba(124,58,237,.04) 1px,transparent 1px,transparent 18px)}
#app{position:relative;z-index:1}
a{text-decoration:none;color:inherit}button{cursor:pointer;font-family:inherit;border:none;background:none}
ul{list-style:none}img{display:block;max-width:100%}.full-width{width:100%}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;background:var(--gradient);color:#fff;font-weight:600;font-size:.9rem;border-radius:8px;cursor:pointer;transition:var(--transition);white-space:nowrap;border:none}
.btn-primary:hover{background:var(--gradient-h);box-shadow:var(--glow);transform:translateY(-1px)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 22px;background:transparent;color:var(--text);font-weight:600;font-size:.9rem;border-radius:8px;border:1.5px solid rgba(255,102,196,.5);cursor:pointer;transition:var(--transition);white-space:nowrap}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:rgba(255,102,196,.08)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;background:rgba(255,255,255,.08);color:var(--text);font-weight:600;font-size:.9rem;border-radius:8px;border:1.5px solid rgba(255,255,255,.12);cursor:pointer;transition:var(--transition);white-space:nowrap}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-lg{padding:13px 32px;font-size:1rem;border-radius:10px}

/* ── TOAST ── */
.toast{position:fixed;bottom:28px;right:28px;z-index:9999;padding:14px 22px;border-radius:10px;font-size:.9rem;font-weight:500;color:#fff;background:var(--surface2);border:1px solid var(--border);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;pointer-events:none;max-width:320px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.15)}
.toast.error{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.15)}
.toast.info{border-color:rgba(6,182,212,.5);background:rgba(6,182,212,.12)}

/* ── NAVBAR ── */
#navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:500;background:rgba(11,12,27,.85);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background var(--transition),box-shadow var(--transition)}
#navbar.scrolled{background:rgba(11,12,27,.97);box-shadow:0 4px 32px rgba(0,0,0,.5)}
.nav-inner{max-width:1280px;margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:16px}
.nav-logo{display:flex;align-items:center;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0}
.logo-img{height:84px;width:auto}
.logo-text-fallback{font-family:'Rajdhani',sans-serif;font-size:1.4rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;margin-left:12px}
.nav-link{padding:6px 14px;font-size:.88rem;font-weight:500;color:var(--text2);border-radius:6px;transition:var(--transition);white-space:nowrap}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-link.active{color:var(--primary);background:rgba(255,102,196,.1)}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;color:var(--text2);transition:var(--transition);position:relative}
.nav-icon-btn:hover{color:var(--text);background:rgba(255,255,255,.08)}
.cart-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;border-radius:999px;display:flex;align-items:center;justify-content:center}
.hamburger{display:none;flex-direction:column;gap:5px;width:38px;height:38px;align-items:center;justify-content:center;border-radius:8px;transition:var(--transition)}
.hamburger:hover{background:rgba(255,255,255,.08)}
.hamburger span{display:block;width:20px;height:2px;background:var(--text2);border-radius:2px;transition:var(--transition)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── SEARCH ── */
.search-bar{position:absolute;top:100%;left:0;right:0;background:rgba(11,12,27,.98);border-bottom:1px solid var(--border);padding:12px 24px;display:none;backdrop-filter:blur(20px)}
.search-bar.open{display:block}
.search-inner{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px}
.search-inner svg{color:var(--text3);flex-shrink:0}
.search-inner input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:.95rem;font-family:inherit}
.search-inner input::placeholder{color:var(--text3)}
.search-inner button{color:var(--text3);font-size:1rem;padding:0 4px;transition:var(--transition)}
.search-inner button:hover{color:var(--text)}
.search-results{max-width:640px;margin:8px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:none}
.search-results.visible{display:block}
.search-result-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background var(--transition);border-bottom:1px solid var(--border)}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:rgba(255,102,196,.08)}
.search-result-img{width:36px;height:36px;border-radius:6px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;overflow:hidden}
.search-result-img img{width:100%;height:100%;object-fit:cover}
.search-result-info{display:flex;flex-direction:column}
.search-result-info strong{font-size:.88rem;color:var(--text)}
.search-result-info span{font-size:.78rem;color:var(--text3)}

/* ── MOBILE DRAWER ── */
.mobile-drawer{position:fixed;top:0;right:0;width:320px;max-width:88vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:600;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile-drawer.open{transform:translateX(0)}
.drawer-inner{padding:24px 20px;display:flex;flex-direction:column;height:100%}
.drawer-close{align-self:flex-end;font-size:1.2rem;color:var(--text3);padding:4px 8px;border-radius:6px;transition:var(--transition);margin-bottom:24px}
.drawer-close:hover{color:var(--text);background:rgba(255,255,255,.08)}
.drawer-links{display:flex;flex-direction:column;gap:4px;flex:1}
.drawer-links button{text-align:left;padding:12px 16px;font-size:1rem;font-weight:500;color:var(--text2);border-radius:8px;transition:var(--transition);width:100%}
.drawer-links button:hover{color:var(--text);background:rgba(255,255,255,.07)}
.drawer-auth{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--border)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:590;display:none}
.drawer-overlay.visible{display:block}

/* ── THEMED PAGE BACKGROUNDS (per shop section) ────────────────────────
   When the user is browsing a shop section that has its own art (currently
   only Roblox), JS sets <body data-shop-bg="<id>"> and we paint the full
   viewport with that art behind everything. Fixed-attachment so the image
   stays put while the product list scrolls. The dark gradient overlay is
   intentional — keeps product cards + body text legible on top of the
   busy character art. Tune the rgba alphas if you want the image more or
   less visible (lower = more image showing through). */
body[data-shop-bg="roblox"] {
  background:
    linear-gradient(180deg, rgba(8,0,16,.78) 0%, rgba(8,0,16,.88) 60%, rgba(8,0,16,.95) 100%),
    url('roblox-bg.webp') center/cover fixed no-repeat;
}
/* Hide the dotted .bg-texture pattern only when a themed bg is active —
   otherwise the diagonal pink/purple lines fight the photo. */
body[data-shop-bg] .bg-texture { display: none; }

/* ── PAGE SYSTEM ── */
.page{display:none;min-height:100vh;padding-top:var(--nav-h);content-visibility:auto;contain-intrinsic-size:0 800px}
.page.active{display:block}
#page-home{padding-top:0;overflow:hidden}
.page-banner{padding:60px 24px 48px;text-align:center;background:linear-gradient(160deg,rgba(255,102,196,.1) 0%,transparent 70%);border-bottom:1px solid var(--border)}
.page-banner h1{font-family:'Rajdhani',sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}
.page-banner p{color:var(--text2);font-size:1rem;max-width:600px;margin:0 auto}
.section{max-width:1280px;margin:0 auto;padding:72px 24px}

/* ── TRUST STRIP ───────────────────────────────────────────────────────
   Pill row directly under the navbar — payment safety, fulfillment speed,
   social proof, support availability. Subtle border + tinted background so
   it doesn't compete with the hero, but stays prominent enough to scan.
   On mobile the row scrolls horizontally (-webkit-overflow-scrolling:touch
   for momentum on iOS) so all four pills stay visible. */
.trust-strip{
  position:absolute;top:var(--nav-h);left:0;right:0;z-index:3;
  background:rgba(11,12,27,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  pointer-events:none; /* don't block hero clicks behind it */
}
.trust-strip-inner{
  max-width:1280px;margin:0 auto;padding:8px 24px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  pointer-events:auto;
}
.trust-strip-inner::-webkit-scrollbar{display:none}
.trust-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--text2);font-size:.74rem;font-weight:600;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s;
}
.trust-pill:hover{background:rgba(255,255,255,.08);border-color:var(--border-glow);color:var(--text)}
.trust-pill-ico{font-size:.95rem;line-height:1}

/* ── LIVE ORDER TICKER ─────────────────────────────────────────────────
   Single-row "X just received Y · Nm ago" message that fades through the
   latest fulfilled gift orders. Sits below the trust strip, above the
   hero content. The pulsing dot signals "live" without being noisy. */
.live-ticker{
  position:absolute;top:calc(var(--nav-h) + 38px);left:0;right:0;z-index:3;
  display:flex;justify-content:center;padding:6px 16px;
  pointer-events:none;
}
.live-ticker-inner{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px;border-radius:999px;
  background:rgba(11,12,27,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(74,222,128,.3);
  font-size:.78rem;color:var(--text);
  max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:auto;
}
.live-ticker-dot{
  width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0;
  box-shadow:0 0 8px #4ade80;animation:ticker-pulse 1.6s ease-in-out infinite;
}
@keyframes ticker-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.8)}
}
.live-ticker-msg{
  font-weight:500;letter-spacing:.01em;
  opacity:1;transition:opacity .35s ease-out;
}
.live-ticker-msg.fading{opacity:0}
.live-ticker-msg strong{color:#4ade80;font-weight:700}
@media (max-width:640px){
  .trust-pill{font-size:.7rem;padding:4px 10px}
  .trust-strip-inner{justify-content:flex-start;padding:6px 14px}
  .live-ticker{top:calc(var(--nav-h) + 34px);padding:4px 8px}
  .live-ticker-inner{font-size:.72rem;padding:5px 12px}
}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:var(--nav-h)}
.hero-fullscreen{height:100vh;min-height:100vh;box-sizing:border-box;padding-top:var(--nav-h);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hero-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,0,16,.88) 0%,rgba(8,0,16,.62) 45%,rgba(8,0,16,.82) 100%);z-index:1}
.hero-marquee{position:absolute;top:var(--nav-h);left:0;right:0;overflow:hidden;background:rgba(255,102,196,.1);border-bottom:1px solid var(--border);padding:8px 0;z-index:3}
.marquee-track{display:flex;align-items:center;gap:24px;width:max-content;animation:marquee 30s linear infinite;white-space:nowrap}
.marquee-track span{font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--text2);text-transform:uppercase}
.marquee-track .sep{color:var(--primary);font-size:.6rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-content{position:relative;z-index:2;text-align:center;padding:20px 24px;max-width:760px;width:100%}
.hero-logo-wrap{margin-bottom:16px;display:flex;justify-content:center}
.hero-logo{height:160px;width:auto;max-width:400px;filter:drop-shadow(0 0 40px rgba(255,102,196,.7)) drop-shadow(0 0 80px rgba(124,58,237,.4));animation:floatLogo 5s ease-in-out infinite}
@keyframes floatLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-sub{font-size:.95rem;color:var(--text2);margin-bottom:18px;line-height:1.6}
.hero-stats{display:flex;align-items:center;justify-content:center;margin-bottom:22px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:16px 24px;width:fit-content;margin-left:auto;margin-right:auto}
.hero-stat{text-align:center;padding:0 24px}
.stat-num{display:block;font-family:'Rajdhani',sans-serif;font-size:1.7rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px}
.stat-label{font-size:.78rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.hero-divider{width:1px;height:36px;background:var(--border)}
.hero-btns{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hero-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:700px}
.hero-cat-btn{padding:9px 18px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,102,196,.3);border-radius:999px;color:var(--text2);font-size:.83rem;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}
.hero-cat-btn:hover{background:rgba(255,102,196,.15);border-color:var(--primary);color:var(--text);transform:translateY(-2px)}

/* ── CATEGORY TABS ── */
.cat-tabs-wrap{position:sticky;top:var(--nav-h);z-index:40;background:rgba(11,12,27,.9);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);padding:0 24px;overflow-x:auto;scrollbar-width:none}
.cat-tabs-wrap::-webkit-scrollbar{display:none}
.cat-tabs{display:flex;align-items:center;gap:4px;max-width:1280px;margin:0 auto;padding:10px 0;width:max-content}
.cat-tab{padding:7px 18px;font-size:.85rem;font-weight:500;color:var(--text3);border-radius:999px;transition:var(--transition);white-space:nowrap;border:1.5px solid transparent}
.cat-tab:hover{color:var(--text2);background:rgba(255,255,255,.06)}
.cat-tab.active{color:#fff;background:var(--gradient);border-color:transparent}

/* ── PRODUCT GRID ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}

/* ── PRODUCT CARD — portrait store card style ── */
.product-card {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--border-glow);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}

/* Full-bleed image fills entire card */
.product-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  background: var(--surface2);
  overflow: hidden;
}
.product-img-wrap img,
.product-emoji-img,
.product-color-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-img-wrap img {
  object-fit: cover !important;
  object-position: center center;
  padding: 0 !important;
}
.product-emoji-img { display:flex;align-items:center;justify-content:center;font-size:4.5rem; }
.product-color-bg  { display:flex;align-items:center;justify-content:center; }
.color-card-inner  { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;width:100%; }
.card-logo-text    { font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.7rem;color:#fff;letter-spacing:.05em; }
.card-logo-icon    { font-size:3rem; }

/* Gradient scrim for text legibility */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.1) 65%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.xbox-card-bg      { background:linear-gradient(135deg,#0d5c0d,#107C10,#1a8f1a); }
.psn-card-bg       { background:linear-gradient(135deg,#001f5c,#003791,#0052cc); }

/* Badge */
.product-badge     { position:absolute;top:8px;right:8px;padding:3px 9px;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;z-index:3; }
.badge-hot         { background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff; }
.badge-new         { background:linear-gradient(135deg,#10b981,#059669);color:#fff; }
.badge-popular     { background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff; }
.badge-best-value  { background:var(--gradient);color:#fff; }
.badge-rare        { background:linear-gradient(135deg,#fb923c,#6d28d9);color:#fff; }
.badge-oos         { background:linear-gradient(135deg,#3a3a3a,#1f1f1f);color:#fff;border:1px solid rgba(239,68,68,.55);box-shadow:0 2px 10px rgba(0,0,0,.45); }

/* ── OUT OF STOCK card states ────────────────────────── */
.product-card--oos {
  cursor: pointer;          /* clickable to open modal but visually muted */
}
.product-card--oos .product-img-wrap img,
.product-card--oos .product-img-wrap video {
  filter: grayscale(.85) brightness(.55);
  transition: filter .25s ease;
}
.product-card--oos:hover .product-img-wrap img,
.product-card--oos:hover .product-img-wrap video {
  filter: grayscale(.7) brightness(.7);
}
.product-card--oos .product-name {
  opacity: .65;
}
.product-card--oos .product-price {
  text-decoration: line-through;
  opacity: .55;
}
.product-oos-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 3;
}
/* Diagonal stripe pattern behind the badge — gives the OOS state more
   visual weight so customers can't miss it (subtle, no flicker). */
.product-oos-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(239,68,68,.08) 0,
    rgba(239,68,68,.08) 14px,
    transparent 14px,
    transparent 28px
  );
}
.product-oos-overlay span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, rgba(239,68,68,1), rgba(220,38,38,1));
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(239,68,68,.4), inset 0 0 0 1px rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 20px rgba(239,68,68,.45);
  transform: rotate(-4deg);
}
.product-add-btn--disabled {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.35) !important;
  cursor: not-allowed !important;
  border: 1px solid rgba(255,255,255,.08);
}
.product-add-btn--disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Stock indicator inside the product modal ──────────── */
.product-modal-stock {
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  margin: -4px 0 14px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(34,197,94,.1);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.3);
  display: inline-block;
  align-self: center;
}
.product-modal-stock--low {
  background: rgba(245,158,11,.12);
  color: #fbbf24;
  border-color: rgba(245,158,11,.4);
}
.product-modal-stock--oos {
  background: rgba(239,68,68,.12);
  color: #f87171;
  border-color: rgba(239,68,68,.45);
  font-weight: 700;
  letter-spacing: .04em;
}

/* Info overlaid at bottom of card */
.product-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px 13px;
  z-index: 2;
}
.product-name  { font-size:.92rem;font-weight:700;color:#fff;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.9); }
.product-note  { font-size:.75rem;color:rgba(255,255,255,.7);line-height:1.4; }
.product-footer{ display:flex;align-items:center;justify-content:space-between;margin-top:4px; }
.product-price {
  font-family:'Rajdhani',sans-serif;
  font-size:1.45rem;
  font-weight:700;
  background:var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.8));
}
.product-add-btn { display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--gradient);color:#fff;border-radius:9px;font-size:1.2rem;border:none;cursor:pointer;transition:var(--transition);flex-shrink:0; }
.product-add-btn:hover { transform:scale(1.1);box-shadow:var(--glow); }

/* Gloss sheen on image */
.gc-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 55%);
  pointer-events: none;
  z-index: 2;
}

/* Hidden — no longer used in card layout */
.gc-overlay, .gc-bg-blur, .gc-name, .gc-footer, .gc-price, .gc-add-btn { display: none; }

/* ── VOUCH PLATFORM BADGES ── */
.vouch-platform-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:40px;padding-top:8px}
.vouch-platform-badge{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;font-size:.95rem;font-weight:700;color:var(--text);transition:var(--transition);text-decoration:none;border:1px solid var(--border-glow)}
.vouch-twitter{background:linear-gradient(135deg,rgba(29,161,242,.12),rgba(124,58,237,.12))}
.vouch-twitter:hover{background:linear-gradient(135deg,rgba(29,161,242,.25),rgba(124,58,237,.22));transform:translateY(-2px);box-shadow:0 0 20px rgba(29,161,242,.2)}
.vouch-gameflip{background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(16,185,129,.12))}
.vouch-gameflip:hover{background:linear-gradient(135deg,rgba(245,158,11,.25),rgba(16,185,129,.22));transform:translateY(-2px);box-shadow:0 0 20px rgba(245,158,11,.2)}
.vouch-discord{background:linear-gradient(135deg,rgba(88,101,242,.12),rgba(124,58,237,.12))}
.vouch-discord:hover{background:linear-gradient(135deg,rgba(88,101,242,.25),rgba(124,58,237,.22));transform:translateY(-2px);box-shadow:0 0 20px rgba(88,101,242,.2)}

/* ── VOUCH MARQUEE ── */
.vouch-marquee-wrap{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;margin:0 -24px;padding:8px 0}
.vm-fade-left,.vm-fade-right{position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.vm-fade-left{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.vm-fade-right{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.vm-row{display:flex;gap:16px;width:max-content}
.vm-row--left{animation:vmScrollLeft 40s linear infinite}
.vm-row--right{animation:vmScrollRight 40s linear infinite}
.vm-row:hover{animation-play-state:paused}
@keyframes vmScrollLeft  {from{transform:translateX(0)}  to{transform:translateX(-50%)}}
@keyframes vmScrollRight {from{transform:translateX(-50%)} to{transform:translateX(0)}}
.vm-card{flex-shrink:0;width:320px;height:220px;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--surface);transition:transform .25s,box-shadow .25s;cursor:zoom-in}
.vm-card:hover{transform:scale(1.04);box-shadow:0 8px 32px rgba(255,102,196,.25);border-color:var(--primary)}
.vm-card img{width:100%;height:100%;object-fit:cover;display:block}

/* ── GAMEFLIP SECTION ── */
.vouch-gameflip-section{margin-top:60px}
.vouch-section-header{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800;font-family:'Rajdhani',sans-serif;letter-spacing:.04em;margin-bottom:20px;text-transform:uppercase}
.vouch-see-all{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--primary);text-decoration:none;opacity:.8;transition:opacity .2s}
.vouch-see-all:hover{opacity:1}

/* Dual scrolling columns */
.vouch-gameflip-scroll-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:480px;overflow:hidden;position:relative}
.vouch-gameflip-scroll-wrap::before,.vouch-gameflip-scroll-wrap::after{content:'';position:absolute;left:0;right:0;height:60px;z-index:2;pointer-events:none}
.vouch-gameflip-scroll-wrap::before{top:0;background:linear-gradient(to bottom,var(--bg),transparent)}
.vouch-gameflip-scroll-wrap::after{bottom:0;background:linear-gradient(to top,var(--bg),transparent)}
.gf-scroll-col{display:flex;flex-direction:column;gap:12px;width:100%}
.gf-scroll-down{animation:gfScrollDown 35s linear infinite}
.gf-scroll-up{animation:gfScrollUp 35s linear infinite}
.gf-scroll-col:hover{animation-play-state:paused}
@keyframes gfScrollDown{from{transform:translateY(0)} to{transform:translateY(-50%)}}
@keyframes gfScrollUp{from{transform:translateY(-50%)} to{transform:translateY(0)}}
.gf-review-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:border-color .25s,box-shadow .25s;flex-shrink:0}
.gf-review-card:hover{border-color:#f59e0b;box-shadow:0 4px 20px rgba(245,158,11,.15)}
.gf-review-stars{color:#f59e0b;font-size:1rem;letter-spacing:2px;margin-bottom:8px}
.gf-review-text{font-size:.88rem;color:var(--text);line-height:1.6;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gf-review-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gf-review-name{font-weight:700;font-size:.82rem;color:var(--primary)}
.gf-review-date{font-size:.75rem;color:var(--text3)}

@media(max-width:640px){
  .vouch-gameflip-scroll-wrap{grid-template-columns:1fr;height:380px}
  .gf-scroll-up{display:none}
}

/* ── Twitter / X #ClowneyLegit vouches — text cards ──────────────────────
   Reuses the .vouch-gameflip-scroll-wrap container so the section sizing,
   fade-in/out gradients, and responsive collapse match Gameflip 1:1.
   Only the card visuals differ — Twitter blue accents instead of Gameflip
   amber, monogram avatar instead of gold star, profile-link wrapper. */
.tw-scroll-col{display:flex;flex-direction:column;gap:12px;width:100%}
.tw-scroll-down{animation:gfScrollDown 38s linear infinite}
.tw-scroll-up{animation:gfScrollUp 38s linear infinite}
.tw-scroll-col:hover{animation-play-state:paused}

.tw-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 18px;
  text-decoration:none;
  color:inherit;
  transition:border-color .25s, box-shadow .25s, transform .15s;
  flex-shrink:0;
}
.tw-card:hover{
  border-color:#1da1f2;
  box-shadow:0 4px 20px rgba(29,161,242,.18);
  transform:translateY(-2px);
}
.tw-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tw-avatar{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#1da1f2,#0d8ddb);
  color:#fff;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  font-size:.92rem;
}
.tw-card-head-r{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2}
.tw-name{font-weight:700; font-size:.88rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tw-handle{font-size:.74rem; color:var(--text3)}
.tw-x-icon{flex-shrink:0; color:var(--text3); transition:color .2s}
.tw-card:hover .tw-x-icon{color:#1da1f2}
.tw-text{
  font-size:.86rem; color:var(--text); line-height:1.55;
  margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.tw-mention{color:#1da1f2; font-weight:600}
.tw-hashtag{color:#a78bfa; font-weight:600}
.tw-date{font-size:.72rem; color:var(--text3)}

/* ── Gift receipts (Recent Successful Gifts) — CAROUSEL ──────────────────
   Was a vertical grid that ate the whole Reviews page; converted to a
   horizontal slide-and-rotate carousel. Track translates by 100/perView%
   per step. Per-view count: 3 desktop, 2 tablet, 1 mobile. */
.gift-receipts-grid { position: relative; }

/* ── Discord /vouch grid — verified customer reviews from the bot ── */
.discord-vouches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.dv-card {
  background: linear-gradient(135deg, rgba(88,101,242,.06), rgba(124,58,237,.04));
  border: 1px solid rgba(88,101,242,.18);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .2s, transform .2s;
}
.dv-card:hover { border-color: rgba(88,101,242,.4); transform: translateY(-2px); }
.dv-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.dv-head-l {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--text); font-size: .92rem;
}
.dv-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865f2, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: .78rem;
  flex-shrink: 0;
}
.dv-stars { color: #fbbf24; font-size: .92rem; letter-spacing: 1px; }
.dv-msg {
  color: var(--text2); font-size: .88rem; line-height: 1.55;
  margin: 4px 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.dv-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; color: var(--text3);
}
.dv-order { font-family: 'Courier New', monospace; color: var(--primary); }
.dv-time { color: var(--text3); }
.dv-discord-pill {
  background: rgba(88,101,242,.12);
  color: #a78bfa;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 4px;
}
.gift-carousel-shell {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.gift-carousel-viewport {
  flex: 1;
  overflow: hidden;
  border-radius: 14px;
}
.gift-carousel-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4,.2,.1,1);
  will-change: transform;
}
/* Each card claims 1/perView of the viewport so the track slides cleanly
   in 100/perView% steps. */
.gift-carousel-track .gift-receipt-card {
  flex: 0 0 calc(33.3333% - 10px);
  margin-right: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color .25s, box-shadow .25s;
}
.gift-carousel-track .gift-receipt-card:hover {
  border-color: #22c55e;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.18);
}
.gift-carousel-track .gift-receipt-card:last-child { margin-right: 0; }

.gift-receipt-icon { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #0b0e18; }
.gift-receipt-icon-ph { width: 64px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--bg2); flex-shrink: 0; }
.gift-receipt-body { flex: 1; min-width: 0; }
.gift-receipt-stars { color: #22c55e; font-size: .72rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; font-family: 'Rajdhani', sans-serif; }
.gift-receipt-text { font-size: .86rem; color: var(--text); line-height: 1.5; margin: 0 0 8px; }
.gift-receipt-text strong { color: var(--primary); font-weight: 700; }
.gift-receipt-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .74rem; color: var(--text3); }
.gift-receipt-meta strong { color: #3fc45f; font-weight: 700; }

/* Arrows */
.gift-carousel-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  align-self: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.gift-carousel-arrow:hover  { background: rgba(34, 197, 94, 0.12); border-color: #22c55e; transform: scale(1.05); }
.gift-carousel-arrow:active { transform: scale(0.95); }

/* Dots */
.gift-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.gift-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .15s, width .25s;
}
.gift-carousel-dot:hover     { background: rgba(34, 197, 94, 0.45); }
.gift-carousel-dot.is-active { background: #22c55e; width: 22px; border-radius: 4px; }

@media (max-width: 1099px) {
  .gift-carousel-track .gift-receipt-card { flex: 0 0 calc(50% - 7px); }
}
@media (max-width: 720px) {
  .gift-carousel-track .gift-receipt-card { flex: 0 0 calc(100% - 0px); margin-right: 0; }
  .gift-carousel-arrow { display: none; }
}

/* ── Gift History (Account page section) ────────────────────────────── */
.gift-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.gift-history-row:hover {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.04);
}
.gift-history-icon,
.gift-history-icon-ph {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg2);
}
.gift-history-icon { object-fit: cover; }
.gift-history-icon-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.gift-history-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gift-history-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gift-history-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.gift-history-cost {
  font-size: 0.84rem;
  font-weight: 700;
  color: #4ade80;
  flex-shrink: 0;
}
.gift-history-mid {
  font-size: 0.78rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gift-history-mid strong { color: var(--primary); font-weight: 700; }
.gift-history-bot {
  background: rgba(124, 58, 237, 0.15);
  color: #c4b5fd;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.gift-history-bot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.gift-history-status {
  font-size: 0.7rem;
  font-weight: 700;
  color: #22c55e;
  letter-spacing: 0.05em;
}
.gift-history-date { font-size: 0.7rem; color: var(--text3); }

@media (max-width: 640px) {
  .gift-history-icon, .gift-history-icon-ph { width: 38px; height: 38px; }
  .gift-history-name { font-size: 0.86rem; }
  .gift-history-mid  { font-size: 0.74rem; }
}

@media(max-width:640px){
  .vm-card{width:240px;height:165px}
  .vouch-platform-row{gap:8px}
  .vouch-platform-badge{font-size:.82rem;padding:10px 16px}
}

/* ── MOBILE DRAWER BOTTOM LINKS ── */
.drawer-bottom-links{border-top:1px solid var(--border);margin-top:16px;padding-top:16px;display:flex;flex-direction:column;gap:4px}
.drawer-bottom-links button{background:none;border:none;color:var(--text3);font-size:.9rem;padding:10px 0;text-align:left;cursor:pointer;transition:color .2s;width:100%}
.drawer-bottom-links button:hover{color:var(--text)}

/* ── CONTACT CARDS ── */
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:56px}
.contact-card{display:flex;align-items:flex-start;gap:20px;padding:28px 28px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.contact-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.contact-card--discord{border-color:rgba(88,101,242,.3)}
.contact-card--discord:hover{border-color:rgba(88,101,242,.7);box-shadow:0 12px 40px rgba(88,101,242,.2)}
.contact-card--email{border-color:rgba(255,102,196,.3)}
.contact-card--email:hover{border-color:rgba(192,38,211,.7);box-shadow:0 12px 40px rgba(255,102,196,.2)}
.contact-card-icon{flex-shrink:0;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.contact-card--discord .contact-card-icon{background:rgba(88,101,242,.15);color:#5865f2}
.contact-card--email .contact-card-icon{background:rgba(255,102,196,.15);color:var(--primary)}
.contact-card-body{flex:1}
.contact-card-body h3{font-size:1.1rem;font-weight:800;margin:0 0 8px;font-family:'Rajdhani',sans-serif;letter-spacing:.03em}
.contact-card-body p{font-size:.88rem;color:var(--text2);line-height:1.6;margin:0 0 14px}
.contact-card-cta{font-size:.85rem;font-weight:700;color:var(--primary)}
.contact-card--discord .contact-card-cta{color:#5865f2}
.contact-card-badge{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#5865f2,#ff66c4);color:#fff;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.support-faq-wrap{max-width:760px;margin:0 auto}
@media(max-width:700px){
  .contact-cards{grid-template-columns:1fr}
  .contact-card{flex-direction:column;gap:14px}
  .contact-card-icon{width:52px;height:52px}
}

/* ── SUPPORT LAYOUT ── */
.support-layout{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.discord-cta{background:linear-gradient(135deg,rgba(88,101,242,.15),rgba(124,58,237,.15));border:1px solid rgba(88,101,242,.35);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;position:sticky;top:calc(var(--nav-h) + 20px)}
.discord-icon{width:64px;height:64px;background:rgba(88,101,242,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#5865F2}
.discord-cta h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
.discord-cta p{font-size:.85rem;color:var(--text2);margin-bottom:20px;line-height:1.6}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color var(--transition)}
.faq-item.open{border-color:var(--border-glow)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;cursor:pointer;font-size:.92rem;font-weight:600;color:var(--text);gap:12px;width:100%;text-align:left}
.faq-q:hover{color:var(--primary)}
.faq-arrow{font-size:.75rem;color:var(--text3);transition:transform var(--transition);flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--primary)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-a{max-height:400px}
.faq-a-inner{padding:0 20px 18px;font-size:.875rem;color:var(--text2);line-height:1.7;border-top:1px solid var(--border);padding-top:14px}

/* ── TERMS ── */
.terms-content{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.terms-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px}
.terms-section h3{font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:12px}
.terms-section p{font-size:.875rem;color:var(--text2);line-height:1.8}

/* ── CART ── */
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:14px}
.cart-empty{text-align:center;padding:80px 24px;color:var(--text3)}
.cart-empty .empty-icon{font-size:3rem;margin-bottom:16px}
.cart-empty h3{font-size:1.2rem;font-weight:600;color:var(--text2);margin-bottom:8px}
.cart-item{display:flex;align-items:flex-start;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;transition:border-color .15s,background .15s}
.cart-item:hover{border-color:rgba(255,102,196,.28)}
.cart-item-img{width:88px;height:88px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:1.8rem;border:1px solid var(--border)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cart-item-name{font-size:1.02rem;font-weight:700;color:var(--text);line-height:1.3}

/* Sub-info rows (vbs.ar-style key:value pairs under the title) */
.cart-item-meta{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px}
.cart-meta-row{display:flex;align-items:baseline;gap:6px;font-size:.78rem;line-height:1.45}
.cart-meta-k{color:var(--text3);font-weight:500}
.cart-meta-v{color:var(--text2);font-weight:600}

.cart-item-price{font-family:'Rajdhani',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text2);margin-top:auto}
.cart-item-price strong{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.15rem}
.cart-item-stock{font-size:.72rem;margin-top:2px;font-weight:600}

/* Right-side actions column (remove X on top, qty stepper below) */
.cart-item-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0;align-self:stretch}
.cart-item-remove{width:32px;height:32px;border-radius:8px;background:rgba(239,68,68,.1);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:var(--transition);flex-shrink:0}
.cart-item-remove:hover{background:rgba(239,68,68,.2)}
.cart-qty-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cart-qty-btn{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text);font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);line-height:1;font-family:inherit}
.cart-qty-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(255,102,196,.1)}
.cart-qty-btn--disabled,.cart-qty-btn[disabled]{opacity:.4;cursor:not-allowed;border-color:var(--border)!important;background:var(--surface2)!important;color:var(--text3)!important}
.cart-qty-btn--disabled:hover,.cart-qty-btn[disabled]:hover{transform:none;background:var(--surface2)!important;color:var(--text3)!important;border-color:var(--border)!important}
.cart-qty-val{min-width:24px;text-align:center;font-weight:700;font-size:.95rem}
.cart-summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--nav-h) + 20px)}
.cart-summary h3{font-size:1.1rem;font-weight:700}
.summary-row{display:flex;align-items:center;justify-content:space-between;font-size:.9rem;color:var(--text2)}
.summary-total{font-size:1.05rem;font-weight:700;color:var(--text);border-top:1px solid var(--border);padding-top:14px}
.cart-note{font-size:.78rem;color:var(--text3);text-align:center;line-height:1.5}

/* ── Hero total — vbs.ar-style "Total amount" + huge price ── */
.summary-hero{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:6px 0 20px;border-bottom:1px solid var(--border);margin-bottom:6px;
}
.summary-hero-label{
  font-size:.78rem;color:var(--text3);font-weight:600;letter-spacing:.04em;margin-bottom:4px;
}
.summary-hero-amount{
  font-family:'Rajdhani',sans-serif;font-size:2.4rem;font-weight:800;
  color:var(--text);line-height:1.05;letter-spacing:.01em;
}
.summary-hero-currency{
  font-size:.74rem;color:var(--text3);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-top:2px;
}

/* ── Breakdown rows (subtotal / discount / fee) ── */
.summary-breakdown{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.summary-row-fee{font-size:.82rem;color:var(--text3)}
.summary-row-fee span:last-child{color:var(--text2);font-weight:600}

/* ── Secure-payment line (lock icon + caption) ── */
.cart-secure-line{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.78rem;color:var(--text3);margin:-2px 0 4px;line-height:1.3;
}
.cart-secure-line svg{flex-shrink:0;color:#4ade80;opacity:.85}

/* ── Refund-as-site-balance disclosure (sits under the secure line) ── */
.cart-refund-policy{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.74rem;color:var(--text3);line-height:1.5;
  padding:10px 12px;margin:6px 0 0;
  background:rgba(124,58,237,.05);
  border:1px solid rgba(124,58,237,.18);
  border-radius:8px;
}
.cart-refund-policy svg{flex-shrink:0;color:#7c3aed;margin-top:2px;opacity:.9}
.cart-refund-policy strong{color:var(--text2);font-weight:700}
.cart-refund-policy a{color:var(--primary)!important;text-decoration:underline!important}

/* ── Card brand badges row (compact, centered) ── */
.cart-pay-badges{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;
  padding:6px 0 2px;
}

/* ── Continue Shopping (de-emphasised below alt-pay) ── */
.cart-continue-btn{margin-top:4px;font-size:.86rem}

/* ── Coupon code panel (separated from main flow, labeled like vbs.ar) ── */
.coupon-row-label{
  font-size:.86rem;font-weight:700;color:var(--text);margin-bottom:8px;
}
.coupon-row{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);margin-top:6px}
.coupon-input-wrap{display:flex;gap:8px}
.coupon-input{flex:1;font-family:monospace;letter-spacing:.05em;font-size:.9rem;background:var(--bg)!important;border-color:var(--border)!important;color:var(--text)!important}
.coupon-input::placeholder{color:var(--text3)!important}
.coupon-input:focus{border-color:var(--primary)!important;background:var(--bg2)!important}
.coupon-apply-btn{white-space:nowrap;padding:0 16px;font-size:.85rem}
.coupon-msg{font-size:.8rem;padding:6px 10px;border-radius:8px}
.coupon-msg.success{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.coupon-msg.error{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.25)}
.coupon-discount-row{color:var(--text)}

/* ── Coupon admin table ── */
.coupon-table{width:100%;border-collapse:collapse;font-size:.85rem}
.coupon-table th{text-align:left;padding:8px 12px;color:var(--text3);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
.coupon-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.coupon-table tr:last-child td{border-bottom:none}
.coupon-badge{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase}
.coupon-badge.active{background:rgba(34,197,94,.15);color:#4ade80}
.coupon-badge.inactive{background:rgba(239,68,68,.1);color:#f87171}
.coupon-badge.expired{background:rgba(100,116,139,.15);color:#94a3b8}
@media(max-width:768px){.coupon-admin-grid{grid-template-columns:1fr!important}}

/* ── ACCOUNT PAGE ── */
.account-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;max-width:1400px;margin:0 auto}
.account-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;min-width:0}
.account-card h3{font-size:1rem;font-weight:700;margin-bottom:16px;color:var(--primary)}

/* ── MODALS ── */
/* PERFORMANCE: 4px backdrop-filter blur = full-page recomposite every
   frame the modal is open. Bumped opacity instead of blur so we still get
   the "page dims" cue without the GPU cost. The blur is now only applied
   on devices that have explicitly opted into it via `prefers-reduced-data: no-preference`,
   keeping older laptops + battery-saver phones snappy. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.84);z-index:800;display:none}
@media (min-width: 720px) and (prefers-reduced-data: no-preference) {
  .modal-overlay { backdrop-filter: blur(2px); }
}
.modal-overlay.visible{display:block}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:900;background:var(--surface);border:1px solid var(--border-glow);border-radius:var(--radius-lg);padding:36px 32px;width:min(480px,calc(100vw - 32px));max-height:90vh;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:var(--shadow-lg)}
.modal.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all}
.modal-close{position:absolute;top:14px;right:16px;font-size:1.1rem;color:var(--text3);padding:4px 8px;border-radius:6px;transition:var(--transition)}
.modal-close:hover{color:var(--text);background:rgba(255,255,255,.08)}
.modal-logo{display:flex;justify-content:center;margin-bottom:20px}
.modal-logo img{height:64px;width:auto}
.modal-title{font-family:'Rajdhani',sans-serif;font-size:1.6rem;font-weight:700;text-align:center;margin-bottom:6px}
.modal-sub{text-align:center;font-size:.875rem;color:var(--text2);margin-bottom:24px}
.modal-form{display:flex;flex-direction:column;gap:16px}
.modal-product{width:min(600px,calc(100vw - 32px))}
/* Battle Royale variant: claim the whole viewport like vbs.ar's product
   page does. Modal IS the page — anchored to the viewport corners so the
   user feels like they navigated, not opened a popup. The backdrop dim
   is also disabled below so the rest of the site doesn't blur black.
   Animation overrides are critical: the parent .modal has a
   translate(-50%,-50%) scale(.95) baseline that, when transitioning to a
   fullscreen layout, looked like the page was sliding in from the left.
   We pin top/left/transform to 0/none for BOTH closed and open states and
   replace the transition with a fast opacity-only fade. */
.modal-product:has(.prod-hero){
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: none;
  padding: 0;
  top: 0;
  left: 0;
  /* No translate/scale — fullscreen surface should not slide in. */
  transform: none !important;
  /* No transition — fullscreen surface should appear instantly to feel
     like a page navigation, not a popup. The 0.18s opacity fade was the
     last bit of perceived lag when switching between related products. */
  transition: none;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}
/* Lock body scroll while the fullscreen surface is mounted — prevents the
   "screen pulls from the left" jitter caused by horizontal-scrollbar
   repaints when 100vw + scrollbar combine. */
body:has(.modal-product.open .prod-hero) {
  overflow: hidden;
}
/* Suppress the dim/blur backdrop when this fullscreen variant is open so
   the modal IS the page rather than a popup floating over a darkened site. */
body:has(.modal-product.open .prod-hero) .modal-overlay { display: none !important; }
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.83rem;font-weight:600;color:var(--text2)}
.form-group input{padding:11px 14px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;font-family:inherit;transition:border-color var(--transition);outline:none}
.form-group input:focus{border-color:var(--primary)}
.modal-divider{display:flex;align-items:center;gap:12px;margin:16px 0 8px;color:var(--text3);font-size:.78rem}
.modal-divider::before,.modal-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.google-btn-wrap{display:flex;justify-content:center;min-height:44px}
.modal-switch{text-align:center;font-size:.83rem;color:var(--text3);margin-top:12px}
.modal-switch button{color:var(--primary);font-size:.83rem;font-weight:500}
.modal-switch button:hover{text-decoration:underline}
.product-modal-img{width:100%;height:240px;object-fit:cover;object-position:center top;border-radius:12px;margin-bottom:20px}
.product-modal-emoji{width:100%;height:160px;background:var(--surface2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:4rem;margin-bottom:20px}
.product-modal-name{font-family:'Rajdhani',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:6px}
.product-modal-price{font-family:'Rajdhani',sans-serif;font-size:2rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}
.product-modal-note{background:rgba(255,102,196,.08);border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-size:.83rem;color:var(--text2);line-height:1.6;margin-bottom:20px}
.product-modal-actions{display:flex;gap:12px;flex-wrap:wrap}
.checkout-order-id{background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.3);border-radius:8px;padding:10px 16px;font-size:.8rem;color:var(--text2);text-align:center;margin-bottom:8px;font-family:monospace}
.checkout-total{background:rgba(255,102,196,.08);border:1px solid var(--border);border-radius:10px;padding:16px;font-family:'Rajdhani',sans-serif;font-size:1.3rem;font-weight:700;text-align:center;color:var(--text);margin-bottom:20px}
.checkout-note{text-align:center;font-size:.8rem;color:var(--text3);margin-top:14px;line-height:1.5}

/* ── ADMIN / SUPPORT DASHBOARDS ── */
.admin-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.admin-gate-box{background:var(--surface);border:1px solid var(--border-glow);border-radius:var(--radius-lg);padding:40px 32px;width:min(400px,100%);text-align:center}
.admin-gate-box h2{font-family:'Rajdhani',sans-serif;font-size:1.8rem;margin-bottom:8px}
.admin-gate-box p{color:var(--text2);font-size:.9rem;margin-bottom:24px}
.admin-gate-box .form-group{margin-bottom:16px;text-align:left}
/* HARD LOCK — admin panel is invisible by default at the CSS layer.
   The inline style="display:none" alone wasn't enough (anyone could remove
   it via DevTools / JS console). Now JS MUST add `.admin-authed` to <body>
   after server-side session validation before the panel can render. */
.admin-panel{min-height:100vh;display:none!important}
body.admin-authed .admin-panel{display:block!important}
body.admin-authed .admin-gate{display:none!important}
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{width:220px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);padding:24px 16px;display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.admin-brand span{font-family:'Rajdhani',sans-serif;font-size:1.1rem;font-weight:700}
.admin-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.admin-nav-btn{text-align:left;padding:10px 14px;font-size:.88rem;font-weight:500;color:var(--text2);border-radius:8px;transition:var(--transition);width:100%}
.admin-nav-btn:hover{background:rgba(255,255,255,.07);color:var(--text)}
.admin-nav-btn.active{background:rgba(255,102,196,.15);color:var(--primary)}
.admin-content{flex:1;padding:32px;overflow-y:auto;max-height:100vh}
.admin-tab-title{font-family:'Rajdhani',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:24px}
.admin-tab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.admin-tab-header .admin-tab-title{margin-bottom:0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
@media(max-width:768px){.broadcast-grid{grid-template-columns:1fr!important}}
@media(max-width:768px){.ec-grid{grid-template-columns:1fr!important}}
.rshop-table tr:hover{background:rgba(124,58,237,.07)!important;transition:background .15s}
.rshop-table th{position:sticky;top:0;background:var(--bg);z-index:1}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;text-align:center}
.stat-card .s-num{font-family:'Rajdhani',sans-serif;font-size:2rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-card .s-label{font-size:.8rem;color:var(--text3);margin-top:4px}
.admin-table{width:100%;border-collapse:collapse;font-size:.85rem}
.admin-table th{text-align:left;padding:10px 14px;font-size:.78rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--border)}
.admin-table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text2)}
.admin-table tr:hover td{background:rgba(255,255,255,.03)}

/* ── Admin Overview — KPI dashboard ────────────────────────────────────── */
.ovr-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ovr-subtitle{color:var(--text3);font-size:.84rem;margin:6px 0 0}
.ovr-sep{color:rgba(255,255,255,.18);margin:0 6px}
.ovr-header-r{display:flex;align-items:center;gap:10px}
.ovr-live-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#22c55e;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ovr-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:ovrPulse 1.6s ease-in-out infinite}
@keyframes ovrPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
.ovr-refresh-btn{padding:6px 12px;font-size:1rem;line-height:1;border-radius:8px}

/* KPI grid — 4 cols desktop, 2 cols tablet, 1 col mobile */
.ovr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:1100px){.ovr-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ovr-kpis{grid-template-columns:1fr}}

.ovr-kpi{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  position:relative;overflow:hidden;
  transition:transform .2s ease, border-color .2s, box-shadow .25s;
}
.ovr-kpi:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14)}
.ovr-kpi::before{
  content:'';position:absolute;inset:0;
  opacity:.06;pointer-events:none;
  transition:opacity .25s;
}
.ovr-kpi:hover::before{opacity:.12}
.ovr-kpi--revenue::before  { background:linear-gradient(135deg, transparent, #22c55e); }
.ovr-kpi--orders::before   { background:linear-gradient(135deg, transparent, #3b82f6); }
.ovr-kpi--customers::before{ background:linear-gradient(135deg, transparent, #a855f7); }
.ovr-kpi--vouches::before  { background:linear-gradient(135deg, transparent, #1da1f2); }
.ovr-kpi--total::before    { background:linear-gradient(135deg, transparent, #fbbf24); }
.ovr-kpi--pending::before  { background:linear-gradient(135deg, transparent, #facc15); }
.ovr-kpi--oos::before      { background:linear-gradient(135deg, transparent, #ef4444); }
.ovr-kpi--gifts::before    { background:linear-gradient(135deg, transparent, #f59e0b); }

.ovr-kpi-icon{
  font-size:1.7rem;flex-shrink:0;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  position:relative;z-index:1;
}
.ovr-kpi-body{flex:1;min-width:0;position:relative;z-index:1}
.ovr-kpi-label{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:4px}
.ovr-kpi-value{font-family:'Rajdhani','Inter',sans-serif;font-size:1.7rem;font-weight:800;color:var(--text);line-height:1.05;margin-bottom:3px}
.ovr-kpi-delta{font-size:.74rem;font-weight:600;color:var(--text3)}
.ovr-kpi-delta-up   { color:#22c55e }
.ovr-kpi-delta-down { color:#ef4444 }
.ovr-kpi-delta-flat { color:var(--text3) }

/* Activity + Status side-by-side */
.ovr-split{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:24px}
@media(max-width:1000px){.ovr-split{grid-template-columns:1fr}}

.ovr-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px;
}
.ovr-card h3{
  margin:0 0 14px;
  font-size:.94rem;font-weight:700;
  color:var(--text);
  display:flex;align-items:center;gap:8px;
  letter-spacing:.01em;
}
.ovr-card h3 svg{color:var(--text3)}
.ovr-card-h3-meta{margin-left:auto;font-size:.74rem;font-weight:500;color:var(--text3)}

.ovr-empty{color:var(--text3);font-size:.85rem;padding:20px 0;text-align:center}

/* Activity feed */
.ovr-activity-feed{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding-right:4px}
.ovr-activity-feed::-webkit-scrollbar{width:6px}
.ovr-activity-feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

.ovr-act-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 12px;
  border-radius:10px;
  transition:background .15s;
}
.ovr-act-row:hover{background:rgba(255,255,255,.03)}
.ovr-act-icon{
  flex-shrink:0;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.ovr-act-body{flex:1;min-width:0}
.ovr-act-text{
  font-size:.85rem;line-height:1.45;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ovr-act-text code{font-size:.78rem;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:3px}
.ovr-act-sub{
  font-size:.74rem;color:var(--text3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ovr-act-time{color:var(--text3)}

/* System status */
.ovr-status-list{display:flex;flex-direction:column;gap:8px}
.ovr-status-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.ovr-status-row--ok{border-color:rgba(34,197,94,.2);background:rgba(34,197,94,.04)}
.ovr-status-row--bad{border-color:rgba(239,68,68,.2);background:rgba(239,68,68,.04)}
.ovr-status-row--info{border-color:rgba(124,58,237,.2);background:rgba(124,58,237,.04)}
.ovr-status-icon{
  flex-shrink:0;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;
}
.ovr-status-row--ok  .ovr-status-icon{background:rgba(34,197,94,.18);color:#22c55e}
.ovr-status-row--bad .ovr-status-icon{background:rgba(239,68,68,.18);color:#ef4444}
.ovr-status-row--info .ovr-status-icon{background:rgba(124,58,237,.18);color:#a78bfa}
.ovr-status-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ovr-status-body strong{font-size:.86rem;color:var(--text);font-weight:700}
.ovr-status-body span{font-size:.74rem;color:var(--text3)}

/* Recent orders card extra polish */
.ovr-recent-card .admin-table-wrap{margin-top:0;border:none;border-radius:0}
.ovr-recent-card .admin-table th{background:transparent}
.admin-search-bar{margin-bottom:20px}
.admin-search-bar input{width:100%;max-width:400px;padding:10px 14px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;font-family:inherit;outline:none;transition:border-color var(--transition)}
.admin-search-bar input:focus{border-color:var(--primary)}
.admin-textarea{width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;padding:10px;color:var(--text);font-family:inherit;font-size:.9rem;outline:none;resize:vertical;transition:border-color var(--transition)}
.admin-textarea:focus{border-color:var(--primary)}
.ticket-layout{display:grid;grid-template-columns:280px 1fr;gap:20px;min-height:500px}
.ticket-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:600px}
.ticket-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:var(--transition)}
.ticket-item:hover,.ticket-item.active{border-color:var(--border-glow);background:rgba(192,38,211,.06)}
.ticket-item-name{font-size:.88rem;font-weight:600;margin-bottom:4px}
.ticket-item-sub{font-size:.78rem;color:var(--text3)}
.ticket-item-status{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.7rem;font-weight:600;margin-top:6px}
.status-open{background:rgba(16,185,129,.2);color:#10b981}
.status-pending{background:rgba(245,158,11,.2);color:#f59e0b}
.status-closed{background:rgba(100,116,139,.2);color:#64748b}
.ticket-view{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:16px}
.empty-hint{color:var(--text3);font-size:.9rem;text-align:center;margin:auto}

/* ── FORTNITE LEAKS PAGE ───────────────────────────────────────────────
   Grid of newly-datamined cosmetics from fortnite-api.com. Each card
   carries the official game-files icon, the item name, type, and rarity.
   The card border + hover glow uses the rarity color so the grid scans
   as a colorful gallery the same way the in-game locker does. */
.leaks-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.leaks-status{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--text2);min-width:0;flex:1 1 280px}
.leaks-status-dot{width:8px;height:8px;border-radius:50%;background:#facc15;box-shadow:0 0 8px #facc15;flex-shrink:0;animation:fnl-pulse 1.4s ease-in-out infinite}
.leaks-status-dot[data-state="ok"]{background:#4ade80;box-shadow:0 0 8px #4ade80;animation:none}
.leaks-status-dot[data-state="error"]{background:#f87171;box-shadow:0 0 8px #f87171;animation:none}
@keyframes fnl-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.leaks-filter-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;order:3}
.leaks-chip{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text2);font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.leaks-chip:hover{background:rgba(255,255,255,.08);color:var(--text)}
.leaks-chip.active{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(236,72,153,.35)}
.leaks-chip-count{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(0,0,0,.3);font-size:.7rem;font-weight:700;letter-spacing:.02em}
.leaks-chip.active .leaks-chip-count{background:rgba(255,255,255,.22)}
.leaks-toolbar-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.leaks-search{padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-size:.86rem;font-family:inherit;min-width:200px;transition:border-color .15s,background .15s}
.leaks-search:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,.07)}
.leaks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
@media (max-width:560px){.leaks-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
.leak-card{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;font-family:inherit;color:var(--text);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;padding:0}
.leak-card:hover{transform:translateY(-3px);border-color:var(--border-glow)}
.leak-img-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:linear-gradient(135deg,#1a1633 0%,#0d0a1f 100%)}
.leak-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.leak-card:hover .leak-img-wrap img{transform:scale(1.06)}
.leak-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:2rem;font-weight:700}
.leak-added-badge{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.02em}
.leak-meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.leak-name{font-size:.86rem;font-weight:700;color:var(--text);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leak-sub{display:flex;justify-content:space-between;gap:8px;font-size:.7rem;color:var(--text3);min-width:0}
.leak-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leak-rarity{flex-shrink:0;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.65rem}
/* Rarity color treatments — border + name accent + hover glow. Mirrors
   the in-game rarity tiers so the grid scans the same way the locker does. */
.fnl-rar-common{border-color:rgba(166,166,166,.35)}
.fnl-rar-common .leak-rarity{color:#a6a6a6}
.fnl-rar-common:hover{box-shadow:0 6px 24px rgba(166,166,166,.18)}
.fnl-rar-uncommon{border-color:rgba(76,175,80,.45)}
.fnl-rar-uncommon .leak-rarity{color:#5dd664}
.fnl-rar-uncommon:hover{box-shadow:0 6px 24px rgba(76,175,80,.30)}
.fnl-rar-rare{border-color:rgba(33,150,243,.5)}
.fnl-rar-rare .leak-rarity{color:#5bb3ff}
.fnl-rar-rare:hover{box-shadow:0 6px 24px rgba(33,150,243,.35)}
.fnl-rar-epic{border-color:rgba(156,39,176,.55)}
.fnl-rar-epic .leak-rarity{color:#c976d9}
.fnl-rar-epic:hover{box-shadow:0 6px 24px rgba(156,39,176,.4)}
.fnl-rar-legendary{border-color:rgba(255,152,0,.55)}
.fnl-rar-legendary .leak-rarity{color:#ffa726}
.fnl-rar-legendary:hover{box-shadow:0 6px 24px rgba(255,152,0,.45)}
.fnl-rar-mythic{border-color:rgba(255,235,59,.6)}
.fnl-rar-mythic .leak-rarity{color:#ffe600}
.fnl-rar-mythic:hover{box-shadow:0 6px 24px rgba(255,235,59,.45)}
.fnl-rar-exotic{border-color:rgba(0,229,255,.6)}
.fnl-rar-exotic .leak-rarity{color:#00e5ff}
.fnl-rar-exotic:hover{box-shadow:0 6px 24px rgba(0,229,255,.4)}
.leak-card--series{position:relative}
.leak-card--series::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient)}
.leaks-disclaimer{margin-top:24px;text-align:center;color:var(--text3);font-size:.74rem}
.leaks-disclaimer a{color:var(--primary);text-decoration:none}
.leaks-disclaimer a:hover{text-decoration:underline}

/* Detail overlay (click a card → full hi-res image + every metadata field) */
.leak-detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;animation:fnl-fade-in .18s ease}
@keyframes fnl-fade-in{from{opacity:0}to{opacity:1}}
.leak-detail-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;max-height:90vh;background:var(--surface);border:1.5px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.leak-detail-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);cursor:pointer;z-index:2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.leak-detail-close:hover{background:rgba(0,0,0,.75)}
.leak-detail-img-wrap{aspect-ratio:1;background:linear-gradient(135deg,#1a1633 0%,#0d0a1f 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.leak-detail-img-wrap img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.leak-detail-body{padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.leak-detail-type{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.leak-detail-name{margin:0;font-size:1.5rem;font-weight:800;color:var(--text);line-height:1.2}
.leak-detail-desc{margin:4px 0 8px;color:var(--text2);font-size:.9rem;line-height:1.5}
.leak-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);font-size:.84rem;color:var(--text3)}
.leak-detail-row:first-of-type{border-top:none}
.leak-detail-row strong{color:var(--text);font-weight:600}
@media (max-width:520px){
  .leak-detail-overlay{padding:0}
  .leak-detail-card{max-height:100vh;border-radius:0;border:none}
}

/* ── ORDER TRACKING PAGE ───────────────────────────────────────────────
   /order/{id} status page. Three-step pill timeline (Paid → Processing →
   Delivered) with a soft glow on the current step. Below it a card with
   the order summary, items, and delivery details. */
.ot-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.ot-card + .ot-card{margin-top:18px}
.ot-id{font-family:monospace;font-size:.78rem;color:var(--text3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.ot-title{font-size:1.4rem;font-weight:700;margin:0 0 4px;color:var(--text)}
.ot-sub{color:var(--text2);font-size:.88rem;margin:0 0 20px}
.ot-steps{display:flex;align-items:center;gap:8px;margin:18px 0 6px;flex-wrap:wrap}
.ot-step{flex:1 1 0;min-width:120px;padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);text-align:center;position:relative;transition:all .25s}
.ot-step-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--text2);font-weight:700;font-size:.85rem;margin-bottom:8px}
.ot-step-label{font-weight:600;font-size:.85rem;color:var(--text2);display:block}
.ot-step-time{font-size:.72rem;color:var(--text3);display:block;margin-top:3px;font-variant-numeric:tabular-nums}
.ot-step.done{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.06)}
.ot-step.done .ot-step-num{background:#4ade80;color:#052e16}
.ot-step.done .ot-step-label{color:#4ade80}
.ot-step.active{border-color:var(--primary);background:rgba(255,102,196,.08);box-shadow:0 0 0 3px rgba(255,102,196,.12)}
.ot-step.active .ot-step-num{background:var(--primary);color:#fff;animation:ot-pulse 1.6s ease-in-out infinite}
.ot-step.active .ot-step-label{color:var(--text)}
.ot-step.failed{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.08)}
.ot-step.failed .ot-step-num{background:#ef4444;color:#fff}
.ot-step.failed .ot-step-label{color:#fca5a5}
@keyframes ot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,102,196,.55)}50%{box-shadow:0 0 0 6px rgba(255,102,196,0)}}
.ot-row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);font-size:.88rem;color:var(--text2);gap:16px}
.ot-row:first-child{border-top:none}
.ot-row strong{color:var(--text);font-weight:600}
.ot-items{margin-top:8px}
.ot-item-row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);font-size:.86rem}
.ot-item-row:first-child{border-top:none}
.ot-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ot-form-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-size:.95rem;font-family:inherit;box-sizing:border-box;margin-bottom:12px}
.ot-form-input:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,.06)}
.ot-banner{padding:14px 16px;border-radius:10px;margin-bottom:18px;font-size:.88rem}
.ot-banner.info{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);color:#93c5fd}
.ot-banner.success{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);color:#86efac}
.ot-banner.warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);color:#fcd34d}
.ot-banner.error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#fca5a5}
.ot-refresh-note{font-size:.72rem;color:var(--text3);margin-top:14px;text-align:center;font-style:italic}
@media (max-width:640px){
  .ot-card{padding:18px;border-radius:12px}
  .ot-step{min-width:0;padding:10px 8px}
  .ot-step-label{font-size:.72rem}
  .ot-row{flex-direction:column;gap:2px}
}
.chat-messages-view{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto;padding:4px}
.chat-msg{max-width:80%;padding:10px 14px;border-radius:10px;font-size:.88rem;line-height:1.5}
.chat-msg.agent{background:rgba(255,102,196,.15);border:1px solid var(--border);align-self:flex-start}
.chat-msg.customer{background:var(--surface2);border:1px solid var(--border);align-self:flex-end}
.chat-msg-meta{font-size:.72rem;color:var(--text3);margin-top:4px}
.reply-form{display:flex;gap:10px;margin-top:8px}
.reply-form input{flex:1;padding:10px 14px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:.9rem;outline:none}
.reply-form input:focus{border-color:var(--primary)}
.settings-grid{display:flex;flex-direction:column;gap:20px}
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.settings-card h3{font-size:1rem;font-weight:700;margin-bottom:8px}
.settings-card p{font-size:.85rem;color:var(--text2);margin-bottom:16px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ── LIVE CHAT WIDGET ── */
@keyframes chatBubbleVibrate{0%,100%{transform:scale(1) rotate(0)}15%{transform:scale(1.12) rotate(-6deg)}30%{transform:scale(1.12) rotate(6deg)}45%{transform:scale(1.08) rotate(-4deg)}60%{transform:scale(1.08) rotate(4deg)}75%{transform:scale(1.04) rotate(-2deg)}}
/* ── Social FAB buttons (Discord + X above live chat) ── */
.chat-social-fabs{position:fixed;bottom:86px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:700}
.chat-social-fab{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow)}
.chat-social-fab--discord{background:#5865f2}
.chat-social-fab--discord:hover{transform:scale(1.12);box-shadow:0 0 18px rgba(88,101,242,.7)}
.chat-social-fab--x{background:#000}
.chat-social-fab--x:hover{transform:scale(1.12);box-shadow:0 0 18px rgba(255,255,255,.3)}
/* ── Standalone Live Chat Button (fixed bottom-right) ── */
.chat-trigger-btn{position:fixed;bottom:24px;right:24px;width:50px;height:50px;border-radius:50%;background:var(--gradient);box-shadow:var(--glow),var(--shadow);display:flex;align-items:center;justify-content:center;color:#fff;border:none;cursor:pointer;z-index:700;transition:transform .2s,box-shadow .2s;flex-shrink:0}
.chat-trigger-btn:hover{transform:scale(1.1);box-shadow:0 0 22px rgba(255,102,196,.7),var(--shadow)}
.chat-trigger-btn.has-reply{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 0 18px rgba(22,163,74,.6),var(--shadow);animation:chatBubbleVibrate .6s ease-in-out}
.chat-unread{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:var(--red);border-radius:50%;font-size:.6rem;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.live-chat-widget{position:fixed;bottom:90px;right:24px;z-index:700;width:340px;background:var(--surface);border:1px solid var(--border-glow);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--gradient);color:#fff}
.chat-messages{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:320px;overflow-y:auto;min-height:120px}
.chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.chat-input-row input{flex:1;padding:8px 12px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:.85rem;outline:none}
.chat-input-row input:focus{border-color:var(--primary)}
.chat-pre-form{padding:28px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.chat-pre-icon{font-size:2.4rem;line-height:1}
.chat-pre-title{font-weight:700;font-size:1rem;color:var(--text);margin:0}
.chat-pre-sub{font-size:.8rem;color:var(--text3);margin:0 0 4px}
.chat-pre-fields{display:flex;flex-direction:column;gap:8px;width:100%}
.chat-pre-fields input{width:100%;padding:10px 12px;background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:.85rem;outline:none;box-sizing:border-box}
.chat-pre-fields input:focus{border-color:var(--primary)}

/* ── SHIEDA ANALYTICS ── */
.shieda-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.shieda-select{background:var(--bg2);border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:inherit;font-size:.88rem;outline:none;cursor:pointer}
.shieda-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.shieda-kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.shieda-kpi-val{font-size:1.6rem;font-weight:800;color:var(--primary);line-height:1}
.shieda-kpi-label{font-size:.75rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.shieda-kpi-sub{font-size:.78rem;color:var(--text2);margin-top:4px}
.shieda-chart{display:flex;align-items:flex-end;gap:4px;height:140px;padding:0 4px}
.shieda-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.shieda-bar{width:100%;border-radius:4px 4px 0 0;background:var(--gradient);min-height:2px;transition:height .4s;position:relative}
.shieda-bar:hover::after{content:attr(data-tip);position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:.72rem;white-space:nowrap;pointer-events:none;z-index:10}
.shieda-bar-label{font-size:.62rem;color:var(--text3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.shieda-table{width:100%;border-collapse:collapse;font-size:.85rem}
.shieda-table th{text-align:left;padding:8px 12px;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);border-bottom:1px solid var(--border)}
.shieda-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.shieda-table tr:last-child td{border-bottom:none}
.shieda-table tr:hover td{background:rgba(192,38,211,.06)}
.shieda-rank{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gradient);color:#fff;font-size:.7rem;font-weight:700}

/* ── FOOTER ── */
.footer{background:var(--bg2);border-top:1px solid var(--border)}
.footer-bottom{border-top:1px solid var(--border);padding:20px 24px;text-align:center;font-size:.78rem;color:var(--text3)}

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:960px){
  .nav-links{display:none}
  .hamburger{display:flex}
  #navLoginBtn,#navRegisterBtn{display:none!important}
  #navAccountBtn{display:none!important}
  .support-layout{grid-template-columns:1fr}
  .discord-cta{position:static}
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
  .ticket-layout{grid-template-columns:1fr}
  .admin-layout{flex-direction:column}
  .admin-sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
  .admin-content{max-height:none}
}
@media(max-width:640px){
  .section{padding:48px 16px}
  .page-banner{padding:40px 16px 32px}
  .hero-logo{height:120px;max-width:280px}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;width:100%;padding:10px 12px;gap:4px}
  .hero-divider{display:none}
  .hero-stat{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04)}
  .stat-num{font-size:1.3rem}
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns .btn-primary,.hero-btns .btn-ghost{width:100%}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .modal{padding:28px 20px}
  .live-chat-widget{width:calc(100vw - 48px)}
  .cat-tabs-wrap{padding:0 16px}
  .admin-nav{flex-direction:row;flex-wrap:wrap}
  .admin-nav-btn{font-size:.78rem;padding:7px 10px}
}

/* ══════════════ EXTENDED STYLES ══════════════ */

/* Wishlist button on product cards */
.wishlist-btn{position:absolute;top:10px;left:10px;z-index:3;background:rgba(0,0,0,.5);border:none;color:var(--text3);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;transition:var(--transition)}
.wishlist-btn:hover,.wishlist-btn.active{color:#ef4444;background:rgba(239,68,68,.2)}

/* Status badges */
.status-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.status-completed{background:rgba(16,185,129,.18);color:#10b981}
.status-processing{background:rgba(6,182,212,.18);color:#06b6d4}
.status-failed{background:rgba(239,68,68,.18);color:#ef4444}
.status-refunded{background:rgba(245,158,11,.18);color:#f59e0b}

/* Admin table wrapper */
.admin-table-wrap{overflow-x:auto;border-radius:var(--radius);margin-bottom:8px}

/* Ticket list items */
.ticket-id{font-family:monospace;font-size:.82rem;color:var(--primary);font-weight:700;margin-bottom:3px}
.ticket-sub{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.ticket-meta{font-size:.74rem;color:var(--text3);margin-bottom:6px}
.ticket-open{border-color:rgba(16,185,129,.4)!important;background:rgba(16,185,129,.04)!important}

/* Ticket detail view */
.ticket-detail{display:flex;flex-direction:column;gap:16px;height:100%}
.ticket-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ticket-detail-header h3{font-size:1.05rem;font-weight:700;flex:1}
.ticket-info-row{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--text3)}
.ticket-message{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-size:.875rem;color:var(--text2);line-height:1.7;white-space:pre-wrap;max-height:300px;overflow-y:auto}
.ticket-reply{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 16px}
.reply-staff{background:rgba(255,102,196,.08);border-color:rgba(255,102,196,.25)}
.reply-customer{background:var(--bg2)}
.reply-from{font-size:.73rem;color:var(--text3);margin-bottom:6px;font-weight:600}
.ticket-reply-form{margin-top:4px}

/* Account page */
.account-info-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:.9rem;gap:14px;min-width:0}
.account-info-row:last-of-type{border-bottom:none}
.account-info-row > span{color:var(--text3);flex-shrink:0}
.account-info-row > strong{text-align:right;word-break:break-word;overflow-wrap:anywhere;min-width:0}

/* Order history */
.order-history-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;font-size:.83rem}
.order-history-item code{font-size:.75rem;color:var(--primary);font-family:monospace;font-weight:700;flex-shrink:0}
.order-items-label{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.order-total-label{font-weight:700;color:var(--text);flex-shrink:0}
.order-date{color:var(--text3);font-size:.75rem;margin-left:auto}

/* Wishlist items */
.wishlist-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;font-size:.85rem}
.wishlist-item span:first-child{flex:1;font-weight:500}

/* V-Bucks modal */
.vb-notice{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:10px;padding:14px 16px;font-size:.83rem;color:#fbbf24;line-height:1.7;margin-bottom:18px}
.vb-order-meta{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-bottom:4px}
.vb-order-row{font-size:.87rem;color:var(--text2);padding:4px 0}

/* Crypto payment modal */
.crypto-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 16px}
.crypto-option{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:14px 8px;text-align:center;cursor:pointer;transition:var(--transition)}
.crypto-option:hover,.crypto-option.selected{border-color:var(--primary);background:rgba(255,102,196,.12)}
.crypto-icon{font-size:1.6rem;margin-bottom:4px;font-weight:700;color:var(--text2)}
.crypto-name{font-size:.75rem;font-weight:600;color:var(--text3)}
.crypto-option.selected .crypto-name{color:var(--primary)}
.crypto-address-box{background:var(--bg2);border:1px solid var(--border-glow);border-radius:10px;padding:16px;text-align:center;margin:4px 0 12px}
.crypto-address{font-family:monospace;font-size:.78rem;word-break:break-all;color:var(--primary);margin:8px 0;line-height:1.6}
.crypto-status{text-align:center;padding:12px;font-size:.88rem;color:var(--text2)}
.crypto-status-pending{color:var(--orange)}
.crypto-status-paid{color:var(--green)}
.crypto-status-failed{color:var(--red)}

/* ── HERO TITLE ── */
.hero-title{font-family:'Rajdhani',sans-serif;font-size:clamp(2.2rem,6vw,4rem);font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:.02em;line-height:1.1}

/* ── HOME SECTIONS ── */
.home-section{padding:96px 24px;background:var(--bg)}
.home-section-alt{background:var(--bg2)}
.home-section-inner{max-width:1140px;margin:0 auto}
.section-label{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:rgba(255,102,196,.1);border:1px solid rgba(255,102,196,.25);border-radius:999px;padding:4px 14px;margin-bottom:18px}
.section-title{font-family:'Rajdhani',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:var(--text);margin-bottom:48px;line-height:1.15}

/* ── STEPS (HOW IT WORKS) ── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;position:relative;transition:border-color var(--transition),transform var(--transition)}
.step-card:hover{border-color:var(--border-glow);transform:translateY(-3px)}
.step-num{font-family:'Rajdhani',sans-serif;font-size:3rem;font-weight:700;line-height:1;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;opacity:.7}
.step-card h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:10px}
.step-card p{font-size:.875rem;color:var(--text2);line-height:1.7}

/* ── FEATURES (WHY US) ── */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;transition:border-color var(--transition),transform var(--transition)}
.feature-card:hover{border-color:var(--border-glow);transform:translateY(-3px)}
.feature-icon{font-size:2rem;margin-bottom:14px}
.feature-card h3{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:8px}
.feature-card p{font-size:.84rem;color:var(--text2);line-height:1.7}

/* ── FOOTER ── */
.footer-inner{max-width:1140px;margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:260px 1fr;gap:60px;border-bottom:1px solid var(--border)}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-brand p{font-size:.85rem;color:var(--text3);line-height:1.7;max-width:220px}
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:4px}
.footer-col button,.footer-col a{font-size:.88rem;color:var(--text2);text-align:left;background:none;border:none;cursor:pointer;transition:color var(--transition);font-family:inherit;text-decoration:none;padding:0}
.footer-col button:hover,.footer-col a:hover{color:var(--primary)}
.footer-bottom{max-width:1140px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:.78rem;color:var(--text3)}
.footer-staff{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--text3)}
.footer-staff span{color:var(--text3)}
.staff-link{font-size:.72rem;color:var(--text3);background:none;border:1px solid rgba(255,255,255,.12);border-radius:4px;cursor:pointer;font-family:inherit;transition:color var(--transition),border-color var(--transition);padding:2px 8px}
.staff-link:hover{color:var(--primary);border-color:var(--primary)}

/* ── RESPONSIVE: HOME SECTIONS ── */
@media(max-width:900px){
  .steps-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .footer-links{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .home-section{padding:64px 16px}
  .features-grid{grid-template-columns:1fr}
  .footer-links{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}



/* ── INTERACTIVITY: CARD HOVER LIFT (consolidated above) ── */

/* Step & feature card animations */
.step-card, .feature-card {
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease;
}
.step-card:hover {
  transform:translateY(-5px);
  box-shadow:0 12px 32px rgba(255,102,196,.2);
  border-color:var(--primary);
}
.feature-card:hover {
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 12px 32px rgba(255,102,196,.2);
}
.feature-icon {
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  display:inline-block;
}
.feature-card:hover .feature-icon {
  transform:scale(1.25) rotate(-5deg);
}

/* Button ripple */
.btn-primary, .btn-outline, .btn-ghost {
  position:relative;
  overflow:hidden;
}
.btn-primary::after, .btn-outline::after {
  content:'';
  position:absolute;
  border-radius:50%;
  width:0;height:0;
  background:rgba(255,255,255,.25);
  transform:translate(-50%,-50%);
  transition:width .5s ease, height .5s ease, opacity .5s ease;
  opacity:0;
  top:50%;left:50%;
  pointer-events:none;
}
.btn-primary:active::after, .btn-outline:active::after {
  width:200px;height:200px;
  opacity:0;
  transition:0s;
}

/* Nav link underline slide */
.nav-link {
  position:relative;
}
.nav-link::after {
  content:'';
  position:absolute;
  bottom:-2px;left:50%;right:50%;
  height:2px;
  background:var(--primary);
  transition:left .2s ease, right .2s ease;
  border-radius:2px;
}
.nav-link:hover::after, .nav-link.active::after {
  left:0;right:0;
}

/* Stat counter pulse */
.stat-num {
  display:inline-block;
  transition:transform .15s ease;
}
.hero-stat:hover .stat-num {
  transform:scale(1.1);
  color:var(--primary);
}

/* Admin table row hover */
.admin-table tbody tr {
  transition:background .15s ease;
}
.admin-table tbody tr:hover {
  background:rgba(192,38,211,.07);
}

/* Page transitions */
.page.active {
  animation:pageFadeIn .25s ease;
}
@keyframes pageFadeIn {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0) }
}

/* Ticket / order item hover */
.ticket-open, .order-history-item {
  transition:border-color .15s ease, background .15s ease;
}
.ticket-open:hover, .order-history-item:hover {
  border-color:var(--primary);
  background:rgba(192,38,211,.06);
}

/* Step number glow on hover */
.step-num {
  transition:color .2s, text-shadow .2s;
}
.step-card:hover .step-num {
  color:var(--primary);
  text-shadow:0 0 20px rgba(255,102,196,.5);
}

/* Modal slide-in — only animate when actually opening */
.modal.open {
  animation:modalIn .22s cubic-bezier(.34,1.4,.64,1);
}

/* ── AUTH SCREEN (full-page login / register / forgot) ── */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  /* cover = artwork stretches to fill the whole viewport (no letterbox).
     background-position is biased toward the left so the character art stays
     visible on ultra-wide screens — the right side of the image (empty pink
     area where the form sits) is the safe-to-crop zone. */
  background: #0a0212 url('login-bg.webp') 30% center / cover no-repeat;
  padding: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: authScreenIn .25s ease;
}
.auth-screen.open { display: flex; }
/* Card sits in the empty pink area to the right of the character art —
   pulled noticeably away from the viewport edge so it reads as anchored
   to the artwork, not glued to the wall. The auto left margin takes the
   slack on the left side; margin-right sets the gap from the viewport's
   right edge. */
.auth-screen .auth-card {
  margin-left: auto;
  margin-right: 22vw;
}
/* Mobile: not enough horizontal room to offset the card and still keep it
   readable. Drop back to true center with a small side padding. */
@media (max-width: 720px) {
  .auth-screen { padding: 0 16px; }
  .auth-screen .auth-card { margin-left: auto; margin-right: auto; }
}

@keyframes authScreenIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.auth-close-btn {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .2s;
  z-index: 10;
}
.auth-close-btn:hover { background: rgba(0,0,0,.6); }

/* Card sits centered over the background */
.auth-card {
  flex: none;
  width: min(480px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  background: rgba(8, 4, 16, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(244, 114, 182, 0.35);
  border-radius: 20px;
  box-shadow: 0 8px 60px rgba(236, 72, 153, 0.25);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 48px 36px 36px;
}

.auth-panel { width: 100%; max-width: 100%; }

.auth-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #f9a8d4, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 6px;
  letter-spacing: 1px;
}
.auth-sub {
  color: rgba(255,255,255,.6);
  font-size: 1rem;
  margin: 0 0 26px;
  line-height: 1.5;
}
.auth-btn {
  background: linear-gradient(135deg, #ec4899, #db2777) !important;
  box-shadow: 0 4px 20px rgba(236,72,153,.4) !important;
  font-size: 1.05rem !important;
  padding: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.auth-btn:hover {
  background: linear-gradient(135deg, #f472b6, #ec4899) !important;
}
.auth-text-btn {
  font-size: .9rem;
  color: rgba(255,255,255,.45);
  transition: color .15s;
}
.auth-text-btn:hover { color: #f472b6; }

/* Embedded input style */
.auth-card .form-group label {
  font-size: 1rem !important;
  font-weight: 600;
  color: rgba(255,255,255,.8) !important;
  letter-spacing: .3px;
}
.auth-card .form-group input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.07) !important;
  border: 1.5px solid rgba(244,114,182,.3) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  padding: 14px 16px !important;
  transition: border-color .2s, background .2s !important;
}
.auth-card .form-group input::placeholder { color: rgba(255,255,255,.3) !important; }
.auth-card .form-group input:focus {
  border-color: #ec4899 !important;
  background: rgba(255,255,255,.1) !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,.15) !important;
  outline: none !important;
}
.auth-card .modal-form { gap: 20px; width: 100%; }
.auth-card .modal-switch { font-size: .95rem; }
.auth-card .modal-switch button { color: #f472b6; font-size: .95rem; }
.auth-card .modal-divider { color: rgba(255,255,255,.3); font-size: .85rem; }
.auth-card .modal-divider::before,
.auth-card .modal-divider::after { background: rgba(244,114,182,.2); }

/* ── Auth brand mark above the title ────────────────────────────────────
   Replaces the old footer-level logo (which felt afterthought-ish) with a
   compact mark above the title so the form gets a clear identity at first
   glance. */
.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.auth-brand-mark {
  height: 130px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: drop-shadow(0 6px 22px rgba(236, 72, 153, .4));
}
@media (max-width: 480px) {
  .auth-brand-mark { height: 100px; }
}

/* Tightens the title now that the mark gives the visual anchor. */
.auth-card .auth-title { font-size: 2.2rem; margin-bottom: 4px; }
.auth-card .auth-sub   { font-size: .92rem; margin-bottom: 22px; }

/* Inline row used for "remember me / forgot password" alignment under the
   form fields. Drop the bottom margin on the form group above so the row
   sits tight against the password field. */
.auth-row-between {
  display: flex; justify-content: space-between; align-items: center;
  margin: -8px 0 4px;
}
.auth-row-between .auth-text-btn { padding: 0; font-weight: 500; }

/* ── Unified social sign-in buttons (Google + Discord) ──────────────────
   Equal size, same border-radius, same icon padding. Subtle hover lift +
   focus ring so they feel like real buttons, not flat colour blocks. */
.social-signin-btn {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  position: relative;
}
.social-signin-btn:hover { transform: translateY(-1px); }
.social-signin-btn:active { transform: translateY(0); }
.social-signin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .35);
}

/* Google: white surface per Google brand guidelines, near-black text. The
   subtle border + shadow gives it presence on the dark auth-card without
   clashing with the gradient theme. */
.social-signin-btn--google {
  background: #ffffff;
  color: #1f1f1f;
  border-color: rgba(0, 0, 0, .12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.social-signin-btn--google:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* Discord: brand blurple. Same dimensions as Google so the two read as
   visually equal weight — neither dominates. */
.social-signin-btn--discord {
  background: #5865f2;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(88, 101, 242, .35);
}
.social-signin-btn--discord:hover {
  background: #4f5bda;
  box-shadow: 0 4px 12px rgba(88, 101, 242, .5);
}

/* ── Trust line (small lock + privacy reassurance) ──────────────────────
   Tucked between the social buttons and the "Don't have an account?" row.
   Subtle but always visible — reinforces that this is a real shop, not a
   credential-harvesting page. */
.auth-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 6px;
  color: rgba(255, 255, 255, .42);
  font-size: .76rem;
  letter-spacing: .2px;
  line-height: 1.4;
  text-align: center;
}
.auth-trust svg { flex-shrink: 0; opacity: .8; }

@media (max-width: 700px) {
  .auth-screen { padding: 5% 5% 5% 5%; }
}
@keyframes modalIn {
  /* Must include translate(-50%, -50%) — the .modal base rule uses
     top/left:50% + translate(-50%, -50%) to center. If the keyframe omits
     that translate, the animation overrides it and the modal renders with
     its top-left corner at viewport center (= visually in the bottom-right
     quadrant) until the animation ends and the static rule re-applies
     translate(-50%, -50%), which causes a visible snap to center. */
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94) }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1)   }
}

/* Scrollbar styling */
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:rgba(255,102,196,.4); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--primary) }

/* ── GIFT CARD PAYMENT ── */
.gc-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:14px 16px;font-size:.82rem;color:#fbbf24;margin-bottom:20px;line-height:1.5}
.gc-order-summary{display:flex;justify-content:space-between;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 18px;margin-bottom:16px;font-size:.9rem;gap:16px;flex-wrap:wrap}
.gc-order-meta{margin-bottom:4px}
.gc-consent{margin-top:8px}

/* ── Gift card TOS panel ──
   Two-part block: accepted denominations row (cleanly chipped) + the
   unused-balance warning that's the whole reason for showing this. */
.gc-tos{
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius:10px;
  padding:14px 16px 12px;
  margin-bottom:18px;
  font-size:.84rem;
  color:var(--text2);
  line-height:1.55;
}
.gc-tos-title{
  font-weight:700;
  font-size:.92rem;
  color:var(--text);
  margin-bottom:6px;
  letter-spacing:.01em;
}
.gc-tos-body{margin:0 0 8px;color:var(--text3);font-size:.82rem}
.gc-tos-denoms{
  display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px;
}
.gc-tos-denoms span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:54px;padding:6px 12px;
  background:var(--bg);
  border:1px solid rgba(192,38,211,.35);
  border-radius:8px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.94rem;
  color:var(--primary);letter-spacing:.02em;
}
.gc-tos-warn{
  margin:0;
  padding:10px 12px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.25);
  border-radius:8px;
  color:#fca5a5;
  font-size:.8rem;
  line-height:1.5;
}
.gc-tos-warn strong{color:#fff}
.gc-verify-notice{font-size:.8rem;color:#f59e0b;margin-top:10px;padding:8px 12px;background:rgba(245,158,11,.08);border-radius:8px;border-left:3px solid #f59e0b}

/* ── ORDER HISTORY — CODE REVEAL ── */
.order-history-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:12px}
.order-history-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.order-id-code{font-family:monospace;font-size:.85rem;color:var(--primary);background:var(--surface2);padding:3px 8px;border-radius:6px}
.order-history-mid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--text2);margin-bottom:10px}
.order-total-label{font-weight:600;color:var(--text)}
.order-code-section{border-top:1px solid var(--border);padding-top:12px;margin-top:4px}
.order-code-hidden{display:flex;align-items:center;gap:8px}
.order-code-revealed{display:flex;flex-direction:column;gap:8px}
.code-label{font-size:.78rem;color:var(--text3)}
.delivered-code{font-family:monospace;font-size:1.1rem;letter-spacing:.08em;background:rgba(255,102,196,.12);border:1px solid rgba(255,102,196,.35);padding:8px 16px;border-radius:8px;color:var(--primary);word-break:break-all}
.warranty-void-notice{font-size:.75rem;color:#f87171;padding:6px 10px;background:rgba(239,68,68,.08);border-radius:6px;border-left:3px solid #dc2626;margin:0}

/* ── STATUS BADGE: PENDING VERIFICATION ── */
.status-pending-verification{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}

/* ══════════════════════════════════════
   SHOP SECTION NAVIGATOR
══════════════════════════════════════ */
.shop-nav-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.shop-arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .15s;
}
.shop-arrow:hover {
  background: rgba(255,102,196,.15);
  border-color: var(--primary);
  transform: scale(1.08);
}
.shop-sec-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.shop-sec-pill {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--surface);
  color: var(--text2);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  white-space: nowrap;
}
.shop-sec-pill:hover {
  border-color: var(--pill-color, var(--primary));
  color: var(--pill-color, var(--primary));
}
.shop-sec-pill.active {
  background: var(--pill-color, var(--primary));
  border-color: var(--pill-color, var(--primary));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 20px color-mix(in srgb, var(--pill-color, var(--primary)) 40%, transparent);
}

/* ── ACTIVE SECTION HEADER BANNER ── */
.shop-section-header {
  margin: 20px 24px 0;
  max-width: calc(1280px - 48px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  position: relative;
  min-height: 140px;
  transition: background .4s ease, border-color .4s ease;
}
.shop-section-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(0px);
  z-index: 0;
}
.ssh-img-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100px; height: 100px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.ssh-img {
  width: 100%; height: 100%;
  /* `contain` (not `cover`) so wide landscape category banners — Fortnite
     Crew.png is 1366x768 with a character on the left and "CREW" text on
     the right — fit inside the 100x100 header box without cropping out
     the meaningful content. With `cover` only the vertical center strip
     showed, which was the empty gap between character and text. */
  object-fit: contain;
  padding: 4px;
}
.ssh-emoji {
  font-size: 3rem;
}
.ssh-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ssh-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}
.ssh-sub {
  font-size: .92rem;
  color: rgba(255,255,255,.65);
}
.ssh-count {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  margin-top: 4px;
}

/* ── LOGIN-GATE WALL ─────────────────────────────────────────────────
   Shown in #shopGrid in place of products when an unauthenticated user
   lands on /shop. Big lock icon, value prop, login + register CTAs,
   and a 4-perk bullet row to convince the visitor signing up is worth
   it. Renders on a single column so it never feels squeezed. */
.shop-login-wall {
  max-width: 720px;
  margin: 60px auto;
  padding: 48px 36px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(255, 102, 196, 0.06) 100%);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 30px 80px -30px rgba(124, 58, 237, 0.45);
}
.shop-login-wall-icon {
  font-size: 4.4rem;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 16px rgba(124, 58, 237, 0.45));
}
.shop-login-wall-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #c4b5fd, #f0abfc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shop-login-wall-sub {
  margin: 0 auto 28px;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.96rem;
  line-height: 1.55;
}
.shop-login-wall-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.shop-login-wall-cta .btn-primary,
.shop-login-wall-cta .btn-outline {
  font-size: 1rem;
  padding: 12px 26px;
}
.shop-login-wall-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 24px;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
}
.shop-login-wall-perk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.shop-login-wall-perk > span {
  font-size: 1.4rem;
  line-height: 1;
  color: #c4b5fd;
  flex-shrink: 0;
}
.shop-login-wall-perk strong {
  color: #f1f5f9;
  font-size: 0.9rem;
}
.shop-login-wall-perk div {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

/* ── RESPONSIVE ── */
@media(max-width: 640px) {
  .shop-section-header { padding: 24px 20px; gap: 20px; }
  .ssh-img-wrap { width: 70px; height: 70px; }
  .shop-nav-bar { padding: 16px 16px 0; gap: 8px; }
  .shop-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
  .shop-sec-pill { padding: 6px 12px; font-size: .78rem; }
  .shop-login-wall { padding: 36px 22px; margin: 36px auto; }
  .shop-login-wall-cta { flex-direction: column; }
  .shop-login-wall-cta .btn-primary,
  .shop-login-wall-cta .btn-outline { width: 100%; }
}

/* ══════════════════════════════════════
   PRODUCT RARITY SYSTEM
══════════════════════════════════════ */

/* Rarity glow on card */
.product-card[class*="rarity-"] {
  border-color: color-mix(in srgb, var(--rc, var(--primary)) 60%, transparent);
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 18px color-mix(in srgb, var(--rc, var(--primary)) 25%, transparent);
}
.product-card[class*="rarity-"]:hover {
  border-color: var(--rc, var(--primary));
  box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 36px color-mix(in srgb, var(--rc, var(--primary)) 45%, transparent);
  transform: translateY(-6px) scale(1.02);
}

/* Rarity strip row inside product-info */
.rarity-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px;
}
.rarity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rc, var(--primary));
  box-shadow: 0 0 6px var(--rc, var(--primary));
  flex-shrink: 0;
}
.rarity-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc, var(--primary));
}

/* Per-rarity accent colors (fallback if CSS color-mix unsupported) */
.rarity-common    { --rc: #3fc45f; }
.rarity-rare      { --rc: #4f9cf7; }
.rarity-epic      { --rc: #b94fff; }
.rarity-legendary { --rc: #f5a623; }

/* Shimmer on legendary */
@keyframes legendaryShimmer {
  0%   { box-shadow: 0 4px 24px rgba(0,0,0,.55), 0 0 18px rgba(245,166,35,.22); }
  50%  { box-shadow: 0 4px 24px rgba(0,0,0,.55), 0 0 32px rgba(245,166,35,.45); }
  100% { box-shadow: 0 4px 24px rgba(0,0,0,.55), 0 0 18px rgba(245,166,35,.22); }
}
.rarity-legendary {
  animation: legendaryShimmer 2.8s ease-in-out infinite;
}
.rarity-legendary:hover {
  animation: none;
  box-shadow: 0 8px 36px rgba(0,0,0,.65), 0 0 48px rgba(245,166,35,.55) !important;
}

/* ══════════════════════════════════════
   LIVE CHAT — Customer widget
══════════════════════════════════════ */
.chat-msg { display:flex; flex-direction:column; gap:2px; max-width:82%; padding:10px 14px; border-radius:14px; font-size:.88rem; line-height:1.5; word-break:break-word; }
.chat-msg.customer { align-self:flex-end; background:var(--gradient); color:#fff; border-bottom-right-radius:4px; }
.chat-msg.agent    { align-self:flex-start; background:var(--surface2); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; }
.chat-msg-time     { font-size:.68rem; opacity:.55; align-self:flex-end; margin-top:2px; }
#chatMessages      { display:flex; flex-direction:column; gap:10px; }

/* ══════════════════════════════════════
   LIVE CHAT — Support dashboard view
══════════════════════════════════════ */
.support-msg-box {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--border);
  min-height: 320px;
  max-height: 540px;
  scroll-behavior: smooth;
}
.support-reply-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding-top: 12px;
  flex-shrink: 0;
}
.support-reply-bar input[type="text"] {
  min-height: 80px;
  resize: vertical;
  padding: 10px 14px;
  align-self: stretch;
}
.support-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.5;
  word-break: break-word;
}
.support-chat-msg.sc-customer {
  align-self: flex-start;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.support-chat-msg.sc-agent {
  align-self: flex-end;
  background: var(--gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sc-from {
  font-size: .72rem;
  font-weight: 600;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sc-text { font-size: .9rem; }
.sc-time { font-size: .68rem; opacity: .5; align-self: flex-end; margin-top: 2px; }

/* Active chat highlight in list */
.ticket-active {
  background: rgba(255,102,196,.12) !important;
  border-color: rgba(255,102,196,.5) !important;
}
#supportChatView { min-height: 340px; }

/* ══════════════════════════════════════
   NOWPayments — Crypto payment modal
══════════════════════════════════════ */
.crypto-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
  justify-content: center;
}
.crypto-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  min-width: 88px;
}
.crypto-option:hover  { border-color:var(--primary); background:rgba(255,102,196,.08); }
.crypto-option.selected { border-color:var(--primary); background:rgba(255,102,196,.2); box-shadow:0 0 18px rgba(255,102,196,.3); }
.crypto-icon { font-size:1.7rem; line-height:1; }
.crypto-name { font-size:.75rem; font-weight:600; color:var(--text2); text-align:center; }
.crypto-option.selected .crypto-name { color:var(--text); }

.crypto-status          { font-size:.88rem; color:var(--text2); padding:10px 0; text-align:center; }
.crypto-status-pending  { color:var(--orange); }
.crypto-status-paid     { color:var(--green); font-weight:600; }
.crypto-status-failed   { color:var(--red); }

.crypto-address-box {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}
.crypto-address {
  font-family: monospace;
  font-size: .8rem;
  color: var(--text2);
  word-break: break-all;
  background: var(--surface);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 6px;
  line-height: 1.6;
  user-select: all;
}
/* Decorative coin badges on fiat checkout modal */
.crypto-coin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2);
  font-family: monospace;
}

/* ── CARD PAYMENT BUTTON ── */
.btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  background: linear-gradient(135deg, #1a56db 0%, #0e9f6e 100%);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  border: none;
  font-family: inherit;
  box-shadow: 0 4px 18px rgba(26,86,219,.35);
}
.btn-card:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(26,86,219,.5);
}

/* Cart divider between Discord and direct pay */
.cart-pay-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px;
  color: var(--text3);
  font-size: .78rem;
}
.cart-pay-divider::before,
.cart-pay-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Unified payment-method button group ───────────────
   Same height + spacing for every payment option (card / crypto / gift card
   / Ribbet balance). The Stripe button gets a richer treatment with a
   hover lift + brand wallet glyphs underneath. */
.cart-pay-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 10px;
  margin: 0;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.pay-method-btn .pay-method-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.pay-method-btn svg {
  flex-shrink: 0;
  color: currentColor;
}

/* Card-network badges (Visa/Mastercard/AMEX/Apple Pay/G Pay) — small pill-shaped
   labels that sit under the payment buttons to advertise accepted networks.
   Kept text-only (no SVG logo files) so the brands don't trigger trademark
   complications, but capitalised + monospaced so they read like the real
   wordmarks. */
.pay-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}
.pay-badge:nth-child(1) { color: #1a1f71; background: #fff; border-color: #fff; }   /* VISA blue on white */
.pay-badge:nth-child(2) { color: #fff; background: linear-gradient(90deg, #eb001b 50%, #f79e1b 50%); border-color: transparent; }  /* Mastercard */
.pay-badge:nth-child(3) { color: #fff; background: #2e77bb; border-color: #2e77bb; } /* AMEX */
.pay-badge:nth-child(4) { color: #fff; background: #000; border-color: #000; }       /* Apple Pay */
.pay-badge:nth-child(5) { color: #fff; background: #4285f4; border-color: #4285f4; } /* Google Pay */

/* ══════════════════════════════════════════════════════════════════════
   FORTNITE CREW SUBSCRIPTION HERO
   Modeled on vbs.ar/products/one-month-fortnite-crew — premium dark
   layout with a blue-gradient price card and character-render hero.
   ══════════════════════════════════════════════════════════════════════ */

.crew-hero {
  /* The shop grid is `repeat(auto-fill, minmax(260px, 1fr))` for product
     cards. Without this, the hero gets stuffed into a single 260px column
     and the title wraps to two lines, the CTA buttons stack vertically,
     etc. Spanning every column lets it use the full Shop width. */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  background: linear-gradient(135deg, #0d1735 0%, #0a1226 50%, #050a1c 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(59, 130, 246, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 60%);
  pointer-events: none;
}

.crew-hero-image {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a2547 0%, #0d1735 50%, #1c2b54 100%);
  border: 1px solid rgba(59, 130, 246, 0.18);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crew-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
.crew-hero-image .crew-hero-fallback {
  position: absolute;
  inset: 0;
  /* Hidden by default. The fallback emoji used to render UNDER the img
     and become visible whenever the img dropped to opacity 0 during a
     hero-tier swap — customers saw a 150 ms "earth" / "diamond" flash
     between every V-Bucks pack switch. Only show the fallback when the
     img genuinely errored (the onerror handler adds `--noimg`). */
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  z-index: 1;
}
.crew-hero-image--noimg .crew-hero-fallback { display: flex; z-index: 3; }
.crew-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(99, 165, 255, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.crew-hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.crew-chip {
  display: inline-block;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

/* Chip + heart row — keeps wishlist toggle inline-right of the section
   chip so it doesn't push the title down. */
.crew-chip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.crew-chip-row .crew-chip { margin-bottom: 0; }
.crew-wish-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.crew-wish-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  transform: scale(1.08);
}
.crew-wish-btn--on {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.50);
  color: #ef4444;
}
.crew-wish-btn--on:hover {
  color: #fca5a5;
}

.crew-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.05;
}

.crew-hero-tag {
  color: #94a3b8;
  font-size: 0.85rem;
  margin: 0 0 18px;
}

/* Bright-blue gradient price card — the visual anchor of the right panel */
.crew-price-card {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow:
    0 10px 30px -10px rgba(59, 130, 246, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}
.crew-price-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.18), transparent 50%);
  pointer-events: none;
}
.crew-price-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.crew-price-value {
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}
.crew-price-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Form fields — clean, dark, matching the right-panel mood */
.crew-field { margin-bottom: 14px; }
.crew-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text2);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.crew-field-required {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.crew-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  color: #f1f5f9;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.crew-select:hover  { border-color: rgba(99, 165, 255, 0.45); }
.crew-select:focus  { border-color: #3b82f6; outline: none; background: rgba(59, 130, 246, 0.06); }
/* Style the dropdown panel itself — Firefox/Chrome render this white by
   default, which on a dark page looks like the screen has gone blank
   when the user opens the dropdown. Force dark styling on options so the
   panel matches the rest of the UI. */
.crew-select option {
  background: #0d1735;
  color: #f1f5f9;
  padding: 8px 12px;
}
.crew-select option:checked,
.crew-select option:hover {
  background: #1e40af;
  color: #fff;
}

/* ── Platform toggle picker ──────────────────────────────────────────
   Used as an alternative to <select> for heroes with 2 options where
   we want both visible at once (e.g. Founders Edition: Epic vs Xbox).
   Renders as a pair of side-by-side pills; the active one lights up. */
.crew-platform-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px;
}
.crew-platform-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text2);
  border-radius: 9px;
  padding: 12px 10px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, color 0.15s;
}
.crew-platform-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
}
.crew-platform-btn.active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.55);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.6);
}
.crew-platform-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.crew-platform-label {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.1;
}
.crew-platform-price {
  font-size: .76rem;
  color: var(--text3);
  font-weight: 500;
}
.crew-platform-btn.active .crew-platform-price {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Per-tier OOS markers (2026-05-03) ───────────────────────────────
   When a single tier is sold out we grey out the pill but keep it
   clickable (so the customer can still see what's there). The inline
   "SOLD OUT" tag tells them at a glance which specific tier is gone. */
.crew-platform-btn--oos {
  opacity: 0.55;
  background: rgba(248, 113, 113, 0.06);
  border-color: rgba(248, 113, 113, 0.25);
}
.crew-platform-btn--oos:hover {
  background: rgba(248, 113, 113, 0.10);
  color: var(--text2);
}
.crew-platform-btn--oos.active {
  background: rgba(248, 113, 113, 0.20);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fca5a5;
}
.crew-platform-oos-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fca5a5;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
/* Native <option> can't be styled in most browsers — we surface OOS
   state via the appended " — SOLD OUT" string in the option label. */
.crew-some-oos-note {
  margin: 6px 0 0;
  font-size: 0.74rem;
  color: #fca5a5;
  line-height: 1.4;
}

/* Hero image cross-fade — kept simple. The JS toggles opacity manually
   when swapping; this just makes sure the transition is consistent
   even on first paint. */
.crew-hero-image img {
  transition: opacity 0.25s ease;
}

.crew-static-pill {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #4ade80;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Two CTAs — Add (outline) and Buy Now (gradient blue), matching the
   pattern on the reference page. */
.crew-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.crew-btn-add,
.crew-btn-buy {
  flex: 1;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s;
  font-family: inherit;
}
.crew-btn-add {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
}
.crew-btn-add:hover  { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.crew-btn-buy {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.55);
}
.crew-btn-buy:hover  { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(59, 130, 246, 0.7); }

.crew-login-note {
  margin: 14px 0 0;
  color: var(--text3);
  font-size: 0.75rem;
  text-align: center;
}

/* Big SOLD OUT banner — sits below the login note, only visible when
   the currently-selected SKU on the hero is in the OOS set. Painted
   prominent so customers can't miss it (red gradient + bold weight +
   icon on the left). The buttons above are also disabled in JS, but
   visual confirmation is what stops customers from trying to click
   them again or submitting a support ticket. */
.crew-oos-banner {
  display: flex;          /* JS toggles this between flex and none */
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(127, 29, 29, 0.28) 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 12px;
  box-shadow:
    0 8px 24px -8px rgba(239, 68, 68, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: crewOosPulse 2.4s ease-in-out infinite;
}
.crew-oos-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.crew-oos-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fca5a5;
  line-height: 1.1;
}
.crew-oos-sub {
  margin-top: 2px;
  font-size: 0.78rem;
  color: rgba(252, 165, 165, 0.78);
  line-height: 1.35;
}
@keyframes crewOosPulse {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  50%      { box-shadow: 0 12px 32px -6px rgba(239, 68, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
}

/* Description card — sits below the hero, lists Crew benefits.
   Same full-width span as .crew-hero so it flows under, not beside. */
.crew-description-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #131c3a 0%, #0d1735 100%);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 14px;
  padding: 24px 28px;
  margin-top: 20px;
}

/* Successive subscription heroes (e.g. Fallout below Crew) get extra
   breathing room so they don't feel glued to the previous description. */
.crew-description-card + .crew-hero { margin-top: 36px; }
.crew-description-card h3 {
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 10px;
}
.crew-description-card p {
  color: var(--text2);
  line-height: 1.6;
  margin: 0 0 16px;
  font-size: 0.92rem;
}
.crew-perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.crew-perks-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.crew-perk-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.crew-perks-list li > div {
  color: var(--text2);
  font-size: 0.82rem;
  line-height: 1.45;
}
.crew-perks-list li strong { color: #f1f5f9; }

/* ── Variant: image on the RIGHT ─────────────────────────────────────────
   Used for the Fallout hero so each subscription gets a different visual
   anchor — eyes don't fall on the same spot for every card. */
.crew-hero--reverse .crew-hero-image { order: 2; }
.crew-hero--reverse .crew-hero-panel { order: 1; }

/* ── Variant: Fallout 1st theme (Pip-Boy amber + radioactive green) ──────
   Overrides the default blue gradients with the warm post-apocalyptic
   palette while keeping the same layout, typography, and spacing. */
.crew-hero--fallout {
  background: linear-gradient(135deg, #1a1305 0%, #14100a 50%, #0a0805 100%);
  border-color: rgba(245, 158, 11, 0.25);
  box-shadow:
    0 30px 60px -20px rgba(245, 158, 11, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--fallout::before {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 60%);
}
.crew-hero--fallout .crew-hero-image {
  background: linear-gradient(135deg, #2a1f0d 0%, #1a1305 50%, #2d1a05 100%);
  border-color: rgba(245, 158, 11, 0.20);
}
.crew-hero--fallout .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.22) 0%, transparent 70%);
}
.crew-hero--fallout .crew-price-card {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
  box-shadow:
    0 10px 30px -10px rgba(245, 158, 11, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.crew-hero--fallout .crew-select:hover { border-color: rgba(245, 158, 11, 0.45); }
.crew-hero--fallout .crew-select:focus { border-color: #f59e0b; background: rgba(245, 158, 11, 0.06); }
.crew-hero--fallout .crew-select option:checked,
.crew-hero--fallout .crew-select option:hover {
  background: #92400e;
  color: #fff;
}
.crew-hero--fallout .crew-btn-buy {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
  box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.55);
}
.crew-hero--fallout .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(245, 158, 11, 0.7);
}
/* Description card under the Fallout hero — match the warm tone */
.crew-hero--fallout + .crew-description-card {
  background: linear-gradient(135deg, #1f160a 0%, #14100a 100%);
  border-color: rgba(245, 158, 11, 0.16);
}

/* ── Variant: RED theme (V-Bucks Battle Royale) ───────────────────────
   Bold crimson gradient. Same shape as the Fallout theme just with the
   accent palette swapped to reds. Used for the Battle Royale V-Bucks
   hero so it visually pops against the cool blue Subscriptions cards. */
.crew-hero--red {
  background: linear-gradient(135deg, #2a0808 0%, #1a0505 50%, #0a0303 100%);
  border-color: rgba(239, 68, 68, 0.30);
  box-shadow:
    0 30px 60px -20px rgba(239, 68, 68, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--red::before {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.22) 0%, transparent 60%);
}
.crew-hero--red .crew-hero-image {
  background: linear-gradient(135deg, #2d0d0d 0%, #1a0505 50%, #2d0a0a 100%);
  border-color: rgba(239, 68, 68, 0.25);
}
.crew-hero--red .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.28) 0%, transparent 70%);
}
.crew-hero--red .crew-chip {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.crew-hero--red .crew-price-card {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #7f1d1d 100%);
  box-shadow:
    0 10px 30px -10px rgba(239, 68, 68, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.crew-hero--red .crew-select:hover  { border-color: rgba(239, 68, 68, 0.5); }
.crew-hero--red .crew-select:focus  { border-color: #ef4444; background: rgba(239, 68, 68, 0.06); }
.crew-hero--red .crew-select option:checked,
.crew-hero--red .crew-select option:hover {
  background: #7f1d1d;
  color: #fff;
}
.crew-hero--red .crew-platform-btn.active {
  background: rgba(239, 68, 68, 0.20);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 6px 18px -8px rgba(239, 68, 68, 0.7);
}
.crew-hero--red .crew-btn-buy {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #7f1d1d 100%);
  box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.6);
}
.crew-hero--red .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(239, 68, 68, 0.75);
}
.crew-hero--red + .crew-description-card {
  background: linear-gradient(135deg, #1f0808 0%, #140505 100%);
  border-color: rgba(239, 68, 68, 0.18);
}
.crew-hero--red .crew-perk-icon {
  background: rgba(239, 68, 68, 0.12);
}

/* ── Variant: GREEN theme (STW Founders Edition) ──────────────────────
   Emerald gradient. Same structure as the red/amber themes; chosen for
   STW Founders to evoke the "save the world" PvE/quest aesthetic and
   pair with the existing Xbox green platform pill. */
.crew-hero--green {
  background: linear-gradient(135deg, #0a2515 0%, #051a0d 50%, #02100a 100%);
  border-color: rgba(34, 197, 94, 0.28);
  box-shadow:
    0 30px 60px -20px rgba(34, 197, 94, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--green::before {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.22) 0%, transparent 60%);
}
.crew-hero--green .crew-hero-image {
  background: linear-gradient(135deg, #0d2a18 0%, #051a0d 50%, #0a2818 100%);
  border-color: rgba(34, 197, 94, 0.25);
}
.crew-hero--green .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.28) 0%, transparent 70%);
}
.crew-hero--green .crew-chip {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}
.crew-hero--green .crew-price-card {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #14532d 100%);
  box-shadow:
    0 10px 30px -10px rgba(34, 197, 94, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.crew-hero--green .crew-select:hover  { border-color: rgba(34, 197, 94, 0.5); }
.crew-hero--green .crew-select:focus  { border-color: #22c55e; background: rgba(34, 197, 94, 0.06); }
.crew-hero--green .crew-select option:checked,
.crew-hero--green .crew-select option:hover {
  background: #14532d;
  color: #fff;
}
.crew-hero--green .crew-platform-btn.active {
  background: rgba(34, 197, 94, 0.20);
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 6px 18px -8px rgba(34, 197, 94, 0.7);
}
.crew-hero--green .crew-btn-buy {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #14532d 100%);
  box-shadow: 0 8px 20px -6px rgba(34, 197, 94, 0.6);
}
.crew-hero--green .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(34, 197, 94, 0.75);
}
.crew-hero--green + .crew-description-card {
  background: linear-gradient(135deg, #0a1f12 0%, #051410 100%);
  border-color: rgba(34, 197, 94, 0.18);
}
.crew-hero--green .crew-perk-icon {
  background: rgba(34, 197, 94, 0.12);
}

/* ── Variant: YELLOW theme (Apex Legends) ─────────────────────────────
   Warm amber/yellow palette to match Apex's branding. Same shape as
   the red/green themes; chosen to distinguish Apex Coins visually
   from the red V-Bucks and blue Crew cards. */
.crew-hero--yellow {
  background: linear-gradient(135deg, #2a1f05 0%, #1a1305 50%, #0a0805 100%);
  border-color: rgba(250, 204, 21, 0.30);
  box-shadow:
    0 30px 60px -20px rgba(250, 204, 21, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--yellow::before {
  background: radial-gradient(circle, rgba(250, 204, 21, 0.22) 0%, transparent 60%);
}
.crew-hero--yellow .crew-hero-image {
  background: linear-gradient(135deg, #2d2110 0%, #1a1305 50%, #2d1f0a 100%);
  border-color: rgba(250, 204, 21, 0.25);
}
.crew-hero--yellow .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(250, 204, 21, 0.28) 0%, transparent 70%);
}
.crew-hero--yellow .crew-chip {
  background: rgba(250, 204, 21, 0.15);
  border-color: rgba(250, 204, 21, 0.4);
  color: #fde68a;
}
.crew-hero--yellow .crew-price-card {
  background: linear-gradient(135deg, #facc15 0%, #eab308 50%, #854d0e 100%);
  /* Yellow text on yellow gradient — darken the price label so it pops. */
  color: #1a1305;
  box-shadow:
    0 10px 30px -10px rgba(250, 204, 21, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.crew-hero--yellow .crew-price-card .crew-price-label,
.crew-hero--yellow .crew-price-card .crew-price-value,
.crew-hero--yellow .crew-price-card .crew-price-sub {
  color: #1a1305;
}
.crew-hero--yellow .crew-select:hover  { border-color: rgba(250, 204, 21, 0.5); }
.crew-hero--yellow .crew-select:focus  { border-color: #facc15; background: rgba(250, 204, 21, 0.06); }
.crew-hero--yellow .crew-select option:checked,
.crew-hero--yellow .crew-select option:hover {
  background: #854d0e;
  color: #fff;
}
.crew-hero--yellow .crew-platform-btn.active {
  background: rgba(250, 204, 21, 0.20);
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 6px 18px -8px rgba(250, 204, 21, 0.7);
}
.crew-hero--yellow .crew-btn-buy {
  background: linear-gradient(135deg, #facc15 0%, #eab308 50%, #854d0e 100%);
  color: #1a1305;
  box-shadow: 0 8px 20px -6px rgba(250, 204, 21, 0.6);
}
.crew-hero--yellow .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(250, 204, 21, 0.75);
}
.crew-hero--yellow + .crew-description-card {
  background: linear-gradient(135deg, #1f160a 0%, #14100a 100%);
  border-color: rgba(250, 204, 21, 0.18);
}
.crew-hero--yellow .crew-perk-icon {
  background: rgba(250, 204, 21, 0.12);
}

/* ── Variant: BLACK theme (Roblox / Robux) ────────────────────────────
   Pitch-black backdrop with white accents to match Roblox branding. */
.crew-hero--black {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #050505 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--black::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
}
.crew-hero--black .crew-hero-image {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #1a1a1a 100%);
  border-color: rgba(255, 255, 255, 0.15);
}
.crew-hero--black .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.10) 0%, transparent 70%);
}
.crew-hero--black .crew-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #f5f5f5;
}
.crew-hero--black .crew-price-card {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #050505 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.crew-hero--black .crew-select:hover { border-color: rgba(255, 255, 255, 0.4); }
.crew-hero--black .crew-select:focus { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.crew-hero--black .crew-select option:checked,
.crew-hero--black .crew-select option:hover {
  background: #1a1a1a;
  color: #fff;
}
.crew-hero--black .crew-platform-btn.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7);
}
.crew-hero--black .crew-btn-buy {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #050505 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
}
.crew-hero--black .crew-btn-buy:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.crew-hero--black + .crew-description-card {
  background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
  border-color: rgba(255, 255, 255, 0.12);
}
.crew-hero--black .crew-perk-icon {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Variant: PURPLE theme (Discord Nitro) ────────────────────────────
   Discord brand palette — blurple gradient with violet accents. */
.crew-hero--purple {
  background: linear-gradient(135deg, #1d1a3a 0%, #14112c 50%, #0a081f 100%);
  border-color: rgba(124, 58, 237, 0.32);
  box-shadow:
    0 30px 60px -20px rgba(124, 58, 237, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--purple::before {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, transparent 60%);
}
.crew-hero--purple .crew-hero-image {
  background: linear-gradient(135deg, #221c47 0%, #14112c 50%, #221c47 100%);
  border-color: rgba(124, 58, 237, 0.30);
}
.crew-hero--purple .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.30) 0%, transparent 70%);
}
.crew-hero--purple .crew-chip {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.45);
  color: #c4b5fd;
}
.crew-hero--purple .crew-price-card {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 50%, #2e1065 100%);
  box-shadow:
    0 10px 30px -10px rgba(124, 58, 237, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.crew-hero--purple .crew-select:hover { border-color: rgba(124, 58, 237, 0.5); }
.crew-hero--purple .crew-select:focus { border-color: #7c3aed; background: rgba(124, 58, 237, 0.06); }
.crew-hero--purple .crew-select option:checked,
.crew-hero--purple .crew-select option:hover {
  background: #2e1065;
  color: #fff;
}
.crew-hero--purple .crew-platform-btn.active {
  background: rgba(124, 58, 237, 0.20);
  border-color: rgba(124, 58, 237, 0.6);
  box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.7);
}
.crew-hero--purple .crew-btn-buy {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 50%, #2e1065 100%);
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, 0.6);
}
.crew-hero--purple .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(124, 58, 237, 0.75);
}
.crew-hero--purple + .crew-description-card {
  background: linear-gradient(135deg, #1a1638 0%, #0f0c25 100%);
  border-color: rgba(124, 58, 237, 0.20);
}
.crew-hero--purple .crew-perk-icon {
  background: rgba(124, 58, 237, 0.14);
}

/* ── Variant: ORANGE theme (Amazon gift cards) ────────────────────────
   Signature Amazon orange — distinct from the amber Apex yellow theme.
   #ff9900 is Amazon's brand color (the smile arrow).  */
.crew-hero--orange {
  background: linear-gradient(135deg, #2a1500 0%, #1a0d00 50%, #0a0500 100%);
  border-color: rgba(255, 153, 0, 0.32);
  box-shadow:
    0 30px 60px -20px rgba(255, 153, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--orange::before {
  background: radial-gradient(circle, rgba(255, 153, 0, 0.22) 0%, transparent 60%);
}
.crew-hero--orange .crew-hero-image {
  background: linear-gradient(135deg, #2d1808 0%, #1a0d00 50%, #2d1505 100%);
  border-color: rgba(255, 153, 0, 0.30);
}
.crew-hero--orange .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(255, 153, 0, 0.30) 0%, transparent 70%);
}
.crew-hero--orange .crew-chip {
  background: rgba(255, 153, 0, 0.18);
  border-color: rgba(255, 153, 0, 0.45);
  color: #fed7aa;
}
.crew-hero--orange .crew-price-card {
  background: linear-gradient(135deg, #ff9900 0%, #cc7a00 50%, #663d00 100%);
  box-shadow:
    0 10px 30px -10px rgba(255, 153, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.crew-hero--orange .crew-select:hover { border-color: rgba(255, 153, 0, 0.5); }
.crew-hero--orange .crew-select:focus { border-color: #ff9900; background: rgba(255, 153, 0, 0.06); }
.crew-hero--orange .crew-select option:checked,
.crew-hero--orange .crew-select option:hover {
  background: #663d00;
  color: #fff;
}
.crew-hero--orange .crew-platform-btn.active {
  background: rgba(255, 153, 0, 0.20);
  border-color: rgba(255, 153, 0, 0.6);
  box-shadow: 0 6px 18px -8px rgba(255, 153, 0, 0.7);
}
.crew-hero--orange .crew-btn-buy {
  background: linear-gradient(135deg, #ff9900 0%, #cc7a00 50%, #663d00 100%);
  box-shadow: 0 8px 20px -6px rgba(255, 153, 0, 0.6);
}
.crew-hero--orange .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(255, 153, 0, 0.75);
}
.crew-hero--orange + .crew-description-card {
  background: linear-gradient(135deg, #1f1000 0%, #14080a 100%);
  border-color: rgba(255, 153, 0, 0.20);
}
.crew-hero--orange .crew-perk-icon {
  background: rgba(255, 153, 0, 0.14);
}

/* ── Variant: BLUE theme (PlayStation gift cards) ─────────────────────
   Brighter electric blue than the default crew navy — matches the
   PlayStation Store branding and visually distinguishes the PSN hero
   from the (also blue-defaulted) Crew hero on the Subscriptions page. */
.crew-hero--blue {
  background: linear-gradient(135deg, #002a5c 0%, #001a3d 50%, #000d22 100%);
  border-color: rgba(0, 153, 255, 0.32);
  box-shadow:
    0 30px 60px -20px rgba(0, 153, 255, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.crew-hero--blue::before {
  background: radial-gradient(circle, rgba(0, 153, 255, 0.22) 0%, transparent 60%);
}
.crew-hero--blue .crew-hero-image {
  background: linear-gradient(135deg, #003572 0%, #001a3d 50%, #003572 100%);
  border-color: rgba(0, 153, 255, 0.30);
}
.crew-hero--blue .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(0, 153, 255, 0.30) 0%, transparent 70%);
}
.crew-hero--blue .crew-chip {
  background: rgba(0, 153, 255, 0.18);
  border-color: rgba(0, 153, 255, 0.45);
  color: #93c5fd;
}
.crew-hero--blue .crew-price-card {
  background: linear-gradient(135deg, #0099ff 0%, #0072e6 50%, #003791 100%);
  box-shadow:
    0 10px 30px -10px rgba(0, 153, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.crew-hero--blue .crew-select:hover { border-color: rgba(0, 153, 255, 0.5); }
.crew-hero--blue .crew-select:focus { border-color: #0099ff; background: rgba(0, 153, 255, 0.06); }
.crew-hero--blue .crew-select option:checked,
.crew-hero--blue .crew-select option:hover {
  background: #003791;
  color: #fff;
}
.crew-hero--blue .crew-platform-btn.active {
  background: rgba(0, 153, 255, 0.20);
  border-color: rgba(0, 153, 255, 0.6);
  box-shadow: 0 6px 18px -8px rgba(0, 153, 255, 0.7);
}
.crew-hero--blue .crew-btn-buy {
  background: linear-gradient(135deg, #0099ff 0%, #0072e6 50%, #003791 100%);
  box-shadow: 0 8px 20px -6px rgba(0, 153, 255, 0.6);
}
.crew-hero--blue .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(0, 153, 255, 0.75);
}
.crew-hero--blue + .crew-description-card {
  background: linear-gradient(135deg, #001a3d 0%, #000d22 100%);
  border-color: rgba(0, 153, 255, 0.20);
}
.crew-hero--blue .crew-perk-icon {
  background: rgba(0, 153, 255, 0.14);
}

/* ── Variant: WHITE theme (Gift Cards — Epic / Xbox / PSN) ────────────
   Light, clean, premium — feels like a gift shop wall. White panel on
   the page, dark text inside the price card / button, contrasting
   neutral grey accents elsewhere. */
.crew-hero--white {
  background: linear-gradient(135deg, #f5f5f7 0%, #e5e7eb 50%, #d1d5db 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  color: #0f172a;
}
.crew-hero--white::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
}
.crew-hero--white .crew-hero-image {
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f6 50%, #e5e7eb 100%);
  border-color: rgba(15, 23, 42, 0.10);
}
.crew-hero--white .crew-hero-glow {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
}
.crew-hero--white .crew-chip {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.20);
  color: #1e293b;
}
.crew-hero--white .crew-hero-title { color: #0f172a; }
.crew-hero--white .crew-hero-tag   { color: #475569; }
.crew-hero--white .crew-price-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%);
  color: #fff;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.crew-hero--white .crew-field-label { color: #1e293b; }
.crew-hero--white .crew-select {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}
.crew-hero--white .crew-select:hover { border-color: rgba(15, 23, 42, 0.4); }
.crew-hero--white .crew-select:focus { border-color: #0f172a; background: #fff; }
.crew-hero--white .crew-select option {
  background: #fff;
  color: #0f172a;
}
.crew-hero--white .crew-select option:checked,
.crew-hero--white .crew-select option:hover {
  background: #0f172a;
  color: #fff;
}
.crew-hero--white .crew-static-pill {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.4);
}
.crew-hero--white .crew-platform-toggle {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
}
.crew-hero--white .crew-platform-btn {
  color: #475569;
}
.crew-hero--white .crew-platform-btn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
.crew-hero--white .crew-platform-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.crew-hero--white .crew-platform-btn.active .crew-platform-price {
  color: rgba(255, 255, 255, 0.78);
}
.crew-hero--white .crew-btn-add {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.18);
  color: #0f172a;
}
.crew-hero--white .crew-btn-add:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.3);
}
.crew-hero--white .crew-btn-buy {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
}
.crew-hero--white .crew-btn-buy:hover {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
}
.crew-hero--white .crew-login-note { color: #475569; }
.crew-hero--white + .crew-description-card {
  background: linear-gradient(135deg, #f5f5f7 0%, #e5e7eb 100%);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}
.crew-hero--white + .crew-description-card h3 { color: #0f172a; }
.crew-hero--white + .crew-description-card p  { color: #475569; }
.crew-hero--white + .crew-description-card .crew-perks-list li { color: #0f172a; }
.crew-hero--white + .crew-description-card .crew-perks-list li > div { color: #475569; }
.crew-hero--white .crew-perk-icon {
  background: rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

/* Mobile — stack hero into a single column */
@media (max-width: 860px) {
  .crew-hero { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  /* On mobile both layouts collapse to single column — image always first
     so the visual anchor is at the top regardless of variant. */
  .crew-hero--reverse .crew-hero-image { order: 1; }
  .crew-hero--reverse .crew-hero-panel { order: 2; }
  .crew-hero-image { min-height: 280px; }
  .crew-hero-title { font-size: 2rem; }
  .crew-price-value { font-size: 2rem; }
  .crew-cta-row { flex-direction: column; }
}

/* V-Bucks post-payment Epic-OAuth modal step rows. Numbered circles on the
   left, content on the right, so the customer can see exactly where they
   are in the 2-step flow even on a small screen. */
.vb-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.vb-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c026d3 0%, #7c3aed 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rajdhani', sans-serif;
}
.vb-step-body { flex: 1; min-width: 0; }
.vb-step-body strong { font-size: 0.95rem; color: var(--text1); display: block; }

/* Stripe variant — slightly taller, glow on hover, wallet badge row below */
.pay-method-stripe {
  position: relative;
  min-height: 56px;
  font-size: 1rem;
  background: linear-gradient(135deg, #635bff 0%, #4f46e5 50%, #7c3aed 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
}
.pay-method-stripe:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, .55);
  filter: brightness(1.06);
}
.pay-method-stripe:active { transform: translateY(0); filter: brightness(.95); }
.pay-method-stripe svg { width: 20px; height: 20px; }

/* Crypto — promoted to primary tier alongside Pay now. Same height + weight
   as the Stripe button so the two read as a stacked pair of equivalent
   primary actions, with a slightly different gradient so users can still
   tell them apart at a glance. */
.pay-method-crypto {
  position: relative;
  min-height: 56px;
  font-size: 1rem;
  background: linear-gradient(135deg, #f7931a 0%, #ff66c4 50%, #7c3aed 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 18px rgba(247, 147, 26, .35);
}
.pay-method-crypto:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(247, 147, 26, .55);
  filter: brightness(1.06);
}
.pay-method-crypto:active { transform: translateY(0); filter: brightness(.95); }
.pay-method-crypto .pay-method-icon { font-size: 1.1rem; }

/* Gift card / Ribbet balance — outline style with subtle hover */
.pay-method-btn:not(.pay-method-stripe):not(.pay-method-crypto) {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--text);
}
.pay-method-btn:not(.pay-method-stripe):not(.pay-method-crypto):hover {
  background: rgba(192, 38, 211, .08);
  border-color: rgba(192, 38, 211, .4);
  transform: translateY(-1px);
}

/* Card brand badges */
.card-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--surface2);
  border: 1px solid rgba(26,86,219,.3);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2);
}

/* ══════════════════════════════════════════
   GIFTING PAGE
══════════════════════════════════════════ */

/* Utility bar (credits + friend checker) */
.gifting-utility-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 32px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.gifting-credit-box,
.gifting-friend-box {
  flex: 1 1 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.gifting-credit-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gifting-discord-info{cursor:pointer;color:var(--primary);font-size:.9rem;font-style:normal;opacity:.8;transition:opacity .2s}
.gifting-discord-info:hover{opacity:1}
.gifting-discord-infobox{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:.8rem;color:var(--text2);line-height:1.6;margin-bottom:10px}
.gifting-discord-infobox code{background:rgba(255,102,196,.15);color:var(--primary);padding:1px 6px;border-radius:4px;font-size:.78rem}
.gifting-credit-row {
  display: flex;
  gap: 8px;
}
.gifting-credit-row input {
  flex: 1;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}
.gifting-credit-row input:focus { border-color: var(--primary); }
.gifting-credit-result,
.gifting-friend-result {
  margin-top: 12px;
}
.gifting-credit-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.gifting-credit-amount {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
}
.gifting-credit-unit {
  font-size: .85rem;
  color: var(--text3);
}

/* Section titles */
.gifting-section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.gifting-section-title h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}
.gifting-section-title p {
  color: var(--text3);
  font-size: .85rem;
  margin: 4px 0 0;
}

/* Accounts toggle */
.gifting-accounts-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 20px;font-size:.95rem;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s}
.gifting-accounts-toggle:hover{border-color:var(--primary);background:var(--bg2)}
.gifting-toggle-arrow{transition:transform .25s;font-size:.75rem;opacity:.6}
.gifting-accounts-toggle[aria-expanded="true"] .gifting-toggle-arrow{transform:rotate(180deg)}
.gifting-accounts-panel{margin-top:12px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:12px}

/* Accounts to add — 4-column card grid */
.gifting-accounts-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 860px) { .gifting-accounts-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gifting-accounts-list { grid-template-columns: 1fr; } }
.gifting-account-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color .2s;
}
.gifting-account-card:hover { border-color: var(--primary); }
.gifting-account-avatar {
  font-size: 2rem;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.gifting-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.gifting-account-info { flex: 1; min-width: 0; }
.gifting-account-name {
  font-weight: 700;
  font-size: .92rem;
  width: 100%;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
}
.gifting-account-vb    { font-size: .78rem; color: var(--text2); margin-top: 2px; width: 100%; overflow-wrap: anywhere; }
.gifting-account-slots { font-size: .74rem; color: var(--text3); margin-top: 2px; width: 100%; overflow-wrap: anywhere; }
.gifting-account-admin .gifting-account-status { font-size: .75rem; color: var(--text3); }

/* ── Drag-and-drop account reorder ── */
.ga-drag-handle {
  font-size: 1.25rem;
  color: var(--text3);
  cursor: grab;
  padding: 0 6px 0 0;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}
.ga-drag-item { transition: opacity .15s, box-shadow .15s; }
.ga-drag-item.ga-drag-over {
  box-shadow: 0 0 0 2px var(--primary);
  border-color: var(--primary);
}

/* ── Font size buttons ── */
.font-size-btn { transition: background .15s, color .15s, border-color .15s; }
.font-size-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.gifting-account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.gifting-copy-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gifting-copy-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Friend status rows */
.gifting-friend-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gifting-friend-row  { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Status badges */
.gifting-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.gifting-status-eligible  { background: rgba(63,196,95,.15);  color: #3fc45f; border: 1px solid rgba(63,196,95,.3); }
.gifting-status-pending   { background: rgba(245,166,35,.15); color: #f5a623; border: 1px solid rgba(245,166,35,.3); }
.gifting-status-notadded  { background: rgba(239,68,68,.12);  color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.gifting-status-ready     { background: rgba(79,156,247,.15); color: #4f9cf7; border: 1px solid rgba(79,156,247,.3); }

/* Pricing grid */
.gifting-pricing-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 32px; }
.gifting-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.gifting-price-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gifting-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rc, var(--primary));
}
.gifting-price-card:hover { transform: translateY(-4px); border-color: var(--rc, var(--primary)); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.gifting-price-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 4px;
}
.gifting-price-vb {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.gifting-price-vb span { font-size: .72rem; font-weight: 500; color: var(--text3); }
.gifting-price-credits {
  font-size: .88rem;
  font-weight: 700;
  color: var(--rc, var(--primary));
}
.gifting-price-usd {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  margin: 4px 0;
}
.gifting-buy-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--rc, var(--primary)), color-mix(in srgb, var(--rc, var(--primary)) 60%, #000));
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.gifting-buy-btn:hover { opacity: .88; transform: translateY(-1px); }

/* Category tabs bar — horizontal scrollable row with visible scrollbar */
.gifting-category-sidebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,102,196,.8) rgba(255,255,255,.10);
  padding-bottom: 12px;
  padding-right: 20px;
  margin-bottom: 4px;
}
.gifting-category-sidebar::-webkit-scrollbar {
  height: 8px;
}
.gifting-category-sidebar::-webkit-scrollbar-track {
  background: rgba(255,255,255,.10);
  border-radius: 99px;
}
.gifting-category-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,102,196,.8);
  border-radius: 99px;
  min-width: 40px;
}
.gifting-category-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,102,196,1);
}
.gifting-cat-loading {
  color: var(--text3);
  font-size: .82rem;
  padding: 8px;
}
.gifting-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: var(--text2);
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.gifting-cat-btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.gifting-cat-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.gifting-cat-icon { font-size: .95rem; }
.gifting-cat-label { white-space: nowrap; }
.gifting-cat-count {
  font-size: .7rem;
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  padding: 1px 6px;
  color: rgba(255,255,255,.7);
}
.gifting-cat-btn.active .gifting-cat-count { background: rgba(0,0,0,.25); color: #fff; }
/* Fix: padding-right is swallowed by overflow-x:auto — add a spacer after the last tab */
.gifting-category-sidebar::after {
  content: '';
  min-width: 20px;
  display: block;
  flex-shrink: 0;
}

/* Item shop grid — full width now that sidebar is gone */
.gifting-shop-grid {
  width: 100%;
}

/* ── Section groups (Featured Bundles / Outfits / etc.) ── */
.fn-shop-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Section styles ──
   2026-05-16: themed sections get a subtle horizontal accent strip behind
   the heading row that matches Epic's tile colors (--sec-rc). Cards still
   carry their own per-item gradient as the primary visual; this just
   ties the section together so collabs feel themed end-to-end. */
.fn-shop-section {
  padding: 24px 0 32px;
  position: relative;
}
.fn-shop-section--themed {
  padding: 28px 18px 36px;
  margin: 0 -18px 8px;
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sec-rc, #7c3aed) 12%, transparent) 0%,
      color-mix(in srgb, var(--sec-rc, #7c3aed)  4%, transparent) 60%,
      transparent 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sec-rc, #7c3aed) 25%, transparent),
    inset 0 -1px 0 rgba(255,255,255,0.02);
}

/* ── Section heading: bold italic label + right-extending glowing divider ── */
.fn-shop-section-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  border-bottom: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
/* Color accent bar on the left */
.fn-shop-section-heading::before {
  content: '';
  display: block;
  width: 5px;
  min-width: 5px;
  height: 1.4em;
  background: linear-gradient(180deg, var(--sec-rc, #ff66c4), color-mix(in srgb, var(--sec-rc, #7c3aed) 60%, #000));
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 14px var(--sec-rc, #ff66c4);
}
/* Horizontal glow line extending to the right of the label */
.fn-shop-section-heading::after {
  content: '';
  display: block;
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,
    var(--sec-rc, #ff66c4) 0%,
    color-mix(in srgb, var(--sec-rc, #ff66c4) 30%, transparent) 50%,
    transparent 100%);
  border-radius: 1px;
  opacity: .6;
}
.fn-shop-section-heading .fn-section-count {
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  color: rgba(255,255,255,.32);
  letter-spacing: .04em;
  background: rgba(255,255,255,.08);
  padding: 2px 8px;
  border-radius: 99px;
  order: 2;
  flex-shrink: 0;
}

/* ── Inner section grid: 4 columns ── */
.fn-shop-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: start;
}

/* ── Base card ── */
.fn-shop-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #0d0018;
  transition: transform .2s ease, box-shadow .2s ease, box-shadow .2s ease;
  isolation: isolate;
}
.fn-shop-card:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 18px 48px rgba(0,0,0,.75), 0 0 0 2px var(--rc, #ff66c4);
  z-index: 2;
}

/* Hero bundle: full-width across all 4 columns, very wide */
.fn-shop-card--hero {
  grid-column: span 4;
  aspect-ratio: 16 / 7;
  border-radius: 16px;
}
.fn-shop-card--hero .fn-card-img img {
  object-fit: cover;
  object-position: center top;
}
.fn-shop-card--hero .fn-card-bottom {
  padding: 120px 20px 16px;
}
.fn-shop-card--hero .fn-card-name {
  font-size: 1.5rem;
  white-space: normal;
}
.fn-shop-card--hero .fn-card-gift-btn {
  width: 42px; height: 42px;
  font-size: 1.1rem;
}

/* Regular bundle (no set / standalone): 2 columns wide */
.fn-shop-card--bundle {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

/* Single item cards: 1 column, portrait */
.fn-shop-card--single {
  grid-column: span 1;
  aspect-ratio: 3 / 4;
}

/* ── Image fills entire card ── */
.fn-card-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.fn-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .35s ease;
}
.fn-shop-card:hover .fn-card-img img { transform: scale(1.06); }

/* ── Sale banner across top ── */
.fn-card-sale-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  background: linear-gradient(90deg, rgba(255,102,196,.95), rgba(204,68,160,.95));
  font-family: 'Rajdhani', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: #fff;
  padding: 4px 10px;
  text-align: center;
  text-transform: uppercase;
}

/* ── Badge: NEW / BUNDLE / banner text ── */
.fn-card-badge {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 5;
  font-family: 'Rajdhani', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: #7c3aed;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.fn-card-badge--bundle { background: #ca8a04; }
.fn-card-badge--new    { background: #16a34a; }

/* ── Bottom gradient overlay ── */
.fn-card-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 52px 10px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  pointer-events: none;
}
.fn-shop-card--bundle .fn-card-bottom {
  padding: 18px 14px 12px;
}

.fn-card-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .025em;
  margin-bottom: 4px;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.fn-shop-card--bundle .fn-card-name {
  font-size: 1.05rem;
  white-space: normal;
}

.fn-card-price {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fn-card-vb {
  font-size: .76rem;
  font-weight: 700;
  color: #6dd3f5;
  letter-spacing: .01em;
}
.fn-card-sale-price {
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  text-decoration: line-through;
}
.fn-card-usd {
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  margin-left: auto;
}

/* ── Leave date label on card ── */
.fn-card-leave {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.62);
  letter-spacing: .02em;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
}
/* RED + bold + subtle pulse when ≤ 24 hours remain. */
.fn-card-leave--urgent {
  color: #ef4444;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(239, 68, 68, .35);
  animation: fnLeavePulse 1.6s ease-in-out infinite;
}
@keyframes fnLeavePulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .65; }
}

/* ── Bundle items strip (small thumbs shown on bundle cards) ──
   In-flow inside .fn-card-bottom so it sits ABOVE the name and
   never overlaps it, regardless of how many lines the name wraps to.
   (Was previously absolute-positioned at bottom:52px which collided
   with 2-line names on wider bundles.) */
.fn-card-items-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  justify-content: flex-start;
  pointer-events: none;
}
.fn-card-item-thumb {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.55);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.fn-card-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Gift button ── */
.fn-card-gift-btn {
  position: absolute;
  bottom: 9px; right: 9px;
  z-index: 6;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: #ff66c4;
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.12);
  transition: background .15s, transform .18s, box-shadow .15s;
  pointer-events: all;
}
.fn-card-gift-btn:hover {
  background: #cc44a0;
  transform: scale(1.18);
  box-shadow: 0 8px 24px rgba(255,102,196,.65), 0 0 0 2px rgba(255,255,255,.22);
}
.fn-shop-card--bundle .fn-card-gift-btn {
  width: 38px; height: 38px;
  font-size: 1rem;
}

/* Keep legacy classes for compatibility */
.gifting-vbucks    { font-size: .92rem; font-weight: 700; color: #4f9cf7; }
.gifting-old-price { font-size: .78rem; color: var(--text3); text-decoration: line-through; }
.gifting-bundle-tag{ font-size: .68rem; background: rgba(var(--primary-rgb),.15); color: var(--primary); padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }

/* How it works section */
.gifting-how-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.gifting-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.gifting-how-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.gifting-how-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
}
.gifting-how-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.gifting-how-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.gifting-how-card p {
  font-size: .83rem;
  color: var(--text2);
  line-height: 1.55;
}
.gifting-how-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(245,166,35,.08);
  border: 1px solid rgba(245,166,35,.25);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.5;
}
.gifting-how-notice span:first-child { flex-shrink: 0; font-size: 1rem; }

/* Loading state */
.gifting-loading {
  text-align: center;
  padding: 40px;
  color: var(--text3);
  font-size: .9rem;
}

/* Admin sub-tabs */
.admin-sub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.admin-sub-tab {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.admin-sub-tab:hover { border-color: var(--primary); color: var(--primary); }
.admin-sub-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.gifting-admin-section { display: block; }
.gifting-admin-accounts-grid { display: flex; flex-direction: column; gap: 10px; }

/* Credits table */
.gifting-credits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.gifting-credits-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text3);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gifting-credits-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text);
}
.gifting-credits-table tr:hover td { background: var(--surface); }

@media (max-width: 768px) {
  .gifting-shop-layout { flex-direction: column; }
  .gifting-category-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: static;
    padding-bottom: 4px;
    gap: 6px;
  }
  .gifting-cat-btn { flex-shrink: 0; width: auto; }
}
@media (max-width: 640px) {
  .gifting-utility-bar  { padding: 16px 16px 0; }
  .gifting-pricing-section { padding: 32px 16px; }
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE GIFTING POLISH (2026-05-16)
   The old UI on phones had three jank sources:
     1. Chunky pink horizontal scrollbar under the category pills
     2. Themed section's -18px bleed margins overflowed the viewport
        and triggered horizontal page scroll
     3. No edge cue that the category strip was scrollable; users had
        no idea they could swipe to find Outfit/Pickaxe/Emote/etc.
   This block makes the gifting page feel native on mobile:
     - Sticky category bar (always reachable while browsing)
     - Hidden scrollbar but snap-scroll for crisp pill positioning
     - Soft edge fades on the strip to teach "swipe to see more"
     - Smaller themed-section bleed so cards don't push the page wide
     - Reduced hero aspect-ratio so the first tile doesn't eat the
       entire fold; users can see the section underneath immediately.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Sticky category strip — always reachable while scrolling cards */
  .gifting-category-sidebar {
    position: sticky;
    top: 56px;                  /* clears the fixed nav */
    z-index: 20;
    background: linear-gradient(180deg, var(--bg, #0d0e1e) 70%, transparent 100%);
    padding: 10px 0 14px;
    margin: 0 -16px 12px;       /* full-bleed on mobile to match cards */
    padding-left: 16px;
    padding-right: 16px;
    /* Edge fade — hints that the rail scrolls horizontally */
    mask-image: linear-gradient(90deg,
      transparent 0,
      #000 16px,
      #000 calc(100% - 24px),
      transparent 100%);
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;       /* hide thin scrollbar on mobile */
  }
  .gifting-category-sidebar::-webkit-scrollbar { display: none; }
  .gifting-cat-btn { scroll-snap-align: start; }

  /* Themed section: keep the colored frame but tighter bleed so the
     page doesn't horizontally scroll on narrow phones */
  .fn-shop-section--themed {
    margin: 0 -10px 6px;
    padding: 18px 10px 22px;
    border-radius: 10px;
  }

  /* Section heading sits comfortably without the spacer-out look */
  .fn-shop-section-heading {
    margin: 0 0 10px;
    font-size: 1.05rem !important;
  }
}

/* True phone-sized — two-column cards, lighter hero so the first
   tile doesn't dominate the entire viewport */
@media (max-width: 580px) {
  .fn-shop-card--hero   { aspect-ratio: 4/3; }
  .fn-shop-card--bundle { aspect-ratio: 4/3; }
  .fn-shop-card--single { aspect-ratio: 4/5; }
  .fn-card-name        { font-size: .88rem; }
  .fn-card-vb          { font-size: .82rem; }
  .fn-card-leave       { font-size: .68rem; }
  .fn-shop-section { padding: 14px 0 18px; }
}

/* Smooth, momentum-style page scrolling — feels native on iOS/Android */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Item shop responsive grid ── */
@media (max-width: 860px) {
  .fn-shop-section-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .fn-shop-card--hero   { grid-column: span 4; aspect-ratio: 16/7; }
  .fn-shop-card--bundle { grid-column: span 2; }
  .fn-shop-card--single { grid-column: span 1; }
}
@media (max-width: 580px) {
  .fn-shop-section-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .fn-shop-card--hero   { grid-column: span 2; aspect-ratio: 3/2; }
  .fn-shop-card--bundle { grid-column: span 2; aspect-ratio: 3/2; }
  .fn-shop-card--single { grid-column: span 1; }
  .fn-shop-card--hero .fn-card-name { font-size: 1rem; }
  .fn-shop-section-heading { font-size: 1.1rem; }
}

/* ── Overlay: stack on mobile ──
   Updated for the fullscreen page conversion: width is already 100vw and
   border-radius is 0; only override the column direction + image height. */
@media (max-width: 860px) {
  .fn-item-overlay-inner {
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    overflow-y: visible;
  }
  .fn-item-left {
    width: 100%;
    min-height: 320px;
  }
  .fn-item-left .fn-item-display { padding: 18px; min-height: 280px; }
  .fn-item-left .fn-item-img-wrap { height: 280px; max-width: 100%; min-height: 0; }
  .fn-item-right {
    padding: 28px 20px 32px;
    min-height: auto;
  }
  .fn-item-right .fn-item-name { font-size: 1.5rem; }
}

/* ══ GIFTING HERO ══ */
.gifting-hero {
  background: url('homepagebg.png') center center / cover no-repeat;
  border-bottom: 1px solid var(--border);
  padding: 80px 0 60px;
  overflow: hidden;
  position: relative;
}
.gifting-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(8,0,16,.92) 0%,
    rgba(8,0,16,.75) 50%,
    rgba(8,0,16,.88) 100%),
    radial-gradient(ellipse 60% 60% at 30% 50%, rgba(255,102,196,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 70% 60%, rgba(124,58,237,.15) 0%, transparent 70%);
  pointer-events: none;
}
.gifting-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.gifting-hero-text { flex: 1; min-width: 0; }
.gifting-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(255,102,196,.12);
  border: 1px solid rgba(255,102,196,.3);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.gifting-hero-h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--text);
}
.gifting-hero-gradient {
  background: linear-gradient(135deg, #f472b6, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gifting-hero-sub {
  font-size: 1.05rem;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 480px;
}
.gifting-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.gifting-trust-chip {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 4px 12px;
}
/* Hero preview card */
.gifting-hero-card {
  flex-shrink: 0;
  width: 280px;
}
@media (max-width: 768px) { .gifting-hero-card { display: none; } .gifting-hero-inner { flex-direction: column; text-align: center; } .gifting-trust-row { justify-content: center; } .gifting-hero-sub { max-width: 100%; } }
.gifting-preview-card {
  background: var(--surface);
  border: 1px solid var(--border-glow);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 40px rgba(255,102,196,.15);
}
.gifting-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}
.gifting-preview-live {
  font-size: .72rem;
  color: #3fc45f;
  font-weight: 700;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.gifting-preview-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.gifting-preview-step {
  font-size: .82rem;
  color: var(--text3);
  padding: 6px 10px;
  border-radius: 6px;
}
.gifting-preview-step.done { color: #3fc45f; }
.gifting-preview-step.active { color: var(--cyan); background: rgba(255,102,196,.1); font-weight: 600; }
.gifting-preview-bar-wrap {
  height: 6px;
  background: var(--bg2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.gifting-preview-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  border-radius: 3px;
  transition: width .6s ease;
}
.gifting-preview-pct { font-size: .75rem; color: var(--text3); text-align: right; }

/* ══ HOW IT WORKS — updated ══ */
.gifting-how-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255,102,196,.2);
  line-height: 1;
  margin-bottom: 8px;
}

/* ══ ACCOUNTS SECTION ══ */
.gifting-accounts-section { padding-top: 60px; }
.gifting-accounts-login-gate {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
  max-width: 420px;
  margin: 0 auto;
}

/* .gifting-shop-usd-tag removed — now integrated in .gsc-overlay */
.gifting-shop-img { position: relative; }

/* ══ GIFT MODAL — payment options ══ */
.gd-pay-options { display: flex; flex-direction: column; gap: 0; }
.gd-pay-option { padding: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; }
.gd-pay-option-label { font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.gd-pay-option-sub { font-size: .8rem; color: var(--text3); min-height: 18px; }
.gd-pay-divider { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.gd-pay-divider::before,.gd-pay-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.gd-pay-divider span { font-size:.78rem; color:var(--text3); flex-shrink:0; }

/* ══ ORDER HISTORY — DISCORD NOTICE + FULFILLED ══ */
.order-discord-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(88,101,242,.08);
  border: 1px solid rgba(88,101,242,.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: .8rem;
  color: var(--text2);
}
.order-fulfilled {
  border-color: rgba(16,185,129,.3) !important;
  background: rgba(16,185,129,.03);
}
.status-completed { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); }

/* ══ CREDIT PACKAGES SECTION ══ */
.gift-credits-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(192,38,211,.04) 0%, transparent 100%);
}
.gift-credit-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.gift-credit-pkg {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gift-credit-pkg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pkg-color, var(--primary));
}
.gift-credit-pkg:hover {
  transform: translateY(-6px);
  border-color: var(--pkg-color, var(--primary));
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.gift-credit-pkg-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gift-credit-pkg-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.gift-credit-pkg-rarity {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gift-credit-pkg-vb {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-top: 4px;
}
.gift-credit-pkg-label {
  font-size: .78rem;
  color: var(--text3);
  margin-bottom: 4px;
}
.gift-credit-pkg-owned {
  font-size: .75rem;
  color: #3fc45f;
  font-weight: 600;
}
.gift-credit-pkg-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0 8px;
}
.gift-credit-pkg-btn {
  font-size: .82rem;
  padding: 9px 14px;
  border-radius: 8px;
  width: 100%;
}
.gift-credit-pkg-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}
@media (max-width: 640px) {
  .gift-credit-packages { grid-template-columns: repeat(2, 1fr); }
}

/* ══ CURRENCY PICKER ══ */
.currency-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255,102,196,.12);
  border: 1.5px solid rgba(255,102,196,.4);
  border-radius: 20px;
  color: var(--primary);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .04em;
}
.currency-picker-btn:hover {
  border-color: var(--primary);
  background: rgba(255,102,196,.22);
  color: #fff;
}
#currencyIndicator { color: inherit; }
.currency-caret { font-size: .6rem; opacity: .7; }

.currency-picker-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border-glow);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  z-index: 600;
}
.currency-picker-panel.open { display: block; }
.currency-picker-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
}
.currency-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.currency-opt {
  padding: 6px 4px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-align: center;
}
.currency-opt:hover { background: rgba(255,102,196,.15); border-color: var(--primary); color: var(--text); }
.currency-opt.active { background: rgba(255,102,196,.2); border-color: var(--primary); color: var(--primary); }

@media (max-width: 768px) {
  .currency-picker-btn { display: none; }
}

/* ══ NAV CREDIT PILL (Gifting page only) — sits at the very top-right of the navbar ══ */
/* ── ADMIN nav button (only visible when ribbetshop@gmail.com is logged in) ─ */
.nav-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, rgba(239, 68, 68, .9), rgba(220, 38, 38, .9));
  border: 1px solid rgba(239, 68, 68, .55);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(239, 68, 68, .35);
}
.nav-admin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(239, 68, 68, .55);
  filter: brightness(1.06);
}
.nav-admin-btn svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .nav-admin-btn span { display: none; }
  .nav-admin-btn { padding: 7px 9px; }
}

.nav-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: linear-gradient(135deg, rgba(120, 220, 140, .22), rgba(80, 200, 120, .14));
  border: 1.5px solid rgba(120, 220, 140, .55);
  border-radius: 20px;
  color: #8ee3a4;
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .03em;
  line-height: 1;
  box-shadow: 0 0 14px rgba(120, 220, 140, .18);
}
@media (min-width: 901px) {
  /* On desktop, sit flush against the right edge */
  .nav-credit-pill { margin-left: 4px; }
}
.nav-credit-pill:hover {
  border-color: #8ee3a4;
  background: rgba(120, 220, 140, .26);
  color: #fff;
  transform: translateY(-1px);
}
.nav-credit-pill .nav-credit-icon { font-size: .95rem; opacity: .9; }
.nav-credit-pill .nav-credit-unit {
  font-size: .68rem;
  font-weight: 600;
  opacity: .75;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: inherit;
}
@media (max-width: 900px) {
  .nav-credit-pill .nav-credit-unit { display: none; }
}
@media (max-width: 768px) {
  .nav-credit-pill { padding: 5px 10px; font-size: .85rem; }
}

/* ══ ACCOUNT DROPDOWN — opens from the top-right user button ══ */
.account-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;          /* extra breathing room from USD pill */
}
/* Override .nav-icon-btn's fixed 38×38 sizing so the pill can grow to fit
   the avatar + username + caret. justify-content:flex-start keeps the
   children left-aligned instead of centered. */
.nav-icon-btn.account-btn {
  width: auto;
  min-width: 0;
  height: 38px;
  justify-content: flex-start;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(192, 38, 211, .22);
  color: var(--text);
}
.nav-icon-btn.account-btn:hover {
  background: rgba(192, 38, 211, .12);
  border-color: rgba(192, 38, 211, .55);
  color: #fff;
}
.account-btn .account-caret {
  font-size: .58rem;
  opacity: .55;
  margin-left: 4px;
  transition: transform .18s ease, opacity .18s ease;
}
@media (max-width: 768px) {
  /* On mobile, avatar-only — clicking opens the drawer (handled in JS).
     The dropdown panel is suppressed entirely so it can never appear. */
  #navUsername { display: none !important; }
  .account-btn .account-caret { display: none !important; }
  .nav-icon-btn.account-btn {
    padding: 4px !important;
    width: 42px !important;
    height: 42px !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
  .account-menu-panel { display: none !important; }   /* never show on mobile */
  .account-menu-wrap { margin-left: 4px; }
}
.account-btn[aria-expanded="true"] .account-caret { transform: rotate(180deg); opacity: .9; }
.account-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 290px;
  background: linear-gradient(180deg, #15182b 0%, #11142a 100%);
  border: 1px solid rgba(192, 38, 211, .18);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  z-index: 800;
  animation: amh-fade .16s ease-out;
}
@keyframes amh-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-menu-panel.open { display: block; }

.account-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(192, 38, 211, .08), rgba(124, 58, 237, .04));
  margin-bottom: 6px;
}
.amh-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c026d3, #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.amh-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amh-info { flex: 1 1 auto; min-width: 0; }
.amh-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.amh-email {
  font-size: .72rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.account-menu-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 6px 4px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.amh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 8px;
}
.amh-stat-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  font-weight: 600;
}
.amh-stat-val {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.amh-stat-val.live-pulse {
  animation: amh-pulse .55s ease-out;
}
@keyframes amh-pulse {
  0%   { color: #4ade80; transform: scale(1.06); }
  100% { color: var(--text); transform: scale(1); }
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text2);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.account-menu-item:hover {
  background: rgba(192, 38, 211, .1);
  color: var(--text);
}
.account-menu-item .ami-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  opacity: .7;
  flex-shrink: 0;
  color: var(--text2);
  transition: opacity .14s ease, color .14s ease;
}
.account-menu-item .ami-icon svg { display: block; }
.account-menu-item:hover .ami-icon { opacity: 1; color: var(--text); }
.account-menu-logout .ami-icon { color: #f87171; opacity: .8; }
.account-menu-logout:hover .ami-icon { color: #fca5a5; opacity: 1; }
.account-menu-item .ami-badge {
  margin-left: auto;
  background: rgba(192, 38, 211, .22);
  color: #f0abfc;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  min-width: 22px;
  text-align: center;
}
.account-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, .05);
  margin: 6px 4px;
}
.account-menu-logout {
  color: #f87171;
}
.account-menu-logout:hover {
  background: rgba(239, 68, 68, .12);
  color: #fca5a5;
}

@media (max-width: 480px) {
  .account-menu-panel { width: calc(100vw - 24px); right: -8px; max-height: 80vh; overflow-y: auto; }
}

/* ══ MOBILE DRAWER — account card (logged-in state) ══ */
.drawer-account-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(192, 38, 211, .08), rgba(124, 58, 237, .03));
  border: 1px solid rgba(192, 38, 211, .22);
  border-radius: 14px;
}
.drawer-account-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.drawer-account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c026d3, #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.drawer-account-meta { min-width: 0; flex: 1 1 auto; }
.drawer-account-name {
  font-size: .98rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.drawer-account-email {
  font-size: .75rem;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.drawer-account-stats {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .25);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .04);
}
.drawer-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.drawer-stat span {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  font-weight: 600;
}
.drawer-stat strong {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
}
.drawer-account-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-account-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text2);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  min-height: 44px;
}
.drawer-account-link:hover,
.drawer-account-link:active {
  background: rgba(192, 38, 211, .12);
  color: var(--text);
}
.drawer-account-link svg { opacity: .7; flex-shrink: 0; }
.drawer-account-link:hover svg { opacity: 1; }
.drawer-account-link.drawer-logout {
  color: #f87171;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding-top: 14px;
  border-radius: 0 0 10px 10px;
}
.drawer-account-link.drawer-logout svg { color: #f87171; }
.drawer-account-link.drawer-logout:hover { background: rgba(239, 68, 68, .1); color: #fca5a5; }

/* ══ ADD BOT MODAL — Fortnite icon preview row ══ */
.add-bot-preview-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 14px 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(192, 38, 211, .04));
  border: 1px solid rgba(124, 58, 237, .25);
  border-radius: 14px;
  flex-wrap: wrap;
  min-height: 76px;
}
.add-bot-preview-row .abp-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .3);
  animation: abp-pop .35s ease-out backwards;
  border: 1.5px solid rgba(192, 38, 211, .35);
}
.add-bot-preview-row .abp-avatar:nth-child(1) { animation-delay: .00s; }
.add-bot-preview-row .abp-avatar:nth-child(2) { animation-delay: .06s; }
.add-bot-preview-row .abp-avatar:nth-child(3) { animation-delay: .12s; transform: scale(1.08); z-index: 2; box-shadow: 0 6px 20px rgba(192, 38, 211, .55); }
.add-bot-preview-row .abp-avatar:nth-child(4) { animation-delay: .18s; }
.add-bot-preview-row .abp-avatar:nth-child(5) { animation-delay: .24s; }
.add-bot-preview-row .abp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.add-bot-preview-row .abp-avatar.abp-new::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(192, 38, 211, .85), rgba(124, 58, 237, .85));
  border-radius: inherit;
}
@keyframes abp-pop {
  from { opacity: 0; transform: translateY(8px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.add-bot-preview-row .add-bot-preview-loading {
  font-size: .85rem;
  color: var(--text3);
  letter-spacing: .02em;
}
@media (max-width: 480px) {
  .add-bot-preview-row .abp-avatar { width: 44px; height: 44px; }
}

/* ══ WIDE FRIEND STATUS (expanded — full-width row with 4 account blocks) ══ */
.gifting-utility-bar-wide {
  display: block;
  width: 100%;
}
.gifting-friend-box-wide {
  flex: 1 1 100%;
  width: 100%;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(30, 42, 60, .7), rgba(20, 30, 48, .5));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}
.gifting-friend-box-wide .gifting-credit-label {
  font-size: .78rem;
  letter-spacing: .12em;
  color: #8ee3a4;
  margin-bottom: 14px;
}
.gifting-friend-box-wide .gifting-credit-row {
  display: flex;
  gap: 10px;
  max-width: 560px;
}
.gifting-friend-box-wide .gifting-credit-row input {
  flex: 1 1 auto;
}
.gifting-friend-box-wide .gifting-friend-result {
  margin-top: 18px;
}
.gifting-friend-box-wide .gifting-friend-rows {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.gifting-friend-box-wide .gifting-friend-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  min-height: 110px;
  transition: var(--transition);
}
.gifting-friend-box-wide .gifting-friend-row:hover {
  border-color: rgba(120, 220, 140, .4);
  transform: translateY(-2px);
}
.gifting-friend-box-wide .gifting-friend-row .gifting-account-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
}
.gifting-friend-box-wide .gifting-friend-row .gifting-status-badge {
  align-self: center;
  font-size: .74rem;
  padding: 6px 12px;
  line-height: 1.3;
  white-space: normal;
}
@media (max-width: 1100px) {
  .gifting-friend-box-wide .gifting-friend-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gifting-friend-box-wide { padding: 16px; }
  .gifting-friend-box-wide .gifting-friend-rows { grid-template-columns: 1fr; }
}

/* ══ SHOP HEADER ══ */
.gifting-shop-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }


/* ══════════════════════════════════════════════════════════════
   FORTNITE ITEM DETAIL OVERLAY  (fortnite.com item shop style)
══════════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
/* ── ITEM OVERLAY ─────────────────────────────────────────────────────
   Display:none when closed → fully removed from layout. No browser paint of
   inner content until .fn-overlay-open is added. This eliminates the "modal
   appears in bottom-right and slides to center" glitch where any in-flight
   browser layout pass would briefly paint the panel at its pre-style position.
*/
/* Was a centred modal with backdrop blur; converted to a true full-page
   surface that mirrors vbs.ar's per-item product page. No backdrop dim,
   no popup chrome — the overlay IS the page. The body's underlying nav
   stays visible at the top so the customer feels like they navigated
   to a route, not opened a popup. */
.fn-item-overlay {
  display: none;             /* hidden = NOT in layout, NOT painted */
  position: fixed;
  inset: 0;
  z-index: 9998;
  flex-direction: column;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.fn-item-overlay.fn-overlay-open {
  display: flex;
  pointer-events: all;
  animation: fnOverlayBgIn .14s ease forwards;
}
/* Lock body scroll while the overlay owns the viewport — prevents a
   double-scrollbar when the inner content is taller than 100vh. */
body:has(.fn-item-overlay.fn-overlay-open) {
  overflow: hidden;
}
@keyframes fnOverlayBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Inner is now the page body — full viewport, two-column layout,
   no border / shadow / radius. Stack to single column on phones. */
.fn-item-overlay-inner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: row;
  border-radius: 0;
  overflow: visible;
  border: none;
  box-shadow: none;
  background: var(--bg);
}

/* ── LEFT column: rarity-tinted image panel ──
   Was a fixed 480px column inside a centred modal. Now claims half the
   viewport so the page is balanced 50/50 like vbs.ar's product page. */
.fn-item-left {
  position: relative;
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  /* background set dynamically by JS via rarity colour */
  background: linear-gradient(160deg, #c8860a55 0%, #c8860a22 45%, #06060f 100%);
}
.fn-item-left .fn-item-display {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  min-height: 460px;
}
.fn-item-left .fn-item-img-wrap {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 420px;
}
.fn-item-left .fn-item-img {
  object-fit: contain;
  object-position: center center;
  width: 100%;
  height: 100%;
}
.fn-item-left-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 10px 16px 16px;
  text-align: center;
}

/* ── RIGHT column: info panel ──
   Now spans the right half of the page. Auto y-overflow stays in case
   the content list is long (large bundles list lots of included items). */
.fn-item-right {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  padding: 60px max(36px, calc((100vw - 1280px) / 4)) 36px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  min-height: 100vh;
}
.fn-item-right .fn-item-info {
  text-align: left;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Breadcrumb (Home / Item Shop / <item>) ── */
.fn-item-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: .78rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}
.fn-item-crumbs .fn-crumb-link {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .15s;
  cursor: pointer;
}
.fn-item-crumbs .fn-crumb-link:hover { color: var(--primary); }
.fn-item-crumbs .fn-crumb-sep       { color: rgba(255,255,255,.25); }
.fn-item-crumbs .fn-crumb-current {
  color: rgba(255,255,255,.85);
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .fn-item-crumbs { margin-bottom: 14px; }
  .fn-item-crumbs .fn-crumb-current { max-width: 22ch; }
}
.fn-item-right .fn-item-type {
  margin-bottom: 4px;
  font-size: .7rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.fn-item-right .fn-item-name {
  font-size: 2.2rem;
  margin-bottom: 12px;
  text-align: left;
  line-height: 1.1;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
}
.fn-item-right .fn-item-price-row {
  justify-content: flex-start;
  margin-bottom: 16px;
  gap: 10px;
}
.fn-item-right .fn-item-divider {
  margin-bottom: 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--fn-rc, #4f9cf7) 0%, transparent 80%);
  border: none;
  opacity: .5;
}
.fn-item-right .fn-item-get-btn {
  margin-top: auto;
  padding: 16px 24px;
  font-size: 1rem;
}
.fn-item-hint {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  text-align: center;
  margin-top: 10px;
  line-height: 1.4;
}

/* USD price as orange pill in detail overlay */
.fn-item-usd-pill {
  font-size: .92rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ff66c4 0%, #7c3aed 100%);
  color: #fff;
  padding: 4px 14px;
  border-radius: 6px;
  letter-spacing: .02em;
}

/* ── Rarity glow background ── */
.fn-item-overlay-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Close button (lives in right panel) ── */
.fn-item-overlay-close {
  position: fixed;       /* fixed to viewport, not the inner panel */
  top: 18px;
  right: 22px;
  z-index: 9999;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.fn-item-overlay-close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── Item image section ── */
.fn-item-display {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 8px;
  padding-bottom: 0;
  height: 300px;
}
.fn-item-img-wrap {
  position: relative;
  width: 280px;
  height: 280px;
}
/* Override in two-col layout handled by .fn-item-left .fn-item-display */
.fn-item-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* contain so full character render is visible */
  object-position: center bottom;
  display: block;
  border-radius: 4px;
  animation: fnImgFloat 3.2s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.fn-item-img-shadow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 18px;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  filter: blur(8px);
  z-index: 1;
  animation: fnImgShadow 3.2s ease-in-out infinite;
}

/* Floating animation */
@keyframes fnImgFloat {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%       { transform: translateY(-14px) scale(1.025); }
}
@keyframes fnImgShadow {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: .55; }
  50%       { transform: translateX(-50%) scale(.72); opacity: .3; }
}

/* Video preview (emotes/dances) */
.fn-item-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  position: relative;
  z-index: 2;
}
/* Video mode — no float animation, no shadow */
.fn-item-img-wrap.fn-video-mode { animation: none !important; }
.fn-item-img-wrap.fn-video-mode::before { display: none; }

/* "▶ PREVIEW" badge */
.fn-item-preview-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

/* Shine sweep over item */
.fn-item-img-wrap::before {
  content: '';
  position: absolute;
  inset: -10% auto -10% -140%;
  width: 50%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.25) 50%, transparent 80%);
  transform: skewX(-12deg);
  animation: fnOverlayShine 4s ease-in-out 1.5s infinite;
  pointer-events: none;
  z-index: 5;
}
@keyframes fnOverlayShine {
  0%, 70%, 100% { left: -140%; opacity: 0; }
  72%  { opacity: 1; }
  88%  { left: 160%; opacity: 1; }
  90%  { opacity: 0; }
}

/* ── Rarity divider ── */
.fn-item-divider {
  height: 3px;
  position: relative;
  z-index: 2;
  margin: 0;
  background: linear-gradient(90deg, transparent 0%, var(--fn-rc, #ff66c4) 30%, var(--fn-rc, #ff66c4) 70%, transparent 100%);
  opacity: .9;
  box-shadow: 0 0 12px var(--fn-rc, #ff66c4), 0 0 28px var(--fn-rc, #ff66c4);
}

/* ── Info panel ── */
.fn-item-info {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 18px 24px 0;
}
.fn-item-rarity-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 6px;
  opacity: .9;
}
.fn-item-name {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
  margin-bottom: 5px;
}
.fn-item-type {
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.fn-item-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 20px;
}
.fn-item-vbucks-icon { font-size: .95rem; color: #4f9cf7; }
.fn-item-vbucks      { font-size: .95rem; font-weight: 700; color: #4f9cf7; }
.fn-item-price-sep   { color: rgba(255,255,255,.25); }
.fn-item-usd         { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.9); }

/* ── Get item button ── */
.fn-item-get-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  background: linear-gradient(135deg, var(--fn-rc, #ff66c4) 0%, #4f9cf7 100%);
  color: #fff;
  box-shadow: 0 6px 28px rgba(0,0,0,.4), 0 0 20px rgba(124,58,237,.35);
  position: relative;
  overflow: hidden;
}
.fn-item-get-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 60%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .4s ease;
}
.fn-item-get-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,.5), 0 0 32px rgba(124,58,237,.55); }
.fn-item-get-btn:hover::after { transform: translateX(100%); }
.fn-item-get-btn:active { transform: scale(.97); }
.fn-item-get-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ── Eligibility bar (Fortnite username inserter) ─────────────────────
   Redesigned 2026-05-02 — was a tiny pill, now a proper input card with
   a label, hint line, and prominent input field. The card uses indigo
   accents to match Fortnite's UI vibe. */
.fn-eligibility-bar {
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
  text-align: left;
  font-size: .92rem;
}
.fn-elig-ok   { background:rgba(34,197,94,.12);  color:#4ade80; border:1px solid rgba(34,197,94,.30); }
.fn-elig-warn { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.30); }
.fn-elig-info {
  background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(124,58,237,.10) 100%);
  color: #c7d2fe;
  border: 1px solid rgba(99,102,241,.40);
  box-shadow: 0 8px 28px -10px rgba(99,102,241,.40);
}
.fn-eligibility-bar a { color:inherit; font-weight:700; }

#fnInlineUsername {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .03em;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
#fnInlineUsername::placeholder {
  color: rgba(255,255,255,.35);
  font-weight: 500;
  letter-spacing: 0;
}
#fnInlineUsername:hover {
  border-color: rgba(165,180,252,.55);
  background: rgba(0,0,0,.5);
}
#fnInlineUsername:focus {
  border-color: #a5b4fc;
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 3px rgba(165,180,252,.18);
}

/* ── Bundle includes section ──────────────────────────────────────────
   Bumped 2026-05-02 — 72px thumbnails were too small to make out the
   actual outfit / pickaxe / glider art. Now ~110px with bigger labels. */
.fn-item-includes {
  margin: 6px 0 18px;
  text-align: left;
}
.fn-item-includes-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255,255,255,.6);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.fn-item-includes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.fn-include-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: default;
}
.fn-include-thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fn-thumb-bg, linear-gradient(160deg,#1b5fa8 0%,#0c2f60 100%));
  border: 2px solid rgba(255,255,255,.12);
  position: relative;
  flex-shrink: 0;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.fn-include-thumb:hover .fn-include-thumb-img {
  border-color: rgba(255,255,255,.5);
  transform: scale(1.05);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.7);
}
.fn-include-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.fn-include-thumb-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.fn-include-thumb-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 1.2;
}
@media (max-width: 640px) {
  .fn-item-includes-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
  .fn-include-thumb-name  { font-size: .72rem; }
  .fn-include-thumb-label { font-size: .6rem; }
}
.fn-include-fallback {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  font-style: italic;
  padding: 6px 0;
}

/* ── Sparkle particles ── */
.fn-item-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.fn-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: fnSparkFloat var(--sdur, 2s) ease-in-out var(--sdelay, 0s) infinite;
}
@keyframes fnSparkFloat {
  0%        { opacity: 0; transform: translate(0, 0) scale(0); }
  15%       { opacity: 1; }
  75%       { opacity: .7; }
  100%      { opacity: 0; transform: translate(var(--sdx, 0px), var(--sdy, -60px)) scale(var(--ssc, .5)); }
}
/* ── Star-shaped sparks ── */
.fn-spark-star {
  border-radius: 0;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ══════════════════════════════════════════
   GIFTING ANIMATIONS
══════════════════════════════════════════ */

/* ── Scroll-reveal ── */
@keyframes gRevealUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
.g-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.g-reveal.g-visible { opacity: 1; transform: translateY(0); }
.g-reveal-d1 { transition-delay: .08s; }
.g-reveal-d2 { transition-delay: .17s; }
.g-reveal-d3 { transition-delay: .26s; }
.g-reveal-d4 { transition-delay: .35s; }

/* ── Rotating word in hero ── */
.gifting-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.15em;
  position: relative;
}
.gifting-rotating-word {
  display: block;
  background: linear-gradient(135deg, #f472b6, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform .48s cubic-bezier(.4,0,.2,1), opacity .48s;
  transform: translateY(0);
  opacity: 1;
}
.gifting-rotating-word.slide-out {
  transform: translateY(-110%);
  opacity: 0;
}
.gifting-rotating-word.slide-in-prep {
  transform: translateY(110%);
  opacity: 0;
  transition: none;
}

/* ── Floating hero orbs ── */
@keyframes gFloatOrb {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(18px,-28px) scale(1.06); }
  66%     { transform: translate(-14px,16px) scale(.94); }
}
.gifting-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  pointer-events: none;
  animation: gFloatOrb var(--orb-dur, 9s) ease-in-out infinite var(--orb-delay, 0s);
}
.gifting-hero-orb-1 { width: 320px; height: 320px; background: rgba(255,102,196,.25); top: -60px; left: 8%; --orb-dur:10s; --orb-delay:0s; }
.gifting-hero-orb-2 { width: 220px; height: 220px; background: rgba(124,58,237,.2); bottom: -40px; right: 12%; --orb-dur:12s; --orb-delay:-4s; }
.gifting-hero-orb-3 { width: 160px; height: 160px; background: rgba(255,102,196,.15); top: 45%; right: 28%; --orb-dur:8s; --orb-delay:-6s; }

/* ── How-it-works card hover lift ── */
.gifting-how-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gifting-how-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(255,102,196,.22);
  border-color: rgba(255,102,196,.5);
}
.gifting-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.gifting-how-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.gifting-how-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Animated progress bar in preview card ── */
@keyframes gBarPulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,102,196,.4); }
  50%     { box-shadow: 0 0 20px rgba(124,58,237,.7); }
}
.gifting-preview-bar-fill {
  animation: gBarPulse 2s ease-in-out infinite;
}

/* ── FAQ section ── */
.gifting-faq-section {
  padding: 72px 0;
  border-top: 1px solid var(--border);
}
.gifting-faq-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}
.gifting-faq-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.gifting-faq-sub {
  text-align: center;
  color: var(--text2);
  margin-bottom: 40px;
  font-size: .95rem;
}
.gifting-faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s;
}
.gifting-faq-item.open { border-color: rgba(255,102,196,.5); }
.gifting-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  gap: 12px;
  transition: background .2s;
}
.gifting-faq-q:hover { background: var(--surface2); }
.gifting-faq-chevron {
  flex-shrink: 0;
  font-size: .75rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  opacity: .6;
}
.gifting-faq-item.open .gifting-faq-chevron { transform: rotate(180deg); }
.gifting-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
  background: var(--surface2);
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.7;
  padding: 0 20px;
}
.gifting-faq-item.open .gifting-faq-a {
  max-height: 300px;
  padding: 16px 20px;
}

/* ── Shimmer glow on preview card ── */
@keyframes gCardShimmer {
  0%   { box-shadow: 0 8px 40px rgba(255,102,196,.15), 0 0 0 0 rgba(192,38,211,.0); }
  50%  { box-shadow: 0 8px 40px rgba(255,102,196,.25), 0 0 24px 2px rgba(124,58,237,.2); }
  100% { box-shadow: 0 8px 40px rgba(255,102,196,.15), 0 0 0 0 rgba(192,38,211,.0); }
}
.gifting-preview-card {
  animation: gCardShimmer 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   PERFORMANCE OPTIMISATIONS
══════════════════════════════════════════ */

/* GPU-composite only — no layout/paint triggers on hover */
.product-card,
.gifting-shop-card,
.vm-card,
.step-card,
.feature-card {
  will-change: auto; /* only promote on hover */
}
.product-card:hover,
.gifting-shop-card:hover {
  will-change: transform;
}

/* Product images — layout containment handled by aspect-ratio on card */
.product-img-wrap img {
  contain: none;
}

/* Reduce category-tab blur cost — it repaints on scroll */
.cat-tabs-wrap {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Modal overlay — lighter blur, still looks good */
.modal-overlay {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Vouches marquee — hint browser to composite separately */
.vm-row {
  will-change: transform;
}

/* NOTE: 'contain: layout' would break position:fixed overlays — intentionally removed */


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PROFESSIONAL OVERHAUL v1
   — Consolidates and upgrades the responsive styling so the site feels
     purpose-built for phones: bigger tap targets, iOS-friendly inputs,
     a bottom-sheet modal feel, a tighter sticky nav, and a proper hamburger
     drawer with an overlay + swipe affordance.
   — Kept at the END of the file so cascade ordering takes precedence over
     any earlier, less-specific rules.
   ══════════════════════════════════════════════════════════════════════════ */

/* Prevent iOS horizontal bounce + respect notches/home-indicator */
html, body { max-width: 100%; }
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#navbar {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--nav-h) + env(safe-area-inset-top));
}

/* Never let an input zoom iOS Safari — font-size < 16px is the trigger. */
@media (max-width: 860px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Drawer overlay: make sure it actually works on phones + blur hint */
.drawer-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .25s ease;
  opacity: 0;
}
.drawer-overlay.visible {
  opacity: 1;
}

/* Lock body scroll when the drawer is open (class toggled in app.js) */
body.drawer-open {
  overflow: hidden;
}

/* ══════════════ ≤ 960px : phablet + small tablet ══════════════ */
@media (max-width: 960px) {
  :root { --nav-h: 72px; }
  .logo-img { height: 56px; }
  .nav-inner { padding: 0 16px; gap: 10px; }
  .nav-actions { gap: 6px; }

  /* Currency picker pill is noisy on small screens — defer to drawer */
  #currencyPickerBtn { display: none !important; }

  /* Keep cart + search icons visible, but give them breathing room */
  .nav-icon-btn { width: 42px; height: 42px; }

  /* Credit pill still useful but slimmer */
  .nav-credit-pill { padding: 6px 10px; font-size: .82rem; }
  .nav-credit-pill .nav-credit-unit { display: none; }
}

/* ══════════════ ≤ 768px : typical phone landscape / tablet portrait ══════════════ */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .logo-img { height: 48px; }
  .nav-inner { padding: 0 12px; }

  .section { padding: 48px 16px; }
  .page-banner { padding: 32px 16px 24px; }

  /* Modal overlay — bottom-sheet feel */
  .modal {
    position: fixed;
    top: auto !important;
    bottom: 0;
    left: 0 !important;
    right: 0;
    transform: translateY(100%) !important;
    width: 100% !important;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    opacity: 1;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
  }
  .modal.open {
    transform: translateY(0) !important;
    opacity: 1;
  }
  .modal::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    margin: -6px auto 14px;
  }
  .modal-close {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
  .modal-logo img { height: 56px; }
  .modal-title { font-size: 1.4rem; }
  .product-modal-img { height: 200px; }
  .product-modal-actions { flex-direction: column; gap: 10px; }
  .product-modal-actions > * { width: 100%; }

  /* Drawer — use most of the screen width, sensible minimum */
  .mobile-drawer {
    width: min(88vw, 340px);
    padding-top: env(safe-area-inset-top);
  }
  .drawer-inner { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .drawer-links button {
    padding: 14px 16px;
    font-size: 1.02rem;
    min-height: 48px;
  }
  .drawer-close { width: 40px; height: 40px; font-size: 1.3rem; }

  /* Hero */
  .hero-fullscreen { min-height: auto; height: auto; padding: calc(var(--nav-h) + 32px) 16px 56px; }
  .hero-content { padding: 0; }
  .hero-logo { height: 104px; max-width: 240px; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); margin-bottom: 8px; }
  .hero-sub { font-size: .88rem; margin-bottom: 14px; padding: 0 8px; }
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 10px;
    width: 100%;
    border-radius: 12px;
  }
  .hero-divider { display: none; }
  .hero-stat {
    padding: 10px 8px;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
    text-align: center;
  }
  .stat-num { font-size: 1.15rem; }
  .stat-label { font-size: .68rem; }
  .hero-btns { flex-direction: column; width: 100%; gap: 10px; }
  .hero-btns .btn-primary,
  .hero-btns .btn-ghost,
  .hero-btns .btn-outline { width: 100%; justify-content: center; }

  /* Home sections */
  .home-section { padding: 56px 16px; }
  .steps-grid { grid-template-columns: 1fr; gap: 16px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .feature-card { padding: 20px 18px; }
  .step-card { padding: 24px 22px; }

  /* Shop / product grid */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .product-card { aspect-ratio: 3/4; }
  .product-name { font-size: .85rem; }
  .product-note { font-size: .7rem; }
  .product-price { font-size: 1.2rem; }
  .product-add-btn { width: 32px; height: 32px; font-size: 1rem; }

  /* Cat tabs — bigger tap zone, sticky with correct nav offset */
  .cat-tabs-wrap { padding: 0 12px; }
  .cat-tab { padding: 9px 16px; font-size: .82rem; min-height: 40px; display: inline-flex; align-items: center; }

  /* Gifting */
  .gifting-hero { padding: 28px 18px; }
  .gifting-hero-h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
  .gifting-hero-sub { font-size: .9rem; }
  .gifting-accounts-list { grid-template-columns: 1fr !important; gap: 10px; }
  .gifting-friend-rows { gap: 10px; }
  .gifting-friend-row { flex-wrap: wrap; padding: 10px 12px; }

  /* Cart */
  .cart-layout { grid-template-columns: 1fr; gap: 20px; }
  .cart-summary { position: static; padding: 20px; }
  .cart-item { padding: 12px; gap: 12px; }
  .cart-item-img { width: 58px; height: 58px; }
  .cart-item-name { font-size: .88rem; }
  .cart-item-price { font-size: 1rem; }

  /* Account */
  .account-layout { grid-template-columns: 1fr; gap: 16px; }
  .account-info-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; }

  /* Admin — collapse sidebar into top tabs */
  .admin-layout { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    gap: 6px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-brand { display: none; }
  .admin-nav { flex-direction: row; flex-shrink: 0; gap: 6px; flex-wrap: nowrap; }
  .admin-nav-btn { white-space: nowrap; font-size: .82rem; padding: 8px 12px; min-height: 40px; }
  .admin-content { padding: 20px 14px; max-height: none; }
  .admin-tab-title { font-size: 1.3rem; }

  /* Table horizontal scroll wrapper */
  .admin-table-wrap,
  .rshop-table,
  .admin-table { font-size: .8rem; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 28px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .footer-bottom { flex-direction: column; padding: 16px 20px; gap: 10px; text-align: center; }

  /* Live chat widget — full width with safe margin */
  .live-chat-widget {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 80px;
    max-height: 70vh;
  }
  .chat-trigger-btn,
  .chat-social-fabs { right: 14px; }
  .chat-trigger-btn { bottom: 14px; width: 54px; height: 54px; }
  .chat-social-fabs { bottom: 78px; }
}

/* ══════════════ ≤ 640px : the majority of phones ══════════════ */
@media (max-width: 640px) {
  .section { padding: 40px 14px; }

  /* Nav: hide the credit pill from header, it now lives in the drawer */
  .nav-credit-pill { display: none !important; }

  /* Tap targets — every button should feel finger-friendly */
  .btn-primary, .btn-outline, .btn-ghost {
    min-height: 46px;
    padding: 12px 22px;
    font-size: .92rem;
  }
  .btn-lg { min-height: 52px; padding: 14px 26px; font-size: 1rem; }

  /* Search bar full-width sheet */
  .search-bar { padding: 10px 12px; }
  .search-inner { padding: 10px 14px; }
  .search-inner input { font-size: 16px; }

  /* Product grid — very compact on narrow phones */
  .product-grid { gap: 10px; }

  /* Gameflip vouches — single column */
  .vouch-gameflip-scroll-wrap { grid-template-columns: 1fr; height: 360px; }
  .gf-scroll-up { display: none; }
  .vm-card { width: 220px; height: 155px; }

  /* Modal form fields */
  .form-group input,
  .form-group select,
  .form-group textarea,
  .admin-search-bar input,
  .reply-form input,
  .chat-input-row input,
  .chat-pre-fields input {
    padding: 13px 14px;
    font-size: 16px !important;
    min-height: 48px;
  }

  /* Footer — stack columns entirely on the smallest phones */
  .footer-links { grid-template-columns: 1fr 1fr; gap: 14px; }
  .footer-col h4 { font-size: .74rem; }
  .footer-col button, .footer-col a { font-size: .85rem; padding: 4px 0; }

  /* Hero category chips - allow wrapping */
  .hero-cats { gap: 8px; }
  .hero-cat-btn { padding: 8px 14px; font-size: .78rem; }

  /* Checkout + crypto pickers */
  .crypto-picker { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .crypto-option { padding: 12px 6px; }
}

/* ══════════════ ≤ 480px : small phones (iPhone SE / Mini) ══════════════ */
@media (max-width: 480px) {
  :root { --nav-h: 60px; }
  .logo-img { height: 44px; }
  .nav-inner { padding: 0 10px; gap: 6px; }
  .nav-actions { gap: 4px; }
  .nav-icon-btn { width: 40px; height: 40px; }

  .hero-logo { height: 88px; max-width: 200px; }
  .hero-title { font-size: clamp(1.6rem, 8.5vw, 2.2rem); }
  .hero-sub { font-size: .84rem; }
  .stat-num { font-size: 1.05rem; }

  .features-grid { grid-template-columns: 1fr; }

  /* Modal title + sub a little tighter */
  .modal { padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .modal-title { font-size: 1.25rem; }
  .modal-sub { font-size: .8rem; margin-bottom: 18px; }
  .modal-logo img { height: 48px; }

  .product-modal-img { height: 170px; }
  .product-modal-name { font-size: 1.3rem; }
  .product-modal-price { font-size: 1.6rem; }

  /* Footer one-column */
  .footer-links { grid-template-columns: 1fr; gap: 20px; }

  /* Cart summary sticks naturally */
  .cart-summary { padding: 18px 16px; }

  /* Tables: allow horizontal scroll without breaking nav */
  .admin-table,
  .rshop-table,
  .shieda-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Account rows tighter */
  .order-history-item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .order-date { margin-left: 0; }
}

/* ══════════════ ≤ 380px : iPhone SE 1 / galaxy fold outer ══════════════ */
@media (max-width: 380px) {
  .logo-img { height: 38px; }
  .nav-actions { gap: 2px; }
  .nav-icon-btn { width: 36px; height: 36px; }

  .hero-logo { height: 76px; max-width: 170px; }
  .hero-title { font-size: 1.55rem; }
  .hero-stats { padding: 8px; }
  .stat-num { font-size: .95rem; }
  .stat-label { font-size: .62rem; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-name { font-size: .78rem; }
  .product-price { font-size: 1.05rem; }
  .product-add-btn { width: 28px; height: 28px; font-size: .9rem; }

  .section { padding: 36px 12px; }
  .home-section { padding: 44px 12px; }

  .modal-title { font-size: 1.15rem; }
  .checkout-total { font-size: 1.1rem; padding: 14px; }
}

/* ══════════════ DRAWER: ALWAYS-VISIBLE BOTTOM CTA ══════════════ */
/* Keep auth actions visible without scrolling when drawer is tall */
.mobile-drawer .drawer-auth {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: var(--surface);
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}

/* ══════════════ TOUCH — DISABLE HOVER LIFTS ══════════════ */
/* Sticky tap-hover is ugly on touch devices. Neutralise .hover:lift styles. */
@media (hover: none) {
  .product-card:hover,
  .feature-card:hover,
  .step-card:hover,
  .contact-card:hover,
  .gifting-shop-card:hover {
    transform: none !important;
    box-shadow: var(--shadow) !important;
  }
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-ghost:hover {
    transform: none !important;
  }
}

/* ══════════════ SCROLL-LOCK HELPER ══════════════ */
/* Used by app.js to lock background scrolling while a modal/drawer is open */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* ══════════════ MODAL OVERLAY — FULL-SURFACE, TAP-TO-CLOSE ══════════════ */
@media (max-width: 768px) {
  .modal-overlay.visible { cursor: pointer; }
}

/* ══════════════ CART BADGE POSITIONING ON SHRUNKEN NAV ══════════════ */
@media (max-width: 480px) {
  .cart-badge {
    min-width: 14px;
    height: 14px;
    font-size: .58rem;
    top: 0;
    right: 0;
  }
}

/* ══════════════ END MOBILE PROFESSIONAL OVERHAUL ══════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT IMAGE CROSSFADE — primary <img> and `.product-img-alt` stacked
   inside `.product-img-wrap`; opacity swings in perfect counter-phase so
   each image holds centre stage for ~3.5 s out of an 8 s cycle.
   ══════════════════════════════════════════════════════════════════════════ */
.product-img-wrap { position: relative; }
.product-img-wrap .product-img-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: productImgSwapAlt 8s ease-in-out infinite;
}
.product-img-wrap .product-img-primary {
  animation: productImgSwapPrimary 8s ease-in-out infinite;
}
@keyframes productImgSwapPrimary {
  0%, 42%   { opacity: 1; }
  50%, 92%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes productImgSwapAlt {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}
/* Desynchronise each card so they don't all flip at the same instant */
.product-card:nth-child(3n) .product-img-wrap .product-img-primary,
.product-card:nth-child(3n) .product-img-wrap .product-img-alt { animation-delay: -2s; }
.product-card:nth-child(3n+1) .product-img-wrap .product-img-primary,
.product-card:nth-child(3n+1) .product-img-wrap .product-img-alt { animation-delay: -4s; }
.product-card:nth-child(3n+2) .product-img-wrap .product-img-primary,
.product-card:nth-child(3n+2) .product-img-wrap .product-img-alt { animation-delay: -6s; }

/* Respect motion preferences — stop the swap for users who disabled motion */
@media (prefers-reduced-motion: reduce) {
  .product-img-wrap .product-img-primary,
  .product-img-wrap .product-img-alt {
    animation: none;
  }
  .product-img-wrap .product-img-alt { display: none; }
}

/* Modal hero image crossfade — same idea, slower cycle */
.product-modal-img-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--surface2);
}
.product-modal-img-wrap .product-modal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  margin: 0;
  border-radius: 0;
  display: block;
  animation: productImgSwapPrimary 10s ease-in-out infinite;
}
.product-modal-img-wrap .product-modal-img-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  pointer-events: none;
  animation: productImgSwapAlt 10s ease-in-out infinite;
}
@media (max-width: 768px) {
  .product-modal-img-wrap { height: 200px; }
}
@media (max-width: 480px) {
  .product-modal-img-wrap { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-modal-img-wrap .product-modal-img,
  .product-modal-img-wrap .product-modal-img-alt {
    animation: none;
  }
  .product-modal-img-wrap .product-modal-img-alt { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO LOGO — now uses the animated webp; disable the old CSS float so the
   gif/webp motion is the only source of movement.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-logo { animation: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   COMMUNITIES PAGE
   Dedicated top-nav page (next to Reviews). Centered card that fills most
   of the viewport so the chat feels like a proper room rather than a thin
   widget — wider and taller on desktop, and maxes out the screen on phones.
   ══════════════════════════════════════════════════════════════════════════ */
.cc-page-wrap{
  max-width:1200px;
  margin:0 auto;
}
.cc-page-wrap .cc-box{
  height:min(82vh, 820px);
  min-height:560px;
}
.cc-page-wrap .cc-messages{
  padding:22px 26px 14px;
  gap:16px;
}
.cc-page-wrap .cc-msg-avatar{ width:42px; height:42px; font-size:16px; }
.cc-page-wrap .cc-msg-name{ font-size:.92rem; }
.cc-page-wrap .cc-msg-text{ font-size:.95rem; }
.cc-page-wrap .cc-input{ font-size:.98rem; padding:12px 18px; }
.cc-page-wrap .cc-send-btn{ width:44px; height:44px; }

@media (max-width: 1000px){
  .cc-page-wrap{ max-width:none; }
}
@media (max-width: 640px){
  .cc-page-wrap .cc-box{
    height:calc(100vh - 200px);
    min-height:520px;
  }
  .cc-page-wrap .cc-messages{ padding:16px 16px 10px; gap:14px; }
  .cc-page-wrap .cc-msg-avatar{ width:36px; height:36px; font-size:14px; }
  .cc-page-wrap .cc-msg-text{ font-size:.9rem; }
}

.community-chat-section{ display:flex; flex-direction:column; }
.cc-live-dot{
  width:8px; height:8px; border-radius:50%;
  background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.7);
  margin-left:8px; display:inline-block;
  animation:ccLivePulse 2s ease-in-out infinite;
}
.cc-live-label{
  font-size:.7rem; font-weight:700; color:#10b981;
  letter-spacing:.08em; margin-left:2px;
}
@keyframes ccLivePulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.cc-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:480px;
  transition:border-color .25s;
}
.cc-box:focus-within{ border-color:var(--primary); }

.cc-messages{
  flex:1; overflow-y:auto;
  padding:18px 18px 10px;
  display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  scroll-behavior:smooth;
}
.cc-messages::-webkit-scrollbar{ width:8px; }
.cc-messages::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.cc-messages::-webkit-scrollbar-track{ background:transparent; }

.cc-empty{
  margin:auto; text-align:center; color:var(--text3);
  font-size:.88rem; padding:32px 20px;
}

.cc-msg{
  display:flex; gap:10px; align-items:flex-start;
  animation:ccFadeIn .25s ease-out;
}
@keyframes ccFadeIn{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.cc-msg-avatar{
  width:36px; height:36px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.cc-msg-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.cc-msg-body{ flex:1; min-width:0; }
.cc-msg-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-bottom:2px;
}
.cc-msg-name{
  font-weight:700; font-size:.86rem; color:var(--text);
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cc-msg--mine .cc-msg-name{ color:var(--primary); }
.cc-msg--staff .cc-msg-name::after{
  content:"STAFF";
  background:var(--primary); color:#fff; font-size:.6rem;
  font-weight:800; padding:2px 6px; border-radius:4px;
  margin-left:6px; letter-spacing:.06em; vertical-align:middle;
}
.cc-msg-time{ font-size:.7rem; color:var(--text3); flex-shrink:0; }
.cc-msg-text{
  font-size:.9rem; color:var(--text2); line-height:1.5;
  word-wrap:break-word; overflow-wrap:break-word; white-space:pre-wrap;
}
/* ── COMMUNITY CHAT v2 STYLING (2026-05-04) ────────────────────────── */
.cc-msg{ position:relative; }
.cc-msg-actions{
  position:absolute; top:6px; right:6px;
  display:flex; gap:2px;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:2px 4px; opacity:0; transition:opacity .12s;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.cc-msg:hover .cc-msg-actions{ opacity:1; }
.cc-msg-actions button{
  background:none; border:none; color:var(--text2); cursor:pointer;
  padding:3px 6px; border-radius:4px; font-size:.95rem;
}
.cc-msg-actions button:hover{ background:var(--surface2); color:var(--text); }
/* Mention pings (you were @-mentioned) */
.cc-msg--ping{ background:rgba(192,38,211,.06); border-left:3px solid var(--primary); }
.cc-mention{
  background:rgba(124,58,237,.18); color:#c4b5fd;
  padding:1px 6px; border-radius:5px; cursor:pointer; font-weight:600;
}
.cc-mention:hover{ background:rgba(124,58,237,.3); color:#fff; }
.cc-mention--me{ background:rgba(192,38,211,.3); color:#fff; }
/* Reply quote bubble */
.cc-reply-quote{
  border-left:3px solid var(--primary); padding:4px 10px;
  background:rgba(124,58,237,.08); border-radius:0 8px 8px 0;
  margin-bottom:6px; font-size:.78rem; color:var(--text3);
  cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cc-reply-quote:hover{ background:rgba(124,58,237,.15); }
.cc-reply-quote strong{ color:var(--text2); }
/* Reaction pills */
.cc-reactions-row{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.cc-rxn-pill{
  background:var(--surface2); border:1px solid var(--border); color:var(--text2);
  padding:2px 9px; border-radius:999px; font-size:.78rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; transition:all .12s;
}
.cc-rxn-pill:hover{ background:rgba(124,58,237,.1); border-color:var(--primary); }
.cc-rxn-pill--mine{ background:rgba(124,58,237,.18); border-color:var(--primary); color:#c4b5fd; }
.cc-rxn-pill span{ color:var(--text); font-weight:700; font-size:.74rem; }
/* Tip system message — centered banner instead of bubble */
.cc-msg--tip{ display:flex; justify-content:center; padding:6px 0; }
.cc-tip-banner{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px; border-radius:999px;
  background:linear-gradient(135deg,rgba(192,38,211,.15),rgba(124,58,237,.15));
  border:1px solid rgba(192,38,211,.4); color:var(--text); font-size:.85rem;
}
.cc-tip-icon{ font-size:1rem; }
.cc-tip-time{ color:var(--text3); font-size:.72rem; margin-left:6px; }
/* 🎁 WISHLIST REQUEST CARD — full-width product banner */
.cc-msg--request{ padding:8px 0; }
.cc-req-card{
  background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(239,68,68,.08));
  border:1px solid rgba(245,158,11,.4); border-radius:14px;
  padding:14px 16px; max-width:480px; margin:0 auto;
}
.cc-req-header{ display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap; font-size:.84rem; color:var(--text2); }
.cc-req-icon{ font-size:1rem; }
.cc-req-header strong{ color:var(--text); }
.cc-req-sub{ color:var(--text3); }
.cc-req-time{ margin-left:auto; color:var(--text3); font-size:.72rem; }
.cc-req-body{ display:flex; gap:14px; align-items:center; }
.cc-req-body img, .cc-req-noimg{
  width:96px; height:96px; border-radius:10px; object-fit:cover;
  flex-shrink:0; background:rgba(0,0,0,.2);
}
.cc-req-info{ flex:1; min-width:0; }
.cc-req-name{
  margin:0 0 4px; font-weight:700; font-size:.95rem; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cc-req-price{ margin:0 0 10px; color:#f59e0b; font-weight:800; font-size:1rem; }
.cc-req-btn{
  display:inline-block; background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff; border:none; border-radius:8px; padding:8px 18px;
  cursor:pointer; font-weight:700; font-size:.85rem; transition:transform .12s, box-shadow .12s;
}
.cc-req-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(239,68,68,.35); }
.cc-req-mine{
  display:inline-block; padding:6px 12px; border-radius:8px;
  background:rgba(245,158,11,.15); color:#fcd34d;
  font-size:.78rem; font-weight:700;
}
.cc-req-loginnote{
  display:inline-block; padding:6px 12px; color:var(--text3);
  font-size:.78rem; font-style:italic;
}
/* GIF button hover (carry-over) */
.cc-gif-btn:hover{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }
/* Online sidebar — hover-highlight rows + thin scrollbar so a long list
   doesn't dominate the page */
.cc-online-row:hover{ background:rgba(124,58,237,.12) !important; }
.cc-online-list{
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.cc-online-list::-webkit-scrollbar{ width:6px; }
.cc-online-list::-webkit-scrollbar-track{ background:transparent; }
.cc-online-list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
.cc-online-list::-webkit-scrollbar-thumb:hover{ background:var(--primary); }

.cc-input-row{
  display:flex; gap:8px; padding:12px 14px;
  border-top:1px solid var(--border);
  background:var(--surface2);
}
.cc-input{
  flex:1; background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 16px;
  color:var(--text); font-size:.92rem;
  outline:none; transition:border-color .2s;
}
.cc-input:focus{ border-color:var(--primary); }
.cc-input::placeholder{ color:var(--text3); }
.cc-input:disabled{ opacity:.55; cursor:not-allowed; }

.cc-send-btn{
  background:var(--primary); border:none; color:#fff;
  border-radius:50%; width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s, background .2s, opacity .2s;
}
.cc-send-btn:hover:not(:disabled){ transform:scale(1.06); background:#ff4bb8; }
.cc-send-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.cc-send-btn svg{ margin-left:-2px; }

.cc-footer-note{
  padding:9px 14px;
  background:var(--surface2);
  border-top:1px solid var(--border);
  font-size:.72rem; color:var(--text3); text-align:center;
}
.cc-footer-note a{ color:var(--primary); text-decoration:none; font-weight:600; }
.cc-footer-note a:hover{ text-decoration:underline; }

/* ── COMMUNITIES TOOLBAR (send-credits entry) ─────────────────── */
.cc-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px;
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(192,38,211,.12), rgba(192,38,211,.04));
  border:1px solid rgba(192,38,211,.22);
  border-radius:14px;
}
.cc-toolbar-bal{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.cc-toolbar-bal-label{
  font-size:.72rem; color:var(--text3);
  text-transform:uppercase; letter-spacing:.06em; font-weight:600;
}
.cc-toolbar-bal-value{
  font-family:'Rajdhani', sans-serif;
  font-size:1.25rem; font-weight:700; color:var(--primary);
  line-height:1.1;
}
.cc-toolbar-btn{
  flex:0 0 auto;
  padding:10px 18px !important;
  font-size:.88rem !important;
  border-color:rgba(192,38,211,.45) !important;
  color:var(--primary) !important;
  white-space:nowrap;
}
.cc-toolbar-btn:hover:not(:disabled){
  background:rgba(192,38,211,.12) !important;
  border-color:var(--primary) !important;
}
.cc-toolbar-btn:disabled{ opacity:.5; cursor:not-allowed; }
@media (max-width: 560px){
  .cc-toolbar{ flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px; }
  .cc-toolbar-btn{ width:100%; }
}

/* ── SEND-CREDITS DENOMINATION PICKER ─────────────────────────── */
.sc-amount-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
.sc-amount-btn{
  padding:14px 12px;
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:12px;
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  cursor:pointer;
  transition:border-color .18s, background .18s, transform .12s, box-shadow .18s;
}
.sc-amount-btn:hover:not(:disabled){
  border-color:var(--primary);
  background:rgba(192,38,211,.06);
}
.sc-amount-btn.active{
  border-color:var(--primary);
  background:linear-gradient(180deg, rgba(192,38,211,.18), rgba(192,38,211,.08));
  color:var(--primary);
  box-shadow:0 4px 14px rgba(192,38,211,.18);
}
.sc-amount-btn:disabled{
  opacity:.4; cursor:not-allowed;
  /* Keep the grid height stable when one option is unaffordable */
}
/* Account-page card header actions (e.g., Send Credits button) */
.account-card-actions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:8px;
}
.account-credit-display{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:linear-gradient(135deg, rgba(192,38,211,.12), rgba(192,38,211,.04));
  border:1px solid rgba(192,38,211,.25);
  border-radius:12px;
  margin-bottom:10px;
}
.account-credit-display .ac-label{
  font-size:.78rem; color:var(--text3);
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.account-credit-display .ac-value{
  font-family:'Rajdhani',sans-serif;
  font-size:1.6rem; font-weight:700; color:var(--primary);
  line-height:1;
}
@media (max-width: 480px){
  .sc-amount-btn{ padding:12px 10px; font-size:.98rem; }
}

/* Replaces the send box when the viewer isn't logged in. */
.cc-locked-panel{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, var(--surface2), var(--bg));
}
.cc-locked-icon{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255, 90, 196, 0.14);
  color:var(--primary);
}
.cc-locked-text{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  line-height:1.3;
}
.cc-locked-text strong{
  color:var(--text); font-size:.95rem; font-weight:700;
}
.cc-locked-text span{
  color:var(--text3); font-size:.82rem;
}
.cc-locked-btn{
  flex:0 0 auto;
  background:var(--primary); color:#fff;
  border:none; border-radius:999px;
  padding:10px 20px;
  font-weight:700; font-size:.9rem;
  cursor:pointer;
  transition:transform .15s, background .2s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(255, 90, 196, 0.25);
}
.cc-locked-btn:hover{ background:#ff4bb8; transform:translateY(-1px); box-shadow:0 6px 18px rgba(255, 90, 196, 0.35); }
.cc-locked-btn:active{ transform:translateY(0); }

@media (max-width: 480px){
  .cc-locked-panel{ padding:14px; gap:10px; }
  .cc-locked-icon{ width:36px; height:36px; }
  .cc-locked-text strong{ font-size:.88rem; }
  .cc-locked-text span{ font-size:.76rem; }
  .cc-locked-btn{ padding:9px 16px; font-size:.85rem; }
}

@media (max-width: 480px){
  .cc-box{ height:440px; }
  .cc-msg-avatar{ width:32px; height:32px; font-size:13px; }
  .cc-msg-text{ font-size:.88rem; }
  .cc-input{ font-size:.88rem; padding:9px 14px; }
  .cc-send-btn{ width:38px; height:38px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   COMMUNITY CHAT — gift-announcement system message
   ──────────────────────────────────────────────────────────────────────────
   Written by scExecute() after a successful credit transfer. Rendered as a
   centered pill banner instead of a speech bubble so it reads as an event.
   ────────────────────────────────────────────────────────────────────────── */
.cc-msg--system{
  display:flex; justify-content:center;
  padding:4px 0;
}
.cc-gift-banner{
  display:inline-flex; align-items:center; gap:10px;
  max-width:min(92%, 560px);
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,90,196,.14), rgba(106,76,216,.14));
  border:1px solid rgba(255,90,196,.35);
  box-shadow:0 2px 8px rgba(255,90,196,.08);
  color:var(--text1);
  font-size:.86rem; line-height:1.35;
  flex-wrap:wrap; justify-content:center; text-align:center;
}
.cc-gift-icon{ font-size:1.1rem; line-height:1; flex-shrink:0; }
.cc-gift-text{ color:var(--text2); }
.cc-gift-from, .cc-gift-to{
  color:#ff7ac6; font-weight:700; cursor:pointer;
  transition:color .15s;
}
.cc-gift-from[onclick]:hover, .cc-gift-to[onclick]:hover{ color:#ff4bb8; text-decoration:underline; }
.cc-gift-from:not([onclick]), .cc-gift-to:not([onclick]){ cursor:default; }
.cc-gift-time{
  color:var(--text3); font-size:.72rem; font-weight:500;
  flex-shrink:0; opacity:.8;
}

@media (max-width: 480px){
  .cc-gift-banner{ font-size:.78rem; padding:7px 12px; gap:8px; }
  .cc-gift-icon{ font-size:1rem; }
  .cc-gift-time{ font-size:.66rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   USER PROFILE MODAL — opened by clicking a name/avatar in the community
   chat. Shows the other user's avatar, username, join date, and their
   wishlist as a product grid.
   ────────────────────────────────────────────────────────────────────────── */
.cc-msg-avatar, .cc-msg-name{ cursor:pointer; transition:opacity .15s; }
.cc-msg-avatar:hover, .cc-msg-name:hover{ opacity:.82; }
.cc-msg-name{ text-decoration:underline; text-decoration-color:rgba(148,163,184,.2); text-underline-offset:3px; }
.cc-msg-name:hover{ text-decoration-color:var(--primary); }

.up-header{
  display:flex; gap:16px; align-items:center;
  padding:16px 0 18px;
  border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
.up-avatar{
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg, #6b48d8, #8a5cff);
  color:#fff; font-weight:700; font-size:1.75rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  box-shadow:0 4px 14px rgba(106,76,216,0.25);
}
.up-avatar img{ width:100%; height:100%; object-fit:cover; }
.up-head-body{ flex:1; min-width:0; }
.up-name{
  margin:0; font-size:1.45rem; font-weight:700; color:var(--text1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.up-joined{
  margin:4px 0 0; font-size:.82rem; color:var(--text3);
}
.up-badge{
  display:inline-block; margin-left:8px; padding:2px 8px;
  border-radius:999px; font-size:.68rem; font-weight:600;
  background:rgba(255, 90, 196, 0.15); color:#ff7ac6;
  vertical-align:middle;
}

.up-section-title{
  font-size:.82rem; font-weight:600; color:var(--text2);
  text-transform:uppercase; letter-spacing:.06em;
  margin:0 0 10px;
  display:flex; align-items:center; gap:8px;
}
.up-section-title .up-count{
  background:var(--surface2); color:var(--text3);
  font-size:.7rem; padding:2px 8px; border-radius:999px;
  font-weight:500; letter-spacing:0;
}

.up-wishlist-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
  max-height:280px; overflow-y:auto; padding:2px;
}
.up-wish-card{
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:10px; display:flex; gap:10px;
  align-items:center; transition:transform .15s, border-color .15s;
  cursor:pointer;
}
.up-wish-card:hover{ transform:translateY(-2px); border-color:var(--primary); }
.up-wish-card-img{
  width:52px; height:52px; border-radius:8px; object-fit:cover;
  background:var(--surface3); flex-shrink:0;
}
.up-wish-card-body{ flex:1; min-width:0; }
.up-wish-card-name{
  margin:0; font-size:.82rem; color:var(--text1); font-weight:600;
  line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.up-wish-card-price{
  margin:4px 0 0; font-size:.78rem; color:var(--primary); font-weight:600;
}

.up-empty{
  padding:28px 20px; text-align:center;
  background:var(--surface2); border:1px dashed var(--border);
  border-radius:10px; color:var(--text3); font-size:.9rem;
}

@media (max-width: 480px){
  .up-header{ gap:12px; padding:12px 0 14px; }
  .up-avatar{ width:56px; height:56px; font-size:1.4rem; }
  .up-name{ font-size:1.2rem; }
  .up-wishlist-grid{ grid-template-columns:1fr; max-height:340px; }
  .up-wish-card-img{ width:46px; height:46px; }
}

/* ──────────────────────────────────────────────────────────────────
   Gift Bots login-wall panel
   Shown in place of the Gift Bots page when no user is logged in.
   ────────────────────────────────────────────────────────────────── */
.bots-locked-panel{
  max-width:560px;
  margin:48px auto 64px;
  padding:40px 32px 36px;
  background:linear-gradient(180deg, var(--surface2), var(--bg));
  border:1px solid var(--border);
  border-radius:16px;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
}
.bots-locked-icon{
  width:72px; height:72px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255, 90, 196, 0.14);
  color:var(--primary);
  font-size:2rem;
  box-shadow:0 4px 18px rgba(255, 90, 196, 0.22);
}
.bots-locked-title{
  margin:0 0 10px;
  font-size:1.5rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.01em;
}
.bots-locked-text{
  margin:0 auto 24px;
  max-width:420px;
  color:var(--text3);
  font-size:.95rem;
  line-height:1.5;
}
.bots-locked-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.bots-locked-btn{
  flex:0 0 auto;
  min-width:150px;
  padding:12px 24px;
  border-radius:999px;
  font-weight:700; font-size:.95rem;
  cursor:pointer;
  transition:transform .15s, background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.bots-locked-btn.btn-primary,
.bots-locked-panel .btn-primary{
  background:var(--primary); color:#fff; border:none;
  box-shadow:0 4px 14px rgba(255, 90, 196, 0.25);
}
.bots-locked-btn.btn-primary:hover,
.bots-locked-panel .btn-primary:hover{
  background:#ff4bb8; transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(255, 90, 196, 0.35);
}
.bots-locked-btn.btn-outline,
.bots-locked-panel .btn-outline{
  background:transparent; color:var(--text);
  border:1px solid var(--border);
}
.bots-locked-btn.btn-outline:hover,
.bots-locked-panel .btn-outline:hover{
  border-color:var(--primary); color:var(--primary);
  transform:translateY(-1px);
}
.bots-locked-btn:active{ transform:translateY(0); }

@media (max-width: 480px){
  .bots-locked-panel{ margin:24px 12px 40px; padding:32px 22px 28px; border-radius:14px; }
  .bots-locked-icon{ width:60px; height:60px; font-size:1.6rem; }
  .bots-locked-title{ font-size:1.25rem; }
  .bots-locked-text{ font-size:.88rem; }
  .bots-locked-btn{ min-width:130px; padding:11px 18px; font-size:.88rem; }
  .bots-locked-actions{ gap:10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — phone & small-tablet pass
   The complaint that triggered this block: on mobile, the product preview
   modal opened with a huge hero image, large text, and a wrapping button
   row — pushing the Add-to-Cart button below the fold with no visual
   indicator that the modal scrolls. Users couldn't reach the CTA.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Product preview modal — phones (≤640px) ─────────────────────────── */
@media (max-width: 640px) {
  /* Modal frame — claim the full viewport, leave room for sticky CTA */
  .modal-product {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    padding: 16px 16px 12px;
    border-radius: 14px;
  }

  /* Bigger close button + better tap target */
  .modal-product .modal-close {
    top: 8px;
    right: 10px;
    font-size: 1.4rem;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }

  /* Hero image — drop from 240px to 150px so the CTA fits the fold */
  .product-modal-img-wrap,
  .product-modal-emoji {
    height: 150px;
    margin-bottom: 12px;
    border-radius: 10px;
  }
  .product-modal-img { height: 100%; }

  /* Tighter typography — name + price take less vertical real-estate */
  .product-modal-name  { font-size: 1.15rem; margin-bottom: 4px; line-height: 1.3; }
  .product-modal-price { font-size: 1.5rem;  margin-bottom: 10px; }
  .product-modal-stock { font-size: 0.78rem; padding: 6px 10px; margin-bottom: 8px; }
  .product-modal-note  {
    font-size: 0.78rem;
    padding: 10px 12px;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  /* Sticky action bar — Add-to-Cart is ALWAYS visible at the bottom of the
     modal regardless of scroll position. Solves the original complaint. */
  .product-modal-actions {
    position: sticky;
    bottom: -12px;
    margin: 12px -16px -12px;
    padding: 12px 16px;
    background:
      linear-gradient(
        to top,
        var(--surface) 0%,
        var(--surface) 70%,
        rgba(0, 0, 0, 0) 100%
      );
    z-index: 10;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .product-modal-actions .btn-primary {
    flex: 2;
    min-height: 48px;       /* WCAG 44px-min tap target */
    font-size: 0.95rem;
    font-weight: 700;
  }
  .product-modal-actions .btn-outline {
    flex: 1;
    min-height: 48px;
    padding: 12px 8px;
    font-size: 0.85rem;
  }
  /* Drop the redundant 'Close' button — the X at the top already closes */
  .product-modal-actions .btn-outline:last-child { display: none; }
}

/* Extra-small phones (iPhone SE, etc.) — squeeze more */
@media (max-width: 380px) {
  .product-modal-img-wrap,
  .product-modal-emoji   { height: 130px; }
  .product-modal-name    { font-size: 1.05rem; }
  .product-modal-price   { font-size: 1.35rem; }
  .product-modal-actions .btn-primary { font-size: 0.88rem; }
  .product-modal-actions .btn-outline { font-size: 0.78rem; padding: 10px 6px; }
}

/* iOS safe-area — keep sticky CTA above the home-indicator on iPhone X+ */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    .product-modal-actions {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}

/* Tablet pass (641-900px) — between phone and desktop */
@media (min-width: 641px) and (max-width: 900px) {
  .modal-product { width: min(560px, calc(100vw - 32px)); }
  .product-modal-img-wrap,
  .product-modal-emoji { height: 200px; }
  .crew-hero { grid-template-columns: 1fr; }
  .crew-hero-image { min-height: 280px; }
}

/* ── General modal mobile fixes (login, checkout, V-Bucks pre-auth) ──── */
@media (max-width: 640px) {
  /* All modals: claim more screen, reduce padding, allow inner scroll */
  .modal:not(.modal-product) {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    padding: 22px 16px;
    border-radius: 14px;
  }
  .modal-title { font-size: 1.3rem; }
  .modal-sub   { font-size: 0.82rem; margin-bottom: 16px; }
  .modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    top: 10px;
    right: 10px;
  }
  /* Bigger form inputs so the soft keyboard doesn't zoom in (≥16px font) */
  .form-group input,
  .form-group select,
  .form-group textarea,
  .modal textarea,
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="password"] {
    font-size: 16px;  /* iOS won't auto-zoom into ≥16px inputs */
    padding: 13px 14px;
  }
  /* Full-width primary buttons in modals on mobile */
  .modal .btn-primary,
  .modal .full-width { width: 100%; }
}

/* ── Cart page on mobile ───────────────────────────────────────────────
   Cart items render as: <img> <info(name+meta+price)> <actions(remove+qty)>.
   At desktop width that fits on one row. On a phone the actions column
   wraps under the info to keep things readable. */
@media (max-width: 640px) {
  .cart-item {
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px;
  }
  .cart-item-img   { width: 64px; height: 64px; font-size: 1.4rem; }
  .cart-item-info  { flex: 1 1 calc(100% - 84px); min-width: 0; }
  .cart-item-name  { font-size: .94rem; line-height: 1.3; }
  .cart-item-price { font-size: .92rem; }
  .cart-meta-row   { font-size: .72rem; }

  /* Push the actions column (X + qty) onto a new row, full-width */
  .cart-item-actions {
    flex: 1 1 100%;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    align-self: auto;
  }
  .cart-qty-controls { gap: 8px; }
  .cart-qty-btn { width: 36px; height: 36px; font-size: 1rem; }
  .cart-item-remove {
    width: 36px;
    height: 36px;
  }

  /* Hero total scales down on phones */
  .summary-hero-amount { font-size: 1.95rem; }
  /* Cart total + checkout button — bigger tap target */
  .cart-summary { padding: 18px 16px; border-radius: 12px; }
  .cart-summary .btn-primary {
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
    font-weight: 700;
  }
}

/* ── Top nav on mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Tighter horizontal padding on nav so the cart icon doesn't get clipped */
  .nav-bar { padding: 8px 12px; }
  .nav-logo img { height: 32px; }
  .nav-links { gap: 4px; }
  .nav-link {
    padding: 6px 10px;
    font-size: 0.82rem;
  }
  .nav-icon-btn {
    width: 36px;
    height: 36px;
  }
  /* Currency picker — squeeze to icon + currency code only on phones */
  .currency-picker-btn {
    padding: 4px 8px;
    font-size: 0.78rem;
  }
}

/* ── Product cards on phones — tighter, better tap targets ──────────── */
@media (max-width: 640px) {
  .product-card  { aspect-ratio: 3/4.2; }
  .product-name  { font-size: 0.85rem; padding: 6px 10px 0; line-height: 1.25; }
  .product-price { font-size: 1.05rem; }
  .product-add-btn { width: 36px; height: 36px; font-size: 1.05rem; }
  .product-info  { padding: 8px 10px 10px; }
  .wishlist-btn  { width: 32px; height: 32px; font-size: 0.95rem; }
}

/* ── Subscription hero (Crew/Fallout) on phones ─────────────────────── */
@media (max-width: 640px) {
  .crew-hero { padding: 16px; gap: 16px; }
  .crew-hero-image  { min-height: 220px; }
  .crew-hero-title  { font-size: 1.7rem; }
  .crew-price-value { font-size: 1.7rem; }
  .crew-price-card  { padding: 14px 16px; margin-bottom: 14px; }
  .crew-cta-row     { flex-direction: column; gap: 8px; }
  .crew-btn-add,
  .crew-btn-buy     { width: 100%; min-height: 48px; }
  .crew-description-card { padding: 18px 16px; }
  .crew-description-card h3 { font-size: 1.1rem; }
  .crew-description-card p  { font-size: 0.85rem; }
  .crew-perks-list { grid-template-columns: 1fr; gap: 8px; }
  .crew-perks-list li { padding: 10px 12px; }
}

/* ── V-Bucks pre-auth modal — make 3-step flow fit phone screens ────── */
@media (max-width: 640px) {
  .vb-step {
    padding: 12px;
    gap: 10px;
    margin: 12px 0;
  }
  .vb-step-num {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  .vb-step-body { font-size: 0.85rem; }
  .vb-step-body strong { font-size: 0.9rem; }
}

/* ── Sticky scroll-cue: subtle bounce on the modal so users know it scrolls ──
   When content overflows on mobile, the action bar's gradient already hints
   there's more content above. This adds a one-time gentle bounce on open
   so the visual cue is unmistakable. */
@media (max-width: 640px) {
  .modal.open .product-modal-actions {
    animation: mobileCtaPulse 1.2s ease-out 0.2s 1;
  }
}
@keyframes mobileCtaPulse {
  0%   { transform: translateY(8px);  opacity: 0.6; }
  60%  { transform: translateY(-2px); opacity: 1;   }
  100% { transform: translateY(0);    opacity: 1;   }
}

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM PRODUCT PAGE (Battle Royale items — V-Bucks + Founders)
   Full-viewport surface that mirrors vbs.ar's product page but uses the
   RibbetShop pink/purple palette throughout. The product-specific blue
   (V-Bucks) only appears on the price card itself — the rest of the
   chrome (backdrop, CTAs, borders) uses --bg/--gradient/--border so the
   page feels like part of the site, not a Fortnite-themed island.
   ══════════════════════════════════════════════════════════════════════ */
.prod-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  border-radius: 0;
  padding: 36px max(36px, calc((100vw - 1280px) / 2));
  position: relative;
  align-items: start;
}

/* Left column wraps both the image and the description that sits below it,
   so the description is anchored to the left half (under the product art)
   instead of bleeding the full page width. */
.prod-hero-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Breadcrumb above the hero — gives the page a "you navigated here" feel
   instead of "popup". Subtle, sits in the page's own background. */
.prod-hero-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px max(36px, calc((100vw - 1280px) / 2)) 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text3);
  font-weight: 600;
}
.prod-hero-crumbs a {
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s;
  cursor: pointer;
}
.prod-hero-crumbs a:hover { color: var(--primary); }
.prod-hero-crumbs .crumb-sep { color: var(--text3); opacity: 0.5; }
.prod-hero-crumbs .crumb-current { color: var(--text); }
/* Top-right close on the fullscreen surface (replaces .modal-close which
   was positioned for a small dialog). */
.modal-product:has(.prod-hero) .modal-close {
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  font-size: 1.2rem;
  z-index: 5;
}
.modal-product:has(.prod-hero) .modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Both themes inherit the site's dark-purple background — the difference
   is just the radial accent glow on the image side. The whole surface
   blends into the rest of the site instead of feeling like a popup. */
.prod-hero--vbucks,
.prod-hero--founders {
  background: var(--bg);
  border: none;
}
.prod-hero--vbucks::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 50%, rgba(124, 58, 237, 0.22) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.prod-hero--founders::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 50%, rgba(20, 184, 166, 0.22) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Image side — square-ish hero, layered alt for crossfade animation */
.prod-hero-image {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  min-height: min(560px, calc(100vh - 180px));
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 80px -30px rgba(255, 102, 196, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.prod-hero--vbucks   .prod-hero-image { border-color: rgba(124, 58, 237, 0.35); }
.prod-hero--founders .prod-hero-image { border-color: rgba(20, 184, 166, 0.35); }

.prod-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.prod-hero--founders .prod-hero-glow {
  background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.18) 0%, transparent 70%);
}

.prod-hero-img,
.prod-hero-img-alt {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 36px;
}
.prod-hero-img-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: prodHeroSwap 10s ease-in-out infinite;
}
@keyframes prodHeroSwap {
  0%, 45%   { opacity: 0; }
  50%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}
.prod-hero-emoji {
  position: relative;
  z-index: 2;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right panel — title + tagline + price card + delivery + CTAs.
   Top-aligned with the image so both halves start at the same y-coord;
   gives the page a cleaner reading order than vertically-centred content
   floating in space. */
.prod-hero-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding-top: 8px;
}

.prod-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.prod-hero-tag {
  color: var(--text2);
  font-size: 0.95rem;
  margin: 0 0 24px;
  line-height: 1.55;
  max-width: 480px;
}

/* Price card — uses the site's primary pink-to-purple gradient, matching
   the rest of the storefront's CTA styling. The product-specific blue
   accent is left for the BOOST/STW chip and stock badge instead, so the
   page feels integrated with the rest of RibbetShop. */
.prod-hero-price-card {
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  background: var(--gradient);
  box-shadow:
    0 14px 40px -12px rgba(255, 102, 196, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.prod-hero--founders .prod-hero-price-card {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #115e59 100%);
  box-shadow:
    0 14px 40px -12px rgba(20, 184, 166, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.prod-hero-price-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.22), transparent 55%);
  pointer-events: none;
}
.prod-hero-price-label {
  color: rgba(255,255,255,0.78);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  margin-bottom: 6px;
}
.prod-hero-price-value {
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Epic credentials form (Account Details) — sits on the right column for
   V-Bucks SKUs only. Mirrors vbs.ar's "Epic Email + Epic Password" inputs.
   Privacy notes are inline JSDoc; this CSS just makes the box look clean. */
.prod-hero-creds {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prod-hero-creds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.prod-hero-creds-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.prod-hero-creds-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text3);
  line-height: 1.5;
}
.prod-hero-creds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prod-hero-creds-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.01em;
}
.prod-hero-creds-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
.prod-hero-creds-input:focus {
  border-color: var(--border-glow);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(255, 102, 196, 0.08);
}
.prod-hero-creds-input::placeholder { color: var(--text3); opacity: 0.7; }
/* Eye toggle inline in the password row. Pure visual button — actual
   type swap is in JS and never duplicates the password to the DOM. */
.prod-hero-creds-pwwrap {
  position: relative;
  display: flex;
  align-items: center;
}
.prod-hero-creds-pwwrap .prod-hero-creds-input { padding-right: 44px; }
.prod-hero-creds-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.18s, color 0.18s;
}
.prod-hero-creds-eye:hover {
  background: var(--surface2);
  color: var(--primary);
}
.prod-hero-creds-disclaimer {
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: var(--text2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.74rem;
  line-height: 1.5;
}

/* Stock line */
.prod-hero-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  margin-bottom: 22px;
  align-self: flex-start;
}
.prod-hero-stock--low { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); }
.prod-hero-stock--oos { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); }

/* Field — delivery method label + inline pill */
.prod-hero-field { margin-bottom: 18px; }
.prod-hero-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text2);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.prod-hero-field-required {
  color: var(--primary);
  background: rgba(255, 102, 196, 0.1);
  border: 1px solid rgba(255, 102, 196, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.prod-hero-static-pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CTA rows — primary on top, secondary (wishlist) below.
   Buy Now uses the site's signature pink-to-purple gradient + glow so it
   reads as "the same Buy Now you see everywhere on RibbetShop". */
.prod-hero-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.prod-hero-cta-row--secondary { margin-top: 12px; }
.prod-hero-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s, background 0.18s, border-color 0.18s;
  font-family: inherit;
  min-height: 50px;
  letter-spacing: 0.01em;
}
.prod-hero-btn--add {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}
.prod-hero-btn--add:hover  {
  background: var(--surface);
  border-color: var(--border-glow);
  transform: translateY(-1px);
}

.prod-hero-btn--buy {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(255, 102, 196, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.prod-hero--founders .prod-hero-btn--buy {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #115e59 100%);
  box-shadow: 0 12px 30px -10px rgba(20, 184, 166, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.prod-hero-btn--buy:hover  {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px rgba(255, 102, 196, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.prod-hero-btn--wish {
  font-size: 0.85rem;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  min-height: 42px;
}
.prod-hero-btn--wish.is-on { color: #f87171; border-color: rgba(239, 68, 68, 0.4); }
.prod-hero-btn--wish:hover { background: var(--surface2); color: var(--text); border-color: var(--border-glow); }

/* Out-of-stock state — dim everything except the price card */
.prod-hero--oos .prod-hero-img,
.prod-hero--oos .prod-hero-emoji { filter: grayscale(0.6) opacity(0.7); }

/* Description block — sits directly under the product image in the left
   column so it reads as "About what you're looking at" instead of an
   afterthought below the whole hero. Proper headline + paragraph + the
   warning note tucked at the bottom in a smaller amber pill. */
.prod-hero-desc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.prod-hero-desc-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.prod-hero-desc-body {
  color: var(--text2);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 14px;
}
.prod-hero-note {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  color: var(--text2);
  font-size: 0.82rem;
  line-height: 1.55;
}
.prod-hero-note strong { color: #fbbf24; font-weight: 700; }
.prod-hero-section {
  padding: 0 max(36px, calc((100vw - 1280px) / 2)) 28px;
  max-width: 100%;
}

/* Related products — 3-card grid below the hero. Cards match the site's
   product-card aesthetic (dark surface, pink border on hover, gradient
   accent on price) so the row feels native to RibbetShop. */
.prod-hero-related {
  padding: 36px max(36px, calc((100vw - 1280px) / 2)) 56px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.prod-hero-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 12px;
}
.prod-hero-related-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.005em;
}
.prod-hero-related-link {
  color: var(--text3);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.prod-hero-related-link:hover { color: var(--primary); }

/* Three-card grid — spread to fill the section, never crop V-Bucks art */
.prod-hero-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: none;
  width: 100%;
}
.prod-hero-related-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
}
.prod-hero-related-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -12px rgba(255, 102, 196, 0.3);
}
/* Image wrap — square aspect, contain (no cropping) on a subtle gradient
   so the product art is fully visible regardless of source dimensions */
.prod-hero-related-img {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(124, 58, 237, 0.18), transparent 60%),
    var(--bg2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 14px;
}
.prod-hero-related-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(.4,.2,.1,1);
}
.prod-hero-related-card:hover .prod-hero-related-img img { transform: scale(1.04); }
.prod-hero-related-emoji { font-size: 2.8rem; }
.prod-hero-related-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 16px 18px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-hero-related-price {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 18px 18px;
}

@media (max-width: 860px) {
  .prod-hero-crumbs { padding: 14px 18px 0; font-size: 0.72rem; }
  .prod-hero { padding: 22px 18px; gap: 24px; min-height: 0; grid-template-columns: 1fr; }
  .prod-hero-image { min-height: 280px; aspect-ratio: 1 / 1; }
  .prod-hero-img, .prod-hero-img-alt { padding: 18px; }
  .prod-hero-title { font-size: 2rem; }
  .prod-hero-tag { font-size: 0.88rem; margin-bottom: 18px; }
  .prod-hero-price-card { padding: 18px 20px; margin-bottom: 16px; }
  .prod-hero-price-value { font-size: 2rem; }
  .prod-hero-section { padding: 0 18px 22px; }
  .prod-hero-related { padding: 26px 18px 40px; }
  .prod-hero-related-head { margin-bottom: 14px; }
  .prod-hero-related-title { font-size: 1.2rem; }
  /* On phones we stack to 2 columns at 720+, single column below 480 */
  .prod-hero-related-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .prod-hero-related-name { font-size: 0.8rem; margin: 10px 10px 2px; }
  .prod-hero-related-price { font-size: 1rem; margin: 0 10px 10px; }
}
@media (max-width: 520px) {
  .prod-hero-related-grid { grid-template-columns: 1fr; }
  .prod-hero-related-img { aspect-ratio: 16 / 9; }
}

/* Mobile — stack into single column, image first */
@media (max-width: 860px) {
  .prod-hero { grid-template-columns: 1fr; gap: 14px; padding: 4px; }
  .prod-hero-image { min-height: 240px; }
  .prod-hero-title { font-size: 1.7rem; }
  .prod-hero-price-value { font-size: 1.9rem; }
  .prod-hero-cta-row { flex-direction: column; gap: 8px; }
  .prod-hero-btn { width: 100%; }
  .prod-hero-cta-row--secondary { flex-direction: row; }
  .prod-hero-cta-row--secondary .prod-hero-btn { flex: 1; min-height: 42px; }
}
@media (max-width: 380px) {
  .prod-hero-title { font-size: 1.4rem; }
  .prod-hero-price-value { font-size: 1.6rem; }
  .prod-hero-image { min-height: 200px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BEST SELLERS (home page)
   Sits between the hero and the "How it works" steps. Showcases 4
   high-popularity products as a horizontal grid, with a "View Full Shop"
   CTA underneath. Uses the site's pink-purple palette throughout.
   ══════════════════════════════════════════════════════════════════════ */
.home-best-sellers {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 102, 196, 0.12), transparent 60%),
    var(--bg);
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}
.home-best-sellers::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
}
.best-sellers-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.best-sellers-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.best-sellers-flame {
  display: inline-block;
  font-size: 0.85em;
  filter: drop-shadow(0 0 12px rgba(255, 102, 196, 0.6));
  animation: bestSellerFlicker 2.4s ease-in-out infinite;
}
@keyframes bestSellerFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%      { transform: scale(1.06) rotate(-3deg); }
  50%      { transform: scale(1) rotate(2deg); }
  75%      { transform: scale(1.04) rotate(-2deg); }
}
.best-sellers-sub {
  color: var(--text2);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* Carousel shell — replaces the old static grid. The track holds all
   slides in one row; transform shifts them by 100/perView per step. */
.best-sellers-grid {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.best-sellers-carousel {
  display: flex;
  align-items: stretch;
  gap: 12px;
  position: relative;
}
.best-sellers-viewport {
  flex: 1;
  overflow: hidden;
  border-radius: 18px;
}
.best-sellers-track {
  display: flex;
  gap: 22px;
  transition: transform 0.55s cubic-bezier(.4,.2,.1,1);
  will-change: transform;
}
/* 4 cards visible on desktop — track step is 25% (one card width) */
.best-sellers-track .best-seller-card {
  flex: 0 0 calc(25% - 16.5px);
  min-width: 0;
}

/* Arrows */
.best-sellers-arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  align-self: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.2s;
  z-index: 2;
}
.best-sellers-arrow:hover {
  background: var(--surface2);
  border-color: var(--border-glow);
  transform: scale(1.06);
  box-shadow: 0 8px 22px -6px rgba(255, 102, 196, 0.4);
}
.best-sellers-arrow:active { transform: scale(0.96); }

/* Dots */
.best-sellers-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}
.best-sellers-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, width 0.25s;
}
.best-sellers-dot:hover     { background: rgba(255, 102, 196, 0.45); }
.best-sellers-dot.is-active { background: var(--primary); width: 26px; border-radius: 5px; }

/* Loading state — shown while waiting for the gifting shop API */
.best-sellers-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--text2);
  font-size: 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 1280px;
  margin: 0 auto;
}
.best-sellers-loading-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 102, 196, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: bestSellerSpin 0.85s linear infinite;
}
@keyframes bestSellerSpin {
  to { transform: rotate(360deg); }
}

.best-seller-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.best-seller-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -16px rgba(255, 102, 196, 0.4);
}
.best-seller-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 102, 196, 0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
}
.best-seller-card:hover::before { opacity: 1; }

.best-seller-img {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(124, 58, 237, 0.22), transparent 60%),
    var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 18px;
}
.best-seller-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(.4,.2,.1,1);
}
.best-seller-card:hover .best-seller-img img { transform: scale(1.08); }
.best-seller-emoji {
  font-size: 3rem;
}

.best-seller-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(255, 102, 196, 0.6);
}
.best-seller-badge--best-value { background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 6px 18px -4px rgba(245, 158, 11, 0.6); }
.best-seller-badge--hot        { background: linear-gradient(135deg, #ef4444, #f59e0b); }
.best-seller-badge--new        { background: linear-gradient(135deg, #22c55e, #14b8a6); box-shadow: 0 6px 18px -4px rgba(34, 197, 94, 0.5); }
.best-seller-badge--bundle     { background: linear-gradient(135deg, #6366f1, #7c3aed); box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.5); }

.best-seller-info {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.best-seller-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.best-seller-price {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.best-seller-buy {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text3);
  transition: color 0.18s, transform 0.18s;
}
.best-seller-card:hover .best-seller-buy { color: var(--primary); transform: translateX(2px); }

.best-sellers-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.best-sellers-cta {
  padding: 14px 32px;
  font-size: 1rem;
}

/* Tablet — 2 cards visible per slide */
@media (max-width: 1099px) {
  .best-sellers-track .best-seller-card { flex: 0 0 calc(50% - 11px); }
}
@media (max-width: 960px) {
  .best-sellers-title { font-size: 2.4rem; }
  .home-best-sellers { padding-top: 56px; padding-bottom: 56px; }
  .best-sellers-grid { max-width: 720px; }
}
/* Mobile — single card per slide, hide arrows (dots + auto-rotate enough) */
@media (max-width: 720px) {
  .best-sellers-track .best-seller-card { flex: 0 0 100%; }
  .best-sellers-arrow { display: none; }
  .best-sellers-track { gap: 0; }
}
@media (max-width: 540px) {
  .best-sellers-title { font-size: 2rem; }
  .best-sellers-sub { font-size: 0.92rem; }
  .home-best-sellers { padding-top: 44px; padding-bottom: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — fit-everything safety net (≤ 768 / ≤ 480 / ≤ 380)
   ─────────────────────────────────────────────────────────────────────────
   Appended at the end of the file on purpose: source order = highest
   priority for ties. Every rule below is scoped under a max-width media
   query so it only applies on phones/tablets. Goal: every section either
   fits inside the viewport, stacks vertically, or scrolls horizontally
   on its own — never cause body horizontal scroll.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Universal overflow guard ─────────────────────────────────────────
   Stops any rogue overflowing element (deep nested grid, long unbroken
   string, fixed-width legacy block) from giving the whole page a
   horizontal scrollbar. Each interior section can still scroll on its
   own (admin tables, carousels, etc.). */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  body { width: 100%; }
  /* Stop oversized images breaking layout */
  img, video, svg, iframe { max-width: 100%; height: auto; }
  /* Long words / URLs in chat / notes / order ids — break instead of overflow */
  .order-id-code, .cart-meta-v, .order-history-mid, .terms-content,
  .cart-item-name, .cart-meta-row, .modal p, .modal pre, .modal code,
  .gift-card-modal *, .gift-history-row, .order-history-item {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ── 1. Section padding + page banners ─────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 32px 14px; }
  .page-banner { padding: 36px 14px 20px; }
  .page-banner h1 { font-size: 1.7rem; line-height: 1.2; }
  .page-banner p { font-size: 0.92rem; }
}
@media (max-width: 480px) {
  .section { padding: 24px 10px; }
  .page-banner { padding: 28px 12px 16px; }
  .page-banner h1 { font-size: 1.45rem; }
  .page-banner p { font-size: 0.85rem; }
}

/* ── 2. Navbar — collapsible nav links into a horizontally-scrolling pill row.
   At very small widths the desktop nav links just don't fit. We let them
   scroll horizontally inside the nav so nothing wraps awkwardly. ──────── */
@media (max-width: 768px) {
  .navbar { padding: 8px 12px; }
  .nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { font-size: .82rem; padding: 6px 10px; white-space: nowrap; flex-shrink: 0; }
  .nav-logo img, .nav-logo svg { max-height: 32px; }
}
@media (max-width: 480px) {
  .nav-link { font-size: .78rem; padding: 5px 8px; }
}

/* ── 3. Universal grid collapse ─────────────────────────────────────────
   Any grid-template-columns with two or more tracks collapses to a single
   column on phones. Categories that were already 1fr stay unchanged. */
@media (max-width: 640px) {
  .cart-layout,
  .account-layout,
  .admin-layout,
  .gifting-layout,
  .footer-grid,
  .ec-grid,
  .broadcast-grid,
  .coupon-admin-grid,
  .checkout-grid,
  .crew-hero,
  .gifting-hero-inner,
  .feature-grid,
  .stats-grid,
  .why-grid,
  .home-trust-grid,
  .home-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Product / category grids — drop to 2 columns at phone widths so the
     cards stay tappable instead of becoming postage stamps. */
  .products-grid,
  .product-grid,
  .featured-grid,
  .category-grid,
  .gift-shop-grid,
  .crew-grid,
  .subscription-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 380px) {
  /* Single-column product cards on the smallest devices (better tap area) */
  .products-grid,
  .product-grid,
  .featured-grid,
  .gift-shop-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 4. Product cards — sane mobile sizing ───────────────────────────── */
@media (max-width: 640px) {
  .product-card { padding: 0; }
  .product-card .pc-img-wrap { aspect-ratio: 1 / 1; }
  .product-name { font-size: .95rem; line-height: 1.25; }
  .product-price { font-size: 1rem; }
  .add-to-cart-btn { font-size: .82rem; padding: 8px 12px; }
}

/* ── 5. Modals — fit viewport, drop the centred-card look ────────────── */
@media (max-width: 640px) {
  .modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px);
    padding: 22px 18px;
    border-radius: 14px;
  }
  .modal-title { font-size: 1.1rem; }
  .modal-sub { font-size: .82rem; }
  .modal-close {
    width: 32px; height: 32px;
    top: 10px; right: 10px;
    font-size: .85rem;
  }
  /* Form inputs need ≥16px font-size to prevent iOS zoom-in on focus */
  .modal input, .modal select, .modal textarea, .form-input {
    font-size: 16px;
  }
  /* Two-button modal footers stack on phone */
  .modal .btn-row,
  .modal [style*="grid-template-columns:1fr 1fr"],
  .modal [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: grid;
    gap: 8px;
  }
}

/* ── 6. Forms / inputs / buttons ──────────────────────────────────────── */
@media (max-width: 640px) {
  .form-group { margin-bottom: 12px; }
  .form-group label { font-size: .82rem; }
  .form-input, input[type="text"], input[type="email"],
  input[type="password"], input[type="number"], select, textarea {
    font-size: 16px; /* prevent iOS zoom */
    padding: 10px 12px;
  }
  .btn-primary, .btn-outline, .btn-secondary {
    font-size: .9rem;
    padding: 11px 14px;
  }
  .full-width { width: 100%; }
}

/* ── 7. Cart page — tighten the layout (already had baseline mobile rules) ── */
@media (max-width: 640px) {
  .cart-summary { padding: 18px 14px; gap: 12px; }
  .summary-hero-amount { font-size: 1.85rem; }
  .summary-hero-label, .summary-hero-currency { font-size: .72rem; }
  .pay-method-stripe, .pay-method-crypto { min-height: 50px; font-size: .92rem; }
  .pay-method-btn { font-size: .85rem; }
  .cart-pay-badges .pay-badge { font-size: .68rem; padding: 2px 6px; }
}

/* ── 8. Account page — stack everything ───────────────────────────────── */
@media (max-width: 640px) {
  .account-card { padding: 16px 14px; }
  .account-card h3 { font-size: 1rem; }
  #orderHistory .order-history-item { padding: 12px 14px; }
  .order-history-top, .order-history-mid { gap: 8px; flex-wrap: wrap; }
  .order-id-code { font-size: .75rem; }
  /* Gift history rows */
  .gift-history-row, .gift-history-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

/* ── 9. Admin panel ─────────────────────────────────────────────────────
   Sidebar collapses into a horizontal scrolling tab strip on phone.
   Tables get horizontal scroll wrappers so they never blow out the page. */
@media (max-width: 768px) {
  .admin-layout {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .admin-sidebar {
    position: static;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-nav-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: .85rem;
    padding: 8px 12px;
  }
  .admin-tab-title { font-size: 1.25rem; margin-bottom: 14px; }
  .admin-tab-header { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Tables → horizontal scroll inside their wrapper, never break body */
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .admin-table {
    min-width: 640px; /* keep it usable; user scrolls horizontally */
    font-size: .8rem;
  }
  .admin-table th, .admin-table td { padding: 8px 10px; }
  .admin-table button { font-size: .72rem; padding: 4px 8px; margin-left: 2px; }
  /* Bulk-action bar wraps cleanly */
  #adminProductsBulkBar {
    padding: 10px 12px;
    gap: 8px;
  }
  #adminProductsBulkBar > * { flex-shrink: 0; }
  /* Stats grid on overview tab */
  .stat-card { padding: 14px; }
  .s-num { font-size: 1.4rem; }
  .s-label { font-size: .78rem; }
}

/* ── 10. Gifting page — hero stacks, side card hides, item grid 2-col ── */
@media (max-width: 768px) {
  .gifting-hero { padding: 36px 14px 32px; }
  .gifting-hero-inner { flex-direction: column; text-align: center; gap: 22px; }
  .gifting-hero-h1 { font-size: 2rem; line-height: 1.15; }
  .gifting-hero-sub { font-size: .95rem; max-width: 100%; }
  .gifting-hero-card { display: none; } /* live-preview card hidden on phone */
  .gifting-trust-row { justify-content: center; flex-wrap: wrap; gap: 6px; }
  .gifting-trust-chip { font-size: .74rem; padding: 4px 10px; }
}
@media (max-width: 480px) {
  .gifting-hero-h1 { font-size: 1.65rem; }
  .gifting-hero-tag { font-size: .72rem; }
}

/* Gifting item shop card grid — 2 col → 1 col on small */
@media (max-width: 640px) {
  .gift-shop-grid, .fn-shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}
@media (max-width: 380px) {
  .gift-shop-grid, .fn-shop-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Gifting category strip — horizontal scroll instead of wrap */
@media (max-width: 768px) {
  .gifting-cat-strip, .fn-cat-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .gifting-cat-strip::-webkit-scrollbar,
  .fn-cat-strip::-webkit-scrollbar { display: none; }
  .gifting-cat-chip, .fn-cat-chip { flex-shrink: 0; white-space: nowrap; }
}

/* ── 11. Fortnite item detail overlay — stack columns on phone ─────── */
@media (max-width: 860px) {
  .fn-item-overlay-inner { flex-direction: column; }
  .fn-item-left, .fn-item-right {
    width: 100% !important;
    min-height: auto !important;
  }
  .fn-item-left { min-height: 60vh; }
  .fn-item-right { padding: 28px 18px 36px !important; }
  .fn-item-right .fn-item-name { font-size: 1.6rem; }
  .fn-item-overlay-close { top: 12px; right: 14px; width: 36px; height: 36px; }
}

/* ── 12. Subscription hero (Crew / Fallout) — stacks, image first ───── */
@media (max-width: 860px) {
  .crew-hero {
    grid-template-columns: 1fr !important;
    padding: 22px 16px;
    gap: 18px;
  }
  .crew-hero--reverse .crew-hero-image { order: 1; }
  .crew-hero--reverse .crew-hero-panel { order: 2; }
  .crew-hero-image { min-height: 220px; }
  .crew-hero-title { font-size: 1.7rem; }
  .crew-price-value { font-size: 1.8rem; }
  .crew-cta-row { flex-direction: column; gap: 8px; }
  .crew-cta-row .btn-primary, .crew-cta-row .btn-outline { width: 100%; }
}

/* ── 13. Footer — stack columns, centre content ───────────────────────── */
@media (max-width: 640px) {
  .footer { padding: 32px 16px 20px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .footer-col h4 { font-size: .92rem; }
  .footer-col a { font-size: .82rem; }
  .footer-bottom { padding-top: 18px; font-size: .78rem; text-align: center; }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ── 14. Reviews / FAQ / Support / Terms ──────────────────────────────── */
@media (max-width: 640px) {
  .review-card, .faq-item, .terms-content {
    padding: 14px 16px;
  }
  .review-name { font-size: .92rem; }
  .review-text { font-size: .85rem; line-height: 1.5; }
  .faq-question { font-size: .9rem; }
  .faq-answer { font-size: .82rem; }
  .terms-content h2 { font-size: 1.05rem; margin-top: 16px; }
  .terms-content p, .terms-content li { font-size: .85rem; line-height: 1.55; }
}

/* ── 15. Community chat — fit message bubbles + composer ─────────────── */
@media (max-width: 640px) {
  .chat-container { height: calc(100dvh - var(--nav-h) - 80px); }
  .chat-messages { padding: 12px; }
  .chat-message { max-width: 85%; font-size: .88rem; }
  .chat-composer { padding: 8px 10px; }
  .chat-composer input, .chat-composer textarea { font-size: 16px; }
  .chat-composer button { padding: 8px 12px; font-size: .85rem; }
}

/* ── 16. Reviews slideshow ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vouch-gameflip-card { padding: 14px; }
  .vouch-gameflip-quote { font-size: .9rem; line-height: 1.5; }
  .vouch-gameflip-name { font-size: .85rem; }
}

/* ── 17. Toasts / floating UI ────────────────────────────────────────── */
@media (max-width: 480px) {
  .toast {
    bottom: 14px; right: 14px; left: 14px;
    max-width: none;
    font-size: .85rem;
    padding: 12px 16px;
  }
}

/* ── 18. Buy-credits / Stripe / Crypto modals — denomination grids ───── */
@media (max-width: 640px) {
  .credit-pkg-grid, .gc-tos-denoms {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── 19. Anything else with explicit pixel widths leaks past viewport ─
   Force any element that hardcoded a width above 100vw to fit. Acts as
   the absolute last-resort safety net. */
@media (max-width: 480px) {
  .modal, .panel, .card, [style*="width: 480px"], [style*="width: 540px"],
  [style*="width: 600px"], [style*="width:480px"], [style*="width:540px"],
  [style*="width:600px"] {
    max-width: calc(100vw - 16px);
  }
}

/* ── 20. Mobile escape hatches for the fullscreen product modal ──────────
   Reported issue: customers tap a product on mobile, the prod-hero
   fullscreen surface mounts, body scroll locks, and the small X in the
   corner is hard to find / sometimes hidden under the iOS address bar.
   Result: they're stuck.
   Fixes here:
     - Bump the X to a 56×56 tap target with high-contrast background.
     - Honour env(safe-area-inset-top) so the X never lives under the
       notch / browser chrome.
     - Stick the breadcrumb to the top edge so "Home / Store / Name" is
       always visible, giving a second escape route via "Store".
   The matching JS hook (history pushState/popstate) lives in app.js so
   the browser/system Back button also dismisses the modal. */
@media (max-width: 768px) {
  .modal-product:has(.prod-hero) {
    /* Push content below any device chrome so the close button isn't
       eaten by Safari's address bar / a notch. */
    padding-top: env(safe-area-inset-top, 0px);
  }
  .modal-product:has(.prod-hero) .modal-close {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right: 14px !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
    background: rgba(0, 0, 0, .55) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.45);
    z-index: 100;
  }
  .modal-product:has(.prod-hero) .prod-hero-crumbs {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: linear-gradient(to bottom, var(--bg) 70%, transparent);
    padding: 16px 70px 12px 16px; /* leave room for the X on the right */
    margin: 0;
    font-size: .8rem;
  }
  .modal-product:has(.prod-hero) .prod-hero-crumbs a {
    padding: 6px 8px;
    margin: -6px -4px;
    border-radius: 6px;
  }
  /* Same treatment for the gifting fullscreen overlay */
  .fn-item-overlay-close {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right: 14px !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
    background: rgba(0, 0, 0, .55) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.45);
    z-index: 100;
  }
  .fn-item-crumbs {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: linear-gradient(to bottom, var(--bg) 70%, transparent);
    padding: 16px 70px 12px 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BUY CREDITS PAGE — 2×2 grid + full-width description (2026-05-02)
   Layout matches the customer's painted spec:
     ┌────────┬────────┐
     │ pack 1 │ pack 2 │
     ├────────┼────────┤
     │ pack 3 │ pack 4 │
     ├────────┴────────┤
     │   description   │
     └─────────────────┘
   Two stacked sections: Credits (purple) + Balance (green). Each section
   has a small icon+title row at the top, then the 2×2 grid, then a wide
   info card below explaining what the wallet does.
   ══════════════════════════════════════════════════════════════════════ */
.bc-section {
  margin: 0 auto 40px;
  max-width: 920px;
}
.bc-section-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-left: 4px;
}
.bc-section-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6);
}
.bc-section-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: #c4b5fd;
  margin-bottom: 4px;
}
.bc-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.005em;
}
/* The 2×2 package grid. Always exactly 2 columns on desktop so it
   matches the painted layout. Falls back to 1 column on narrow phones. */
.bc-pack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.bc-pack-grid .gift-credit-pkg {
  position: relative;          /* needed so the badge anchors correctly */
}
.bc-tag-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 2;
}

/* The wide description card under each grid */
.bc-info-card {
  margin-top: 14px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(192, 38, 211, 0.04) 100%);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 18px;
}
.bc-info-card--purple {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(192, 38, 211, 0.05) 100%);
  border-color: rgba(124, 58, 237, 0.25);
}
.bc-info-card--green {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(22, 163, 74, 0.05) 100%);
  border-color: rgba(34, 197, 94, 0.25);
}
.bc-info-card h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: 0.005em;
}
.bc-info-card p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  line-height: 1.55;
}
.bc-info-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.bc-info-perks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.bc-info-perks li > span {
  font-size: 1.3rem;
  line-height: 1;
  color: #c4b5fd;
  flex-shrink: 0;
}
.bc-info-card--green .bc-info-perks li > span { color: #86efac; }
.bc-info-perks li strong {
  display: block;
  color: #f1f5f9;
  font-size: 0.85rem;
  margin-bottom: 3px;
}
.bc-info-perks li > div {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .bc-section { margin-bottom: 28px; }
  .bc-section-icon { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 12px; }
  .bc-section-title { font-size: 1.45rem; }
  .bc-pack-grid { grid-template-columns: 1fr; gap: 12px; }
  .bc-info-card { padding: 16px 16px; border-radius: 14px; }
  .bc-info-card h3 { font-size: 1.05rem; }
  .bc-info-card p { font-size: 0.82rem; }
  .bc-info-perks li { padding: 10px; gap: 10px; }
  .bc-info-perks li strong { font-size: 0.8rem; }
  .bc-info-perks li > div { font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE COMPACT PASS — 2026-05-02
   Pulls down padding, type sizes, and spacing across the customer-facing
   site so phones don't feel like a stretched-out desktop layout. Touches
   storefront hero cards, product grid, cart, modals, nav, gifting, and
   the per-section heroes (V-Bucks / Crew / Apex / etc.).
   Scoped to <=640px so tablets and desktops keep the roomier layout.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── Premium hero cards (V-Bucks / Crew / Apex / Founders / etc.) ── */
  .crew-hero {
    padding: 16px !important;
    gap: 14px !important;
    border-radius: 14px !important;
    margin-top: 16px;
  }
  .crew-hero-image {
    min-height: 200px !important;
    border-radius: 11px !important;
  }
  .crew-hero-panel { padding: 0 !important; }
  .crew-chip {
    font-size: .65rem !important;
    padding: 3px 9px !important;
    margin-bottom: 6px;
  }
  .crew-hero-title {
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
    margin: 4px 0 6px !important;
  }
  .crew-hero-tag {
    font-size: .78rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }
  .crew-price-card {
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
  }
  .crew-price-label { font-size: .65rem !important; letter-spacing: 1.6px !important; }
  .crew-price-value { font-size: 1.7rem !important; }
  .crew-field { margin-bottom: 10px !important; }
  .crew-field-label { font-size: .76rem !important; margin-bottom: 5px !important; }
  .crew-select {
    padding: 10px 12px !important;
    font-size: .85rem !important;
  }
  .crew-static-pill {
    padding: 9px 12px !important;
    font-size: .75rem !important;
  }
  .crew-platform-toggle { padding: 4px !important; gap: 6px !important; }
  .crew-platform-btn { padding: 9px 6px !important; gap: 2px !important; }
  .crew-platform-icon { font-size: 1.15rem !important; }
  .crew-platform-label { font-size: .8rem !important; }
  .crew-platform-price { font-size: .68rem !important; }
  .crew-cta-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .crew-btn-add,
  .crew-btn-buy {
    width: 100% !important;
    padding: 11px 14px !important;
    font-size: .92rem !important;
  }
  .crew-login-note { font-size: .68rem !important; margin-top: 10px !important; }
  .crew-oos-banner {
    padding: 12px 14px !important;
    margin-top: 12px !important;
    gap: 10px !important;
  }
  .crew-oos-icon { font-size: 1.5rem !important; }
  .crew-oos-title { font-size: 1.1rem !important; }
  .crew-oos-sub { font-size: .7rem !important; }

  /* Description card under each hero */
  .crew-description-card {
    padding: 18px 18px !important;
    margin-top: 14px !important;
    border-radius: 12px !important;
  }
  .crew-description-card h3 { font-size: 1rem !important; margin-bottom: 6px; }
  .crew-description-card p  { font-size: .82rem !important; line-height: 1.45 !important; }
  .crew-perks-list {
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .crew-perks-list li {
    padding: 10px !important;
    gap: 9px !important;
  }
  .crew-perk-icon { width: 28px !important; height: 28px !important; font-size: .95rem !important; }
  .crew-perks-list li strong { font-size: .82rem !important; }
  .crew-perks-list li > div { font-size: .72rem !important; line-height: 1.4 !important; }

  /* Successive heroes — tighten the gap between Crew + Fallout / V-Bucks + Founders / etc. */
  .crew-description-card + .crew-hero { margin-top: 22px !important; }

  /* ── Section header (Battle Royale / Subscriptions / etc.) ── */
  .shop-section-header {
    padding: 18px 16px !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }
  .ssh-img-wrap { width: 56px !important; height: 56px !important; }
  .ssh-label    { font-size: 1.4rem !important; }
  .ssh-sub      { font-size: .76rem !important; }
  .ssh-count    { font-size: .68rem !important; }

  /* ── Section nav pills ── */
  .shop-nav-bar {
    padding: 10px 12px 0 !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .shop-nav-bar::-webkit-scrollbar { display: none; }
  .shop-sec-pill {
    padding: 6px 11px !important;
    font-size: .75rem !important;
    flex-shrink: 0;
  }

  /* ── Login wall (Shop unauth gate) ── */
  .shop-login-wall {
    padding: 32px 20px !important;
    margin: 24px auto !important;
    border-radius: 16px !important;
  }
  .shop-login-wall-icon { font-size: 3.4rem !important; }
  .shop-login-wall-title { font-size: 1.4rem !important; }
  .shop-login-wall-sub   { font-size: .85rem !important; margin-bottom: 22px !important; }
  .shop-login-wall-perks { gap: 10px !important; padding-top: 18px !important; }
  .shop-login-wall-perk  { padding: 10px !important; gap: 9px !important; }
  .shop-login-wall-perk strong { font-size: .82rem !important; }
  .shop-login-wall-perk div    { font-size: .72rem !important; }

  /* ── Cart item rows — tighter ── */
  .cart-item { padding: 10px !important; gap: 10px !important; }
  .cart-item-img { width: 50px !important; height: 50px !important; border-radius: 8px !important; }
  .cart-item-name { font-size: .82rem !important; }
  .cart-item-meta { font-size: .7rem !important; }
  .qty-btn { width: 26px !important; height: 26px !important; font-size: .85rem !important; }

  /* ── Cart summary ── */
  .summary-hero { padding: 16px !important; border-radius: 12px !important; }
  .summary-hero-total { font-size: 1.6rem !important; }
  .summary-breakdown { padding: 14px !important; font-size: .82rem !important; }

  /* ── Modals — compact padding + bigger tap targets ── */
  .modal { padding: 18px 14px !important; max-height: 92vh !important; }
  .modal-title { font-size: 1.15rem !important; }
  .modal-sub { font-size: .76rem !important; margin-bottom: 14px !important; }
  .modal .form-input,
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="password"],
  .modal input[type="number"] {
    padding: 11px 12px !important;
    font-size: .9rem !important;
    min-height: 42px;
  }

  /* ── Buttons — keep tap targets ≥ 40px tall ── */
  .btn-primary,
  .btn-outline,
  .btn-ghost {
    min-height: 40px;
    font-size: .88rem !important;
  }

  /* ── Footer ── */
  .footer-inner { padding: 24px 16px !important; }
  .footer-links { font-size: .82rem !important; }
  .footer-bottom { font-size: .72rem !important; padding: 12px 0 !important; }

  /* ── Featured / home stats ── */
  .home-section h2 { font-size: 1.35rem !important; }
  .home-section p  { font-size: .85rem !important; }

  /* ── Gifting page — tighter cards ── */
  .gifting-friend-row { padding: 8px 10px !important; font-size: .82rem !important; }
  .gifting-credit-display { font-size: .9rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ULTRA-COMPACT — ≤ 380px (iPhone SE 1st gen, Galaxy Fold outer screen)
   Even tighter padding + smaller type. Aim is "still readable, not
   cramped" — content always wins over chrome at this size.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .crew-hero { padding: 12px !important; }
  .crew-hero-image { min-height: 170px !important; }
  .crew-hero-title { font-size: 1.35rem !important; }
  .crew-hero-tag   { font-size: .72rem !important; }
  .crew-price-card { padding: 10px 12px !important; }
  .crew-price-value { font-size: 1.5rem !important; }
  .crew-platform-btn { padding: 8px 4px !important; }
  .crew-platform-label { font-size: .72rem !important; }
  .crew-platform-price { font-size: .62rem !important; }
  .crew-btn-add, .crew-btn-buy { font-size: .85rem !important; padding: 10px 12px !important; }
  .crew-oos-title { font-size: 1rem !important; }
  .crew-oos-sub { font-size: .66rem !important; }

  .crew-description-card { padding: 14px !important; }
  .crew-description-card h3 { font-size: .92rem !important; }
  .crew-description-card p  { font-size: .76rem !important; }
  .crew-perks-list li { padding: 8px !important; gap: 8px !important; }
  .crew-perk-icon { width: 26px !important; height: 26px !important; }
  .crew-perks-list li strong { font-size: .76rem !important; }
  .crew-perks-list li > div { font-size: .68rem !important; }

  .ssh-img-wrap { width: 48px !important; height: 48px !important; }
  .ssh-label { font-size: 1.2rem !important; }
}