/* ═══════════════════════════════════════════════════════════════
   UrbanCart · Global Stylesheet  (SVG-only icons, fully responsive)
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --bg:        #f6f7fb;
  --card:      #ffffff;
  --text:      #131722;
  --muted:     #5b6472;
  --soft:      #eceef5;
  --dark:      #151515;
  /* Slate Indigo — professional, soothing default. On-accent stays readable on the accent. */
  --accent:    #4f46e5;
  --accent2:   #6366f1;
  --accent3:   #6d5ae0;
  --on-accent: #ffffff;
  --btn-bg:    #4f46e5;
  --btn-text:  #ffffff;
  --btn-hover: #6366f1;
  --btn-hover-text:#ffffff;
  --green:     #22c55e;
  --red:       #ef4444;
  --blue:      #3b82f6;
  --border:    rgba(0,0,0,.06);
  --border-2:  rgba(0,0,0,.1);
  --field-bg:  var(--bg);
  --header-bg: rgba(246,247,251,.62);
  --nav-text:  #555555;
  --copy:      #333333;
  --hero-grad: linear-gradient(135deg,#1a1a1a,#2d2926);
  --panel-grad:linear-gradient(135deg,var(--dark),#2b2824);
  --success-bg:#dcfce7;
  --success-fg:#15803d;
  --info-bg:   #dbeafe;
  --info-fg:   #1d4ed8;
  --warn-bg:   #fef3c7;
  --warn-fg:   #d97706;
  --danger-bg: #fee2e2;
  --danger-fg: #dc2626;
  --tag-orange-bg:#fff7ed;
  --tag-orange-fg:#c2410c;
  --tag-purple-bg:#ede9fe;
  --tag-purple-fg:#6d28d9;
  --tag-yellow-bg:#fef9c3;
  --tag-yellow-fg:#a16207;
  --shadow:    0 20px 50px rgba(0,0,0,.09);
  --shadow-sm: 0 6px 20px rgba(0,0,0,.06);
  --radius:    24px;
  --radius-sm: 14px;
  --radius-xs: 8px;
  --trans:     .2s ease;
  --strip-h:   36px;
  --header-h:  68px;
}

html { color-scheme:light; }

html[data-theme="dark"] {
  color-scheme:dark;
  --bg:        #0f1115;
  --card:      #171a20;
  --text:      #f4f6fb;
  --muted:     #9aa3b2;
  --soft:      #252b34;
  /* Lighter indigo for dark surfaces; dark ink stays readable on the lighter accent. */
  --accent:    #818cf8;
  --accent2:   #a5b4fc;
  --accent3:   #a5b4fc;
  --on-accent: #0b1020;
  --btn-bg:    #818cf8;
  --btn-text:  #0b1020;
  --btn-hover: #a5b4fc;
  --btn-hover-text:#0b1020;
  --border:    rgba(255,255,255,.08);
  --border-2:  rgba(255,255,255,.14);
  --field-bg:  #101318;
  --header-bg: rgba(15,17,21,.55);
  --nav-text:  #c8cfda;
  --copy:      #d7dce5;
  --hero-grad: linear-gradient(135deg,#07080a,#171a20);
  --panel-grad:linear-gradient(135deg,#08090b,#181b20);
  --success-bg:rgba(34,197,94,.16);
  --success-fg:#86efac;
  --info-bg:   rgba(59,130,246,.18);
  --info-fg:   #93c5fd;
  --warn-bg:   rgba(245,158,11,.18);
  --warn-fg:   #fcd34d;
  --danger-bg: rgba(239,68,68,.18);
  --danger-fg: #fca5a5;
  --tag-orange-bg:rgba(249,115,22,.18);
  --tag-orange-fg:#fdba74;
  --tag-purple-bg:rgba(124,58,237,.22);
  --tag-purple-fg:#c4b5fd;
  --tag-yellow-bg:rgba(250,204,21,.18);
  --tag-yellow-fg:#fde68a;
  --shadow:    0 22px 58px rgba(0,0,0,.34);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.24);
}

@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:        #0f1115;
    --card:      #171a20;
    --text:      #f4f6fb;
    --muted:     #9aa3b2;
    --soft:      #252b34;
    --accent:    #818cf8;
    --accent2:   #a5b4fc;
    --accent3:   #a5b4fc;
    --on-accent: #0b1020;
    --btn-bg:    #818cf8;
    --btn-text:  #0b1020;
    --btn-hover: #a5b4fc;
    --btn-hover-text:#0b1020;
    --border:    rgba(255,255,255,.08);
    --border-2:  rgba(255,255,255,.14);
    --field-bg:  #101318;
    --header-bg: rgba(15,17,21,.55);
    --nav-text:  #c8cfda;
    --copy:      #d7dce5;
    --hero-grad: linear-gradient(135deg,#07080a,#171a20);
    --panel-grad:linear-gradient(135deg,#08090b,#181b20);
    --success-bg:rgba(34,197,94,.16);
    --success-fg:#86efac;
    --info-bg:   rgba(59,130,246,.18);
    --info-fg:   #93c5fd;
    --warn-bg:   rgba(245,158,11,.18);
    --warn-fg:   #fcd34d;
    --danger-bg: rgba(239,68,68,.18);
    --danger-fg: #fca5a5;
    --tag-orange-bg:rgba(249,115,22,.18);
    --tag-orange-fg:#fdba74;
    --tag-purple-bg:rgba(124,58,237,.22);
    --tag-purple-fg:#c4b5fd;
    --tag-yellow-bg:rgba(250,204,21,.18);
    --tag-yellow-fg:#fde68a;
    --shadow:    0 22px 58px rgba(0,0,0,.34);
    --shadow-sm: 0 8px 24px rgba(0,0,0,.24);
  }
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-tap-highlight-color:transparent; }
:focus:not(:focus-visible) { outline:none; }
:focus-visible { outline:2px solid var(--primary,#6366f1); outline-offset:2px; border-radius:3px; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  font-family: var(--font-body, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif);
  background: var(--bg); color: var(--text);
  line-height: 1.6;
  /* `overflow-x: hidden` made <body> its own scroll container, so window.scrollY
     stayed 0 — the header's scroll-shadow never fired and anchor / programmatic
     scrolling broke. `clip` still hides horizontal overflow but keeps the root
     (html) as the scroller. */
  overflow-x: clip;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading, var(--font-body, Inter, system-ui, sans-serif));
}
a  { text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }
button,input,select,textarea { font:inherit; }
ul { list-style:none; }
svg { flex-shrink:0; }

a[href],
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
summary {
  cursor:pointer;
}

a[href]:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline:3px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset:3px;
}

.link-like,
main a:not(.btn):not(.icon-btn):not(.product-card):not(.cat-card):not(.chip):not(.cat-tab):not(.view-all):not(.brand):not(.deal-title-link) {
  text-underline-offset:4px;
  text-decoration-thickness:2px;
  transition:color var(--trans),text-decoration-color var(--trans);
}

.link-like:hover,
main a:not(.btn):not(.icon-btn):not(.product-card):not(.cat-card):not(.chip):not(.cat-tab):not(.view-all):not(.brand):not(.deal-title-link):hover {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:currentColor;
}

/* ── Layout ──────────────────────────────────────────────────── */
.shell  { width:min(1200px,calc(100% - 32px)); margin-inline:auto; }
.section{ padding:36px 0; }

/* ── Typography ──────────────────────────────────────────────── */
h1,h2,h3,h4{ line-height:1.15; }
h1 { font-size:clamp(32px,5.5vw,68px); letter-spacing:-2.5px; font-weight:900; }
h2 { font-size:clamp(20px,3vw,30px);   letter-spacing:-1px;   font-weight:900; }
h3 { font-size:18px; font-weight:900; letter-spacing:-.3px; }
h4 { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.9px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  border:0; border-radius:999px; padding:12px 22px;
  font-weight:900; font-size:14px; cursor:pointer;
  transition:transform var(--trans),box-shadow var(--trans),background var(--trans),color var(--trans),border-radius var(--trans);
  white-space:nowrap; line-height:1;
}
.btn:hover      { transform:translateY(-2px); }
.btn-primary    {
  background: var(--btn-bg, var(--accent));
  color:      var(--btn-text, #111);
  border-radius: var(--btn-radius, 999px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn-primary:hover{
  background: var(--btn-hover, var(--accent2, var(--accent)));
  color:      var(--btn-hover-text, var(--btn-text, #111));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn-dark       { background:var(--dark); color:#fff; }
.btn-dark:hover { background:#1a1a1a; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.btn-ghost      { background:transparent; border:2px solid currentColor; }
.btn-ghost-light{ background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.22); }
.btn-danger-soft{ background:var(--danger-bg); color:var(--danger-fg); }
.btn-sm         { padding:8px 16px; font-size:12px; }
.w-full         { width:100%; justify-content:center; }

/* ── Icon buttons ────────────────────────────────────────────── */
/* Glass pill. Same 42px circle in the same place — only the surface changed:
   translucent fill + blur + an inset top highlight, so it reads as a lit piece of
   glass instead of a drawn outline. The old hover ring was hardcoded lime
   (rgba(216,255,79,…)) left over from the original theme, so it clashed with
   every palette; it now derives from --accent. */
.icon-btn {
  /* Slightly heavier tint than the brand capsule: this button is the only header
     action, and it scrolls over hero art where a 45% tint dropped the icon to
     4.29:1. */
  border:0; background:color-mix(in srgb, var(--card) 65%, transparent);
  border-radius:50%;
  width:42px; height:42px; display:grid; place-items:center;
  cursor:pointer; position:relative;
  color:var(--text); flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent),
             0 6px 18px -10px rgba(0,0,0,.5);
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans);
}
.icon-btn:hover {
  transform:scale(1.08);
  background:color-mix(in srgb, var(--card) 68%, transparent);
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
             0 10px 26px -12px rgba(0,0,0,.55);
}
.icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .icon-btn { -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); }
}
.theme-toggle-icon { display:grid; place-items:center; }
.theme-toggle { isolation:isolate; }
.theme-toggle-sun { display:none; }
html[data-theme="dark"] .theme-toggle-moon { display:none; }
html[data-theme="dark"] .theme-toggle-sun { display:grid; }
.mob-theme-toggle {
  width:100%; border:0; background:var(--soft); color:var(--text);
  border-radius:var(--radius-xs); padding:12px 13px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:14px; font-weight:800; cursor:pointer; transition:var(--trans);
}
.mob-theme-toggle > span:first-child { display:flex; align-items:center; gap:10px; }
.mob-theme-toggle:hover { background:var(--card); color:var(--accent); }
.badge-count {
  position:absolute; top:3px; right:3px;
  min-width:18px; height:18px; border-radius:99px; padding:0 4px;
  /* `--accent2` is a light tint in dark themes, so a hardcoded #fff label sat at
     1.65:1 on the cart-count bubble. `--btn-text` is derived per theme from the
     accent's own luminance, so this pairing stays legible in both modes. */
  background:var(--accent); color:var(--btn-text, var(--bg));
  font-size:10px; font-weight:900; line-height:18px;
  text-align:center; border:2px solid var(--bg);
  display:none;
}
.badge-count.show { display:block; }

/* ── Top strip ───────────────────────────────────────────────── */
.top-strip {
  position:relative;
  background:var(--dark); color:#fff; height:var(--strip-h);
  display:flex; align-items:center; gap:6px; padding-right:8px;
  font-size:11px; font-weight:700; letter-spacing:.4px;
  white-space:nowrap;
}
/* Announcement disabled → no marquee; keep the theme toggle pinned right. */
.top-strip--no-ann { justify-content:flex-end; }
/* The marquee clips + fades inside its own track, so the toggle button (a
   sibling) is never clipped and reserves its own space at the right. */
.marquee-track {
  flex:1 1 auto; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, #000 92%, transparent);
          mask-image:linear-gradient(to right, #000 92%, transparent);
}
.top-strip svg { display:inline-block; vertical-align:middle; margin:0 2px; }
/* Duration is tuned to the wider (10-unit) half so the strip scrolls at a brisk,
   readable pace — one full half sweeps in ~60s (~65px/s). */
.marquee-inner { display:inline-block; white-space:nowrap; animation:marquee 60s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Single capsule theme-switch button at the strip's right end. */
.strip-theme-toggle {
  flex:0 0 auto;
  height:22px; padding:0 9px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.24); border-radius:999px;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .strip-theme-toggle { -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
}
.strip-theme-toggle:hover  { background:rgba(255,255,255,.22); transform:scale(1.06); }
.strip-theme-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.strip-theme-toggle .theme-toggle-icon svg { margin:0; }

/* ── Header ─────────────────────────────────────────────────── */
/* Borderless glass header. The hard 1px divider is gone — separation comes from
   the blur and a soft diffuse shadow once the page scrolls, so nothing reads as
   a drawn line. Layout, heights and button positions are untouched. */
/* Borderless glass header.
   Removing the 1px divider was not enough: the translucent tint is a different
   shade from the page, so where the header box ended it still cut a hard
   horizontal seam — which reads exactly like a border once you scroll content
   underneath it. The glass therefore lives on a ::before layer that extends
   past the header box and is masked to fade out, so the tint dissolves into the
   page instead of stopping at an edge. The bar's contents stay fully opaque. */
/* Fully transparent header bar. The glass now lives only on the two floating
   pieces inside it — the brand capsule and the menu button — so there is no
   tinted band, no blur wash and no edge behind them at all. */
.header {
  position:-webkit-sticky; position:sticky; top:0; z-index:100;
  background:transparent;
  border-bottom:0;
  box-shadow:none;
}
.header.scrolled { box-shadow:none; }
.nav-inner {
  height:var(--header-h); display:flex;
  align-items:center; gap:18px;
}

/* Brand capsule — the header's main object. Circular logo frame + wordmark on a
   single glass pill, floating on a clean background. */
.brand {
  display:inline-flex; align-items:center; gap:11px;
  font-weight:900; letter-spacing:-.5px; font-size:18px;
  /* Dynamic width: the capsule grows with the store name but shrinks (min-width:0)
     so the name truncates just before the menu button instead of overlapping it. */
  flex:0 1 auto; min-width:0; max-width:100%;
  padding:7px 20px 7px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--card) 65%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent),
             0 8px 24px -14px rgba(0,0,0,.5);
  transition:background var(--trans), box-shadow var(--trans);
}
.brand:hover {
  background:color-mix(in srgb, var(--card) 72%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent),
             0 12px 30px -14px rgba(0,0,0,.55);
}
.brand:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .brand { -webkit-backdrop-filter:blur(18px) saturate(175%); backdrop-filter:blur(18px) saturate(175%); }
}
/* Inside the drawer the capsule sits on an opaque panel — drop the glass there
   so it does not read as a second floating chip. */
.mob-drawer-head .brand {
  background:transparent; box-shadow:none; padding:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Initials tile shown when a store has not uploaded a logo. Glass: translucent
   accent wash + blur + a hairline top highlight, so it reads as a lit surface in
   both modes instead of the old flat `var(--dark)` block (which, being the theme's
   darkest colour, sat invisible against a dark header). */
.mark {
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-size:16px; font-weight:900;
  letter-spacing:-.5px; flex-shrink:0; overflow:hidden;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 14px -6px rgba(0,0,0,.35);
}
/* Glass plate behind an uploaded logo. A single uploaded asset cannot know which
   mode it will land on, so the plate gives it a consistent, slightly lifted
   surface in both — no colour filtering, which would wreck a brand's own hues. */
.brand-plate {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; overflow:hidden;
  background:color-mix(in srgb, var(--card) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px -6px rgba(0,0,0,.35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mark, .brand-plate {
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    backdrop-filter:blur(12px) saturate(150%);
  }
}
.brand-logo {
  height:38px; width:38px; max-width:100%;
  object-fit:cover; border-radius:50%; display:block;
}
.brand-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (prefers-reduced-transparency: reduce) {
  .mark        { background:var(--soft); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .brand-plate { background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .icon-btn,
  .search-form,
  .bottom-nav,
  .floating-cart { background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .header::before { -webkit-mask-image:none; mask-image:none; bottom:0;
                    -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg); }
  /* Opaque header for this preference; a hairline returns only here, because
     without the blur there is nothing left to separate it from the page. */
  .header      { background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none;
                 box-shadow:0 1px 0 var(--border); }
}

.nav-links { display:flex; gap:6px; font-size:14px; font-weight:800; align-items:center; }
.nav-links a {
  color:var(--nav-text); transition:var(--trans); position:relative;
  padding:5px 12px; border-radius:999px;
}
/* `--dark` is the theme's darkest colour, so it only ever worked as a foreground
   in light mode. On a dark theme it resolved to near-black on a near-black header
   (measured 1.03:1) and the link text disappeared on hover. `--text` is the
   mode-aware ink token and reads correctly in both (17.86:1 on Obsidian Luxe). */
.nav-links a:hover {
  color:var(--text);
  background:var(--soft);
  box-shadow:inset 0 -2px 0 var(--accent);
  font-weight:800;
}
/* Same mode-blindness on the active pill: `background:var(--dark)` sat at #050506
   against a #0a0a0b header, so the pill shape was invisible in dark mode. The
   accent reads as a pill in both modes, and --btn-text is derived per theme from
   the accent's own luminance, so the label stays legible whatever the accent is. */
.nav-links a.active {
  background:var(--accent); color:var(--btn-text, var(--bg));
}
.nav-links a.active:hover {
  background:var(--accent); color:var(--btn-text, var(--bg));
  box-shadow:none;
}
.nav-deal { color:var(--accent2) !important; }

/* Glass search pill — same width, padding and radius. The 1.5px border is gone;
   the rim is now an inset hairline so nothing reads as a drawn outline. */
.search-form {
  flex:1; max-width:360px; min-width:0;
  display:flex; align-items:center; gap:8px;
  background:color-mix(in srgb, var(--card) 45%, transparent);
  border:0;
  border-radius:999px; padding:10px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent),
             0 6px 18px -10px rgba(0,0,0,.5);
  transition:box-shadow var(--trans), background var(--trans);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search-form { -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); }
}
/* Focus ring was a hardcoded lime left over from the original single-theme build,
   so it read as an unrelated colour on all 20 palettes. Derived from --accent now. */
.search-form:focus-within {
  background:color-mix(in srgb, var(--card) 70%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
             0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.search-icon  { color:var(--muted); display:flex; align-items:center; flex-shrink:0; }
.search-form input {
  border:0; outline:0; background:transparent;
  width:100%; font-size:13px; color:var(--text); min-width:0;
}
.search-submit {
  border:0; background:var(--accent); color:var(--btn-text, #fff);
  border-radius:50%; width:26px; height:26px;
  display:grid; place-items:center; cursor:pointer; flex-shrink:0;
  transition:background .15s, transform .1s;
}
.search-submit:hover { background:var(--btn-hover, var(--accent2, var(--accent))); color:var(--btn-hover-text, var(--btn-text)); transform:scale(1.08); }

.nav-actions { display:flex; align-items:center; gap:14px; margin-left:auto; }
.hamburger        { display:grid !important; }
.mob-search-btn   { display:none !important; }
.desktop-nav,.desktop-search,.desktop-action { display:none; }

/* ── Mobile Drawer ───────────────────────────────────────────── */
.mob-drawer {
  position:fixed; inset:0 0 0 auto; width:min(300px,88vw);
  background:var(--card); z-index:600;
  transform:translateX(105%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:-16px 0 50px rgba(0,0,0,.14);
  overscroll-behavior:contain;
  pointer-events:none;
}
.mob-drawer.open { transform:translateX(0); pointer-events:auto; }
.mob-drawer-inner{ padding:20px; overflow-y:auto; height:100%; display:flex; flex-direction:column; gap:0; }
.mob-drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--soft);
}
.mob-search {
  display:flex; gap:8px; margin-bottom:20px;
}
.mob-search input {
  flex:1; border:1.5px solid var(--border-2); border-radius:999px;
  padding:9px 14px; outline:0; font-size:14px;
  transition:border-color var(--trans);
  background:var(--field-bg); color:var(--text);
}
.mob-search input:focus{ border-color:var(--accent); }
.mob-search button {
  border:0; background:var(--accent); color:var(--btn-text, #fff);
  border-radius:50%; width:38px; height:38px;
  display:grid; place-items:center; cursor:pointer;
  flex-shrink:0;
}
.mob-nav { display:flex; flex-direction:column; gap:2px; }
.mob-nav a {
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--radius-xs);
  font-weight:700; font-size:15px; color:var(--text);
  transition:background var(--trans);
}
.mob-nav a:hover        { background:var(--soft); }
.mob-nav a svg          { color:var(--muted); }
.mob-nav a.active       { background:rgba(0,0,0,.06); color:var(--text); font-weight:900; }
.mob-nav a.active svg   { color:var(--text); }
html[data-theme="dark"] .mob-nav a.active     { background:rgba(255,255,255,.08); color:var(--accent); }
html[data-theme="dark"] .mob-nav a.active svg { color:var(--accent); }
.mob-cart-open {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:11px 12px; border:0; background:none; cursor:pointer;
  border-radius:var(--radius-xs); font-family:inherit;
  font-weight:700; font-size:15px; color:var(--text);
  transition:background var(--trans);
}
.mob-cart-open > span:first-child { display:flex; align-items:center; gap:12px; }
.mob-cart-open:hover { background:var(--soft); }
.mob-cart-open svg   { color:var(--muted); }
.mob-cart-open:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* Count badges inside drawer rows flow inline rather than pinning to a corner. */
.mob-cart-count {
  position:static; margin-left:auto; border:0;
  min-width:20px; height:20px; line-height:20px; font-size:11px;
}
.mob-nav a { position:relative; }
.mob-signout            { color:#e53935 !important; margin-top:8px; border-top:1px solid var(--border); padding-top:14px !important; }
.mob-signout svg        { color:#e53935 !important; }

.mob-overlay,.cart-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.48);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:599;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.mob-overlay.show,.cart-overlay.show { opacity:1; pointer-events:all; }
.cart-overlay { z-index:599; }

/* ── Cart Drawer ─────────────────────────────────────────────── */
.cart-drawer {
  position:fixed; inset:0 auto 0 auto; right:0;
  width:min(420px,100vw); background:var(--card);
  z-index:600; transform:translateX(110%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:-16px 0 50px rgba(0,0,0,.14);
  overscroll-behavior:contain;
  pointer-events:none;
}
.cart-drawer.open{ transform:translateX(0); pointer-events:auto; }
.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--soft);
}
.cart-drawer-head h3 { font-size:17px; }
.cart-drawer-body { flex:1; overflow-y:auto; padding:16px 22px; }
.cart-empty { text-align:center; padding:48px 20px; }
.cart-empty-icon { color:var(--muted); margin-bottom:12px; display:flex; justify-content:center; }
.cart-empty p   { color:var(--muted); margin-bottom:18px; }
.cd-list { display:flex; flex-direction:column; gap:16px; }
.cd-item {
  display:grid; grid-template-columns:72px 1fr auto;
  gap:12px; align-items:start;
}
.cd-item-img { width:72px; height:72px; border-radius:10px; overflow:hidden; background:var(--soft); flex-shrink:0; }
.cd-item-img img { width:100%; height:100%; object-fit:cover; }
.cd-item-name  { font-size:13px; font-weight:800; margin-bottom:4px; line-height:1.3; }
.cd-item-price { font-size:14px; font-weight:900; color:var(--text); }
.cd-item-qty   { display:flex; align-items:center; gap:8px; margin-top:6px; }
.qty-btn {
  border:1.5px solid var(--border-2); background:transparent;
  border-radius:50%; width:24px; height:24px;
  display:grid; place-items:center; cursor:pointer; font-weight:900; font-size:14px;
  transition:background var(--trans);
}
.qty-btn:hover { background:var(--soft); }
.cd-remove {
  background:none; border:none; cursor:pointer;
  color:var(--muted); display:grid; place-items:center;
  padding:4px; border-radius:50%;
  transition:color var(--trans),background var(--trans);
}
.cd-remove:hover { color:var(--red); background:var(--danger-bg); }
.cart-drawer-foot{
  padding:16px 22px; border-top:1px solid var(--soft);
  display:flex; flex-direction:column; gap:10px;
}
.cd-total { display:flex; justify-content:space-between; font-weight:900; font-size:16px; margin-bottom:4px; }

/* ── Toast ───────────────────────────────────────────────────── */
/* Top-centre, glassy — floats over the header so it never covers products or
   collides with the bottom-right floating cart bar. z-index sits above the
   header (100), drawers (600) and cart FAB (500). */
.toast-container {
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:1200;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; width:max-content; max-width:calc(100% - 24px);
}
.toast {
  background:color-mix(in srgb, var(--dark) 68%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; padding:11px 18px; border-radius:999px;
  font-size:13px; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 14px 36px -12px rgba(0,0,0,.55);
  display:flex; align-items:center; gap:8px;
  animation:slide-in .3s cubic-bezier(.2,.9,.3,1.2);
  max-width:min(92vw,360px); pointer-events:all;
}
.toast.success { border-color:color-mix(in srgb, var(--green) 55%, transparent); }
.toast.error   { border-color:color-mix(in srgb, var(--red) 55%, transparent); }
@keyframes slide-in { from{ transform:translateY(-18px); opacity:0 } }
@keyframes fade-out { to{ opacity:0; transform:translateY(-12px) } }

/* ── Section heads ───────────────────────────────────────────── */
.section-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:22px; flex-wrap:wrap;
}
.section-head .label {
  font-size:11px; font-weight:900; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.section-head p { color:var(--muted); font-size:14px; margin-top:4px; }
.view-all {
  font-size:13px; font-weight:800; color:var(--muted);
  white-space:nowrap; display:flex; align-items:center; gap:4px;
  flex-shrink:0;
  text-underline-offset:4px;
  transition:color var(--trans),transform var(--trans);
}
.view-all:hover {
  color:var(--accent);
  transform:translateX(2px);
  text-decoration:underline;
}

/* ── Filter chips ────────────────────────────────────────────── */
.filters {
  display:flex; gap:8px; overflow-x:auto;
  padding-bottom:6px; scrollbar-width:none;
  margin-bottom:22px;
}
.filters::-webkit-scrollbar { display:none; }
.chip {
  white-space:nowrap; border:1.5px solid var(--border-2);
  background:var(--card); border-radius:999px;
  padding:9px 16px; font-weight:800; font-size:13px;
  cursor:pointer; transition:var(--trans); flex-shrink:0;
}
.chip:hover {
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.chip.active{ background:var(--accent); color:var(--btn-text, var(--bg)); border-color:var(--accent); }
.chip-img { display:flex; align-items:center; gap:8px; padding:6px 16px 6px 6px; }
.chip-cat-img {
  width:32px; height:32px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  border:2px solid rgba(255,255,255,.15);
  transition:transform .2s;
}
.chip-img:hover .chip-cat-img { transform:scale(1.1); }
.chip-img.active .chip-cat-img { border-color:rgba(255,255,255,.5); }

/* ── Product grid ────────────────────────────────────────────── */
.product-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.product-card {
  background:var(--card); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); position:relative;
  cursor:pointer;
  transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);
  display:flex; flex-direction:column;
}
.product-card::after {
  content:'';
  position:absolute; inset:0;
  border:1.5px solid transparent;
  border-radius:inherit;
  pointer-events:none;
  transition:border-color var(--trans),box-shadow var(--trans);
}
.product-card:hover,
.product-card:focus-within {
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow:0 22px 48px rgba(0,0,0,.14);
}
.product-card:hover::after,
.product-card:focus-within::after {
  border-color:color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent) inset;
}
.product-img {
  height:280px; background:var(--soft); position:relative; overflow:hidden;
  flex-shrink:0;
}
.product-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.product-card:hover .product-img img,
.product-card:focus-within .product-img img { transform:scale(1.06); }
.product-img::before {
  content:'View product';
  position:absolute; right:12px; bottom:12px; z-index:3;
  background:var(--dark); color:var(--accent);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:6px 11px;
  font-size:11px; font-weight:900; line-height:1;
  opacity:0; transform:translateY(6px);
  transition:opacity var(--trans),transform var(--trans);
  pointer-events:none;
}
.product-card:hover .product-img::before,
.product-card:focus-within .product-img::before {
  opacity:1;
  transform:translateY(0);
}
.product-img::after {
  content:''; position:absolute; inset:auto 0 0;
  height:38%; background:linear-gradient(transparent,rgba(0,0,0,.18));
  pointer-events:none; z-index:1;
}
.prod-badge {
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--dark); color:#fff;
  border-radius:999px; padding:4px 9px;
  font-size:10px; font-weight:900; letter-spacing:.4px;
}
.prod-badge.sale   { background:var(--btn-hover, var(--accent2)); color:var(--btn-hover-text, var(--on-accent)); }
.prod-badge.new    { background:#475569; }
.prod-badge.hot    { background:#dc2626; }
.prod-badge.best   { background:#059669; }
.prod-badge.top    { background:#d97706; }
.prod-badge.premium{ background:#334155; }

.prod-wish {
  position:absolute; top:8px; right:8px; z-index:2;
  border:0; background:rgba(255,255,255,.92); border-radius:50%;
  width:34px; height:34px; display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--shadow-sm); color:var(--muted);
  transition:var(--trans);
}
.prod-wish:hover   { background:#fff; color:var(--red); }
/* Solid red heart, no pink halo behind it — keep the plain button background. */
.prod-wish.active  { background:rgba(255,255,255,.92); color:var(--red); }

.product-info { padding:14px 16px; display:flex; flex-direction:column; flex:1; }
.product-info h3 {
  font-size:14px; font-weight:800; line-height:1.3; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.product-info h3 a {
  transition:color var(--trans),text-decoration-color var(--trans);
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
.product-card:hover .product-info h3 a,
.product-card:focus-within .product-info h3 a {
  color:var(--accent);
  text-decoration:underline;
}
.prod-meta {
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; font-weight:700; color:var(--muted);
}
.prod-rating { display:flex; align-items:center; gap:3px; color:#f59e0b; }
.prod-price  { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; }
.prod-price-main { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.prod-price strong{ font-size:17px; font-weight:900; }
.prod-price del   { font-size:12px; color:var(--muted); }
.prod-discount    { font-size:11px; font-weight:900; color:var(--green); }
.add-btn {
  border:0;
  background:  var(--btn-bg,   var(--accent));
  color:       var(--btn-text, var(--on-accent));
  border-radius: var(--btn-radius, 999px);
  padding:7px 12px;
  font-size:12px; font-weight:900; cursor:pointer;
  transition:var(--trans); flex-shrink:0; display:flex; align-items:center; gap:4px;
}
.add-btn:hover {
  background: var(--btn-hover,      var(--btn-bg, #000));
  color:      var(--btn-hover-text, var(--btn-text, var(--accent)));
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 22%, transparent);
}
.add-btn:active {
  transform:translateY(0) scale(1);
}

/* ── Category scroll cards ───────────────────────────────────── */
.cat-scroll {
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(130px,1fr);
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none;
}
.cat-scroll::-webkit-scrollbar{ display:none; }
.cat-card {
  scroll-snap-align:start; border-radius:22px;
  min-height:150px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:var(--shadow-sm); cursor:pointer; color:#fff;
  transition:var(--trans); text-decoration:none; background:var(--dark);
  border:none;
}
.cat-card img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .4s ease;
}
.cat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.cat-card:hover img { transform:scale(1.08); }
.cat-body {
  position:relative; z-index:1;
  padding:12px 14px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 60%,transparent 100%);
}
.cat-card b    { font-size:14px; font-weight:900; display:block; color:#fff; margin:0; }
.cat-card small{ font-size:11px; font-weight:700; color:rgba(255,255,255,.75); }

/* ── Category index tabs ─────────────────────────────────────── */
.cat-tabs {
  display:flex; gap:10px; flex-wrap:wrap;
}
.cat-tab {
  padding:10px 22px; border-radius:999px; font-weight:800; font-size:14px;
  border:1.5px solid var(--border-2); background:var(--card);
  color:var(--text); text-decoration:none; transition:var(--trans);
  white-space:nowrap;
}
.cat-tab:hover  { border-color:var(--accent); }
.cat-tab.active { background:var(--accent); color:var(--btn-text, var(--bg)); border-color:var(--accent); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { padding:22px 0 12px; }

/* ── Hero Carousel ───────────────────────────────────────────── */
.hero-carousel {
  position:relative; overflow:hidden;
  border-radius:34px; box-shadow:var(--shadow);
}

.hero-slide {
  display:none;
  position:relative; min-height:480px;
  background-size:cover; background-position:center;
  border-radius:34px; overflow:hidden;
  animation:slideIn .6s ease;
}
.hero-slide.active { display:flex; align-items:center; }

@keyframes slideIn {
  from { opacity:0; transform:scale(1.03); }
  to   { opacity:1; transform:scale(1); }
}

/* Dark gradient overlay so text is readable over image */
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right,rgba(6,6,6,.82) 40%,rgba(6,6,6,.25));
  z-index:1;
}

/* Text block sits on top of overlay */
.hero-img-content {
  position:relative; z-index:2;
  padding:52px 56px; max-width:600px; color:#fff;
}

.hero-eyebrow {
  width:max-content; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:7px 14px; font-size:11px; font-weight:900;
  letter-spacing:1px; text-transform:uppercase; color:#fff;
  margin-bottom:18px;
}

.hero-img-content h1 {
  font-size:clamp(36px,5vw,64px); line-height:.92;
  margin-bottom:18px; color:#fff;
}
.hero-img-content h1 em { font-style:normal; color:inherit; }

.hero-img-content p {
  color:rgba(255,255,255,.78); font-size:16px;
  line-height:1.7; margin-bottom:32px; max-width:420px;
}

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* Dots */
.hero-dots {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:10;
}
.hero-dot {
  width:10px; height:10px; border-radius:999px;
  background:rgba(255,255,255,.4); border:none; cursor:pointer;
  transition:background .25s, width .3s; padding:0;
}
.hero-dot.active { background:var(--accent); width:30px; }

/* Arrows */
.hero-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:50%; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10; transition:background .2s; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.hero-arrow:hover { background:rgba(0,0,0,.6); }
.hero-prev { left:18px; }
.hero-next { right:18px; }

/* ── Deal cards ──────────────────────────────────────────────── */
.deal-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.deal-card {
  border-radius:26px; overflow:hidden;
  background:var(--card); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.deal-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }

.deal-img-wrap { position:relative; display:block; height:200px; overflow:hidden; flex-shrink:0; }
.deal-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.deal-card:hover .deal-img-wrap img { transform:scale(1.05); }
/* Image + title now link to the product (only the button did before). */
.deal-title-link { text-decoration:none; color:inherit; }
.deal-title-link:hover h3 { color:var(--accent); }

.deal-body { padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.deal-badge {
  width:max-content; background:var(--accent); color:var(--btn-text, #fff);
  border-radius:999px; padding:4px 12px; font-size:11px; font-weight:900;
  letter-spacing:.5px;
}
.deal-body h3 { font-size:16px; font-weight:800; letter-spacing:-.3px; color:var(--text); margin:0; }
.deal-prices  { display:flex; align-items:center; gap:8px; }
.deal-prices strong { font-size:18px; font-weight:900; color:var(--text); }
.deal-prices del    { font-size:13px; color:var(--muted); }
.deal-body .btn { margin-top:4px; align-self:flex-start; }

/* colour variants kept for potential future use */
.dc-1 { --deal-accent:#d8ff4f; }
.dc-2 { --deal-accent:#ff9f4f; }
.dc-3 { --deal-accent:#4fd8ff; }

/* ── Promo banner ────────────────────────────────────────────── */
.promo-banner {
  border-radius:26px; padding:34px 38px;
  background:var(--panel-grad);
  color:#fff; display:flex; align-items:center;
  justify-content:space-between; gap:22px; flex-wrap:wrap;
  margin:4px 0;
}
.promo-banner h2 { font-size:26px; max-width:460px; }
.promo-banner h2 em{ font-style:normal; color:inherit; }
.promo-code {
  background:rgba(255,255,255,.1); border:1.5px dashed rgba(255,255,255,.3);
  border-radius:var(--radius-xs); padding:10px 18px;
  font-size:20px; font-weight:900; letter-spacing:2px; color:var(--accent);
  cursor:pointer; transition:background var(--trans);
}
.promo-code:hover { background:rgba(255,255,255,.16); }

/* ── Reviews ─────────────────────────────────────────────────── */
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-card {
  background:var(--card); border-radius:20px; padding:22px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.review-stars { display:flex; gap:2px; color:#f59e0b; margin-bottom:10px; }
.review-text  { font-size:14px; line-height:1.65; color:var(--copy); margin-bottom:14px; }
.reviewer     { display:flex; align-items:center; gap:10px; }
.reviewer-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--soft); display:grid; place-items:center;
  font-size:18px; flex-shrink:0; color:var(--muted);
  overflow:hidden;
}
.reviewer-name{ font-weight:800; font-size:13px; }
.reviewer-loc { font-size:11px; color:var(--muted); }
.review-empty {
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:220px; text-align:center; background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:28px; box-shadow:var(--shadow-sm);
}
.review-empty-icon {
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--soft); color:var(--muted); margin-bottom:12px;
}
.review-empty h3 { font-size:18px; letter-spacing:0; margin-bottom:6px; }
.review-empty p { color:var(--muted); font-size:14px; margin-bottom:16px; max-width:420px; }

/* ── Trust perks strip ───────────────────────────────────────── */
.trust-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding:8px 0 40px;
}
.trust-card {
  background:var(--card); border-radius:18px; padding:20px;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.trust-card svg    { color:var(--text); }
.trust-card strong { font-size:14px; font-weight:900; }
.trust-card span   { font-size:12px; color:var(--muted); }

/* ── Page hero ───────────────────────────────────────────────── */
.page-hero {
  background:var(--hero-grad);
  color:#fff; padding:44px 0 32px;
}
.page-hero h1{ font-size:clamp(26px,4.5vw,44px); letter-spacing:-1.5px; }
.page-hero p { color:rgba(255,255,255,.6); margin-top:6px; font-size:15px; }
.breadcrumb  { display:flex; gap:6px; align-items:center; font-size:13px; color:rgba(255,255,255,.45); margin-bottom:10px; }
.breadcrumb a{ color:rgba(255,255,255,.45); transition:color var(--trans); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span  { color:rgba(255,255,255,.85); }

/* ── Legal pages (privacy / refund / terms / shipping) ──────────── */
.legal-body { max-width:760px; line-height:1.75; color:var(--text); font-size:15px; }
.legal-body p { margin:0 0 14px; color:var(--muted); }
.legal-body h2 { font-size:22px; font-weight:900; margin:32px 0 12px; color:var(--text); }
.legal-body h3 { font-size:18px; font-weight:800; margin:28px 0 10px; color:var(--text); }
.legal-body h2:first-child, .legal-body h3:first-child { margin-top:0; }
.legal-body ul, .legal-body ol { margin:0 0 14px; padding-left:20px; color:var(--muted); }
.legal-body ul li, .legal-body ol li { margin-bottom:6px; }
.legal-body strong { color:var(--text); }
.legal-body a { color:var(--accent2); text-decoration:underline; }
.legal-body img { max-width:100%; height:auto; border-radius:var(--radius-sm,8px); margin:12px 0; display:block; }
.legal-body blockquote { margin:0 0 14px; padding:10px 16px; border-left:3px solid var(--border); color:var(--muted); }

/* ── Shop layout ─────────────────────────────────────────────── */
.shop-layout  { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:28px 0; }
.sidebar {
  position:-webkit-sticky; position:sticky; top:calc(var(--header-h) + 12px); align-self:start;
  background:var(--card); border-radius:var(--radius);
  padding:20px; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); max-height:calc(100vh - 100px); overflow-y:auto;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--soft); border-radius:99px; }
.filter-group { margin-bottom:22px; }
.filter-group:last-child{ margin-bottom:0; }
.filter-group h4{ margin-bottom:12px; }
.filter-item {
  display:flex; align-items:center; gap:9px;
  padding:6px 0; cursor:pointer; font-size:14px; font-weight:600;
}
.filter-item input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.price-range  { width:100%; accent-color:var(--accent); cursor:pointer; }
.price-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:5px; }
.shop-top {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px; flex-wrap:wrap;
}
.shop-top .filters { min-width:0; flex:1; margin-bottom:0; }
.shop-layout > div   { min-width:0; }
.result-count { font-size:13px; color:var(--muted); font-weight:700; }
.sort-select  {
  border:1.5px solid var(--border-2); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:700;
  background:var(--card); color:var(--text); outline:0; cursor:pointer;
}

/* ── Product detail ──────────────────────────────────────────── */
.pd-breadcrumb-band {
  background:rgba(255,255,255,.34);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
}
.pd-breadcrumb {
  min-height:46px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  color:var(--muted); font-size:12px; font-weight:750;
}
.pd-breadcrumb a { color:var(--muted); }
.pd-breadcrumb a:hover { color:var(--text); text-decoration:none; }
.pd-breadcrumb span:last-child { color:var(--text); }
.pd-layout {
  display:grid; grid-template-columns:minmax(0,.98fr) minmax(390px,1.02fr);
  gap:32px; padding:32px 0 48px; align-items:start;
}
.pd-gallery {
  position:-webkit-sticky; position:sticky; top:calc(var(--header-h) + 16px);
}
.pd-main-img {
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(145deg,var(--soft),var(--card));
  aspect-ratio:4/5; margin-bottom:12px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.pd-main-img img { width:100%; height:100%; object-fit:cover; }
.pd-thumbs {
  display:flex; gap:10px; overflow-x:auto; padding:2px 1px 8px;
  scrollbar-width:thin;
}
.pd-thumb {
  width:74px; height:74px; border-radius:14px; overflow:hidden;
  cursor:pointer; border:2px solid var(--border); flex-shrink:0;
  background:var(--soft); transition:border-color var(--trans),transform var(--trans),box-shadow var(--trans);
}
.pd-thumb:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.pd-thumb.active{ border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pd-thumb img   { width:100%; height:100%; object-fit:cover; }
.pd-info {
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:30px;
  box-shadow:var(--shadow-sm);
}
.pd-info::before {
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:var(--border-2);
}
.pd-kicker {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase;
  letter-spacing:0; margin-bottom:13px;
}
.pd-kicker span + span::before {
  content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--muted); margin-right:8px; vertical-align:middle;
}
.pd-badge-row { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.pd-tag {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:850; padding:6px 10px; border-radius:999px;
}
.pd-tag-green  { background:var(--success-bg); color:var(--success-fg); }
.pd-tag-orange { background:var(--tag-orange-bg); color:var(--tag-orange-fg); }
.pd-tag-purple { background:var(--tag-purple-bg); color:var(--tag-purple-fg); }
.pd-tag-yellow { background:var(--tag-yellow-bg); color:var(--tag-yellow-fg); }
.pd-info h1 {
  font-size:36px; margin-bottom:12px; letter-spacing:0;
  max-width:14ch;
}
.pd-rating-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.pd-stars      { display:flex; gap:2px; color:#f59e0b; }
.pd-rating-count{ font-size:13px; color:var(--muted); font-weight:750; }
.pd-summary {
  color:var(--copy); font-size:15px; line-height:1.65;
  margin:0 0 18px; max-width:58ch;
}
.pd-price-row {
  display:flex; align-items:baseline; gap:10px; margin-bottom:22px; flex-wrap:wrap;
  background:var(--soft); border:1px solid var(--border);
  border-radius:18px; padding:16px 18px;
}
.pd-price-row strong{ font-size:32px; font-weight:950; }
.pd-price-row del   { font-size:16px; color:var(--muted); }
.pd-price-row .off  {
  font-size:12px; font-weight:900; color:var(--success-fg);
  background:var(--success-bg); padding:4px 9px; border-radius:999px;
}
.pd-label {
  font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:0;
  margin-bottom:10px; color:var(--muted);
}
.color-swatches { display:flex; gap:9px; margin-bottom:20px; flex-wrap:wrap; }
.color-swatch {
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:3px solid var(--card); transition:box-shadow var(--trans),transform var(--trans);
  box-shadow:0 0 0 1px var(--border-2),var(--shadow-sm);
}
.color-swatch:hover { transform:translateY(-1px); }
.color-swatch.active{ box-shadow:0 0 0 3px var(--accent2),var(--shadow-sm); }
.size-options { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.size-btn {
  min-width:46px; min-height:38px; padding:8px 12px; border:2px solid var(--border-2);
  border-radius:var(--radius-xs); background:var(--card); color:var(--text);
  font-weight:850; font-size:13px; cursor:pointer;
  transition:border-color var(--trans),background var(--trans),color var(--trans),transform var(--trans);
  text-align:center;
}
.size-btn:hover { border-color:var(--accent2); transform:translateY(-1px); }
.size-btn.active{ background:var(--accent); color:var(--btn-text, var(--bg)); border-color:var(--accent); }
.size-btn.out   { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.pd-qty-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.pd-qty-label {
  color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:0;
}
.pd-qty-control {
  display:flex; align-items:center; overflow:hidden;
  border:1.5px solid var(--border-2); border-radius:999px; background:var(--card);
}
.pd-qty-control button {
  width:38px; height:38px; border:0; background:var(--soft); color:var(--text);
  font-size:18px; font-weight:850; display:grid; place-items:center;
}
.pd-qty-control span {
  min-width:44px; text-align:center; font-size:15px; font-weight:900; color:var(--text);
}
.pd-inventory-note { color:var(--tag-orange-fg); font-size:12px; font-weight:800; }
.pd-actions { display:flex; gap:10px; margin-bottom:18px; align-items:center; flex-wrap:wrap; }
.pd-act-main { flex:1; min-width:150px; justify-content:center; min-height:48px; }
.pd-act-wish {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:var(--soft); color:var(--text); border:2px solid var(--border-2);
  cursor:pointer; display:grid; place-items:center;
  transition:background var(--trans),color var(--trans),border-color var(--trans),transform var(--trans);
}
.pd-act-wish:hover { background:var(--accent); color:var(--btn-text, var(--bg)); border-color:var(--accent); transform:translateY(-1px); }
.pd-act-wish.wished { background:var(--danger-bg); color:var(--danger-fg); border-color:rgba(239,68,68,.38); }
.pd-whatsapp-link {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px; padding:13px; border-radius:14px;
  color:#fff; background:#128c7e; font-size:14px; font-weight:850; text-decoration:none;
  box-shadow:0 12px 28px rgba(18,140,126,.18);
}
.pd-whatsapp-link:hover { color:#fff; text-decoration:none; background:#0f7a70; }
.pd-wholesale-note { margin-top:7px; font-size:12px; color:var(--muted); font-weight:700; }
.pd-detail-note {
  margin:20px 0; padding-top:18px; border-top:1px solid var(--border);
}
.pd-detail-note h2 { font-size:16px; margin-bottom:8px; letter-spacing:0; }
.pd-desc { font-size:14px; line-height:1.75; color:var(--copy); }
.pd-perks { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pd-perk {
  display:flex; align-items:center; gap:10px;
  background:var(--soft); border:1px solid var(--border);
  border-radius:14px; padding:11px 13px; font-size:13px; font-weight:800;
}
.pd-perk svg { color:var(--text); flex-shrink:0; }
.pd-reviews { padding:42px 0 64px; }
.pd-reviews-head { margin-bottom:22px; }
.pd-reviews-grid {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px); gap:26px; align-items:start;
}
.pd-review-form { padding:22px; border-radius:18px; }
.pd-review-form h3 { font-size:17px; margin-bottom:16px; letter-spacing:0; }
.pd-review-lock {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.pd-review-lock h3 { margin-bottom:0; }
.pd-review-lock p {
  margin:0; color:var(--muted); font-size:14px; line-height:1.6;
}
.pd-review-lock-icon {
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--soft); color:var(--text); border:1px solid var(--border);
}

/* ── Cart page ───────────────────────────────────────────────── */
.cart-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; padding:32px 0; }
.cart-table  { background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.cart-table-head {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 36px;
  gap:10px; padding:12px 20px;
  background:var(--soft); font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
  align-items:center;
}
.cart-row {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 36px;
  gap:10px; padding:16px 20px; align-items:center;
  border-top:1px solid var(--soft);
}
.cart-item-info{ display:flex; align-items:center; gap:12px; }
.cart-item-img { width:68px; height:68px; border-radius:10px; overflow:hidden; background:var(--soft); flex-shrink:0; }
.cart-item-img img{ width:100%; height:100%; object-fit:cover; }
.cart-item-name{ font-weight:800; font-size:14px; }
.cart-item-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.qty-control   { display:flex; align-items:center; gap:8px; }
.qty-control .qty-btn{ width:28px; height:28px; }
.qty-num       { font-weight:900; font-size:14px; min-width:18px; text-align:center; }
.cart-price        { font-weight:700; font-size:14px; }
.cart-total-price  { font-weight:900; font-size:15px; color:var(--text); }
.cart-remove       { background:none; border:none; cursor:pointer; color:var(--muted); display:grid; place-items:center; border-radius:50%; padding:4px; transition:color var(--trans),background var(--trans); }
.cart-remove:hover { color:var(--red); background:var(--danger-bg); }
.cart-summary      { background:var(--card); border-radius:var(--radius); border:1px solid var(--border); padding:22px; position:-webkit-sticky; position:sticky; top:calc(var(--header-h)+12px); }
.cart-summary h3   { margin-bottom:18px; }
.summary-row       { display:flex; justify-content:space-between; font-size:14px; font-weight:700; padding:7px 0; }
.summary-row.total { font-size:17px; border-top:2px solid var(--soft); margin-top:8px; padding-top:14px; }
.coupon-row        { display:flex; gap:8px; margin:12px 0; }
.coupon-row input  { flex:1; border:1.5px solid var(--border-2); border-radius:999px; padding:9px 14px; font-size:13px; outline:0; min-width:0; background:var(--field-bg); color:var(--text); }
.coupon-row input:focus{ border-color:var(--accent); }
.savings { font-size:12px; font-weight:700; color:var(--green); }

/* ── Checkout ────────────────────────────────────────────────── */
.checkout-layout{ display:grid; grid-template-columns:1fr 360px; gap:24px; padding:32px 0; }
.form-card  { background:var(--card); border-radius:var(--radius); border:1px solid var(--border); padding:26px; margin-bottom:16px; }
.form-card h3 { margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.form-card h3 .step-num { width:26px; height:26px; background:var(--dark); color:#fff; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; flex-shrink:0; }
.form-grid  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group.full{ grid-column:1/-1; }
.form-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.form-input {
  border:1.5px solid var(--border-2); border-radius:var(--radius-xs);
  padding:11px 14px; font-size:14px; outline:0;
  transition:border-color var(--trans),box-shadow var(--trans);
  background:var(--field-bg); color:var(--text); width:100%;
}
.form-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.payment-option {
  display:flex; align-items:center; gap:13px;
  border:2px solid var(--border-2); border-radius:var(--radius-xs);
  padding:13px 15px; cursor:pointer; margin-bottom:10px;
  transition:border-color var(--trans);
}
.payment-option:hover,.payment-option.selected{ border-color:var(--accent); }
.payment-option input[type=radio]{ accent-color:var(--accent); flex-shrink:0; }
.payment-icon  { width:32px; height:32px; display:grid; place-items:center; color:var(--text); }
.payment-label { font-weight:800; font-size:14px; }
.payment-desc  { font-size:12px; color:var(--muted); }
.order-summary-mini{ background:var(--card); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; position:-webkit-sticky; position:sticky; top:calc(var(--header-h)+12px); }
.osm-head { padding:18px 22px; border-bottom:1px solid var(--soft); font-weight:900; font-size:15px; }
.osm-items{ padding:14px 22px; display:flex; flex-direction:column; gap:12px; max-height:260px; overflow-y:auto; }
.osm-item { display:flex; gap:12px; align-items:center; }
.osm-img  { width:54px; height:54px; border-radius:10px; overflow:hidden; background:var(--soft); flex-shrink:0; }
.osm-img img{ width:100%; height:100%; object-fit:cover; }
.osm-name { font-size:13px; font-weight:700; line-height:1.3; }
.osm-price{ font-size:14px; font-weight:900; color:var(--text); }
.osm-foot { padding:14px 22px; border-top:1px solid var(--soft); }

/* ── Account & Orders ────────────────────────────────────────── */
.account-layout  { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:32px 0; }
.account-sidebar {
  background:var(--card); border-radius:var(--radius);
  border:1px solid var(--border); padding:20px;
  position:-webkit-sticky; position:sticky; top:calc(var(--header-h)+12px); align-self:start;
}
.account-avatar  {
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg,var(--dark),#333);
  display:grid; place-items:center; color:rgba(255,255,255,.5);
  margin-bottom:12px;
}
.account-name    { font-weight:900; font-size:15px; }
.account-email   { font-size:12px; color:var(--muted); margin-bottom:18px; }
.account-nav     { display:flex; flex-direction:column; gap:2px; }
.account-nav a {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--radius-xs);
  font-size:14px; font-weight:700; color:var(--text);
  transition:background var(--trans);
}
.account-nav a:hover{ background:rgba(79,70,229,.1); color:var(--text); transform:translateX(3px); }
.account-nav a:hover svg{ color:var(--text); }
.account-nav a.active{ background:rgba(79,70,229,.12); color:var(--text); font-weight:900; border-left:3px solid var(--accent); padding-left:8px; }
.account-nav a.active svg{ color:var(--text); }
.account-nav a svg{ color:var(--muted); flex-shrink:0; }
.account-nav a.danger { color:var(--red); }
.account-content { min-height:400px; min-width:0; }
.content-card { background:var(--card); border-radius:var(--radius); border:1px solid var(--border); padding:26px; margin-bottom:16px; }
.content-card h3 { margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat-card  { background:var(--card); border-radius:var(--radius); border:1px solid var(--border); padding:20px; text-align:center; box-shadow:var(--shadow-sm); }
.stat-card svg   { color:var(--text); margin-bottom:8px; }
.stat-card .stat-val { font-size:24px; font-weight:900; margin-bottom:2px; }
.stat-card .stat-lab { font-size:12px; color:var(--muted); }
.order-row {
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border); border-radius:var(--radius-xs);
  padding:13px; margin-bottom:10px;
}
.order-img     { width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--soft); flex-shrink:0; }
.order-img img { width:100%; height:100%; object-fit:cover; }
.order-info    { flex:1; min-width:0; }
.order-name    { font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-meta    { font-size:12px; color:var(--muted); }
.order-status  { font-size:12px; font-weight:900; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.status-delivered  { background:var(--success-bg); color:var(--success-fg); }
.status-shipped    { background:var(--info-bg); color:var(--info-fg); }
.status-processing { background:var(--warn-bg); color:var(--warn-fg); }
.status-cancelled  { background:var(--danger-bg); color:var(--danger-fg); }
.address-card {
  border:1px solid var(--border);
  border-radius:14px; padding:15px 17px; margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.address-card.is-default { border:2px solid var(--accent); }
.default-badge {
  background:var(--success-bg); color:var(--success-fg);
  font-size:10px; font-weight:900; padding:2px 8px; border-radius:999px;
}
.uc-switch {
  position:relative; display:inline-block; width:44px; height:24px;
  cursor:pointer; flex-shrink:0;
}
.uc-switch input { opacity:0; width:0; height:0; }
.uc-switch-slider {
  position:absolute; cursor:pointer; inset:0;
  background:#d1d5db; border-radius:999px; transition:background var(--trans);
}
.uc-switch-slider::before {
  content:''; position:absolute; height:18px; width:18px;
  left:3px; bottom:3px; background:#fff; border-radius:50%;
  transition:transform var(--trans);
}
.uc-switch input:checked + .uc-switch-slider { background:var(--accent); }
.uc-switch input:checked + .uc-switch-slider::before { transform:translateX(20px); }

/* ── Auth ────────────────────────────────────────────────────── */
.auth-wrap  { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:40px 16px; }
.auth-card  { width:min(440px,100%); background:var(--card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:38px; }
.auth-logo  { text-align:center; margin-bottom:26px; }
.auth-tabs  { display:flex; gap:0; background:var(--soft); border-radius:12px; margin-bottom:26px; overflow:hidden; }
.auth-tab   { flex:1; padding:11px; text-align:center; font-weight:800; font-size:14px; cursor:pointer; border:0; background:transparent; border-radius:12px; transition:var(--trans); }
.auth-tab.active{ background:var(--accent); color:var(--btn-text, var(--bg)); }
.form-row   { margin-bottom:14px; }
.form-row label{ display:block; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.auth-divider { text-align:center; color:var(--muted); font-size:13px; margin:14px 0; position:relative; }
.auth-divider::before{ content:''; position:absolute; inset:50% 0 auto; height:1px; background:var(--soft); }
.auth-divider span{ background:var(--card); position:relative; padding:0 10px; }
.social-auth{ display:flex; gap:10px; }
.social-auth-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border:1.5px solid var(--border-2); border-radius:var(--radius-xs); font-weight:800; font-size:13px; cursor:pointer; background:var(--card); color:var(--text); transition:var(--trans); }
.social-auth-btn:hover{ border-color:var(--accent); background:var(--soft); }
.social-auth-btn.social-google{ text-decoration:none; }
.social-auth-btn.social-google:hover{ border-color:#4285F4; }

/* ── Search page ─────────────────────────────────────────────── */
.search-hero { background:var(--dark); color:#fff; padding:32px 0; }
.search-hero h1{ font-size:26px; }
.search-hero p { color:rgba(255,255,255,.6); }
.search-bar-big{ display:flex; max-width:580px; margin-top:18px; border-radius:999px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.28); }
.search-bar-big input { flex:1; padding:14px 22px; border:0; outline:0; font-size:15px; background:var(--card); color:var(--text); min-width:0; }
.search-bar-big button{ background:var(--accent); color:var(--btn-text,#fff); border:0; padding:14px 22px; font-weight:900; font-size:14px; cursor:pointer; white-space:nowrap; }
.no-results { text-align:center; padding:80px 20px; }
.no-results-icon{ margin-bottom:14px; color:var(--muted); display:flex; justify-content:center; }
.no-results h3 { font-size:22px; margin-bottom:8px; }
.no-results p  { color:var(--muted); }

/* ── Utility ─────────────────────────────────────────────────── */
.divider   { border:0; border-top:1px solid var(--soft); margin:16px 0; }
.text-muted{ color:var(--muted); }
.hidden    { display:none !important; }
.mt-4  { margin-top:4px; }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.gap-8 { gap:8px; }
.flex  { display:flex; }
.items-center{ align-items:center; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { background:var(--dark); color:rgba(255,255,255,.75); padding:40px 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:32px; padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand p    { font-size:14px; line-height:1.7; opacity:.6; margin:14px 0 18px; max-width:260px; }
.footer-brand .brand{ color:#fff; }
.footer-brand .mark { background:var(--accent); color:var(--on-accent,#fff); }
.social-links { display:flex; gap:8px; }
.social-btn   { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; transition:background var(--trans); }
.social-btn:hover { background:var(--accent); color:var(--on-accent,#fff); }
.footer-col h4{ color:#fff; margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:8px; }
.footer-col ul li a{ font-size:14px; opacity:.6; transition:opacity var(--trans); }
.footer-col ul li a:hover{ opacity:1; }

.footer-bottom{
  padding:18px 0; display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12px; opacity:.5;
}
.payment-icons{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pay-chip { background:rgba(255,255,255,.08); padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; display:flex; align-items:center; gap:4px; }
.footer-legal { display:flex; gap:10px; }
.footer-legal a{ color:inherit; }

/* ── Bottom mobile nav ───────────────────────────────────────── */
/* Floating glass tab bar. Was rgba(15,15,15,.96) — a hardcoded, 96%-opaque dark
   slab, so it ignored the theme entirely and the blur behind it did nothing.
   Now it is a theme-tinted translucent pill with a real blur and an inset top
   highlight; same size, same position. */
.bottom-nav {
  display:none; position:fixed; left:50%; bottom:12px;
  transform:translateX(-50%);
  width:min(440px,calc(100% - 24px));
  height:62px;
  background:color-mix(in srgb, var(--card) 68%, transparent);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-radius:999px;
  z-index:300; align-items:center; justify-content:space-around;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent),
             0 16px 46px -18px rgba(0,0,0,.55);
}
.bn-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  /* was hardcoded rgba(255,255,255,.45) — invisible on a light-theme pill */
  color:var(--text); font-size:9px; font-weight:800;
  letter-spacing:.3px; text-transform:uppercase;
  transition:color var(--trans), background var(--trans);
  padding:6px 14px; border-radius:999px;
}
.bn-item svg { color:currentColor; }
.bn-item:hover { color:var(--accent); }
/* The accent is mid-luminance, so on a glass pill floating over a bright product
   card the active label measured only 3.5:1. This chip is an opaque-enough
   surface of its own, which pins the accent's backdrop no matter what scrolls
   underneath, and the ring keeps the state readable without relying on colour. */
/* Accent-on-glass could not be made safe here: the accent is mid-luminance, so
   even a fully opaque white chip caps out at 4.91:1 for this 9px label, and over
   a dark backdrop it fell to 3.71:1. A solid accent chip with --btn-text (derived
   per theme from the accent's own luminance) is backdrop-independent and matches
   the header's active pill. */
.bn-item.active {
  background:var(--accent);
  color:var(--btn-text, var(--bg));
}
.bn-item:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Shop: 3-col grid only when sidebar is visible ──────────── */
/* ── Sticky bar: mobile only ─────────────────────────────────── */
@media (min-width:961px) {
  .header {
    background:color-mix(in srgb,var(--card) 94%,transparent);
    border-bottom:1px solid var(--border);
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
  }
  .nav-inner { width:min(1360px,calc(100% - 48px)); gap:22px; }
  .brand { padding:5px 14px 5px 5px; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .desktop-nav { display:flex; align-items:center; gap:4px; white-space:nowrap; }
  .desktop-nav a { padding:9px 11px; border-radius:9px; color:var(--muted); font-size:13px; font-weight:800; transition:var(--trans); }
  .desktop-nav a:hover,.desktop-nav a.active { color:var(--text); background:var(--soft); }
  .desktop-nav .desktop-deal { color:var(--accent); }
  .desktop-search { display:flex; max-width:300px; margin-left:auto; }
  .desktop-action { display:grid; }
  .nav-actions { gap:8px; margin-left:0; }
  .hamburger { display:none !important; }
  .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch; gap:16px; }
  .product-card { height:100%; }
  .product-img { height:auto; aspect-ratio:1/1; }
  .cat-scroll { grid-auto-columns:minmax(128px,1fr); gap:10px; }
  .cat-card { min-height:122px; border-radius:16px; }
  .cat-body { padding:10px 12px 11px; }
  .cart-fab { right:18px; gap:7px; }
  .floating-cart { width:46px; height:46px; padding:0; justify-content:center; }
  .floating-cart .fc-meta { display:none; }
  .cart-clear-fab { width:42px; height:42px; }
  .shop-layout .product-grid { grid-template-columns:repeat(3,1fr); }
  #pd-sticky-bar             { display:none !important; }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════ */

/* ── Tablet  960px ───────────────────────────────────────────── */
@media (max-width:960px) {
  /* .nav-links / .search-form no longer render in the header; .hamburger is
     shown at every width now, so these overrides are handled globally. */
  /* Hero carousel arrows are absolutely positioned against the slide edges. Once
     the slide narrows, they sit directly on top of the headline (the left arrow
     landed mid-word). Dots stay, and the carousel is swipeable, so navigation is
     not lost by dropping them on tablet and phone. */
  .hero-arrow { display:none; }
  .hero-img-content { padding:40px 40px; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .review-grid  { grid-template-columns:repeat(2,1fr); }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:28px; }
  .shop-layout  { grid-template-columns:1fr; }
  .sidebar      { display:none; }
  .pd-layout    { grid-template-columns:1fr; }
  .pd-gallery   { position:static; }
  .pd-info h1   { max-width:none; }
  .pd-reviews-grid { grid-template-columns:1fr; }
  .cart-layout  { grid-template-columns:1fr; }
  .cart-summary { position:static; }
  .checkout-layout  { grid-template-columns:1fr; }
  .order-summary-mini{ position:static; }
  .account-layout   { grid-template-columns:1fr; }
  .account-sidebar  { position:static; }
  .deal-grid  { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .trust-strip{ grid-template-columns:repeat(2,1fr); }
}

/* ── Mobile  600px ───────────────────────────────────────────── */
@media (max-width:600px) {
  :root { --header-h:58px; }
  body  { padding-bottom:0; }
  .bottom-nav  { display:flex; }

  /* Mobile header. This block used to squeeze a 3-icon row in, so it shrank
     .icon-btn to 34px and stripped its background to transparent. With the row
     reduced to a single menu button that override silently removed the button's
     glass and left it under the 44px touch target — dropped. */
  .brand            { min-width:0; gap:9px; padding:6px 16px 6px 6px; }
  .brand-name       { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; letter-spacing:-.3px; }
  .nav-inner        { gap:10px; padding:0 12px; min-width:0; }

  /* Hero compact */
  .hero { padding:12px 0 8px; }
  .hero-slide { min-height:220px; border-radius:22px; }
  .hero-img-content { padding:24px 22px; }
  .hero-img-content h1 { font-size:26px; letter-spacing:-1px; margin-bottom:10px; }
  .hero-img-content p  { display:none; }
  .hero-eyebrow{ font-size:9px; padding:5px 10px; margin-bottom:10px; }
  .hero-overlay { background:linear-gradient(to right,rgba(0,0,0,.78) 55%,rgba(0,0,0,.2)); }
  /* .hero-arrow is already display:none from the <=960px block — no sizing needed. */
  .hero-dots  { bottom:12px; }
  .hero-dot   { width:8px; height:8px; }
  .hero-dot.active { width:22px; }

  /* Products */
  .product-grid   { grid-template-columns:repeat(2,1fr); gap:10px; }
  .product-img    { height:165px; }
  .product-info   { padding:10px 11px; }
  .product-info h3{ font-size:12px; }
  .prod-price strong{ font-size:14px; }
  .add-btn        { font-size:11px; padding:6px 10px; }
  .prod-discount  { display:none; }

  /* Layout */
  .shell    { width:calc(100% - 20px); }
  .section  { padding:18px 0; }
  .section-head { margin-bottom:14px; }
  .deal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch; gap:10px; }
  .deal-card{ height:100%; border-radius:16px; }
  .deal-img-wrap{ height:145px; }
  .deal-body{ flex:1; padding:12px; gap:6px; }
  .deal-body h3{ font-size:13px; line-height:1.25; }
  .deal-prices strong{ font-size:15px; }
  .deal-prices del{ font-size:11px; }
  .deal-body .btn{ width:100%; justify-content:center; margin-top:auto; padding:9px 8px; font-size:11px; }
  .review-grid  { grid-template-columns:1fr; }
  /* Compact mobile footer: 3 columns in one row, no brand block, tight rhythm. */
  .footer-grid  { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 10px; padding-bottom:12px; }
  .footer-brand { display:none; }               /* brand capsule + tagline + socials hidden on phones */
  .footer-col h4 { margin-bottom:6px; font-size:12px; letter-spacing:.3px; }
  .footer-col ul { gap:4px; }
  .footer-col ul li a { font-size:12.5px; }
  .footer       { padding:16px 0 80px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; padding:10px 0 12px; font-size:11px; }
  .footer-bottom .payment-icons { gap:6px; }
  .footer-legal { display:none; }                /* Privacy/Terms already in the Help column */
  .pay-chip { padding:3px 8px; font-size:10.5px; }
  .trust-strip  { grid-template-columns:1fr 1fr; gap:10px; padding:6px 0 28px; }
  .trust-card   { padding:14px 10px; }
  .promo-banner { padding:22px 18px; border-radius:18px; }
  .promo-banner h2{ font-size:18px; }

  /* Forms */
  .form-grid { grid-template-columns:1fr; }
  .auth-card { padding:24px 18px; }
  .checkout-layout { padding:16px 0; }
  .form-card{ padding:18px; }

  /* Cart */
  .cart-table-head { display:none; }
  .cart-row {
    grid-template-columns:68px 1fr auto;
    grid-template-rows:auto auto; gap:8px;
  }
  .cart-row .cart-price,.cart-row .cart-total-price { display:none; }

  /* Product detail */
  .pd-layout  { gap:16px; padding:20px 0; }
  .pd-breadcrumb { min-height:40px; font-size:11px; gap:7px; }
  .pd-main-img { border-radius:18px; aspect-ratio:1/1.16; }
  .pd-thumb { width:62px; height:62px; border-radius:12px; }
  .pd-info { padding:20px; border-radius:18px; }
  .pd-info h1 { font-size:26px; }
  .pd-summary { font-size:14px; }
  .pd-price-row { padding:13px 14px; border-radius:14px; }
  .pd-price-row strong { font-size:26px; }
  .pd-actions { flex-wrap:wrap; }
  .pd-act-main { flex-basis:100%; min-width:0; }
  .pd-perks   { grid-template-columns:1fr; }
  .pd-reviews { padding:28px 0 48px; }
  .pd-review-form { padding:18px; border-radius:16px; }

  /* Account */
  .account-layout { gap:16px; padding:18px 0 24px; }
  .account-sidebar {
    display:grid; grid-template-columns:52px minmax(0,1fr);
    align-items:center; gap:0 12px;
    padding:16px; border-radius:20px;
  }
  .account-avatar {
    width:52px; height:52px; margin:0;
    grid-row:1 / span 2;
  }
  .account-name { align-self:end; min-width:0; }
  .account-email {
    margin-bottom:0; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .account-nav {
    grid-column:1 / -1; flex-direction:row; gap:8px;
    margin-top:14px; margin-inline:-4px; padding:14px 4px 0;
    border-top:1px solid var(--soft);
    overflow-x:auto; scrollbar-width:none;
  }
  .account-nav::-webkit-scrollbar { display:none; }
  .account-nav a {
    flex:0 0 auto; white-space:nowrap;
    border:1px solid var(--border); background:var(--bg);
    font-size:13px; padding:9px 12px;
  }
  .account-nav a.danger { margin-top:0 !important; }
  .content-card { padding:18px; border-radius:18px; }
  .content-card h3 { gap:10px; flex-wrap:wrap; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-width:0; }
  .stat-card  { min-width:0; padding:14px 10px; border-radius:18px; }
  .stat-card .stat-val { font-size:22px; }
  .stat-card .stat-lab { font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
  .order-row {
    display:grid; grid-template-columns:54px minmax(0,1fr);
    align-items:start; gap:8px 10px;
  }
  .order-img { width:54px; height:54px; grid-row:1 / span 2; }
  .order-name { white-space:normal; line-height:1.3; }
  .order-meta { line-height:1.4; overflow-wrap:anywhere; }
  .order-status { grid-column:2; justify-self:start; }
  .address-card { flex-direction:column; align-items:stretch; }
  .address-card > div:last-child { justify-content:flex-start; flex-wrap:wrap; }
  .promo-banner { align-items:stretch; gap:16px; }
  .promo-banner > div { width:100%; min-width:0; }
  .promo-banner > div:last-child {
    display:grid !important; grid-template-columns:1fr;
    align-items:stretch !important; gap:10px !important;
  }
  .promo-code { width:100%; text-align:center; font-size:18px; letter-spacing:1.5px; }
  .promo-banner .btn { width:100%; justify-content:center; }

  /* Page hero */
  .page-hero { padding:24px 0 18px; }
  .page-hero h1 { font-size:clamp(22px,6vw,32px); }

  /* Toast — stays top-centre on mobile too */
  .toast-container { top:12px; }
  .toast { max-width:min(92vw,320px); font-size:12.5px; padding:10px 16px; }

  /* Search */
  .search-hero  { padding:24px 0 20px; }
  .search-bar-big{ border-radius:14px; }
  .search-bar-big input { padding:12px 16px; font-size:14px; }
  .search-bar-big button{ padding:12px 16px; font-size:13px; }
}

/* ── Very small  380px ───────────────────────────────────────── */
@media (max-width:380px) {
  .product-img  { height:145px; }
  .bn-item      { padding:6px 10px; font-size:8px; }
  .stats-grid   { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
}

/* ── Dark mode polish ───────────────────────────────────────── */
/* The dark-mode .icon-btn override used to force background:rgba(255,255,255,.06).
   It outranked the glass rule (higher specificity, later in the file), and a 6%
   white tint is far too thin to hold up as glass: with a bright product card
   scrolling under the sticky header the button went white and its light icon
   measured 1.02:1. The base .icon-btn rule is already theme-aware — it mixes
   var(--card) — so no dark-mode variant is needed at all. */
html[data-theme="dark"] .btn-ghost { border-color:var(--border-2); }
html[data-theme="dark"] .btn-dark {
  background:#07080a;
  color:#fff;
  border:1px solid var(--border);
}
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .trust-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .cart-table,
html[data-theme="dark"] .cart-summary,
html[data-theme="dark"] .order-summary-mini,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .account-sidebar,
html[data-theme="dark"] .pd-info,
html[data-theme="dark"] .pd-main-img,
html[data-theme="dark"] .pd-thumb,
html[data-theme="dark"] .pd-review-form {
  border-color:var(--border);
}
html[data-theme="dark"] .pd-breadcrumb-band {
  background:rgba(15,17,21,.52);
}
html[data-theme="dark"] .pd-price-row,
html[data-theme="dark"] .pd-qty-control {
  background:rgba(255,255,255,.04);
}
html[data-theme="dark"] .pd-thumb.active {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
html[data-theme="dark"] .size-btn.active,
html[data-theme="dark"] .pd-act-wish:hover {
  background:var(--accent);
  color:var(--on-accent,#0b1020);
  border-color:var(--accent);
}
html[data-theme="dark"] .prod-wish {
  background:rgba(23,26,32,.88);
  color:var(--muted);
  border:1px solid var(--border);
}
html[data-theme="dark"] .prod-wish:hover {
  background:var(--card);
  color:var(--danger-fg);
}
/* Active (wishlisted) heart must read RED even in dark mode. Without this the
   dark base rule above (higher specificity than `.prod-wish.active`) kept the
   heart muted, so adding to wishlist showed no colour change. */
html[data-theme="dark"] .prod-wish.active {
  background:rgba(23,26,32,.88);
  color:#ef4444;               /* solid red heart, not pink/salmon */
  border-color:var(--border);
}
html[data-theme="dark"] .stat-card svg,
html[data-theme="dark"] .trust-card svg,
html[data-theme="dark"] .payment-icon,
html[data-theme="dark"] .pd-perk svg {
  color:var(--muted);
}
html[data-theme="dark"] .address-card.is-default {
  border-color:var(--accent);
}
html[data-theme="dark"] .uc-switch input:checked + .uc-switch-slider {
  background:var(--accent);
}
html[data-theme="dark"] .uc-switch input:checked + .uc-switch-slider::before {
  background:#111;
}
html[data-theme="dark"] .dc-light {
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
}
html[data-theme="dark"] .no-results-icon,
html[data-theme="dark"] .cart-empty-icon {
  color:var(--muted);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color:#737d8c;
}
html[data-theme="dark"] [style*="background:#dcfce7"] {
  background:var(--success-bg) !important;
  color:var(--success-fg) !important;
}
html[data-theme="dark"] [style*="background:#dbeafe"] {
  background:var(--info-bg) !important;
  color:var(--info-fg) !important;
}
html[data-theme="dark"] [style*="background:#fef3c7"] {
  background:var(--warn-bg) !important;
  color:var(--warn-fg) !important;
}
html[data-theme="dark"] [style*="background:#fee2e2"] {
  background:var(--danger-bg) !important;
  color:var(--danger-fg) !important;
}
html[data-theme="dark"] [style*="background:#ede9fe"] {
  background:var(--tag-purple-bg) !important;
  color:var(--tag-purple-fg) !important;
}
html[data-theme="dark"] [style*="border:1px solid rgba(0,0,0,.08)"],
html[data-theme="dark"] [style*="border-bottom:1px solid rgba(0,0,0,.06)"] {
  border-color:var(--border) !important;
}

/* ── Product sticky bar (mobile) ─────────────────────────────── */
#pd-sticky-bar {
  display:none;
  position:fixed; bottom:70px; left:0; right:0; z-index:300;
  background:var(--card); padding:12px 16px;
  border-top:1px solid var(--soft);
  box-shadow:0 -8px 24px rgba(0,0,0,.10);
  gap:10px;
}
#pd-sticky-bar .btn { flex:1; justify-content:center; }

/* ── Category band cards ─────────────────────────────────────── */
.hero-band-card {
  border-radius:24px; display:flex; flex-direction:column;
  justify-content:flex-end; padding:28px;
  text-decoration:none; min-height:200px;
  position:relative; overflow:hidden; color:#fff;
  transition:transform var(--trans);
}
.hero-band-card:hover { transform:translateY(-4px); }
.hero-band-card h2 { margin-bottom:6px; }
.hero-band-card p  { font-size:13px; opacity:.7; margin-bottom:14px; }
.hbc-dark   { background:linear-gradient(135deg,#151515,#2d2d2d); }
.hbc-orange { background:linear-gradient(135deg,#ff6b35,#d97706); }
.hbc-green  { background:linear-gradient(135deg,#16a34a,#22c55e); }
.hbc-purple { background:linear-gradient(135deg,#6d28d9,#a855f7); }
@media(max-width:600px) {
  .hero-band-card { min-height:150px; padding:20px; }
  .hero-band-card h2 { font-size:18px; }
}

/* ── Floating cart button ─────────────────────────────────────── */
/* Bottom-right floating bar: [View Cart][Clear] — Clear sits on the outer edge.
   The wrapper owns position + show/hide; inner buttons keep their own transforms. */
.cart-fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 500;               /* below the cart drawer (600) so it never overlaps it */
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(24px) scale(.95);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.cart-fab.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* Hide the bar while the cart drawer (or mobile menu) is open — that was the
   overlap: the pill sat on top of the open drawer. */
body.cart-open .cart-fab,
body.menu-open .cart-fab { opacity: 0; pointer-events: none; transform: translateY(24px) scale(.95); }

.cart-clear-fab {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: var(--danger-fg, #ef4444);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30),
              inset 0 0 0 1px color-mix(in srgb, var(--danger-fg, #ef4444) 30%, transparent),
              0 14px 34px -14px rgba(0,0,0,.55);
  transition: transform .15s ease, background .15s ease;
}
.cart-clear-fab:hover { transform: scale(1.06); background: color-mix(in srgb, var(--danger-fg, #ef4444) 16%, var(--card)); }
.cart-clear-fab:focus-visible { outline: 2px solid var(--danger-fg, #ef4444); outline-offset: 2px; }

.floating-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
              0 14px 34px -14px rgba(0,0,0,.55);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.2);
  font-family: inherit;
}
.floating-cart:hover { transform: translateY(-2px) scale(1.03); }
.floating-cart .fc-ico { position: relative; display: flex; align-items: center; }
.floating-cart .fc-count {
  position: absolute;
  top: -8px; right: -9px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  /* Same fix as .badge-count — see the note there. */
  background: var(--accent, #4f46e5);
  color: var(--btn-text, var(--on-accent, #fff));
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.floating-cart .fc-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.floating-cart .fc-label { font-size: 11px; opacity: .8; font-weight: 600; }
.floating-cart .fc-total { font-size: 15px; font-weight: 800; }
.floating-cart.bump { animation: fcBump .4s ease; }
@keyframes fcBump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-4px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}
/* Sit above the mobile bottom-nav pill, bottom-right */
@media(max-width:600px) {
  .cart-fab { right: 14px; bottom: 86px; gap: 8px; }
  .cart-clear-fab { width: 42px; height: 42px; }
  .floating-cart { padding: 10px 16px 10px 12px; }
  .floating-cart .fc-total { font-size: 14px; }
}

/* Desktop cart controls stay inside the outer gutter instead of covering cards. */
@media(min-width:961px) {
  .cart-fab { right:18px; bottom:22px; gap:7px; }
  .floating-cart { width:46px; height:46px; padding:0; justify-content:center; }
  .floating-cart .fc-meta { display:none; }
  .cart-clear-fab { width:42px; height:42px; }
  .deal-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; align-items:stretch; gap:14px; }
  .deal-card { height:100%; border-radius:18px; }
  .deal-img-wrap { height:170px; }
  .deal-body { flex:1; padding:15px 16px 18px; }
  .deal-body .btn { width:100%; justify-content:center; margin-top:auto; }
}