/* ============================================================
   Self-hosted fonts (same origin, no Google Fonts round trip).
   Barlow Condensed for headings: athletic, compact, reads like
   jersey and scoreboard type. Barlow for body copy. Playfair is kept
   only for the SANDRAGON wordmark so the brand mark is unchanged.
   ============================================================ */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2')}

:root{
  --bg:#050505;
  --bg-alt:#0c0c0c;
  --card:#141414;
  --card-glass:rgba(20,20,20,.55);
  --border:rgba(255,255,255,.08);
  --border-gold:rgba(201,162,39,.35);
  --gold:#c9a227;
  --gold-light:#f0d580;
  --gold-dim:rgba(201,162,39,.14);
  --white:#ffffff;
  --muted:#a3a3a3;
  --accent:#d94f2b;
  --success:#2f9e5a;
  --danger:#e0564a;
  --radius:14px;
  --radius-lg:18px;
  --maxw:1200px;
  --ease:cubic-bezier(.23,1,.32,1);          /* strong ease-out: UI enters/feedback */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* on-screen movement */
  --font-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --font-brand:'Playfair Display',Georgia,serif;
  /* Shape system: cards 18px, inputs 12px, every button/pill/chip fully round. */
  --radius-input:12px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-soft:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-premium:0 24px 70px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(201,162,39,.06);
  --shadow-gold:0 8px 26px -6px rgba(201,162,39,.35);
  --star-dim:rgba(255,255,255,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(201,162,39,.08), transparent 60%),
    radial-gradient(900px 560px at 110% 10%, rgba(217,79,43,.06), transparent 55%),
    var(--bg);
  color:var(--white);
  font-family:var(--font-body);font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
/* fine film-grain texture for premium depth */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;line-height:1.08;text-transform:uppercase}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative;z-index:2}
.gold{color:var(--gold)}
.accent{color:var(--accent)}

/* Buttons: pill shape, specific transitions, instant press feedback.
   The light sheen sweep is kept (on hover only, desktop) because it
   reads as "premium" without costing anything on touch screens. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#111;font-weight:700;border:none;
  padding:14px 28px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display);font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--shadow-gold);
  transition:transform .16s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(201,162,39,.6)}
  .btn:hover::before{transform:translateX(120%)}
}
.btn:active{transform:scale(.97)}
.btn.outline{background:transparent;border:1.5px solid var(--gold);color:var(--gold);box-shadow:none}
body.light-theme .btn.outline{color:#8a6d12;border-color:#b8921f}
body.light-theme .btn.outline:hover{color:#111;border-color:var(--gold)}
.btn.outline:hover{background:var(--gold);color:#111}
.btn.danger{background:var(--danger);color:#fff;box-shadow:0 8px 22px -6px rgba(224,86,74,.4)}
.btn.small{padding:10px 18px;font-size:.88rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn:disabled::before{display:none}

/* Navbar — frosted glass, animated underline */
header.navbar{
  /* Solid, not frosted: over the light storefront a translucent dark bar
     turned muddy grey, and a full-width backdrop blur is re-rendered on
     every scroll frame on phones. */
  position:sticky;top:0;z-index:100;background:#0b0b0b;
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s var(--ease);
  view-transition-name:site-header;
}
header.navbar.scrolled{box-shadow:0 10px 30px -14px rgba(0,0,0,.65)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;flex-wrap:wrap;row-gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-brand);font-weight:700;font-size:1.4rem;letter-spacing:2px;text-transform:none}
.brand img{height:38px;width:auto;border-radius:6px;box-shadow:0 0 0 1px var(--border-gold)}
/* letter-spacing on .brand applies trailing tracking after the last
   character of each inline fragment — without these negative margins,
   splitting the word into SAN / D / RAGON re-introduces the "SAN D
   RAGON" gap bug this was fixed for previously. */
.brand-d{color:#e2202f;margin-left:-2px}
.brand-tail{margin-left:-2px}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{position:relative;font-family:var(--font-display);font-weight:600;font-size:.98rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:color .2s;white-space:nowrap}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.cart-icon{position:relative;padding-right:8px}
.cart-count{
  position:absolute;top:-8px;right:-6px;background:var(--accent);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:.68rem;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:flex;
  align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg);
}
.cart-count[data-count="0"]{display:none}
.cart-count.bump{animation:countBump .45s var(--ease)}
@keyframes countBump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.hamburger{
  display:none;font-size:1.5rem;background:none;border:none;color:var(--white);cursor:pointer;
  transition:transform .25s;min-width:32px;min-height:32px;align-items:center;justify-content:center;
}
.hamburger:active{transform:scale(.85)}

/* ---------- Search bar (Amazon-style live search) ---------- */
.nav-search{position:relative;display:flex;align-items:center;order:5;flex:1 1 100%}
.nav-search input{
  width:100%;padding:11px 46px 11px 18px;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:30px;color:#fff;font-size:.88rem;font-family:inherit;transition:border-color .25s,box-shadow .25s;
}
.nav-search input::placeholder{color:var(--muted)}
.nav-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.nav-search button{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#000;
  display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-spring);font-size:.85rem;
}
.nav-search button:hover{transform:translateY(-50%) scale(1.1)}
.search-dropdown{
  position:absolute;top:calc(100% + 10px);left:0;right:0;min-width:300px;background:#0d0d0d;
  border:1px solid var(--border-gold);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);
  padding:8px;display:none;max-height:60vh;overflow-y:auto;z-index:250;
}
.search-dropdown.open{display:block;animation:popIn .18s var(--ease);transform-origin:top center}
@keyframes popIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.search-result{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;transition:background .2s}
.search-result:hover{background:rgba(201,162,39,.1)}
.search-result img{width:46px;height:46px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid var(--border)}
.sr-info{min-width:0}
.sr-name{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{font-size:.76rem;color:var(--muted);margin-top:2px}
.search-view-all{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;margin-top:4px;
  border-top:1px solid var(--border);color:var(--gold);font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
}
.search-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:.86rem}

/* ---------- Category mega-menu ----------
   Left: category list (icon tile, name, item count). Right: a live preview
   of a few products from the hovered category. Opens with a short
   fade + lift from the trigger (180ms, strong ease-out). */
.nav-cat-wrap{position:relative}
.nav-cat-trigger{display:flex;align-items:center;gap:6px;cursor:pointer}
.nav-cat-trigger i{font-size:.65rem;transition:transform .2s var(--ease)}
.mega-menu{
  position:absolute;top:calc(100% + 18px);left:50%;
  transform:translateX(-50%) translateY(6px) scale(.985);transform-origin:top center;
  width:780px;max-width:calc(100vw - 32px);
  background:linear-gradient(180deg,#121212 0%,#0b0b0b 100%);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.75),0 0 0 1px rgba(201,162,39,.12) inset;
  padding:10px;opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  z-index:250;
}
/* invisible bridge so the menu doesn't close while the pointer crosses the gap */
.mega-menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
@media(hover:hover) and (pointer:fine){
  .nav-cat-wrap:hover .mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
  .nav-cat-wrap:hover .nav-cat-trigger i{transform:rotate(180deg)}
}
.nav-cat-wrap.open .mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
.nav-cat-wrap.open .nav-cat-trigger i{transform:rotate(180deg)}

.mega-menu-inner{display:grid;grid-template-columns:280px 1fr;gap:10px}
.mega-menu-list{display:flex;flex-direction:column;gap:1px;padding:4px;max-height:min(560px,calc(100vh - 190px));overflow-y:auto;scrollbar-width:thin}
.mega-menu a{text-transform:none;letter-spacing:normal}
.mega-menu a::after{display:none!important}
.mega-menu-item{
  position:relative;display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:12px;
  color:var(--muted);text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
.mega-menu-item::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:var(--gold);transform:scaleY(0);transition:transform .18s var(--ease);
}
.mega-menu-item.is-active,.mega-menu-item:focus-visible{background:rgba(201,162,39,.08);color:var(--white);outline:none}
.mega-menu-item.is-active::before,.mega-menu-item:focus-visible::before{transform:scaleY(1)}
.mega-menu-item:active{transform:scale(.98)}
.mega-menu-icon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.22);color:var(--gold);font-size:.95rem;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.mega-menu-item.is-active .mega-menu-icon{background:linear-gradient(135deg,var(--gold),var(--gold-light));border-color:transparent;color:#111}
.mega-menu-icon img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.mega-menu-text{display:flex;flex-direction:column;min-width:0;flex:1}
.mega-menu-name{font-family:var(--font-display,inherit);font-size:.9rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-menu-count{font-size:.72rem;color:rgba(255,255,255,.4);margin-top:1px}
.mega-menu-go{font-size:.65rem;opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .18s var(--ease);color:var(--gold)}
.mega-menu-item.is-active .mega-menu-go{opacity:1;transform:none}

.mega-preview{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:18px;display:flex;flex-direction:column}
.mega-preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.mega-preview-title{font-family:var(--font-display,inherit);font-size:1.15rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--white)}
.mega-preview-link{font-size:.78rem;font-weight:600;color:var(--gold);text-transform:uppercase!important;letter-spacing:.5px!important;white-space:nowrap}
.mega-preview-link i{font-size:.7rem;margin-left:4px;transition:transform .18s var(--ease)}
.mega-preview-link:hover i{transform:translateX(3px)}
.mega-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;animation:megaFade .2s var(--ease)}
.mega-product{display:flex;flex-direction:column;gap:6px;color:var(--white);text-decoration:none;min-width:0}
.mega-product-img{display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#1a1a1a}
.mega-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.mega-product-name{font-size:.8rem;line-height:1.3;color:#e6e6e6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-product-price{font-size:.82rem;font-weight:700;color:var(--gold-light)}
.mega-product-price s{font-weight:400;color:rgba(255,255,255,.35);margin-left:4px;font-size:.75rem}
@media(hover:hover) and (pointer:fine){
  .mega-menu-item:hover{background:rgba(255,255,255,.04);color:var(--white)}
  .mega-product:hover .mega-product-img img{transform:scale(1.05)}
  .mega-product:hover .mega-product-name{color:var(--gold-light)}
}
.mega-preview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:180px;color:var(--muted);font-size:.85rem;text-align:center;animation:megaFade .2s var(--ease)}
.mega-preview-empty-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.22);color:var(--gold);font-size:1.3rem;overflow:hidden}
.mega-preview-empty-icon img{width:100%;height:100%;object-fit:cover}
@keyframes megaFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mega-menu-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.7}
.mega-menu-all{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:12px;border-radius:12px;text-transform:uppercase!important;letter-spacing:.6px!important;
  background:rgba(255,255,255,.03);color:var(--gold);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;
  transition:background-color .15s ease;
}
.mega-menu-all:hover{background:rgba(201,162,39,.1)}
.mega-menu-all-count{font-size:.7rem;padding:1px 8px;border-radius:999px;background:rgba(201,162,39,.15);color:var(--gold-light)}
@media(prefers-reduced-motion:reduce){
  .mega-menu{transform:translateX(-50%)!important}
  .mega-preview-grid,.mega-preview-empty{animation:none}
}

@media(min-width:1001px){
  .brand{flex-shrink:0}
  .nav-links{order:2;flex-shrink:0}
  /* Search bar deliberately shrinks first — real icon-font glyphs (cart
     bag, chevron, user, lock) take real width in production, unlike in
     preview environments where a blocked icon font can under-report it.
     Keeping nav-links flex-shrink:0 and letting the search bar be the
     one flexible element is what keeps the whole row on one line.
     The breakpoint is deliberately 1001px, not the usual ~768px tablet
     line: the extra nav items (Order History, account name) need more
     room before a single row works, so anything narrower gets the clean
     hamburger menu instead of a cramped/wrapped inline row. */
  .nav-search{order:1;flex:1 1 180px;min-width:120px;max-width:230px;margin:0 14px}
}

@media(min-width:1150px){
  .nav-search{max-width:280px}
}

@media(max-width:1000px){
  .nav-links{
    /* header.navbar has backdrop-filter, which (per spec) makes it a
       containing block for position:fixed descendants — so bottom:0 here
       would resolve against the header's own ~66px box, not the real
       viewport, and the menu would still only be as tall as its content.
       height:calc(100vh - 66px) sidesteps that entirely since vh units
       always reference the true viewport no matter the containing block,
       guaranteeing this always covers the full remaining screen so
       nothing scrolled-to behind it can ever show through.
       Solid background with NO backdrop-filter here on purpose: this menu
       is meant to be fully opaque, and stacking a second backdrop-filter
       on a descendant of an element that already has one produced visible
       compositing artifacts (page content bleeding through) in testing —
       a plain solid fill sidesteps that entirely and is exactly what a
       full-screen opaque menu should look like anyway. */
    position:fixed;top:66px;left:0;right:0;height:calc(100vh - 66px);background:#0a0a0a;
    flex-direction:column;align-items:stretch;
    padding:20px;border-bottom:1px solid var(--border);
    transform:translateY(-150%);transition:.35s var(--ease);gap:4px;
    overflow-y:auto;
  }
  /* Every row in the mobile menu gets the same full-width, left-aligned
     treatment — before this, plain links were centered (inherited from
     the desktop align-items:center) while .nav-cat-wrap (width:100%)
     ended up left-aligned by accident, so the menu looked inconsistent:
     "Categories" on the left, everything else floating in the middle. */
  .nav-links > a,
  .nav-links > .nav-cat-wrap,
  .nav-links > .nav-account{
    width:100%;
  }
  .nav-links > a,
  .nav-links .nav-cat-trigger,
  .nav-account-link{
    justify-content:flex-start;padding:12px 4px;
  }
  .nav-links > a.cart-icon{
    display:flex;align-items:center;gap:8px;justify-content:flex-start;
  }
  /* .cart-count is normally an absolutely-positioned notification dot
     sitting on top of the bag icon (fine when cart-icon is compact/desktop
     width) — now that this row spans the full menu width, "right:-4px"
     would anchor it to the far right of the whole screen instead of next
     to the icon. Drop back to normal inline flow here so it just sits
     right after the "Cart" text like a plain count bubble. */
  .nav-links .cart-count{position:static;top:auto;right:auto;box-shadow:none}
  .nav-links.active{transform:translateY(0)}
  .hamburger{display:flex}
  .nav-cat-wrap{width:100%}
  .mega-menu{
    position:static;transform:none;width:100%;max-width:100%;opacity:1;visibility:hidden;
    height:0;padding:0;overflow:hidden;box-shadow:none;border:none;background:transparent;margin-top:0;
  }
  .mega-menu::before{display:none}
  .nav-cat-wrap.open .mega-menu{visibility:visible;height:auto;padding:8px;margin-top:6px;background:rgba(255,255,255,.03);border-radius:14px;transform:none}
  .mega-menu-inner{grid-template-columns:1fr}
  .mega-preview{display:none}
  .mega-menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;max-height:none;padding:0}
  .mega-menu-item{padding:10px 8px;gap:10px}
  .mega-menu-item::before,.mega-menu .mega-menu-go{display:none}
  .mega-menu-item.is-active{background:transparent;color:var(--muted)}
  .mega-menu-item.is-active .mega-menu-icon{background:rgba(201,162,39,.08);border-color:rgba(201,162,39,.22);color:var(--gold)}
  .mega-menu-icon{width:34px;height:34px;border-radius:10px;font-size:.85rem}
  .mega-menu-name{font-size:.8rem;white-space:normal}
}

/* ---------- Category filter pills (storefront grid) ----------
   Wraps on wide screens, becomes one swipeable row on phones so the
   product grid starts higher up the screen. */
.category-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1080px;margin:0 auto 38px}
.cat-pill{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  padding:16px 10px 14px;border-radius:18px;border:1px solid rgba(0,0,0,.07);background:#fff;
  color:#1a1a1a;cursor:pointer;text-align:center;min-width:0;flex:0 0 132px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px -14px rgba(0,0,0,.25);
  transition:transform .18s var(--ease),box-shadow .2s ease,border-color .2s ease,background-color .2s ease;
}
.cat-pill-icon{
  width:40px;height:40px;border-radius:12px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(145deg,#fbf3d9,#f3e2a8);color:#8a6a10;font-size:.95rem;overflow:hidden;
  transition:background .2s ease,color .2s ease,transform .2s var(--ease);
}
.cat-pill-icon img{width:100%;height:100%;object-fit:cover}
.cat-pill-name{font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.cat-pill-count{font-size:.72rem;color:#8a8a8a}
.cat-pill:active{transform:scale(.97)}
.cat-pill:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cat-pill.active{background:#111;border-color:#111;color:#fff;box-shadow:0 12px 28px -14px rgba(0,0,0,.55)}
.cat-pill.active .cat-pill-icon{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#111}
.cat-pill.active .cat-pill-count{color:rgba(255,255,255,.6)}
@media(hover:hover) and (pointer:fine){
  .cat-pill:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.45);box-shadow:0 14px 30px -16px rgba(0,0,0,.35)}
  .cat-pill:hover .cat-pill-icon{transform:scale(1.06)}
}
@media(max-width:700px){
  .category-pills{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:20px;gap:10px;
    margin:0 -20px 26px;padding:4px 20px 10px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .category-pills::-webkit-scrollbar{display:none}
  .cat-pill{scroll-snap-align:start;flex:0 0 96px;padding:12px 6px 10px;border-radius:16px}
  .cat-pill-icon{width:34px;height:34px;border-radius:10px;font-size:.85rem;margin-bottom:4px}
  .cat-pill-name{font-size:.8rem}
  .cat-pill-count{font-size:.66rem}
}
@media(prefers-reduced-motion:reduce){.cat-pill,.cat-pill-icon{transition:none}}
.search-results-banner{text-align:center;color:var(--muted);margin:-14px 0 34px;font-size:.95rem}
.search-results-banner a{color:var(--gold);text-decoration:underline;margin-left:10px;cursor:pointer}

/* ---------- Homepage banner carousel ---------- */
.banner-carousel{
  position:relative;max-width:var(--maxw);margin:0 auto 44px;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-premium);border:1px solid var(--border-gold);
  aspect-ratio:var(--banner-ratio, 1756/450);background:var(--card);
}
.banner-track{position:relative;width:100%;height:100%}
.banner-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease);overflow:hidden}
.banner-slide.active{opacity:1;visibility:visible}
.banner-slide picture{display:block;width:100%;height:100%}
.banner-slide img{width:100%;height:100%;object-fit:cover;display:block;position:relative}
.banner-bg{display:none}
.banner-explore-btn{
  position:absolute;left:28px;bottom:28px;background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:#000;font-weight:700;padding:10px 22px;border-radius:30px;font-size:.85rem;text-transform:uppercase;
  letter-spacing:.5px;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-gold);
  transition:transform .3s var(--ease-spring);
}
.banner-explore-btn:hover{transform:translateY(-2px) scale(1.03)}
.banner-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;z-index:5;font-size:.85rem;
}
.banner-arrow:hover{background:var(--gold);color:#000;border-color:transparent}
.banner-arrow.prev{left:16px}
.banner-arrow.next{right:16px}
.banner-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.banner-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);border:none;cursor:pointer;transition:.25s}
.banner-dot.active{background:var(--gold);width:22px;border-radius:5px}
@media(max-width:600px){
  /* Full image, zero cropping, zero letterbox frame — the only way to get
     all three at once is to make the box match the image's real shape
     exactly (same trick used for desktop above), rather than forcing a
     fixed ratio like 16:9. The trade-off: on a very wide banner (like
     1756×450), that does mean a visually shorter strip on a narrow phone
     screen — but that's the honest consequence of "show 100% of the
     photo, no cropping, no frame," which is what was asked for.
     If a slide has its own purpose-made mobileUrl, that image's real
     ratio (--banner-ratio-mobile) still takes priority over the shared
     desktop image's ratio. */
  .banner-carousel{aspect-ratio:var(--banner-ratio-mobile, var(--banner-ratio, 1756/450));border-radius:14px}
  .banner-slide img{object-fit:cover}
  .banner-explore-btn{left:8px;bottom:8px;padding:4px 10px;font-size:.58rem;gap:4px;border-radius:16px;z-index:2}
  .banner-explore-btn i{font-size:.55rem}
  .banner-arrow{width:24px;height:24px;font-size:.6rem;z-index:2}
  .banner-arrow.prev{left:6px}
  .banner-arrow.next{right:6px}
  .banner-dots{bottom:5px;gap:4px;z-index:2}
  .banner-dot{width:5px;height:5px}
  .banner-dot.active{width:14px}
}

/* ---------- Admin: banner slot manager ---------- */
.banner-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.banner-slots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.banner-slots{grid-template-columns:1fr}}
.banner-slot{
  background:var(--card-glass);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;transition:border-color .3s;
}
.banner-slot:hover{border-color:var(--border-gold)}
.banner-slot-preview{
  position:relative;aspect-ratio:1756/450;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);
  border:1px dashed var(--border);
}
.banner-slot-preview img{width:100%;height:100%;object-fit:cover;display:block}
.banner-slot-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--muted);font-size:.8rem;
}
.banner-slot-empty i{font-size:1.6rem;opacity:.5}
.banner-slot-remove{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.7);
  border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.banner-slot-remove:hover{background:var(--danger)}
.banner-mobile-row{display:flex;align-items:center;gap:12px}
.banner-mobile-preview{
  position:relative;width:56px;height:70px;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:rgba(255,255,255,.03);border:1px dashed var(--border);
}
.banner-mobile-preview img{width:100%;height:100%;object-fit:cover;display:block}
.banner-slot-empty.small{gap:4px}
.banner-slot-empty.small i{font-size:1.1rem}
.banner-slot-remove.small{width:20px;height:20px;top:4px;right:4px;font-size:.65rem}

/* Category tag on a product card */
.cat-tag{
  display:inline-flex;align-items:center;background:rgba(10,10,10,.78);
  color:var(--gold-light);font-family:var(--font-display);font-weight:600;font-size:.74rem;padding:3px 10px;border-radius:999px;text-transform:uppercase;
  letter-spacing:.06em;
}

/* ---------- Nav account widget ---------- */
.nav-account-link{display:flex;align-items:center;gap:7px;white-space:nowrap}
.nav-account-link i{font-size:1rem;color:var(--gold)}

/* ---------- Account modal (create / sign in) ---------- */
.account-modal{max-width:440px;position:relative}
.account-close{
  position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);
  font-size:1.5rem;line-height:1;cursor:pointer;transition:color .2s;
}
.account-close:hover{color:var(--gold)}
.account-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px}
.account-tab{
  flex:1;background:none;border:none;color:var(--muted);padding:12px 6px;cursor:pointer;
  font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid transparent;
  transition:.25s var(--ease);
}
.account-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.account-pane h3{margin-bottom:6px}
.account-sub{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.account-error{
  background:rgba(224,86,74,.12);border:1px solid rgba(224,86,74,.4);color:#ff9a91;
  padding:10px 14px;border-radius:8px;font-size:.82rem;margin-bottom:14px;
}

/* ---------- Welcome toast ---------- */
.welcome-toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-30px);opacity:0;
  display:flex;align-items:center;gap:14px;background:#0d0d0d;
  border:1px solid var(--border-gold);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);
  padding:16px 22px;z-index:600;transition:transform .4s var(--ease-spring),opacity .4s var(--ease);
  max-width:90vw;
}
.welcome-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.welcome-toast i{font-size:1.5rem;color:var(--success)}
.welcome-toast strong{display:block;margin-bottom:2px}
.welcome-toast div div{color:var(--muted);font-size:.85rem}

/* ---------- Order history & tracking ---------- */
.order-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px;margin-bottom:18px;transition:border-color .3s;
}
.order-card:hover{border-color:var(--border-gold)}
.order-card-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.order-card-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:.85rem;margin-bottom:14px}
.order-card-meta span strong{color:var(--white);font-weight:600}

.track-stepper{display:flex;justify-content:space-between;margin:26px 0 8px;position:relative}
.track-stepper::before{
  content:'';position:absolute;top:15px;left:5%;right:5%;height:2px;background:var(--border);z-index:0;
}
.track-stepper .step{flex:1;text-align:center;position:relative;z-index:1}
.track-stepper .dot{
  width:32px;height:32px;border-radius:50%;background:var(--bg-alt);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:var(--muted);
  transition:.3s var(--ease);font-size:.85rem;
}
.track-stepper .step.done .dot{background:linear-gradient(135deg,var(--gold),var(--gold-light));border-color:transparent;color:#000}
.track-stepper .step.current .dot{box-shadow:0 0 0 5px var(--gold-dim);animation:pulseGlow 2s ease-in-out infinite}
.track-stepper .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.track-stepper .step.done .label{color:var(--gold-light)}
@media(max-width:600px){
  .track-stepper{flex-direction:column;align-items:flex-start;gap:22px}
  .track-stepper::before{display:none}
  .track-stepper .step{display:flex;align-items:center;gap:14px;text-align:left}
  .track-stepper .dot{margin:0}
}

/* ---------- Profile page ---------- */
.profile-card{
  max-width:560px;margin:0 auto;background:var(--card);
  border:1px solid var(--border-gold);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-premium);
}
.profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.profile-edit-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--gold);cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:center;
}
.profile-edit-btn:hover{border-color:var(--gold);background:rgba(201,162,39,.1)}
.profile-field{margin-bottom:16px}
.profile-field label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:5px}
.profile-field .value{font-size:.98rem}
.profile-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ============ Hero (landing page video) — intentionally untouched ============ */
.hero{
  position:relative;overflow:hidden;background:#0b0b0b; /* dark while the video loads, not a white flash */
  min-height:520px;display:flex;align-items:center;justify-content:center;
  text-align:center;border-bottom:1px solid var(--border);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Lighter grading than before: pushing brightness to 1.25 clipped the
     highlights and exaggerated compression blocks, which reads as low-res. */
  z-index:0;filter:brightness(1.08) contrast(1.06) saturate(1.1);
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 100%);
}
.hero-content{
  position:relative;z-index:2;padding:20px;
  width:100%;display:flex;justify-content:center;align-self:flex-end;
}
.hero{align-items:flex-end;padding-bottom:40px}
.back-btn{
  display:inline-flex;align-items:center;gap:8px;color:var(--muted);
  font-size:.9rem;padding:18px 0 0;cursor:pointer;
}
.back-btn:hover{color:var(--gold)}
@media(max-width:600px){.hero{min-height:400px}.hero h1{font-size:2rem}}
/* ============ end hero block ============ */

/* Section titles */
.section-title{
  text-align:center;margin:56px 0 30px;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:.02em;
  position:relative;display:block;
}
.section-title::after{
  content:'';display:block;width:44px;height:3px;margin:12px auto 0;border-radius:3px;
  background:var(--gold);
}

/* Product grid: two columns on phones (standard for shops, twice the
   products per scroll), auto-fill above that. */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:24px;padding:0 0 70px;
}
@media(max-width:600px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.product-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;cursor:pointer;position:relative;
  box-shadow:0 1px 2px rgba(20,16,4,.04);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
@media(hover:hover) and (pointer:fine){
  .product-card:hover{
    transform:translateY(-4px);border-color:var(--border-gold);
    box-shadow:0 22px 40px -22px rgba(60,45,5,.35);
  }
}
.product-card:active{transform:scale(.985)}
.product-card .img-wrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f2f0ea}
.product-card .img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease), opacity .45s var(--ease)}
.product-card .img-alt{opacity:0}
@media(hover:hover) and (pointer:fine){
  .product-card:hover .img-main{transform:scale(1.05)}
  .product-card:hover .img-wrap.has-alt .img-main{opacity:0}
  .product-card:hover .img-alt{opacity:1;transform:scale(1.03)}
}
.card-tags{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.product-card .info{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.product-card .name{
  font-weight:600;font-size:1rem;line-height:1.3;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-card .price{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.01em;color:var(--white)}
.product-card .price-row{margin-top:auto}
@media(max-width:600px){
  .product-card .info{padding:10px 11px 12px}
  .product-card .name{font-size:.9rem}
  .product-card .price{font-size:1.12rem}
  .card-tags{top:8px;left:8px}
  .cat-tag{font-size:.66rem;padding:2px 8px}
}
.empty-state{text-align:center;color:var(--muted);padding:60px 20px;grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty-state > i{font-size:1.8rem;color:var(--gold)}

/* Skeleton loaders: the page keeps its final shape while data arrives,
   so nothing jumps when products appear. */
.sk{position:relative;overflow:hidden;background:#ece9e1;border-radius:8px}
.sk::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:skShimmer 1.3s ease-in-out infinite;
}
@keyframes skShimmer{to{transform:translateX(100%)}}
.skeleton-card{cursor:default;pointer-events:none}
.skeleton-card .img-wrap.sk{border-radius:0}
.sk-line{height:12px;margin:6px 0;width:85%}
.sk-line.short{width:45%}
.sk-title{height:34px;width:75%;margin:14px 0}
.sk-btn{height:50px;border-radius:999px;margin-top:28px}
.pd-skeleton .main-img.sk{border-radius:var(--radius-lg)}
@media(prefers-reduced-motion:reduce){.sk::after{animation:none}}

/* Product detail */
.pd-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;padding:44px 0 30px;align-items:start}
@media(min-width:769px){.pd-gallery{position:sticky;top:96px}}
@media(max-width:768px){.pd-wrap{grid-template-columns:1fr;gap:26px;padding:18px 0 20px}}
.pd-gallery .main-img{
  position:relative;aspect-ratio:1/1;background:var(--card);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px;
  border:1px solid var(--border);box-shadow:var(--shadow-premium);
}
.pd-gallery .main-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease), opacity .25s var(--ease), filter .25s var(--ease)}
.pd-gallery .main-img img.swapping{opacity:.35;filter:blur(4px)}
@media(hover:hover) and (pointer:fine){.pd-gallery .main-img:hover img{transform:scale(1.04)}}
.thumb-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.thumb-row::-webkit-scrollbar{display:none}
.thumb{flex:0 0 72px;height:72px;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;opacity:.6;transition:opacity .2s, border-color .2s, transform .16s var(--ease)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{opacity:1}
.thumb:active{transform:scale(.95)}
.thumb.active{border-color:var(--gold);opacity:1}
.pd-cat{display:inline-flex;font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:#8a6d12;margin-bottom:8px}
.pd-cat:hover{text-decoration:underline;text-underline-offset:3px}
.pd-info h1{font-size:clamp(2rem,3.4vw,2.9rem);margin-bottom:10px}
.pd-price{font-family:var(--font-display);font-size:2.1rem;color:var(--white);font-weight:700;letter-spacing:.01em;margin-bottom:18px}
.pd-desc{color:var(--muted);margin-bottom:24px}
.option-group{margin-bottom:22px}
.option-group label{display:block;text-transform:uppercase;font-size:.8rem;letter-spacing:1px;color:var(--muted);margin-bottom:10px}
.option-pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  border:1px solid var(--border);padding:9px 18px;border-radius:999px;cursor:pointer;
  font-size:.92rem;font-weight:500;transition:border-color .2s, background-color .2s, color .2s, transform .16s var(--ease);background:var(--card);
}
.pill:hover{border-color:var(--border-gold)}
.pill:active{transform:scale(.96)}
.pill.active{border-color:#111;background:#111;color:#fff;font-weight:600}
.pill.color-pill{width:36px;height:36px;padding:0;border-radius:50%;border:2px solid var(--border)}
.pill.color-pill.active{border-color:var(--gold);box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold)}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.qty-btn{width:40px;height:40px;border:1px solid var(--border);background:var(--card);color:var(--white);border-radius:999px;cursor:pointer;font-size:1.1rem;transition:border-color .2s, color .2s, transform .16s var(--ease)}
.qty-btn:active{transform:scale(.92)}
.qty-btn:hover{border-color:var(--gold);color:var(--gold)}
.stock-note{font-size:.8rem;color:var(--muted);margin-top:6px}
.stock-note.low{color:var(--accent)}
.stock-note.out{color:var(--danger)}

/* Cart */
.cart-page{padding:54px 0}
.cart-item{
  display:grid;grid-template-columns:80px 1fr auto auto;gap:16px;align-items:center;
  padding:18px 10px;border-bottom:1px solid var(--border);border-radius:10px;
  transition:background .3s var(--ease);
}
.cart-item:hover{background:rgba(255,255,255,.03)}
.cart-item img{width:80px;height:80px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.cart-item .meta{font-size:.85rem;color:var(--muted)}
.cart-summary{
  max-width:420px;margin-left:auto;padding:28px;background:var(--card);
  border-radius:var(--radius-lg);border:1px solid var(--border-gold);
  box-shadow:var(--shadow-premium);
}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;color:var(--muted)}
.summary-row.total{color:var(--white);font-weight:700;font-size:1.25rem;border-top:1px solid var(--border);margin-top:10px;padding-top:14px}
.remove-link{color:var(--danger);font-size:.8rem;cursor:pointer;transition:opacity .2s}
.remove-link:hover{opacity:.7}

/* Forms */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:7px}
input,textarea,select{
  width:100%;padding:12px 15px;background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:var(--radius-input);color:var(--white);font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
textarea{resize:vertical}
select{cursor:pointer}
/* Best-effort dark styling for the native option list (Chrome/Edge/Firefox
   honor this; Safari ignores it and falls back to system styling) */
select option{background:#141414;color:#fff}
select option:checked,select option:hover{background:var(--gold);color:#000}

/* Footer */
footer{
  position:relative;border-top:1px solid var(--border);padding:46px 20px;margin-top:70px;
  text-align:center;color:var(--muted);
}
footer::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:180px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
footer .footer-links-inline{font-size:.82rem;margin-bottom:12px}
footer .footer-links-inline a{color:var(--muted);text-decoration:none;transition:color .25s var(--ease)}
footer .footer-links-inline a:hover{color:var(--gold)}
footer .social{display:flex;justify-content:center;gap:22px;margin:16px 0;font-size:1.3rem}
footer .social a{transition:transform .3s var(--ease-spring),color .25s}
footer .social a:hover{color:var(--gold);transform:translateY(-3px) scale(1.1)}

/* Rich multi-column footer (landing page) */
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;max-width:var(--maxw);margin:0 auto 30px;text-align:left;
}
.footer-col h4{
  font-family:var(--font-display);color:var(--gold-light);font-size:1.1rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:16px;
}
.footer-brand-col .brand{justify-content:flex-start}
.footer-tag{font-size:.85rem;line-height:1.7;max-width:320px;margin-bottom:8px}
.footer-brand-col .social{justify-content:flex-start;margin:14px 0 0}
.footer-col a{
  display:block;color:var(--muted);font-size:.88rem;text-decoration:none;margin-bottom:12px;
  transition:color .25s var(--ease),transform .25s var(--ease);width:fit-content;
}
.footer-col a:hover{color:var(--gold);transform:translateX(4px)}
.footer-bottom{
  text-align:center;padding-top:26px;border-top:1px solid var(--border);color:var(--muted);font-size:.85rem;
}
.footer-bottom a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.footer-bottom a:hover{color:var(--gold)}
@media(max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr;text-align:left}
  .footer-brand-col{grid-column:1/-1;text-align:center}
  .footer-brand-col .brand,.footer-brand-col .social{justify-content:center}
  .footer-tag{margin-left:auto;margin-right:auto}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-col a{margin-left:auto;margin-right:auto}
}

/* Floating buttons */
.floating-buttons{position:fixed;bottom:24px;right:20px;display:flex;flex-direction:column;gap:12px;z-index:200}
.float-btn{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.55);
  transition:transform .35s var(--ease-spring);
}
.float-btn:hover{transform:translateY(-3px) scale(1.08)}
.whatsapp-btn{background:#25D366;animation:pulseGlow 2.6s ease-in-out infinite}
.call-btn{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#000}
@keyframes pulseGlow{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 0 10px rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.whatsapp-btn{animation:none}}

/* ============ Admin portal — premium glass dashboard ============ */
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{
  width:230px;background:rgba(12,12,12,.85);backdrop-filter:blur(12px);
  border-right:1px solid var(--border);padding:26px 0;flex-shrink:0;
}
.admin-sidebar .brand{
  padding:0 16px 22px;border-bottom:1px solid var(--border);margin-bottom:16px;
  font-size:1.05rem;letter-spacing:1px;white-space:nowrap;overflow:hidden;
}
.admin-sidebar .brand img{height:26px;flex-shrink:0}
.admin-sidebar a{
  display:flex;align-items:center;gap:10px;padding:13px 20px;color:var(--muted);font-size:.9rem;
  border-left:2px solid transparent;transition:.25s var(--ease);
}
.admin-sidebar a:hover,.admin-sidebar a.active{
  color:var(--gold);background:linear-gradient(90deg,rgba(201,162,39,.1),transparent);
  border-left-color:var(--gold);
}
.admin-main{flex:1;padding:34px;max-width:1150px}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:12px}
table{
  width:100%;border-collapse:collapse;background:var(--card-glass);backdrop-filter:blur(8px);
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-soft);
}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:.88rem}
th{background:rgba(255,255,255,.03);text-transform:uppercase;font-size:.72rem;letter-spacing:1px;color:var(--muted)}
tr{transition:background .25s}
tbody tr:hover{background:rgba(201,162,39,.05)}
tr:last-child td{border-bottom:none}
.badge{padding:5px 12px;border-radius:20px;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.badge.placed{background:rgba(201,162,39,.2);color:var(--gold)}
.badge.confirmed{background:rgba(47,158,90,.2);color:var(--success)}
.badge.packed{background:rgba(52,152,219,.2);color:#3498db}
.badge.shipped{background:rgba(155,89,182,.2);color:#9b59b6}
.badge.delivered{background:rgba(47,158,90,.35);color:var(--success)}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;
  align-items:center;justify-content:center;z-index:500;padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  background:linear-gradient(165deg,#161616,#0a0a0a);border:1px solid var(--border-gold);border-radius:var(--radius-lg);
  max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:28px;
  box-shadow:var(--shadow-premium);
  animation:modalIn .35s var(--ease-spring);
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal h3{margin-bottom:18px}
.image-upload-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.image-upload-grid img{width:70px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.multi-tag-input{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;min-height:46px}
.tag-chip{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#000;padding:5px 12px;border-radius:20px;font-size:.8rem;display:flex;align-items:center;gap:6px}
.tag-chip button{background:none;border:none;color:#000;cursor:pointer;font-weight:700}
.tag-chip-input{border:none;background:transparent;flex:1;min-width:100px;padding:4px}
.whatsapp-preview{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:16px;white-space:pre-wrap;font-size:.88rem;color:var(--muted);margin-bottom:14px}
.option-group-admin{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.option-group-admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.option-group-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;transition:color .2s}
.option-group-remove:hover{color:var(--danger)}
.login-box{
  max-width:400px;margin:100px auto;padding:40px;border-radius:var(--radius-lg);
  background:var(--card-glass);backdrop-filter:blur(14px);border:1px solid var(--border-gold);
  box-shadow:var(--shadow-premium);position:relative;overflow:hidden;
}
.login-box::before{
  content:'';position:absolute;inset:-40% -40% auto auto;width:60%;height:60%;
  background:radial-gradient(circle,rgba(201,162,39,.18),transparent 70%);pointer-events:none;
}
.spinner{position:relative;width:34px;height:34px;margin:40px auto}
.spinner::before,.spinner::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:3px solid transparent;
}
.spinner::before{border-top-color:var(--gold);animation:spin .8s linear infinite}
.spinner::after{border-bottom-color:var(--gold-dim);animation:spin 1.4s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.text-center{text-align:center}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}

/* ============ New: Wishlist heart button (cards + PDP) ============ */
.product-card{position:relative}
.wishlist-heart{
  position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;box-shadow:0 2px 10px rgba(0,0,0,.12);
  color:#1a1a1a;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .16s var(--ease),color .2s;font-size:.95rem;
}
.wishlist-heart:hover{transform:scale(1.08)}
.wishlist-heart:active{transform:scale(.9)}
@media(max-width:600px){.product-card .wishlist-heart{top:8px;right:8px;width:32px;height:32px;font-size:.85rem}}
.wishlist-heart.active{color:var(--accent);border-color:rgba(217,79,43,.5)}
.wishlist-heart.active i{animation:heartPop .4s var(--ease-spring)}
@keyframes heartPop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.pd-heart{position:absolute;top:16px;right:16px;width:44px;height:44px;font-size:1.1rem}
.zoom-hint-btn{
  position:absolute;bottom:16px;right:16px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;box-shadow:0 2px 10px rgba(0,0,0,.12);
  color:#1a1a1a;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;
  transition:transform .25s var(--ease-spring),border-color .25s;
}
.zoom-hint-btn:hover{transform:scale(1.1);border-color:var(--border-gold)}
.wishlist-nav-icon i{transition:color .25s}
@media(prefers-reduced-motion:reduce){.wishlist-heart.active i{animation:none}}

/* New-arrival tag (shares the cat-tag corner but stacks below it) */
.new-tag{
  display:inline-flex;background:var(--accent);
  color:#fff;font-family:var(--font-display);font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;
  letter-spacing:.06em;
}

/* Stock urgency badges + sold-out overlay */
.price-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:4px}
.stock-badge{font-size:.66rem;text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:20px;white-space:nowrap}
.stock-badge.low{background:rgba(217,79,43,.16);color:var(--accent);border:1px solid rgba(217,79,43,.35)}
.stock-badge.out{background:rgba(224,86,74,.16);color:var(--danger);border:1px solid rgba(224,86,74,.35)}
.sold-out-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;
}

/* Star ratings — product cards + product detail */
.rating-row{display:flex;align-items:center;gap:7px;margin:2px 0 6px;font-size:.78rem;color:var(--muted)}
.rating-row.rating-md{font-size:.92rem;margin:10px 0 16px}
.rating-stars{color:var(--gold);letter-spacing:1px;font-size:.8rem}
.rating-md .rating-stars{font-size:1rem}
.rating-row.no-reviews{color:var(--muted);font-style:italic;opacity:.75}

/* Shop toolbar: sort + in-stock filter */
.shop-toolbar{
  display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;
  margin:-18px 0 26px;padding-bottom:18px;border-bottom:1px solid var(--border);
}
.shop-toolbar select{width:auto;min-width:180px;padding:9px 14px;font-size:.92rem;border-radius:999px;background:var(--card)}
@media(max-width:600px){.shop-toolbar{justify-content:space-between;gap:10px}.shop-toolbar select{min-width:0}}
.stock-filter{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);cursor:pointer;user-select:none}
.stock-filter input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}

/* Recently viewed strip */
.recent-strip{display:flex;gap:18px;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x proximity}
.recent-strip::-webkit-scrollbar{height:6px}
.recent-strip::-webkit-scrollbar-thumb{background:var(--border-gold);border-radius:6px}
.recent-card{
  flex:0 0 150px;scroll-snap-align:start;background:var(--card-glass);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:border-color .3s,transform .3s var(--ease);
}
.recent-card:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.recent-img{aspect-ratio:1/1;background:var(--card)}
.recent-img img{width:100%;height:100%;object-fit:cover}
.recent-name{padding:10px 10px 2px;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-price{padding:0 10px 10px;color:var(--gold);font-size:.82rem;font-weight:700}

/* Toast notification stack */
.toast-stack{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:700;
  display:flex;flex-direction:column-reverse;gap:10px;width:100%;max-width:400px;padding:0 16px;
  pointer-events:none;
}
.toast-item{
  pointer-events:auto;display:flex;align-items:center;gap:12px;background:#111;
  border:1px solid var(--border-gold);border-radius:var(--radius);box-shadow:var(--shadow-premium);
  padding:14px 16px;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .35s var(--ease),transform .35s var(--ease-spring);
  font-size:.88rem;
}
.toast-item.show{opacity:1;transform:translateY(0) scale(1)}
.toast-item i{font-size:1.05rem;flex-shrink:0}
.toast-item span{flex:1}
.toast-item.toast-success i{color:var(--success)}
.toast-item.toast-error i{color:var(--danger)}
.toast-item.toast-info i{color:#3498db}
.toast-item.toast-wishlist i{color:var(--accent)}
.toast-close{background:none;border:none;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;flex-shrink:0}
.toast-close:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.toast-item{transition:opacity .2s}}

/* Coupon box (cart summary) */
.coupon-box{display:flex;gap:8px;margin-bottom:6px}
.coupon-box input{text-transform:uppercase;letter-spacing:.5px}
.coupon-msg{font-size:.8rem;margin-bottom:14px;padding:8px 12px;border-radius:8px}
.coupon-msg.ok{background:rgba(47,158,90,.12);color:#6fcf97;border:1px solid rgba(47,158,90,.3)}
.coupon-msg.err{background:rgba(224,86,74,.12);color:#ff9a91;border:1px solid rgba(224,86,74,.3)}

/* Reviews section (product detail page) */
.review-form-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:22px;margin-bottom:24px;
}
.review-form-card label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:8px}
.review-star-input{display:flex;gap:6px;font-size:1.4rem;color:var(--gold);cursor:pointer}
.review-star-input i{transition:transform .2s}
.review-star-input i:hover{transform:scale(1.15)}
.review-item{border-bottom:1px solid var(--border);padding:16px 0}
.review-item:last-child{border-bottom:none}
.review-item-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.review-stars{color:var(--gold);font-size:.82rem;letter-spacing:1px}
.review-stars .dim{color:var(--star-dim)}
.review-comment{color:var(--muted);margin-top:8px;font-size:.92rem;line-height:1.6}
.review-date{color:var(--muted);font-size:.74rem;margin-top:8px;opacity:.7}
.admin-review-badge{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#000;font-weight:700;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;padding:2px 9px;border-radius:20px;
}
.review-item-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.review-item-bottom .review-date{margin-top:0}

/* Promotional ad strip (storefront) — separate from the hero carousel */
.ads-strip{margin:0 0 40px}
.ads-strip-inner{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-gold);
  box-shadow:var(--shadow-soft);aspect-ratio:1500/300;background:var(--card);
}
.ads-strip-track{position:relative;width:100%;height:100%}
.ads-strip-slide{
  position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .5s var(--ease);
}
.ads-strip-slide.active{opacity:1;visibility:visible}
.ads-strip-slide img{width:100%;height:100%;object-fit:cover;display:block}
.ads-strip-label{
  position:absolute;top:8px;left:8px;z-index:3;background:rgba(0,0,0,.6);color:var(--gold-light);
  font-size:.6rem;text-transform:uppercase;letter-spacing:.6px;padding:3px 9px;border-radius:20px;
  border:1px solid var(--border-gold);
}
.ads-strip-close{
  position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid var(--border);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;transition:.25s;
}
.ads-strip-close:hover{background:var(--danger);border-color:transparent}
.ads-strip-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.ads-strip-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;transition:.25s}
.ads-strip-dot.active{background:var(--gold);width:18px;border-radius:5px}

/* Admin: delivery/shipping settings */
.settings-card{
  max-width:520px;background:var(--card-glass);backdrop-filter:blur(10px);border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-premium);
}
.settings-preview{
  background:rgba(201,162,39,.08);border:1px solid var(--border-gold);border-radius:10px;
  padding:12px 16px;font-size:.86rem;color:var(--muted);margin-top:6px;line-height:1.6;
}
.settings-preview strong{color:var(--gold-light)}

/* Order history — itemized line list (color/size/qty) + review modal */
.order-items-list{margin:14px 0;display:flex;flex-direction:column;gap:10px}
.order-totals{border-top:1px solid var(--border);padding-top:12px;margin-top:4px;font-size:.85rem;color:var(--muted)}
.order-totals > div{display:flex;justify-content:space-between;padding:3px 0}
.order-totals-final{color:var(--white);font-weight:700;border-top:1px solid var(--border);margin-top:6px;padding-top:8px!important;font-size:.95rem}
.order-item-line{display:flex;align-items:center;gap:12px}
.order-item-line img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--border);flex-shrink:0}
.order-item-line-info .meta{color:var(--muted);font-size:.8rem;margin-top:2px}
.write-review-btn{background:linear-gradient(135deg,var(--gold),var(--gold-light))}
.review-order-item{border-bottom:1px solid var(--border);padding:16px 0}
.review-order-item:first-child{padding-top:0}
.review-order-item:last-child{border-bottom:none;padding-bottom:0}
.review-order-item textarea{margin-top:10px}
.review-star-input.small{font-size:1.15rem;margin-top:10px}

/* Wishlist page cards (img wrapped in an <a>, not the whole card) */
.wishlist-card{cursor:default}
.wishlist-card .img-wrap{display:block}
.wishlist-card .name{display:block;font-weight:600;margin-bottom:6px}
.wishlist-card .name:hover{color:var(--gold)}

/* Scroll reveal (applied by premium.js). Short and transform/opacity-only;
   cards stagger by their position in the row via --i. */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in-view{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(var(--i,0) * 35ms),transform .45s var(--ease) calc(var(--i,0) * 35ms)}
.product-card.reveal.in-view{transition:opacity .45s var(--ease) calc(var(--i,0) * 35ms),transform .45s var(--ease) calc(var(--i,0) * 35ms),box-shadow .35s var(--ease),border-color .25s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* Native cross-page transitions (Chrome, Edge, Safari 18+). The header stays
   put while the page content crossfades with a short lift, so moving between
   shop, product and cart feels like one app instead of hard page loads.
   Browsers without support simply navigate normally. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .16s var(--ease) both}
::view-transition-new(root){animation:vtIn .26s var(--ease) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(site-header){animation-duration:0s}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- Full-screen product image lightbox (Flipkart-style) ---------- */
.lightbox-overlay{
  position:fixed;inset:0;z-index:5000;background:#fff;
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease;
}
.lightbox-overlay.active{display:flex;opacity:1}
.lightbox-stage{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;
}
.lightbox-img{
  max-width:88vw;max-height:88vh;object-fit:contain;
  user-select:none;-webkit-user-select:none;
  transition:transform .15s ease-out;
  cursor:zoom-in;
  will-change:transform;
}
.lightbox-img.zoomed{cursor:grab;transition:none}
.lightbox-close{
  position:absolute;top:18px;left:18px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid #e2e2e2;color:#222;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .2s;
}
.lightbox-close:hover{transform:scale(1.08)}
.lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid #e2e2e2;color:#222;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .2s;
}
.lightbox-arrow:hover{transform:translateY(-50%) scale(1.08)}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}
.lightbox-counter{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.65);color:#fff;padding:5px 14px;border-radius:20px;font-size:.8rem;letter-spacing:.5px;
}
@media(max-width:640px){
  .lightbox-arrow{width:38px;height:38px;font-size:.95rem}
  .lightbox-close{width:38px;height:38px;top:12px;left:12px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-img{max-width:94vw;max-height:80vh}
}

/* ==========================================================================
   Light theme — customer-facing storefront pages only (body.light-theme).
   Header, footer, and dark floating UI (search dropdown, mega-menu, modals,
   toasts, welcome-toast) explicitly re-pin the original dark palette below
   so they keep their premium black/gold look while the page body goes white.
   ========================================================================== */
body.light-theme{
  --bg:#faf9f6;
  --bg-alt:#f1efe9;
  --card:#ffffff;
  --card-glass:rgba(255,255,255,.8);
  --border:rgba(20,20,20,.1);
  --border-gold:rgba(180,140,30,.35);
  --white:#181818;
  --muted:#69645c;
  --star-dim:rgba(0,0,0,.14);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(201,162,39,.07), transparent 60%),
    radial-gradient(900px 560px at 110% 10%, rgba(217,79,43,.05), transparent 55%),
    var(--bg);
  color:var(--white);
}
/* The full-screen grain uses mix-blend-mode, which forces the browser to
   recomposite the whole viewport on every scroll frame. Invisible on the
   light storefront anyway, so it is switched off there. */
body.light-theme::before{display:none}
body.light-theme .banner-slot,
body.light-theme .order-card,
body.light-theme .cart-summary,
body.light-theme .login-box,
body.light-theme .review-form-card,
body.light-theme .settings-card,
body.light-theme .review-item{
  box-shadow:0 10px 30px -14px rgba(0,0,0,.14);
}
body.light-theme select option{background:#fff;color:#181818}

/* Re-pin the dark premium look for header, footer, and floating dark UI */
body.light-theme header.navbar,
body.light-theme footer,
body.light-theme .search-dropdown,
body.light-theme .mega-menu,
body.light-theme .modal-overlay .modal,
body.light-theme .toast-item,
body.light-theme .welcome-toast{
  --bg:#050505;
  --card:#141414;
  --card-glass:rgba(20,20,20,.55);
  --border:rgba(255,255,255,.08);
  --border-gold:rgba(201,162,39,.35);
  --white:#ffffff;
  --muted:#a3a3a3;
  --star-dim:rgba(255,255,255,.15);
  color:var(--white);
}
body.light-theme footer{background:var(--bg)}

@media(max-width:1000px){
  /* Mobile hamburger dropdown panel — keep it on the dark palette too */
  body.light-theme #navLinks.active{
    --bg:#050505;--card:#141414;--card-glass:rgba(20,20,20,.55);
    --border:rgba(255,255,255,.08);--white:#ffffff;--muted:#a3a3a3;
  }
}

/* ---------- "Become a Dealer" floating CTA ----------
   Uses writing-mode instead of a rotate() transform: rotating a horizontal
   bar around "transform-origin: bottom right" makes it grow DOWNWARD from
   the anchor point (by its own on-screen length), which is what pushed this
   tab down on top of the WhatsApp/Call buttons no matter how large `bottom`
   was set. writing-mode lays the box out vertically to begin with, so
   `bottom`/height behave exactly like a normal block — no surprise growth
   direction, no overlap. */
/* Right-edge tabs: "Request a Product" stacked above "Become a Dealer" */
.side-cta-stack{position:fixed;right:0;bottom:150px;z-index:300;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dealer-cta-tab{
  position:relative;
  writing-mode:vertical-rl;
  z-index:300;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),#f0774f);color:#fff;font-weight:700;
  font-size:.66rem;letter-spacing:.4px;text-transform:uppercase;line-height:1;
  padding:12px 7px;border:none;border-radius:8px 0 0 8px;cursor:pointer;
  box-shadow:-4px 0 20px -4px rgba(217,79,43,.55);
  animation:dealerPulse 2.6s ease-in-out infinite;
  transition:padding .25s;
}
.dealer-cta-tab i{writing-mode:horizontal-tb}
.dealer-cta-tab:hover{padding:12px 10px}
@keyframes dealerPulse{
  0%,100%{box-shadow:-4px 0 20px -4px rgba(217,79,43,.55)}
  50%{box-shadow:-4px 0 30px 2px rgba(217,79,43,.85)}
}
.request-cta-tab{
  writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(160deg,#1a1a1a,#0b0b0b);color:var(--gold-light);font-weight:700;
  font-size:.66rem;letter-spacing:.4px;text-transform:uppercase;line-height:1;
  padding:12px 7px;border:1px solid rgba(201,162,39,.55);border-right:none;border-radius:8px 0 0 8px;cursor:pointer;
  box-shadow:-4px 0 20px -6px rgba(201,162,39,.55);
  transition:padding .25s var(--ease),background-color .2s ease;
}
.request-cta-tab i{writing-mode:horizontal-tb;color:var(--gold)}
.request-cta-tab:hover{padding:12px 10px}
.dealer-cta-tab:active,.request-cta-tab:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.dealer-cta-tab{animation:none}}
.dealer-cta-tab i,.request-cta-tab i{font-size:.8rem}
/* Short windows (laptops, zoomed browsers): keep the tabs clear of the header */
@media(max-height:640px){.side-cta-stack{bottom:auto;top:90px}}
@media(max-width:600px){
  .side-cta-stack{bottom:150px;gap:6px}
  .dealer-cta-tab,.request-cta-tab{font-size:.62rem;padding:10px 6px}
  .dealer-cta-tab:hover,.request-cta-tab:hover{padding:10px 6px}
}
.request-modal{max-width:520px;max-height:calc(100vh - 32px);overflow-y:auto}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:480px){.req-grid{grid-template-columns:1fr}}
.dealer-modal{max-width:440px;position:relative}
.dealer-modal h3{display:flex;align-items:center;gap:10px;margin-bottom:6px}

/* ============================================================
   Terms / policy page
   ============================================================ */
.policy-updated{color:var(--muted);font-size:.85rem;margin:-10px 0 26px}
.policy-toc{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;padding:16px;
  background:var(--card-glass);border:1px solid var(--border);border-radius:var(--radius);
}
.policy-toc a{
  font-size:.82rem;padding:6px 14px;border-radius:999px;border:1px solid var(--border);
  color:var(--muted);text-decoration:none;transition:.25s var(--ease);
}
.policy-toc a:hover{color:var(--gold);border-color:var(--border-gold)}
.policy-section{margin-bottom:34px;scroll-margin-top:90px}
.policy-section h3{font-size:1.35rem;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.policy-section p{color:var(--muted);line-height:1.8;margin-bottom:10px}
.policy-section a{color:var(--gold)}
.policy-list{margin:10px 0 14px 22px;color:var(--muted);line-height:1.8}
.policy-list li{margin-bottom:8px}
.policy-highlight{
  padding:22px;border-radius:var(--radius-lg);background:var(--gold-dim);
  border:1px solid var(--border-gold);
}
.policy-highlight h3{color:var(--gold-light)}

/* ============================================================
   Discount pricing: selling price, struck-out actual price, % off
   ============================================================ */
.price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;min-width:0}
.price-block .mrp,.cart-line-price .mrp{color:var(--muted);font-size:.86rem;font-weight:500;text-decoration-thickness:1.5px}
.price-block .off{
  display:inline-flex;align-items:center;gap:3px;color:#17803d;font-weight:700;font-size:.86rem;white-space:nowrap;
}
.price-block .off i{font-size:.72em}
.price-block.price-lg .price{font-family:var(--font-display);font-size:2.2rem;font-weight:700;color:var(--white);line-height:1}
.price-block.price-lg .mrp{font-size:1.15rem}
.price-block.price-lg .off{font-size:1.1rem;background:rgba(23,128,61,.1);padding:3px 10px;border-radius:999px}
.pd-price{margin-bottom:6px}
.pd-save{color:#17803d;font-weight:600;font-size:.95rem;margin-bottom:14px}
.pd-points:empty{display:none}
.pd-points{
  display:flex;gap:10px;align-items:flex-start;margin:4px 0 20px;padding:12px 14px;border-radius:12px;
  background:rgba(201,162,39,.1);border:1px solid var(--border-gold);font-size:.92rem;line-height:1.5;
}
.pd-points i{color:#a8841a;margin-top:3px}
.recent-price .price-block{gap:2px 6px}
.recent-price .price{font-size:.9rem;color:var(--gold)}
.recent-price .mrp,.recent-price .off{font-size:.72rem}
@media(max-width:600px){
  .product-card .price-block .mrp,.product-card .price-block .off{font-size:.76rem}
}

/* Cart line + summary additions */
.cart-line-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.points-tag{font-size:.72rem;color:#8a6d12;font-weight:600;white-space:nowrap}
.points-box{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px;padding:14px;
  border-radius:14px;background:rgba(201,162,39,.1);border:1px dashed #b8921f;
}
.points-box[hidden]{display:none}
.points-box.is-blocked{background:rgba(0,0,0,.03);border-color:var(--border);opacity:.9}
.points-box.is-blocked strong,.points-box.is-blocked i{color:var(--muted)}
.coupon-remove{background:none;border:none;padding:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.points-box-text{display:flex;flex-direction:column;gap:3px;font-size:.88rem;line-height:1.45}
.points-box-text strong{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}
.points-box-text i{color:#a8841a}
.points-box-text small{color:var(--muted);font-size:.78rem}
.points-box .btn{flex-shrink:0}
.summary-save{margin-top:12px;padding:8px 12px;border-radius:10px;background:rgba(23,128,61,.1);color:#17803d;font-weight:600;font-size:.9rem;text-align:center}
.summary-earn{margin-top:8px;font-size:.84rem;color:var(--muted);text-align:center}
.summary-earn i{color:#a8841a}
.order-totals > .order-points{display:block!important;margin-top:8px;font-size:.84rem;color:#8a6d12;font-weight:600}

/* Profile: points card */
.points-card{
  margin:0 0 24px;padding:20px;border-radius:var(--radius-lg);color:#fff;
  background:linear-gradient(135deg,#111 0%,#1d1a12 100%);border:1px solid rgba(201,162,39,.45);
}
.points-card[hidden]{display:none}
.points-card-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.points-card-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--gold-light);font-size:.95rem}
.points-card-balance{font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1.05}
.points-card-balance span{font-size:1rem;color:#bbb;font-weight:600}
.points-card-worth{text-align:right;color:#bbb;font-size:.85rem}
.points-card-worth strong{color:var(--gold-light);font-family:var(--font-display);font-size:1.6rem}
.points-guide{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:8px;font-size:.88rem;color:#ddd}
.points-guide i{color:var(--gold);width:18px}

/* Admin: two price inputs side by side */
.price-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.price-fields{grid-template-columns:1fr}}

/* Admin: landing video slots */
.hero-slots{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:10px}
@media(max-width:800px){.hero-slots{grid-template-columns:1fr}}
.hero-preview{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;border:1px dashed var(--border)}
.hero-preview.portrait{aspect-ratio:9/16;max-height:320px;margin:0 auto}
.hero-preview video{width:100%;height:100%;object-fit:cover;display:block}
.hero-res{position:absolute;left:8px;bottom:8px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff}
.hero-res.ok{color:#7be29b}
.hero-res.low{color:#ffb070}

/* Admin: big on/off switch for the points programme */
.points-switch,.form-group label.points-switch{position:relative;display:flex;margin:0;color:var(--white);align-items:center;gap:12px;cursor:pointer;font-size:1rem;padding:12px 14px;border:1px solid var(--border-gold);border-radius:12px;background:rgba(201,162,39,.06)}
.points-switch input{position:absolute;opacity:0;width:1px;height:1px}
.points-switch-track{display:block;position:relative;flex-shrink:0;width:46px;height:26px;border-radius:999px;background:#444;transition:background .2s}
.points-switch-track::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.points-switch input:checked + .points-switch-track{background:var(--success)}
.points-switch input:checked + .points-switch-track::after{transform:translateX(20px)}
.points-switch input:focus-visible + .points-switch-track{outline:2px solid var(--gold);outline-offset:2px}

/* Admin: header action group, order tabs, selected rows */
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-tabs{display:flex;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--border);overflow-x:auto}
.admin-tab{
  display:inline-flex;align-items:center;gap:8px;padding:12px 18px;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  margin-bottom:-1px;white-space:nowrap;transition:color .2s,border-color .2s;
}
.admin-tab:hover{color:var(--white)}
.admin-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab-count{font-family:var(--font-body);font-size:.72rem;font-weight:700;min-width:22px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--white);text-align:center}
.admin-tab.active .tab-count{background:var(--gold);color:#111}
tbody tr.row-selected{background:rgba(224,86,74,.08)}

/* Order history: cancel + return */
.item-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px}
.return-until{font-size:.76rem;color:var(--muted)}
.return-status{font-size:.8rem;font-weight:600;color:#8a6d12}
.return-status.muted{color:var(--muted);font-weight:500}
.cancel-note{margin:10px 0 14px;padding:10px 12px;border-radius:10px;background:rgba(224,86,74,.08);color:#b3392e;font-size:.88rem}
.badge.cancelled{background:rgba(224,86,74,.18);color:var(--danger)}
.badge.returned{background:rgba(201,162,39,.18);color:#c9a227;margin-top:4px;display:inline-block}
.return-note{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#17803d;margin:0 0 18px}
.return-note.no{color:#b3392e}
.no-return-tag{font-size:.72rem;color:#b3392e;font-weight:600;white-space:nowrap}
.modal-overlay .modal .order-item-line{margin-bottom:6px}
.return-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.return-actions{display:flex;gap:6px;flex-shrink:0}
.return-status.accepted{color:#17803d}
.return-status.rejected{color:#b3392e}
.badge.cancel_requested{background:rgba(240,119,79,.2);color:#f0774f}
.tab-alert{font-family:var(--font-body);font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--danger);color:#fff;letter-spacing:0;text-transform:none}
.tab-alert[hidden]{display:none}
.cancel-note.pending{background:rgba(240,119,79,.1);color:#b4532a}
.cancel-request-box{background:rgba(240,119,79,.12);color:#f3a27f;border:1px solid rgba(240,119,79,.35);line-height:1.6}

/* Admin: Razorpay payment check in the order modal */
.payment-check{margin:10px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:.85rem;color:var(--muted);line-height:1.5}
.payment-check i{margin-right:6px}
.payment-check.ok{border-color:rgba(47,158,90,.45);background:rgba(47,158,90,.1);color:#cfe9d8}
.payment-check.ok i{color:var(--success)}
.payment-check.warn{border-color:rgba(224,86,74,.45);background:rgba(224,86,74,.1);color:#f3d2ce}
.payment-check.warn i{color:var(--danger)}

/* ---------- Home: "about the store" block (also helps search engines) ---------- */
.seo-intro{max-width:1080px;margin:10px auto 60px;text-align:center}
.seo-intro h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:10px;color:#111}
.seo-intro > p{max-width:760px;margin:0 auto 18px;color:#555;line-height:1.75;font-size:.95rem}
.seo-intro-points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:0;margin:0;color:#444;font-size:.88rem}
.seo-intro-points i{color:var(--gold);margin-right:6px}
.seo-intro-points a{color:#8a6a10;text-decoration:underline}