/* ============================================================
   index.html
   ============================================================ */
/* ===== index.html ===== */

/* ── DESIGN TOKENS ── */
:root {
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --ink:#1D1D1F;
  --ink-2:#3a3a3c;
  --muted:#515154;
  --muted-2:#86868B;
  --muted-3:#AEAEB2;
  --line:#E8E8ED;
  --line-soft:#F0F0F2;
  --brand:#FF2D55;
  --brand-soft:#FFF0F3;
  --brand-hover:#FF4D6A;
  --radius-lg:24px;
  --radius-md:20px;
  --radius-sm:16px;
  --radius-pill:100px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 8px 24px rgba(0,0,0,.1);
  --shadow-lg:0 16px 40px rgba(0,0,0,.12);

  /* ── Motion tokens (v3.7.47) ────────────────────────────────────────────
   * Centralised duration + easing tokens so the entire site can be
   * sped up / slowed down by editing this block only. Curves are tuned
   * for the LUXE brand (sensual, discreet, confident) — slower than
   * standard ease-out, with very gentle starts and lingering ends.
   * ──────────────────────────────────────────────────────────────────── */

  /* Durations — tuned 20-30% slower than typical e-commerce */
  --t-xxs: 160ms;   /* button press, checkbox tick */
  --t-xs:  220ms;   /* hover color/bg shifts */
  --t-sm:  320ms;   /* hover lift, dropdown reveal */
  --t-md:  480ms;   /* drawer slide, modal fade */
  --t-lg:  680ms;   /* gallery transitions */
  --t-xl:  900ms;   /* reveal-on-scroll */
  --t-xxl: 1500ms;  /* hero slide, page transitions */

  /* "Silk" — default. Slower start, soft long tail. Use for ~95% of
     transitions. Feels like silk falling. */
  --e-silk:      cubic-bezier(0.32, 0.08, 0.24, 1);

  /* "Velvet" — symmetric ease-in-out with weight. For tab switches,
     drawer pulls, gallery slides — "user feels the mass". */
  --e-velvet:    cubic-bezier(0.76, 0, 0.24, 1);

  /* "Whisper" — almost-imperceptible, very gentle. Ken Burns,
     ambient SVG bobbing — things that drift in the background. */
  --e-whisper:   cubic-bezier(0.45, 0, 0.55, 1);

  /* "Heartbeat" — slight overshoot, exclusively for success
     reactions: wishlist add, add-to-cart confirm. Otherwise banned. */
  --e-heartbeat: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* Linear — strictly for infinite loops (marquee, loading shimmer) */
  --e-linear:    linear;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-index.no-scroll { overflow:hidden; }
body.page-index input, body.page-index select { font-family:inherit; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
  overflow-x:hidden;
}
body.page-index.no-scroll { overflow:hidden; }
body.page-index a { text-decoration:none; color:inherit; }
body.page-index button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-index img { display:block; max-width:100%; }

/* keyboard focus visibility — only for keyboard users */
body.page-index a:focus-visible, body.page-index button:focus-visible, body.page-index input:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* respect reduced motion preference — ONLY when user actually requests it.
 * v3.7.45: previously this rule was bare (no media query wrapper), so it
 * killed every animation/transition site-wide regardless of user preference.
 * Symptoms: announcement bar marquee never scrolled, mini-cart drawer
 * appeared instantly without slide animation, PDP image slide felt jumpy. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body.page-index .ann-track, body.page-index .rt { animation: none !important; }
}

/* ── AGE GATE ── */
body.page-index #age-gate {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.58); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s,visibility .5s;
}
body.page-index #age-gate.gone { opacity:0; visibility:hidden; pointer-events:none; }
body.page-index .gate-box {
  background:#fff; border-radius:24px; padding:52px 44px; max-width:400px; width:calc(100% - 40px);
  text-align:center; box-shadow:0 32px 80px rgba(0,0,0,0.2);
}
body.page-index .gate-logo { font-size:22px; font-weight:800; margin-bottom:24px; display:block; }
body.page-index .gate-logo em { color:#FF2D55; font-style:normal; }
body.page-index .gate-title { font-size:18px; font-weight:700; margin-bottom:10px; }
body.page-index .gate-sub { font-size:13px; color:#86868B; line-height:1.65; margin-bottom:28px; }
body.page-index .gate-btns { display:flex; gap:10px; }
body.page-index .gate-yes { flex:1; padding:13px; border-radius:14px; background:#1D1D1F; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s; }
body.page-index .gate-yes:hover { background:#3a3a3c; }
body.page-index .gate-no { flex:1; padding:13px; border-radius:14px; background:#F5F5F7; color:#86868B; font-size:14px; font-weight:500; cursor:pointer; }
body.page-index .gate-note { font-size:11px; color:#AEAEB2; margin-top:18px; line-height:1.6; }

/* ── ANNOUNCEMENT BAR ── */
body.page-index .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-index .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-index .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-index .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-index header {
  position:sticky;
  overflow:visible; top:16px;
  margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-index header:hover {
  box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset;
}
body.page-index .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-index .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-index .logo em { color:#FF2D55; font-style:normal; }
body.page-index header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-index .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-index .ni > a:hover, body.page-index .ni:hover > a { color:#1D1D1F; background:rgba(0,0,0,0.05); }
body.page-index .chev { width:11px; height:11px; opacity:.4; transition:transform .2s; }
body.page-index .ni:hover .chev { transform:rotate(180deg); }


body.page-index .dg { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
body.page-index .di { padding:11px; border-radius:10px; transition:background .15s; cursor:pointer; }
body.page-index .di:hover { background:#F5F5F7; }
body.page-index .di-name { font-size:13px; font-weight:600; margin-bottom:2px; }
body.page-index .di-desc { font-size:11px; color:#86868B; line-height:1.4; }
body.page-index .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-index .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-index .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-index .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-index .search-pill span { font-size:13px; color:#86868B; }
body.page-index .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-index .ib:hover { background:rgba(0,0,0,0.05); }
body.page-index .ib svg { width:17px; height:17px; }
body.page-index .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:#FF2D55; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ── WRAPPER ── */
body.page-index .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* Spacer so fixed capsule header doesn't cover content */
body.page-index .wrap > *:first-child { margin-top: 24px; }

/* ── LABELS ── */
body.page-index .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-index .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-index .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
body.page-index .sa { font-size:13px; font-weight:500; color:#FF2D55; transition:opacity .2s; }
body.page-index .sa:hover { opacity:.75; }

/* ── HERO ── */
body.page-index .hero { padding:28px 0 72px; }
body.page-index .hslides { position:relative; border-radius:28px; overflow:hidden; }
body.page-index .hs { display:none; width:100%; height:68vh; min-height:500px; position:relative; overflow:hidden; }
body.page-index .hs.on { display:flex; align-items:flex-end; }
body.page-index .hs1 { background:linear-gradient(130deg,#F0EDEA 0%,#FAF8F6 100%); }
body.page-index .hs2 { background:linear-gradient(130deg,#F6EDF0 0%,#FBF7F8 100%); }
body.page-index .hs3 { background:linear-gradient(130deg,#EDF0F6 0%,#F7F8FC 100%); }

/* right photo panel */
body.page-index .h-photo { position:absolute; right:0; top:0; bottom:0; width:50%; overflow:hidden; }
body.page-index .h-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
/* fade photo into slide bg */
body.page-index .h-photo::before { content:''; position:absolute; left:0; top:0; bottom:0; width:200px; z-index:2; pointer-events:none; }
body.page-index .hs1 .h-photo::before { background:linear-gradient(to right,#F0EDEA,transparent); }
body.page-index .hs2 .h-photo::before { background:linear-gradient(to right,#F6EDF0,transparent); }
body.page-index .hs3 .h-photo::before { background:linear-gradient(to right,#EDF0F6,transparent); }

/* text content */
body.page-index .hc { position:relative; z-index:3; padding:0 72px 64px; max-width:520px; animation:hup .55s ease both; }
@keyframes hup { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
body.page-index .hbadge { display:inline-flex; align-items:center; background:rgba(255,45,85,0.08); border-radius:100px; padding:5px 12px; margin-bottom:18px; font-size:11px; font-weight:600; color:#FF2D55; letter-spacing:.5px; }
body.page-index .hc h1 { font-size:56px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; margin-bottom:14px; }
body.page-index .hc p { font-size:16px; color:#86868B; line-height:1.65; margin-bottom:32px; max-width:380px; }
body.page-index .hbtns { display:flex; gap:12px; align-items:center; }
body.page-index .btn-d { background:#1D1D1F; color:#fff; padding:13px 30px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; }
body.page-index .btn-d:hover { background:#3a3a3c; transform:scale(1.02); }
body.page-index .btn-t { font-size:13px; font-weight:500; color:#515154; transition:color .2s; }
body.page-index .btn-t:hover { color:#1D1D1F; }

/* countdown — bottom right, over photo */
body.page-index .hcount {
  position:absolute; right:44px; top:40px; z-index:5;
  background:rgba(255,255,255,0.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(0,0,0,0.07); border-radius:18px; padding:16px 20px;
  display:flex; flex-direction:column; gap:8px;
}
body.page-index .count-label { font-size:10px; font-weight:600; color:#86868B; letter-spacing:1px; text-transform:uppercase; }
body.page-index .count-nums { display:flex; align-items:center; gap:8px; }
body.page-index .cu { text-align:center; }
body.page-index .cn { font-size:26px; font-weight:800; color:#1D1D1F; line-height:1; letter-spacing:-1px; }
body.page-index .cul { font-size:9px; color:#AEAEB2; letter-spacing:.5px; margin-top:2px; }
body.page-index .csep { font-size:20px; color:#D1D1D6; font-weight:300; line-height:1.1; }
body.page-index .ctag { background:#FF2D55; color:#fff; padding:5px 10px; border-radius:100px; font-size:11px; font-weight:700; text-align:center; }

/* slide dots */
body.page-index .sdots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:10; }
body.page-index .sd { height:3px; border-radius:2px; background:rgba(0,0,0,0.15); cursor:pointer; transition:all .3s; width:20px; border:none; }
body.page-index .sd.on { background:#1D1D1F; width:36px; }

/* ── CATEGORIES ── */
body.page-index .cats-s { padding:0 0 64px; }
body.page-index .cg {
  display:grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  gap:14px;
}
body.page-index .cc {
  border-radius:20px; overflow:hidden; position:relative;
  cursor:pointer; min-height:220px; display:flex; align-items:flex-end;
  transition:transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s;
}
body.page-index .cc:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.15); }
/* Card 1 — tall hero, spans 2 rows */
body.page-index .cc:nth-child(1) { grid-row:span 2; min-height:500px; }
/* Card 6 — full-width banner at bottom */
body.page-index .cc:nth-child(6) { grid-column:1/-1; min-height:140px; }
body.page-index .cc-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s ease; }
body.page-index .cc:hover .cc-bg { transform:scale(1.06); }
/* Dark overlay with hover brighten */
body.page-index .cc::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); transition:opacity .3s; }
body.page-index .ci { position:relative; z-index:3; width:100%; padding:22px 26px; display:flex; align-items:flex-end; justify-content:space-between; }
/* Larger text for the tall hero card */
body.page-index .cc:nth-child(1) .cn2 { font-size:20px; }
body.page-index .cc:nth-child(6) .cn2 { font-size:17px; }
/* Full-width card: horizontal layout */
body.page-index .cc:nth-child(6) { align-items:center; }
body.page-index .cc:nth-child(6) .ci { align-items:center; padding:0 32px; }
body.page-index .cn2 { font-size:15px; font-weight:700; color:#fff; margin-bottom:2px; }
body.page-index .cct { font-size:11px; color:rgba(255,255,255,0.5); }
body.page-index .carr { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; transition:background .2s,transform .2s; }
body.page-index .cc:hover .carr { background:#FF2D55; transform:translateX(2px); }

/* ── BENTO USP ──
   3-col grid, 5 items:
   [b1 tall ×1] [b2] [b3]
   [b1 tall ×1] [b4] [b5]
*/
body.page-index .bento-s { padding:0 0 72px; }
body.page-index .bg2 {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
}
body.page-index .b { border-radius:20px; padding:32px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s; min-height:200px; }
body.page-index .b:hover { transform:translateY(-3px); }
body.page-index .b1 { grid-row:span 2; background:#1D1D1F; color:#fff; position:relative; overflow:hidden; min-height:420px; }
body.page-index .b2 { background:#fff; }
body.page-index .b3 { background:#FF2D55; color:#fff; }
body.page-index .b4 { background:#F0EDE8; }
body.page-index .b5 { background:#fff; }
body.page-index .b1::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:36px 36px; }
body.page-index .b1>* {position:relative;z-index:1}
body.page-index .bey { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; display:block; }
body.page-index .b1 .bey { color:rgba(255,255,255,0.3); }
body.page-index .b3 .bey { color:rgba(255,255,255,0.6); }
body.page-index .bey.r { color:#FF2D55; }
body.page-index .btit { font-size:20px; font-weight:700; line-height:1.25; letter-spacing:-.2px; }
body.page-index .b1 .btit { font-size:26px; line-height:1.15; }
body.page-index .bbody { font-size:13px; line-height:1.7; }
body.page-index .b1 .bbody { color:rgba(255,255,255,0.45); font-size:13px; }
body.page-index .b3 .bbody { color:rgba(255,255,255,0.88); }
body.page-index .bbody.m { color:#86868B; }
body.page-index .bchip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:100px; font-size:11px; font-weight:600; }
body.page-index .b1 .bchip { background:rgba(255,45,85,0.18); color:#FF6080; }
/* Stats inside bento */
body.page-index .bento-stats { display:flex; gap:28px; }
body.page-index .bstat-item { }
body.page-index .bstat { font-size:36px; font-weight:800; letter-spacing:-1.5px; color:#FF2D55; line-height:1; }
body.page-index .b3 .bstat { color:#fff; }
body.page-index .bstat-sub { font-size:11px; color:#86868B; margin-top:3px; }
body.page-index .b3 .bstat-sub { color:rgba(255,255,255,0.6); }

/* ── PRODUCTS ── */
body.page-index .prod-s { padding:0 0 72px; }
body.page-index .tabs { display:flex; gap:6px; margin-bottom:30px; }
body.page-index .tab { padding:7px 18px; border-radius:100px; font-size:13px; font-weight:500; cursor:pointer; border:1.5px solid #E8E8ED; color:#86868B; transition:all .2s; background:#fff; }
body.page-index .tab.on { background:#1D1D1F; color:#fff; border-color:#1D1D1F; }
body.page-index .tab:hover:not(.on) { border-color:#1D1D1F; color:#1D1D1F; }
body.page-index .pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-index .pgrid.off { display:none; }
body.page-index .pc { cursor:pointer; }
body.page-index .pcimg { background:#fff; border-radius:20px; aspect-ratio:3/4; overflow:hidden; margin-bottom:14px; transition:all .3s; box-shadow:0 2px 8px rgba(0,0,0,0.05); position:relative; }
body.page-index .pc:hover .pcimg { box-shadow:0 8px 24px rgba(0,0,0,0.1); transform:scale(1.015); }
body.page-index .pcimg img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .4s; }
body.page-index .pc:hover .pcimg img { transform:scale(1.06); }
body.page-index .pcbadge { position:absolute; top:13px; left:13px; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; z-index:2; }
body.page-index .bn2 {background:#1D1D1F;color:#fff} .bh2{background:#FF2D55;color:#fff} .bs2{background:#FF9500;color:#fff} .bt2{background:#34C759;color:#fff}
body.page-index .pcwish { position:absolute; top:13px; right:13px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transition:opacity .2s; z-index:2; }
body.page-index .pc:hover .pcwish { opacity:1; }
body.page-index .pcadd { position:absolute; bottom:-50px; left:10px; right:10px; background:rgba(29,29,31,0.92); backdrop-filter:blur(12px); color:#fff; padding:11px; border-radius:100px; font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1); text-align:center; z-index:2; }
body.page-index .pc:hover .pcadd { bottom:10px; }
body.page-index .pcadd:hover { background:#FF2D55; }
body.page-index .pcstars { font-size:12px; color:#FFCC00; margin-bottom:5px; }
body.page-index .pcstars span { color:#AEAEB2; font-size:11px; margin-left:3px; }
body.page-index .pcname { font-size:14px; font-weight:600; margin-bottom:3px; }
body.page-index .pcvar { font-size:12px; color:#86868B; margin-bottom:7px; }
body.page-index .pcpr { display:flex; align-items:center; gap:7px; }
body.page-index .pcp { font-size:15px; font-weight:700; }
body.page-index .pco { font-size:12px; color:#AEAEB2; text-decoration:line-through; }
body.page-index .pcoff { font-size:11px; font-weight:600; color:#FF2D55; }

/* ── STORY ── */
body.page-index .story-s { padding:0 0 72px; }
body.page-index .story-b { background:#fff; border-radius:28px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.04); min-height:400px; }
body.page-index .sl2 { padding:56px 52px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
body.page-index .sl2 h2 { font-size:34px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-index .sl2 p { font-size:13px; color:#86868B; line-height:1.7; max-width:380px; }
body.page-index .sstats { display:flex; gap:36px; }
body.page-index .ssn { font-size:30px; font-weight:800; letter-spacing:-1px; }
body.page-index .ssl { font-size:12px; color:#86868B; margin-top:2px; }
body.page-index .btn-story { display:inline-flex; align-items:center; gap:6px; background:#1D1D1F; color:#fff; padding:12px 26px; border-radius:100px; font-size:13px; font-weight:600; transition:all .2s; align-self:flex-start; }
body.page-index .btn-story:hover { background:#3a3a3c; transform:scale(1.02); }
/* Right side: full-bleed image with overlaid frosted stat cards */
body.page-index .sr2 { position:relative; overflow:hidden; min-height:400px; }
body.page-index .sr2-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
body.page-index .sr2-overlay { position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.5) 100%); }
body.page-index .sr2-feats { position:absolute; bottom:28px; left:28px; right:28px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.page-index .sr2-feat {
  background:rgba(255,255,255,0.12); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.22); border-radius:16px; padding:16px 18px;
}
body.page-index .sr2-feat-num { font-size:26px; font-weight:800; color:#fff; letter-spacing:-1px; line-height:1; }
body.page-index .sr2-feat-label { font-size:11px; color:rgba(255,255,255,0.65); margin-top:3px; font-weight:500; }
body.page-index .sr2-quote { position:absolute; top:28px; left:28px; right:28px; }
body.page-index .sr2-quote-text { font-size:17px; font-weight:700; color:#fff; line-height:1.4; max-width:260px; }

/* ── BUNDLES ── */
body.page-index .bundle-s { padding:0 0 72px; }
body.page-index .bgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.page-index .bc { background:#fff; border-radius:20px; overflow:hidden; cursor:pointer; transition:all .3s; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-index .bc:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.09); }
body.page-index .bcimg { height:190px; position:relative; overflow:hidden; }
body.page-index .bcimg img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
body.page-index .bc:hover .bcimg img { transform:scale(1.06); }
body.page-index .bctag { position:absolute; top:13px; left:13px; background:rgba(29,29,31,0.65); backdrop-filter:blur(8px); color:#fff; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:600; letter-spacing:.5px; z-index:2; }
body.page-index .bcbody { padding:20px; }
body.page-index .bctitle { font-size:15px; font-weight:700; margin-bottom:6px; }
body.page-index .bcdesc { font-size:12px; color:#86868B; line-height:1.6; margin-bottom:12px; }
body.page-index .bcts { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
body.page-index .bct { background:#F5F5F7; border-radius:8px; padding:3px 9px; font-size:11px; color:#515154; }
body.page-index .bcfoot { display:flex; justify-content:space-between; align-items:center; }
body.page-index .bcprice { font-size:17px; font-weight:800; }
body.page-index .bcsave { font-size:11px; color:#FF2D55; font-weight:500; margin-top:1px; }
body.page-index .bcbtn { background:#1D1D1F; color:#fff; padding:9px 18px; border-radius:100px; font-size:12px; font-weight:600; transition:background .2s; }
body.page-index .bcbtn:hover { background:#FF2D55; }

/* ── REVIEWS ── */
body.page-index .rev-s { padding:0 0 72px; }
body.page-index .rw { overflow:hidden; }
body.page-index .rt { display:flex; gap:16px; animation:revs 44s linear infinite; width:max-content; }
body.page-index .rt:hover { animation-play-state:paused; }
@keyframes revs { from{transform:translateX(0)} to{transform:translateX(-50%)} }
body.page-index .rc { background:#fff; border-radius:18px; padding:22px 26px; width:330px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-index .rstars { font-size:13px; color:#FFCC00; margin-bottom:10px; }
body.page-index .rtext { font-size:13px; line-height:1.65; color:#3a3a3c; margin-bottom:14px; }
body.page-index .rauth { display:flex; align-items:center; gap:10px; }
body.page-index .rav { width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#F5F5F7; }
body.page-index .rav img { width:100%; height:100%; object-fit:cover; }
body.page-index .rname { font-size:13px; font-weight:600; }
body.page-index .rsub { font-size:11px; color:#86868B; }
body.page-index .rver { font-size:10px; color:#34C759; font-weight:500; }

/* ── BLOG ── */
body.page-index .blog-s { padding:48px 0 72px; }
body.page-index .blogrid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:20px; }
body.page-index .blogc { background:#fff; border-radius:20px; overflow:hidden; cursor:pointer; transition:all .3s; }
body.page-index .blogc:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,0.08); }
body.page-index .bimg { overflow:hidden; position:relative; height:180px; }
body.page-index .blogc:first-child .bimg { height:220px; }
body.page-index .bimg img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
body.page-index .blogc:hover .bimg img { transform:scale(1.06); }
body.page-index .bcat { position:absolute; top:13px; left:13px; background:#FF2D55; color:#fff; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; z-index:2; }
body.page-index .bbody2 { padding:20px; }
body.page-index .bdate { font-size:11px; color:#AEAEB2; margin-bottom:7px; }
body.page-index .btitle2 { font-size:15px; font-weight:700; line-height:1.4; margin-bottom:8px; }
body.page-index .blogc:first-child .btitle2 { font-size:17px; }
body.page-index .bexc { font-size:12px; color:#86868B; line-height:1.6; margin-bottom:12px; }
body.page-index .bmore { font-size:12px; font-weight:600; color:#FF2D55; }

/* ── INSTAGRAM ── */
body.page-index .insta-s { padding:0 0 72px; }
body.page-index .ih { text-align:center; margin-bottom:30px; }
body.page-index .igrid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 200px 180px;
  gap:12px;
}
body.page-index .ig { border-radius:16px; cursor:pointer; position:relative; overflow:hidden; }
body.page-index .ig:nth-child(1) { grid-column:span 2; grid-row:span 2; border-radius:20px; }
body.page-index .ig img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
body.page-index .ig:hover img { transform:scale(1.07); }
body.page-index .igov { position:absolute; inset:0; background:linear-gradient(to top, rgba(255,45,85,0.82) 0%, rgba(255,45,85,0.25) 100%); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; opacity:0; transition:opacity .25s; }
body.page-index .ig:hover .igov { opacity:1; }
body.page-index .igov span { color:#fff; font-size:13px; font-weight:600; }
body.page-index .igov span:last-child { font-size:11px; opacity:.75; }

/* ── SUBSCRIBE ── */
body.page-index .sub-s { padding:0 0 72px; }
body.page-index .subb { background:#1D1D1F; border-radius:24px; padding:60px; display:flex; align-items:center; gap:80px; position:relative; overflow:hidden; }
body.page-index .subb::before { content:''; position:absolute; top:-120px; right:-120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.2) 0%,transparent 70%); filter:blur(40px); }
body.page-index .subl { flex:1; position:relative; z-index:1; }
body.page-index .subl .sl { color:rgba(255,255,255,0.3); }
body.page-index .subl h2 { font-size:30px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:8px; }
body.page-index .subl p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.65; }
body.page-index .subr { min-width:380px; position:relative; z-index:1; }
body.page-index .subform { display:flex; gap:10px; margin-bottom:10px; }
body.page-index .subin { flex:1; padding:12px 18px; border-radius:100px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; outline:none; font-family:inherit; transition:border-color .2s; }
body.page-index .subin::placeholder { color:rgba(255,255,255,0.3); }
body.page-index .subin:focus { border-color:rgba(255,45,85,0.6); }
body.page-index .subgo { background:#FF2D55; color:#fff; padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; font-family:inherit; white-space:nowrap; }
body.page-index .subgo:hover { background:#FF4D6A; }
body.page-index .subnote { font-size:11px; color:rgba(255,255,255,0.22); }
body.page-index .subperks { display:flex; gap:18px; margin-top:12px; }
body.page-index .subperk { font-size:12px; color:rgba(255,255,255,0.38); display:flex; align-items:center; gap:5px; }
body.page-index .subperk::before { content:''; width:5px; height:5px; border-radius:50%; background:#FF2D55; flex-shrink:0; }

/* ── FOOTER ── */
body.page-index footer { background:#1D1D1F; padding:56px 0 36px; }
body.page-index .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-index .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-index .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-index .flogo em { color:#FF2D55; font-style:normal; }
body.page-index .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-index .fsocs { display:flex; gap:8px; }
body.page-index .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.5); text-decoration:none; flex-shrink:0; }
body.page-index .fsoc:hover { background:#FF2D55; border-color:#FF2D55; color:#fff; }
body.page-index .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-index .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-index .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-index .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-index .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-index .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-index .fpay { display:flex; gap:8px; }
body.page-index .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ── SCROLL REVEAL ── */
body.page-index .rv { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
body.page-index .rv.show { opacity:1; transform:translateY(0); }

/* ── MOBILE DRAWER (off by default) ── */
body.page-index .hamburger { display:none; }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.page-index .wrap { padding:0 28px; }
  body.page-index .fw { padding:0 28px; }
  body.page-index header { width:calc(100% - 32px); }
  body.page-index .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-index header nav { gap:0; }
  body.page-index .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-index .search-pill span { display:none; }
  body.page-index .search-pill { padding:8px 10px; }

  /* hero */
  body.page-index .hc h1 { font-size:46px; }
  body.page-index .hc { padding:0 56px 56px; }

  /* product grid: 4 → 3 */
  body.page-index .pgrid { grid-template-columns:repeat(3,1fr); }

  /* footer: 5 → 3 col, brand col spans full row */
  body.page-index .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-index .ftop > div:first-child { grid-column:1/-1; max-width:520px; }

  /* subscribe */
  body.page-index .subb { padding:48px; gap:48px; }
  body.page-index .subr { min-width:320px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { font-size:14px; }

  /* show hamburger, hide desktop nav + search pill */
  body.page-index .hamburger { display:flex; }
  body.page-index header nav, body.page-index header .search-pill { display:none; }

  /* header — flatter on mobile */
  body.page-index header {
    top:8px; width:calc(100% - 16px); border-radius:18px;
  }
  body.page-index .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-index .logo { font-size:17px; }
  body.page-index .hr { gap:0; }
  body.page-index .ib { width:40px; height:40px; }
  body.page-index .ib svg { width:18px; height:18px; }
  body.page-index .cdot { top:3px; right:3px; }

  /* announcement bar */
  body.page-index .ann-bar { padding:8px 0; }
  body.page-index .ann-track { gap:36px; }
  body.page-index .ann-track span { font-size:11px; }

  /* age gate */
  body.page-index .gate-box { padding:36px 24px; border-radius:20px; }
  body.page-index .gate-title { font-size:16px; }
  body.page-index .gate-sub { font-size:12.5px; }
  body.page-index .gate-btns { flex-direction:column; gap:8px; }

  /* wrap padding */
  body.page-index .wrap { padding:0 16px; }
  body.page-index .wrap > *:first-child { margin-top:18px; }

  /* section headers */
  body.page-index .sh { margin-bottom:22px; align-items:flex-end; gap:12px; }
  body.page-index .st { font-size:24px; letter-spacing:-.3px; }
  body.page-index .sl { font-size:10px; letter-spacing:1.2px; margin-bottom:6px; }
  body.page-index .sa { font-size:12px; white-space:nowrap; }

  /* HERO — stacked, photo on top */
  body.page-index .hero { padding:18px 0 48px; }
  body.page-index .hslides { border-radius:20px; }
  body.page-index .hs { display:none; height:auto; min-height:0; flex-direction:column; }
  body.page-index .hs.on { display:flex; align-items:stretch; }
  body.page-index .h-photo { position:relative; width:100%; height:240px; flex-shrink:0; order:1; }
  body.page-index .h-photo::before { display:none; }
  body.page-index .h-photo img { object-position:center; }
  body.page-index .hc { padding:28px 24px 24px; max-width:100%; order:2; }
  body.page-index .hbadge { font-size:10px; padding:4px 10px; margin-bottom:14px; }
  body.page-index .hc h1 { font-size:34px; letter-spacing:-1px; line-height:1.05; margin-bottom:10px; }
  body.page-index .hc p { font-size:14px; margin-bottom:22px; max-width:100%; }
  body.page-index .hbtns { flex-wrap:wrap; gap:10px; }
  body.page-index .btn-d { padding:12px 22px; font-size:13px; }

  /* countdown — move below text, not floating over photo */
  body.page-index .hcount {
    position:relative; right:auto; top:auto; order:3;
    margin:0 24px 28px; padding:14px 16px; border-radius:14px;
    flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap;
  }
  body.page-index .count-label { font-size:9.5px; }
  body.page-index .cn { font-size:22px; }
  body.page-index .ctag { padding:4px 9px; font-size:10px; margin-left:auto; }

  /* slide dots — pull above bottom on mobile so they stay visible */
  body.page-index .sdots { bottom:12px; }
  body.page-index .sd { width:16px; }
  body.page-index .sd.on { width:28px; }

  /* CATEGORIES — 2-col grid, simpler */
  body.page-index .cats-s { padding-bottom:48px; }
  body.page-index .cg { grid-template-columns:1fr 1fr; gap:10px; }
  body.page-index .cc { min-height:160px; border-radius:16px; }
  body.page-index .cc:nth-child(1) { grid-row:auto; min-height:200px; grid-column:1/-1; }
  body.page-index .cc:nth-child(6) { grid-column:1/-1; min-height:120px; align-items:flex-end; }
  body.page-index .cc:nth-child(6) .ci { align-items:flex-end; padding:18px 20px; }
  body.page-index .ci { padding:16px 18px; }
  body.page-index .cn2 { font-size:13.5px !important; }
  body.page-index .cct { font-size:10.5px; }
  body.page-index .carr { width:26px; height:26px; font-size:11px; }

  /* BENTO — single column stack, drop tall span */
  body.page-index .bento-s { padding-bottom:48px; }
  body.page-index .bg2 { grid-template-columns:1fr; gap:10px; }
  body.page-index .b { padding:24px; min-height:auto; border-radius:18px; }
  body.page-index .b1 { grid-row:auto; min-height:auto; padding:32px 24px; }
  body.page-index .b1 .btit { font-size:22px; }
  body.page-index .btit { font-size:18px; }
  body.page-index .bento-stats { gap:22px; flex-wrap:wrap; }
  body.page-index .bstat { font-size:30px; }

  /* PRODUCTS — 2-col grid, always-visible quick add */
  body.page-index .prod-s { padding-bottom:48px; }
  body.page-index .tabs { overflow-x:auto; flex-wrap:nowrap; gap:6px; margin:0 -16px 22px; padding:0 16px 4px; scrollbar-width:none; }
  body.page-index .tabs::-webkit-scrollbar { display:none; }
  body.page-index .tab { white-space:nowrap; flex-shrink:0; padding:7px 14px; font-size:12.5px; }
  body.page-index .pgrid { grid-template-columns:1fr 1fr; gap:14px; }
  body.page-index .pcimg { border-radius:16px; margin-bottom:10px; }
  body.page-index .pcbadge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-index .pcwish { opacity:1; top:9px; right:9px; width:32px; height:32px; font-size:14px; }
  /* on touch — keep quick add hidden, tap goes to PDP; less clutter than always-on */
  body.page-index .pcadd { display:none; }
  body.page-index .pcname { font-size:13px; }
  body.page-index .pcvar { font-size:11px; }
  body.page-index .pcp { font-size:14px; }

  /* STORY — stack vertical, image above */
  body.page-index .story-s { padding-bottom:48px; }
  body.page-index .story-b { grid-template-columns:1fr; min-height:auto; border-radius:20px; }
  body.page-index .sl2 { padding:32px 24px; gap:16px; order:2; }
  body.page-index .sl2 h2 { font-size:26px; }
  body.page-index .sl2 p { font-size:13px; max-width:100%; }
  body.page-index .sstats { gap:24px; flex-wrap:wrap; }
  body.page-index .ssn { font-size:24px; }
  body.page-index .sr2 { min-height:280px; order:1; }
  body.page-index .sr2-quote-text { font-size:15px; max-width:80%; }
  body.page-index .sr2-feats { grid-template-columns:1fr 1fr; gap:8px; bottom:20px; left:20px; right:20px; }
  body.page-index .sr2-feat { padding:12px 14px; border-radius:14px; }
  body.page-index .sr2-feat-num { font-size:21px; }
  body.page-index .sr2-feat-label { font-size:10px; }
  body.page-index .sr2-quote { top:20px; left:20px; right:20px; }

  /* BUNDLES — single column */
  body.page-index .bundle-s { padding-bottom:48px; }
  body.page-index .bgrid { grid-template-columns:1fr; gap:14px; }
  body.page-index .bcimg { height:160px; }

  /* REVIEWS — narrower cards */
  body.page-index .rev-s { padding-bottom:48px; }
  body.page-index .rc { width:280px; padding:18px 20px; }
  body.page-index .rtext { font-size:12.5px; }

  /* BLOG — single column */
  body.page-index .blog-s { padding-bottom:48px; }
  body.page-index .blogrid { grid-template-columns:1fr; gap:16px; }
  body.page-index .blogc:first-child .bimg { height:200px; }
  body.page-index .bimg { height:180px; }

  /* INSTAGRAM — 2-col grid, drop the 2x2 hero spans */
  body.page-index .insta-s { padding-bottom:48px; }
  body.page-index .igrid { grid-template-columns:1fr 1fr; grid-template-rows:none; gap:8px; grid-auto-rows:160px; }
  body.page-index .ig:nth-child(1) { grid-column:span 2; grid-row:span 2; }
  body.page-index .ig { border-radius:12px; }

  /* SUBSCRIBE — stack */
  body.page-index .sub-s { padding-bottom:48px; }
  body.page-index .subb { flex-direction:column; gap:24px; padding:36px 24px; border-radius:20px; }
  body.page-index .subl h2 { font-size:24px; }
  body.page-index .subr { min-width:0; width:100%; }
  body.page-index .subform { flex-direction:column; gap:8px; }
  body.page-index .subgo { width:100%; padding:13px; }
  body.page-index .subin { padding:13px 18px; font-size:14px; }
  body.page-index .subperks { flex-wrap:wrap; gap:10px 14px; margin-top:10px; }

  /* FOOTER — collapse to 2 col, brand spans */
  body.page-index footer { padding:40px 0 28px; }
  body.page-index .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-index .ftop > div:first-child { grid-column:1/-1; }
  body.page-index .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
  body.page-index .flegal { font-size:10.5px; }
  body.page-index .fctit { font-size:10.5px; margin-bottom:10px; }
  body.page-index .flinks a { font-size:12.5px; }
}

/* ───────────────────────────────────────────────
   SMALL MOBILE — ≤ 380px
   ─────────────────────────────────────────────── */
@media (max-width: 380px) {
  body.page-index .hw { padding:0 4px 0 14px; gap:2px; }
  body.page-index .logo { font-size:16px; }
  body.page-index .ib { width:36px; height:36px; }
  body.page-index .hc h1 { font-size:30px; }
  body.page-index .h-photo { height:200px; }
  body.page-index .pgrid { gap:10px; }
  body.page-index .pcname, body.page-index .pcp { font-size:12.5px; }
  body.page-index .ftop { grid-template-columns:1fr; }
}


/* ============================================================
   shop.html
   ============================================================ */


/* ═══════════════════════════════════════════════════════════════
   SHOP PAGE — :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag)  (ported from site-v8/css/styles.css)
   ═══════════════════════════════════════════════════════════════ */

:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) body.no-scroll { overflow:hidden; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) input, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) select { font-family:inherit; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) body.no-scroll { overflow:hidden; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) a { text-decoration:none; color:inherit; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) img { display:block; max-width:100%; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) input, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) select { font-family:inherit; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) a:focus-visible, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) button:focus-visible, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) input:focus-visible, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ── ANNOUNCEMENT BAR ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .logo em { color:var(--brand); font-style:normal; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header nav { display:flex; gap:1px; flex:1; justify-content:center; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ni > a:hover, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ni.active > a { color:var(--brand); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .search-pill:hover { background:rgba(0,0,0,0.08); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .search-pill svg { width:13px; height:13px; opacity:.4; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .search-pill span { font-size:13px; color:var(--muted-2); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ib:hover { background:rgba(0,0,0,0.05); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ib svg { width:17px; height:17px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-hero { padding-top:28px; padding-bottom:8px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bcrumb a { color:var(--muted-2); transition:color .2s; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bcrumb a:hover { color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bcrumb .sep { color:var(--muted-3); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bcrumb .cur { color:var(--ink); font-weight:500; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-meta strong { color:var(--ink); font-weight:700; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .chips-row:empty { padding:0; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fchip:hover { border-color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fchip-x:hover { background:var(--brand); color:#fff; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters::-webkit-scrollbar { width:5px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup { border-top:1px solid var(--line-soft); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup:first-of-type { border-top:1px solid var(--line); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup > summary::-webkit-details-marker { display:none; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup[open] > summary .chev { transform:rotate(180deg); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt:hover { color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input { position:absolute; opacity:0; pointer-events:none; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt-mark.radio { border-radius:50%; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt:hover .fopt-mark { border-color:var(--ink-2); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt-text { flex:1; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-readout .dash { color:var(--muted-3); font-weight:400; }

:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt.toggle { justify-content:space-between; padding:8px 0; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .toggle-sw { background:var(--brand); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .results { min-width:0; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .t-left { display:flex; align-items:center; gap:14px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .t-count { font-size:13px; color:var(--muted-2); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .t-count strong { color:var(--ink); font-weight:700; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortdrop { position:relative; z-index:10; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortbtn:hover { border-color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortbtn .val { font-weight:600; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortopt:hover { background:var(--bg); color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortopt.on { color:var(--ink); font-weight:600; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .vbtn:hover { color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fbtn-mobile svg { width:14px; height:14px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-quick { display:none; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-name { font-size:16px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-var { font-size:13px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-pr { margin-top:4px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid.list-view .pcard-pr { flex-shrink:1; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard { cursor:pointer; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bg-new { background:var(--ink); color:#fff; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bg-hot { background:var(--brand); color:#fff; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bg-sale { background:#FF9500; color:#fff; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .bg-top { background:#34C759; color:#fff; }

/* wishlist */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard:hover .pcard-quick { bottom:12px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-quick:hover { background:var(--brand); }

/* meta */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-stars span { color:var(--muted-3); font-size:11px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .lmore-wrap { text-align:center; padding:48px 0 16px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .flogo em { color:var(--brand); font-style:normal; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fsocs { display:flex; gap:8px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .flinks { display:flex; flex-direction:column; gap:9px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .flinks a:hover { color:rgba(255,255,255,0.72); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fpay { display:flex; gap:8px; }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .wrap, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fw { padding:0 28px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header { width:calc(100% - 32px); }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .hw { padding:0 16px 0 22px; gap:14px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header nav { gap:0; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ni > a { padding:7px 10px; font-size:12.5px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .search-pill span { display:none; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .search-pill { padding:8px 10px; }

  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-title { font-size:34px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .hamburger { display:flex; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header nav, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header .search-pill { display:none; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .logo { font-size:17px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ib { width:40px; height:40px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ib svg { width:18px; height:18px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ann-bar { padding:8px 0; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ann-track { gap:36px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ann-track span { font-size:11px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .wrap, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fw { padding:0 16px; }

  /* hero */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-hero { padding-top:22px; padding-bottom:16px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-title { font-size:26px; letter-spacing:-.5px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-sub { font-size:13.5px; margin-top:6px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-meta { padding-bottom:0; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters.on { transform:translateY(0); }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-head { padding:6px 20px 14px; margin-bottom:0; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup > summary { padding:18px 20px 14px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fgroup-body { padding:0 20px 18px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .toolbar { gap:10px; padding-bottom:14px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .t-left { gap:10px; flex:1; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortbtn .lbl { display:none; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-img { border-radius:var(--radius-sm); }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-name { font-size:13px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-p { font-size:14px; }

  /* footer */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) footer { padding:40px 0 28px; margin-top:48px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ftop > div:first-child { grid-column:1/-1; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters .f-head-clear-desktop { display:none; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .hw { padding:0 4px 0 14px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .logo { font-size:16px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .ib { width:36px; height:36px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pgrid { gap:14px 10px; }
  :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-name, :is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .pcard-p { font-size:12.5px; }
}

/* ============================================================
   pdp.html
   ============================================================ */

/* ===== pdp.html ===== */

/* ── DESIGN TOKENS ── */
/* ══ SHOP WC-COMPAT: body.woocommerce-shop + body.tax-product_cat ══════════ */
body.woocommerce-shop .pgrid,
body.tax-product_cat .pgrid,
body.tax-product_tag .pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 18px;
}
body.woocommerce-shop .shop-grid,
body.tax-product_cat .shop-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 20px 0 80px;
  align-items: flex-start;
}
body.woocommerce-shop .pcard,
body.tax-product_cat .pcard { cursor: pointer; }
body.woocommerce-shop .pcard-img,
body.tax-product_cat .pcard-img {
  background: #fff;
  border-radius: var(--radius-md);
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s, transform .3s;
}
body.woocommerce-shop .pcard:hover .pcard-img,
body.tax-product_cat .pcard:hover .pcard-img {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Badge colors */
.bg-new  { background: var(--ink);    color: #fff; }
.bg-hot  { background: var(--brand);  color: #fff; }
.bg-sale { background: #FF9500;       color: #fff; }
.bg-top  { background: #34C759;       color: #fff; }
/* Sort open state */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortdrop.open .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortdrop.open .sortbtn  { border-color:var(--ink); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .sortdrop.open .sortbtn .chev { transform:rotate(180deg); }
/* Mobile filter open */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filters.on { transform:translateY(0); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .filter-backdrop.on { opacity:1; visibility:visible; }
/* Toggle checked */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .toggle-sw { background:var(--brand); }
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* Radio inner dot */
:is(body.page-shop, body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag) .fopt input:checked ~ .fopt-mark.radio::after {
  content:''; width:6px; height:6px; border-radius:50%;
  background:#fff; position:absolute; opacity:1; transform:none; border:none;
}
/* Responsive WC grids */
@media (max-width:1024px) {
  body.woocommerce-shop .pgrid,
  body.tax-product_cat .pgrid,
  body.tax-product_tag .pgrid { grid-template-columns: repeat(2,1fr); gap:20px 14px; }
}
@media (max-width:768px) {
  body.woocommerce-shop .pgrid,
  body.tax-product_cat .pgrid,
  body.tax-product_tag .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.woocommerce-shop .shop-grid,
  body.tax-product_cat .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
}



/* ═══════════════════════════════════════════════════════════════
   PDP PAGE — body.page-pdp  (ported from site-v8/css/styles.css)
   ═══════════════════════════════════════════════════════════════ */

body.page-pdp body.no-scroll { overflow:hidden; }
body.page-pdp input, body.page-pdp select { font-family:inherit; }
body.page-pdp body.no-scroll { overflow:hidden; }
body.page-pdp a { text-decoration:none; color:inherit; }
body.page-pdp button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-pdp img { display:block; max-width:100%; }
body.page-pdp input, body.page-pdp select { font-family:inherit; }
body.page-pdp a:focus-visible, body.page-pdp button:focus-visible, body.page-pdp input:focus-visible, body.page-pdp summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ── ANNOUNCEMENT BAR ── */
body.page-pdp .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-pdp .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-pdp .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-pdp .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-pdp header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-pdp header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-pdp .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-pdp .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-pdp .logo em { color:var(--brand); font-style:normal; }
body.page-pdp header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-pdp .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-pdp .ni > a:hover, body.page-pdp .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-pdp .ni.active > a { color:var(--brand); }
body.page-pdp .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-pdp .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-pdp .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-pdp .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-pdp .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-pdp .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-pdp .ib:hover { background:rgba(0,0,0,0.05); }
body.page-pdp .ib svg { width:17px; height:17px; }
body.page-pdp .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-pdp .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-pdp .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB ── */
body.page-pdp .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; padding:24px 0 28px; }
body.page-pdp .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-pdp .bcrumb a:hover { color:var(--ink); }
body.page-pdp .bcrumb .sep { color:var(--muted-3); }
body.page-pdp .bcrumb .cur { color:var(--ink); font-weight:500; }

/* ── PDP MAIN GRID ── */
body.page-pdp .pdp-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  gap:64px;
  padding-bottom:80px;
}

/* ── GALLERY ── */
body.page-pdp .pdp-gallery { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:start; }
body.page-pdp .pdp-thumbs { display:flex; flex-direction:column; gap:10px; }
body.page-pdp .pdp-thumb {
  width:72px; aspect-ratio:1; border-radius:14px;
  border:2px solid transparent; overflow:hidden;
  background:#fff; padding:0; cursor:pointer;
  transition:border-color .2s,transform .15s;
}
body.page-pdp .pdp-thumb:hover { transform:scale(1.03); }
body.page-pdp .pdp-thumb.on { border-color:var(--ink); }
body.page-pdp .pdp-thumb img { width:100%; height:100%; object-fit:cover; }
body.page-pdp .pdp-main-img {
  position:relative; aspect-ratio:1;
  border-radius:var(--radius-lg); overflow:hidden;
  background:#fff;
}
body.page-pdp .pdp-main-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
body.page-pdp .pdp-main-img:hover img { transform:scale(1.02); }
body.page-pdp .pdp-badge {
  position:absolute; top:18px; left:18px; z-index:2;
  padding:5px 12px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  background:var(--ink); color:#fff;
}
body.page-pdp .pdp-zoom-hint {
  position:absolute; bottom:18px; right:18px;
  padding:7px 12px; background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px); border-radius:var(--radius-pill);
  font-size:11px; font-weight:500; color:var(--muted);
  display:flex; align-items:center; gap:6px;
  letter-spacing:.2px;
}
body.page-pdp .pdp-zoom-hint svg { width:12px; height:12px; }

/* ── INFO PANEL ── */
body.page-pdp .pdp-info { padding-top:6px; min-width:0; }
body.page-pdp .pdp-meta {
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--muted-2); margin-bottom:10px;
}
body.page-pdp .pdp-meta .stars { color:#FFCC00; letter-spacing:1px; font-size:13px; }
body.page-pdp .pdp-meta .review-cnt { color:var(--muted); font-weight:500; }
body.page-pdp .pdp-meta .review-cnt:hover { color:var(--ink); text-decoration:underline; cursor:pointer; }
body.page-pdp .pdp-info h1 {
  font-size:32px; font-weight:700; line-height:1.1;
  letter-spacing:-.5px; margin-bottom:10px;
}
body.page-pdp .pdp-tagline {
  font-size:14px; color:var(--muted); line-height:1.6;
  margin-bottom:24px;
}
body.page-pdp .pdp-price-row {
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:24px; margin-bottom:24px;
  border-bottom:1px solid var(--line-soft);
}
body.page-pdp .pdp-price { font-size:32px; font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
body.page-pdp .pdp-price-orig { font-size:16px; color:var(--muted-3); text-decoration:line-through; font-variant-numeric:tabular-nums; }
body.page-pdp .pdp-price-off {
  font-size:11px; font-weight:700; color:var(--brand);
  padding:4px 9px; background:var(--brand-soft); border-radius:6px;
  letter-spacing:.4px; text-transform:uppercase;
}

/* color/variant select */
body.page-pdp .pdp-opt { margin-bottom:22px; }
body.page-pdp .pdp-opt-label {
  font-size:12.5px; color:var(--muted-2); margin-bottom:12px;
  display:block;
}
body.page-pdp .pdp-opt-label strong { color:var(--ink); font-weight:600; margin-left:4px; }
body.page-pdp .pdp-swatches { display:flex; gap:12px; flex-wrap:wrap; }
body.page-pdp .pdp-swatch {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(0,0,0,0.08); cursor:pointer;
  position:relative; transition:transform .15s;
  flex-shrink:0;
}
body.page-pdp .pdp-swatch:hover { transform:scale(1.06); }
body.page-pdp .pdp-swatch.on::after {
  content:''; position:absolute; inset:-5px;
  border:1.5px solid var(--ink); border-radius:50%;
}

/* qty + add to cart row */
body.page-pdp .pdp-cta-row {
  display:grid; grid-template-columns:auto 1fr; gap:10px;
  margin-bottom:10px;
}
body.page-pdp .pdp-qty {
  display:flex; align-items:center;
  background:var(--bg); border-radius:var(--radius-pill);
  padding:3px;
}
body.page-pdp .pdp-qty button {
  width:42px; height:42px; border-radius:50%;
  font-size:17px; color:var(--muted); transition:color .15s,background .15s;
  display:flex; align-items:center; justify-content:center;
}
body.page-pdp .pdp-qty button:hover { color:var(--ink); background:rgba(0,0,0,0.03); }
body.page-pdp .pdp-qty button:active { transform:scale(.94); }
body.page-pdp .pdp-qty .qty-val {
  width:32px; text-align:center; font-weight:600;
  font-size:14px; font-variant-numeric:tabular-nums;
}
body.page-pdp .pdp-cart {
  background:var(--ink); color:#fff;
  font-weight:600; font-size:14px; letter-spacing:.3px;
  border-radius:var(--radius-pill); height:48px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .25s;
}
body.page-pdp .pdp-cart:hover { background:var(--brand); }
body.page-pdp .pdp-cart svg { width:16px; height:16px; }

body.page-pdp .pdp-wish {
  width:100%; height:46px;
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  font-size:13px; font-weight:500; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:24px; transition:border-color .2s,color .2s;
}
body.page-pdp .pdp-wish svg { width:16px; height:16px; }
body.page-pdp .pdp-wish:hover { border-color:var(--ink); }
body.page-pdp .pdp-wish.on { border-color:var(--brand); color:var(--brand); }

/* trust badges */
body.page-pdp .pdp-trust {
  list-style:none; display:flex; flex-direction:column; gap:11px;
  padding:20px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  margin-bottom:24px;
}
body.page-pdp .pdp-trust li {
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:11px;
}
body.page-pdp .pdp-trust li svg { width:16px; height:16px; color:var(--ink); flex-shrink:0; }

/* key features */
body.page-pdp .pdp-features h4 {
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink); font-weight:700; margin-bottom:14px;
}
body.page-pdp .pdp-features ul {
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr;
  gap:11px 16px;
}
body.page-pdp .pdp-features li {
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:9px;
}
body.page-pdp .pdp-features li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--brand); flex-shrink:0;
}

/* Stock indicator */
body.page-pdp .pdp-stock {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:#34C759;
  margin-bottom:22px;
}
body.page-pdp .pdp-stock .dot {
  width:8px; height:8px; border-radius:50%;
  background:#34C759;
  box-shadow:0 0 0 3px rgba(52,199,89,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
body.page-pdp .pdp-stock .ship-eta { color:var(--muted-2); font-weight:400; }
@keyframes pulse {
  body.page-pdp 0%, body.page-pdp 100% { box-shadow:0 0 0 3px rgba(52,199,89,.18); }
  body.page-pdp 50% { box-shadow:0 0 0 6px rgba(52,199,89,.06); }
}

/* Woo-style meta block (SKU, categories, share) */
body.page-pdp .pdp-meta-block {
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:10px;
}
body.page-pdp .pdp-meta-row {
  font-size:12.5px; color:var(--muted);
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
body.page-pdp .pdp-meta-row .lbl {
  font-size:11px; font-weight:700; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--ink);
  flex-shrink:0; min-width:80px;
}
body.page-pdp .pdp-meta-row a {
  color:var(--muted); transition:color .15s;
}
body.page-pdp .pdp-meta-row a:hover { color:var(--brand); }
body.page-pdp .pdp-meta-row .sep { color:var(--muted-3); margin:0 2px; }
body.page-pdp .pdp-share-btns { display:flex; gap:6px; }
body.page-pdp .pdp-share-btn {
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all .2s;
}
body.page-pdp .pdp-share-btn:hover { color:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
body.page-pdp .pdp-share-btn svg { width:12px; height:12px; }

/* ── TABS SECTION ── */
body.page-pdp .pdp-tabs {
  margin-top:24px; padding:48px 0 64px;
  border-top:1px solid var(--line);
}
body.page-pdp .tab-nav {
  display:flex; gap:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:36px; overflow-x:auto;
  scrollbar-width:none;
}
body.page-pdp .tab-nav::-webkit-scrollbar { display:none; }
body.page-pdp .tab-btn {
  padding:14px 0; font-size:14px; font-weight:500;
  color:var(--muted-2); position:relative; white-space:nowrap;
  transition:color .2s;
}
body.page-pdp .tab-btn:hover { color:var(--ink); }
body.page-pdp .tab-btn.on { color:var(--ink); font-weight:600; }
body.page-pdp .tab-btn.on::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:2px; background:var(--ink);
}
body.page-pdp .tab-content > div { display:none; }
body.page-pdp .tab-content > div.on { display:block; animation:tabfade .25s ease; }
@keyframes tabfade { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }

/* description */
body.page-pdp .tab-desc { font-size:14.5px; line-height:1.7; color:var(--muted); max-width:780px; }
body.page-pdp .tab-desc p { margin-bottom:18px; }
body.page-pdp .tab-desc h3 {
  font-size:16px; color:var(--ink); margin:28px 0 12px;
  font-weight:700; letter-spacing:-.2px;
}
body.page-pdp .tab-desc strong { color:var(--ink); font-weight:600; }

/* spec grid */
body.page-pdp .spec-grid {
  display:grid; grid-template-columns:240px 1fr;
  max-width:720px;
}
body.page-pdp .spec-grid > div {
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  font-size:14px; line-height:1.5;
}
body.page-pdp .spec-grid > div:nth-child(odd) { font-weight:600; color:var(--ink); }
body.page-pdp .spec-grid > div:nth-child(even) { color:var(--muted); }
body.page-pdp .spec-grid > div:nth-last-child(-n+2) { border-bottom:none; }

/* reviews */
body.page-pdp .reviews-layout {
  display:grid; grid-template-columns:300px 1fr; gap:56px;
}
body.page-pdp .review-summary {
  padding:24px; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--radius-md);
  position:sticky; top:108px; align-self:start;
}
body.page-pdp .review-big {
  font-size:48px; font-weight:800; letter-spacing:-1.5px;
  line-height:1; color:var(--ink); margin-bottom:6px;
}
body.page-pdp .review-stars-big { color:#FFCC00; font-size:15px; letter-spacing:1.5px; margin-bottom:4px; }
body.page-pdp .review-count-big { font-size:12.5px; color:var(--muted-2); margin-bottom:22px; }
body.page-pdp .review-bars { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
body.page-pdp .review-bar { display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--muted-2); font-variant-numeric:tabular-nums; }
body.page-pdp .review-bar .lbl { width:30px; }
body.page-pdp .review-bar-track {
  flex:1; height:5px; background:var(--line);
  border-radius:3px; overflow:hidden;
}
body.page-pdp .review-bar-fill { height:100%; background:var(--ink); border-radius:3px; }
body.page-pdp .review-bar .pct { width:32px; text-align:right; }
body.page-pdp .review-write {
  width:100%; height:42px;
  background:var(--ink); color:#fff;
  border-radius:var(--radius-pill);
  font-size:13px; font-weight:600;
  transition:background .2s;
}
body.page-pdp .review-write:hover { background:var(--brand); }

body.page-pdp .review-list { display:flex; flex-direction:column; gap:0; }
body.page-pdp .review-item {
  padding:22px 0; border-bottom:1px solid var(--line-soft);
}
body.page-pdp .review-item:first-child { padding-top:0; }
body.page-pdp .review-item:last-child { border-bottom:none; }
body.page-pdp .review-head {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  flex-wrap:wrap;
}
body.page-pdp .review-stars { color:#FFCC00; font-size:13px; letter-spacing:1px; }
body.page-pdp .review-author { font-size:13px; font-weight:600; color:var(--ink); }
body.page-pdp .review-verified {
  font-size:11px; color:#34C759; font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
}
body.page-pdp .review-verified svg { width:11px; height:11px; }
body.page-pdp .review-date { font-size:12px; color:var(--muted-3); margin-left:auto; }
body.page-pdp .review-title { font-size:14.5px; font-weight:600; margin-bottom:4px; color:var(--ink); }
body.page-pdp .review-body { font-size:13.5px; line-height:1.65; color:var(--muted); }

/* ── CUSTOMER REVIEWS (card grid) ── */
body.page-pdp .reviews-section {
  padding:64px 0 56px;
  border-top:1px solid var(--line);
}
body.page-pdp .reviews-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:28px; flex-wrap:wrap;
}
body.page-pdp .reviews-head h2 {
  font-size:28px; font-weight:700; letter-spacing:-.5px;
  margin-bottom:6px;
}
body.page-pdp .reviews-subhead { font-size:13.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-pdp .reviews-subhead .rh-stars { color:#FFCC00; letter-spacing:1px; font-size:14px; }
body.page-pdp .btn-write-review {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:600;
  transition:background .2s;
}
body.page-pdp .btn-write-review:hover { background:var(--brand); }
body.page-pdp .btn-write-review svg { width:14px; height:14px; }

/* Summary card */
body.page-pdp .rs-card {
  display:grid; grid-template-columns:auto auto 1fr; gap:48px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:28px 32px;
  margin-bottom:28px; align-items:center;
}
body.page-pdp .rs-rating { text-align:center; padding-right:24px; border-right:1px solid var(--line-soft); }
body.page-pdp .rs-big {
  font-size:54px; font-weight:800; letter-spacing:-2px; line-height:1;
  color:var(--ink); margin-bottom:6px;
}
body.page-pdp .rs-stars-big { color:#FFCC00; font-size:14px; letter-spacing:1.5px; margin-bottom:4px; }
body.page-pdp .rs-count-big { font-size:12px; color:var(--muted-2); }
body.page-pdp .rs-bars { display:flex; flex-direction:column; gap:7px; min-width:200px; }
body.page-pdp .rs-bar {
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
body.page-pdp .rs-lbl { width:24px; flex-shrink:0; }
body.page-pdp .rs-bar-track { flex:1; height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
body.page-pdp .rs-bar-fill { height:100%; background:var(--ink); border-radius:3px; }
body.page-pdp .rs-pct { width:32px; text-align:right; flex-shrink:0; }
body.page-pdp .rs-tags h5 {
  font-size:11px; font-weight:700; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:1.4px; margin-bottom:12px;
}
body.page-pdp .rs-tag-list { display:flex; flex-wrap:wrap; gap:6px; }
body.page-pdp .rs-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:var(--radius-pill);
  background:var(--bg); border:1px solid transparent;
  font-size:12px; color:var(--ink); font-weight:500;
  transition:border-color .15s,background .15s;
}
body.page-pdp .rs-tag:hover { border-color:var(--ink); }
body.page-pdp .rs-tag span { color:var(--muted-2); font-weight:400; font-variant-numeric:tabular-nums; }

/* Reviews toolbar */
body.page-pdp .reviews-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 0 20px;
}
body.page-pdp .reviews-toolbar-left { font-size:13px; color:var(--muted-2); }
body.page-pdp .reviews-toolbar-left strong { color:var(--ink); font-weight:700; }
body.page-pdp .reviews-toolbar-right {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted-2);
}
body.page-pdp .reviews-toolbar-right select {
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:8px 14px 8px 14px; background:#fff;
  font-size:13px; font-weight:500; color:var(--ink); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%231D1D1F' stroke-width='2'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:32px;
}
body.page-pdp .reviews-toolbar-right select:hover { border-color:var(--ink); }

/* Reviews grid */
body.page-pdp .reviews-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-bottom:32px;
}
body.page-pdp .review-card {
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:24px;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  display:flex; flex-direction:column;
}
body.page-pdp .review-card:hover {
  border-color:var(--line);
  box-shadow:0 4px 20px rgba(0,0,0,0.05);
  transform:translateY(-2px);
}
body.page-pdp .rc-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
body.page-pdp .rc-stars { color:#FFCC00; font-size:14px; letter-spacing:1.5px; }
body.page-pdp .rc-stars .empty { color:var(--line); }
body.page-pdp .rc-date { font-size:11.5px; color:var(--muted-3); }
body.page-pdp .rc-title {
  font-size:15px; font-weight:700; color:var(--ink);
  letter-spacing:-.1px; margin-bottom:8px; line-height:1.3;
}
body.page-pdp .rc-body {
  font-size:13.5px; line-height:1.6; color:var(--muted);
  margin-bottom:18px; flex:1;
}
body.page-pdp .rc-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--line-soft);
  gap:8px;
}
body.page-pdp .rc-author { display:flex; align-items:center; gap:10px; min-width:0; }
body.page-pdp .rc-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--ink);
  letter-spacing:.5px; flex-shrink:0;
  text-shadow:0 1px 2px rgba(255,255,255,.4);
}
body.page-pdp .rc-name { font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
body.page-pdp .rc-verified {
  font-size:11px; color:#34C759; font-weight:500;
  display:inline-flex; align-items:center; gap:3px; margin-top:2px;
}
body.page-pdp .rc-verified svg { width:10px; height:10px; }
body.page-pdp .rc-helpful {
  font-size:12px; color:var(--muted-2); font-weight:500;
  padding:7px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  transition:color .15s,border-color .15s;
  flex-shrink:0;
}
body.page-pdp .rc-helpful:hover { color:var(--ink); border-color:var(--ink); }

body.page-pdp .reviews-load-more { text-align:center; }
body.page-pdp .btn-load-more {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-pdp .btn-load-more:hover {
  border-color:var(--ink); transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

/* ── RELATED PRODUCTS ── */
body.page-pdp .related { padding:60px 0 80px; border-top:1px solid var(--line); }
body.page-pdp .related-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; }
body.page-pdp .related-head h2 {
  font-size:24px; font-weight:700; letter-spacing:-.4px;
}
body.page-pdp .related-head a {
  font-size:13px; color:var(--muted-2); font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
  transition:color .2s;
}
body.page-pdp .related-head a:hover { color:var(--ink); }
body.page-pdp .related-head a svg { width:11px; height:11px; }

body.page-pdp .pgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px 18px; }
body.page-pdp .pcard { cursor:pointer; }
body.page-pdp .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-pdp .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-pdp .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-pdp .pcard:hover .pcard-img img { transform:scale(1.05); }
body.page-pdp .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-pdp .bg-new { background:var(--ink); color:#fff; }
body.page-pdp .bg-hot { background:var(--brand); color:#fff; }
body.page-pdp .bg-sale { background:#FF9500; color:#fff; }
body.page-pdp .bg-top { background:#34C759; color:#fff; }
body.page-pdp .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-pdp .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-pdp .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-pdp .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
body.page-pdp .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-pdp .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-pdp .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-pdp .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── HOVER ZOOM (main image) ── */
body.page-pdp .pdp-main-img { cursor:zoom-in; overflow:hidden; }
body.page-pdp .pdp-main-img img {
  transition:transform .25s cubic-bezier(.2,.6,.3,1);
  transform-origin:center center;
}
body.page-pdp .pdp-main-img.zooming img {
  transition:transform-origin 80ms ease-out;
  transform:scale(2.2);
}
/* hide the existing :hover scale rule when actively zooming */
body.page-pdp .pdp-main-img.zooming:hover img { transform:scale(2.2); }

/* ── LIGHTBOX ── */
body.page-pdp .lightbox {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  visibility:hidden; opacity:0;
  transition:opacity .3s,visibility .3s;
  display:flex; align-items:center; justify-content:center;
}
body.page-pdp .lightbox.on { visibility:visible; opacity:1; }
body.page-pdp .lb-stage {
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:64px 80px;
}
body.page-pdp .lb-img {
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  border-radius:var(--radius-md);
  user-select:none; -webkit-user-drag:none;
  box-shadow:0 24px 80px rgba(0,0,0,0.4);
  animation:lbFade .35s ease-out;
}
@keyframes lbFade {
  from { opacity:0; transform:scale(.96); }
  to   { opacity:1; transform:scale(1); }
}
body.page-pdp .lb-close, body.page-pdp .lb-nav {
  position:absolute;
  z-index:2;                        /* v3.7.39: above .lb-stage so clicks register */
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:50%;
  transition:background .2s,border-color .2s,transform .2s;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.page-pdp .lb-close:hover, body.page-pdp .lb-nav:hover {
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.25);
}
body.page-pdp .lb-close { top:24px; right:24px; width:44px; height:44px; }
body.page-pdp .lb-close:hover { transform:rotate(90deg); }
body.page-pdp .lb-close svg { width:18px; height:18px; }
body.page-pdp .lb-nav { top:50%; transform:translateY(-50%); width:52px; height:52px; }
body.page-pdp .lb-nav:hover { transform:translateY(-50%) scale(1.06); }
body.page-pdp .lb-prev { left:24px; }
body.page-pdp .lb-next { right:24px; }
body.page-pdp .lb-nav svg { width:20px; height:20px; }

body.page-pdp .lb-counter {
  position:absolute; left:50%; bottom:24px;
  transform:translateX(-50%);
  color:rgba(255,255,255,0.7);
  font-size:13px; letter-spacing:1.5px;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:14px;
}
body.page-pdp .lb-counter .dots { display:flex; gap:6px; }
body.page-pdp .lb-counter .dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:background .2s,transform .2s;
  cursor:pointer;
  border:none; padding:0;
}
body.page-pdp .lb-counter .dot.on { background:#fff; transform:scale(1.4); }
body.page-pdp .lb-counter .dot:hover { background:rgba(255,255,255,0.55); }

@media (max-width:768px) {
  body.page-pdp .lb-stage { padding:60px 16px; }
  body.page-pdp .lb-close { top:14px; right:14px; width:38px; height:38px; }
  body.page-pdp .lb-nav { width:44px; height:44px; }
  body.page-pdp .lb-prev { left:8px; }
  body.page-pdp .lb-next { right:8px; }
  body.page-pdp .lb-counter { bottom:20px; font-size:12px; }
  /* on touch, hover zoom is N/A — disable the cursor hint */
  body.page-pdp .pdp-main-img { cursor:pointer; }
}
@media (hover:none) {
  body.page-pdp .pdp-main-img.zooming img { transform:none !important; }
}

/* ── MOBILE STICKY CTA ── */
body.page-pdp .pdp-sticky { display:none; }

/* ── FOOTER ── */
body.page-pdp footer { background:#1D1D1F; padding:56px 0 36px; }
body.page-pdp .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-pdp .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-pdp .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-pdp .flogo em { color:var(--brand); font-style:normal; }
body.page-pdp .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-pdp .fsocs { display:flex; gap:8px; }
body.page-pdp .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-pdp .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-pdp .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-pdp .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-pdp .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-pdp .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-pdp .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-pdp .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-pdp .fpay { display:flex; gap:8px; }
body.page-pdp .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ─────────── TABLET ≤ 1024px ─────────── */
@media (max-width:1024px) {
  body.page-pdp .wrap, body.page-pdp .fw { padding:0 28px; }
  body.page-pdp header { width:calc(100% - 32px); }
  body.page-pdp .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-pdp header nav { gap:0; }
  body.page-pdp .ni > a { padding:7px 10px; font-size:12.5px; }
  body.page-pdp .search-pill span { display:none; }
  body.page-pdp .search-pill { padding:8px 10px; }

  body.page-pdp .pdp-grid { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; }
  body.page-pdp .rs-card { gap:32px; padding:24px; }
  body.page-pdp .rs-rating { padding-right:18px; }
  body.page-pdp .rs-big { font-size:46px; }
  body.page-pdp .pgrid { grid-template-columns:repeat(3, 1fr); gap:20px 14px; }
  body.page-pdp .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-pdp .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ─────────── MOBILE ≤ 768px ─────────── */
@media (max-width:768px) {
  body.page-pdp .hamburger { display:flex; }
  body.page-pdp header nav, body.page-pdp header .search-pill { display:none; }
  body.page-pdp header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-pdp .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-pdp .logo { font-size:17px; }
  body.page-pdp .ib { width:40px; height:40px; }
  body.page-pdp .ib svg { width:18px; height:18px; }
  body.page-pdp .ann-bar { padding:8px 0; }
  body.page-pdp .ann-track { gap:36px; }
  body.page-pdp .ann-track span { font-size:11px; }
  body.page-pdp .wrap, body.page-pdp .fw { padding:0 16px; }

  body.page-pdp .bcrumb { padding:16px 0 18px; font-size:12px; }

  /* PDP grid stacks */
  body.page-pdp .pdp-grid { grid-template-columns:1fr; gap:22px; padding-bottom:32px; }

  /* gallery: main image first, thumbs row below — v3.7.40: clip-based */
  body.page-pdp .pdp-gallery { grid-template-columns:1fr; gap:10px; }
  body.page-pdp .pdp-thumbs-clip { order:2; }
  body.page-pdp .pdp-thumbs {
    flex-direction:row;
    padding-bottom:0;
  }
  body.page-pdp .pdp-thumb { width:60px; flex-shrink:0; border-radius:10px; }
  body.page-pdp .pdp-main-img { border-radius:var(--radius-md); }
  body.page-pdp .pdp-zoom-hint { display:none; }
  body.page-pdp .pdp-badge { top:12px; left:12px; font-size:10px; padding:4px 10px; }

  body.page-pdp .pdp-info { padding-top:0; }
  body.page-pdp .pdp-info h1 { font-size:25px; }
  body.page-pdp .pdp-tagline { font-size:13.5px; margin-bottom:18px; }
  body.page-pdp .pdp-price { font-size:26px; }
  body.page-pdp .pdp-price-row { padding-bottom:18px; margin-bottom:18px; }

  /* hide desktop-only Add-to-Cart row, replaced by mobile sticky */
  body.page-pdp .pdp-cta-row { display:none; }
  body.page-pdp .pdp-wish { margin-bottom:20px; height:42px; }
  body.page-pdp .pdp-trust { gap:9px; padding:16px 0; margin-bottom:20px; }
  body.page-pdp .pdp-features ul { grid-template-columns:1fr; gap:9px; }

  /* tabs */
  body.page-pdp .pdp-tabs { padding:32px 0 40px; margin-top:14px; }
  body.page-pdp .tab-nav { gap:22px; margin-bottom:24px; }
  body.page-pdp .tab-btn { font-size:13px; padding:12px 0; }
  body.page-pdp .spec-grid { grid-template-columns:130px 1fr; }
  body.page-pdp .spec-grid > div { padding:11px 0; font-size:13px; }

  /* reviews section mobile */
  body.page-pdp .reviews-section { padding:36px 0 32px; }
  body.page-pdp .reviews-head h2 { font-size:22px; }
  body.page-pdp .btn-write-review { padding:9px 16px; font-size:12px; }
  body.page-pdp .btn-write-review svg { width:13px; height:13px; }
  body.page-pdp .rs-card {
    grid-template-columns:1fr; gap:24px;
    padding:22px; margin-bottom:22px;
  }
  body.page-pdp .rs-rating {
    text-align:left; padding-right:0; padding-bottom:20px;
    border-right:none; border-bottom:1px solid var(--line-soft);
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  body.page-pdp .rs-big { font-size:40px; margin-bottom:0; }
  body.page-pdp .rs-stars-big { font-size:13px; margin-bottom:0; }
  body.page-pdp .rs-count-big { width:100%; }
  body.page-pdp .rs-bars { min-width:0; }
  body.page-pdp .reviews-toolbar { flex-direction:column; align-items:stretch; gap:10px; }
  body.page-pdp .reviews-toolbar-right { justify-content:space-between; }
  body.page-pdp .reviews-grid { grid-template-columns:1fr; gap:14px; margin-bottom:24px; }
  body.page-pdp .review-card { padding:20px; }
  body.page-pdp .rc-helpful { padding:6px 10px; font-size:11px; }

  /* Woo meta block */
  body.page-pdp .pdp-meta-row { font-size:12px; }
  body.page-pdp .pdp-meta-row .lbl { min-width:64px; font-size:10px; }

  /* related */
  body.page-pdp .related { padding:36px 0 100px; }    /* extra bottom for sticky cta */
  body.page-pdp .related-head h2 { font-size:20px; }
  body.page-pdp .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-pdp .pcard-img { border-radius:var(--radius-sm); }
  body.page-pdp .pcard-name { font-size:13px; }
  body.page-pdp .pcard-p { font-size:14px; }

  /* footer */
  body.page-pdp footer { padding:40px 0 28px; }
  body.page-pdp .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-pdp .ftop > div:first-child { grid-column:1/-1; }
  body.page-pdp .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* Mobile sticky CTA bar */
  body.page-pdp .pdp-sticky {
    display:flex; align-items:center; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:700;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
  }
  body.page-pdp .pdp-sticky-price {
    display:flex; flex-direction:column; line-height:1.1; flex-shrink:0;
    min-width:0; padding-right:2px;
  }
  body.page-pdp .pdp-sticky-price .pp { font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-0.3px; }
  body.page-pdp .pdp-sticky-price .po { font-size:11px; color:var(--muted-3); text-decoration:line-through; }

  /* v3.7.42: qty selector in sticky bar — matches main qty styling but compact */
  body.page-pdp .pdp-sticky-qty {
    display:inline-flex; align-items:center;
    background:rgba(0,0,0,0.05); border-radius:100px;
    height:42px; flex-shrink:0; overflow:hidden;
  }
  body.page-pdp .pdp-sticky-qty .sq-btn {
    width:34px; height:42px; border:none; background:transparent;
    font-size:18px; font-weight:500; color:var(--ink); cursor:pointer;
    padding:0; display:inline-flex; align-items:center; justify-content:center;
    transition:background .12s;
    -webkit-tap-highlight-color:transparent;
  }
  body.page-pdp .pdp-sticky-qty .sq-btn:active { background:rgba(0,0,0,0.08); }
  body.page-pdp .pdp-sticky-qty .sq-val {
    min-width:24px; text-align:center;
    font-size:14px; font-weight:600; color:var(--ink);
    user-select:none;
  }

  /* v3.7.42: redesigned add-to-cart sticky button — brand red gradient,
     soft shadow, cart icon + label, springy active state. */
  body.page-pdp .pdp-sticky-cart {
    flex:1; min-width:0; height:46px; padding:0 18px;
    border:none; border-radius:100px;
    background:linear-gradient(135deg, var(--brand) 0%, #FF4D6A 100%);
    color:#fff;
    font-size:14px; font-weight:600; letter-spacing:.3px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    cursor:pointer; font-family:inherit;
    box-shadow:0 2px 12px rgba(255, 45, 85, 0.28),
               0 1px 3px rgba(255, 45, 85, 0.18);
    transition:transform .12s ease, box-shadow .15s ease, filter .15s;
    -webkit-tap-highlight-color:transparent;
  }
  body.page-pdp .pdp-sticky-cart svg { flex-shrink:0; }
  body.page-pdp .pdp-sticky-cart:hover { filter:brightness(1.05); box-shadow:0 4px 16px rgba(255, 45, 85, 0.36); }
  body.page-pdp .pdp-sticky-cart:active { transform:scale(0.97); }

  /* Very narrow phones — hide the strikethrough old price + tighten gaps */
  @media (max-width:380px) {
    body.page-pdp .pdp-sticky { padding:10px 10px calc(10px + env(safe-area-inset-bottom)); gap:6px; }
    body.page-pdp .pdp-sticky-price .po { display:none; }
    body.page-pdp .pdp-sticky-price .pp { font-size:15px; }
    body.page-pdp .pdp-sticky-qty { height:40px; }
    body.page-pdp .pdp-sticky-qty .sq-btn { width:30px; height:40px; }
    body.page-pdp .pdp-sticky-cart { height:42px; padding:0 12px; font-size:13px; }
    body.page-pdp .pdp-sticky-cart svg { display:none; }   /* drop icon on tiny screens to save room */
  }
}

@media (max-width:380px) {
  body.page-pdp .hw { padding:0 4px 0 14px; }
  body.page-pdp .logo { font-size:16px; }
  body.page-pdp .pgrid { gap:14px 10px; }
}

/* ============================================================
   contact.html
   ============================================================ */

/* ===== contact.html ===== */

body.page-contact body.no-scroll { overflow:hidden; }
body.page-contact a { text-decoration:none; color:inherit; }
body.page-contact button { border:none; cursor:pointer; font-family:inherit; background:none; }
body.page-contact img { display:block; max-width:100%; }
body.page-contact input, body.page-contact select { font-family:inherit; }
body.page-contact a:focus-visible, body.page-contact button:focus-visible, body.page-contact input:focus-visible, body.page-contact summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ── ANNOUNCEMENT BAR ── */
body.page-contact .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-contact .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-contact .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-contact .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER CAPSULE ── */
body.page-contact header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800; border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-contact .hw { padding:0 24px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-contact .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-contact .logo em { color:#FF2D55; font-style:normal; }
body.page-contact header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-contact .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-contact .ni > a:hover { color:#1D1D1F; background:rgba(0,0,0,0.05); }
body.page-contact .chev { width:11px; height:11px; opacity:.4; transition:transform .2s; }
body.page-contact .ni:hover .chev { transform:rotate(180deg); }

body.page-contact .dg { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
body.page-contact .di { padding:11px; border-radius:10px; transition:background .15s; cursor:pointer; }
body.page-contact .di:hover { background:#F5F5F7; }
body.page-contact .di-name { font-size:13px; font-weight:600; margin-bottom:2px; }
body.page-contact .di-desc { font-size:11px; color:#86868B; line-height:1.4; }
body.page-contact .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-contact .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-contact .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-contact .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-contact .search-pill span { font-size:13px; color:#86868B; }
body.page-contact .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-contact .ib:hover { background:rgba(0,0,0,0.05); }
body.page-contact .ib svg { width:17px; height:17px; }
body.page-contact .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:#FF2D55; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ── WRAPPER ── */
body.page-contact .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-contact .wrap > *:first-child { padding-top:24px; }

/* ── SHARED ── */
body.page-contact .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-contact .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-contact .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }

/* ── PAGE HERO ── */
body.page-contact .page-hero {
  padding:48px 0 0; margin-bottom:24px; position:relative;
}
body.page-contact .page-hero-inner {
  background:#1D1D1F; border-radius:28px;
  padding:72px 72px 0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:380px;
}
body.page-contact .page-hero-inner::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%);
  filter:blur(60px);
}
body.page-contact .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-contact .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-contact .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-contact .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-contact .hero-badges { display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
body.page-contact .hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  border-radius:100px; padding:6px 14px;
  font-size:12px; color:rgba(255,255,255,0.6); font-weight:500;
}
body.page-contact .hero-badge .dot { width:6px; height:6px; border-radius:50%; background:#34C759; flex-shrink:0; }
body.page-contact .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-contact .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }

/* ── CONTACT GRID ── */
body.page-contact .contact-s { padding:64px 0 72px; }
body.page-contact .contact-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }

/* Contact Form */
body.page-contact .form-card {
  background:#fff; border-radius:24px; padding:48px;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
body.page-contact .form-card h2 { font-size:24px; font-weight:700; letter-spacing:-.3px; margin-bottom:6px; }
body.page-contact .form-card .sub { font-size:13px; color:#86868B; margin-bottom:36px; line-height:1.6; }

body.page-contact .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
body.page-contact .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
body.page-contact .form-group label { font-size:12px; font-weight:600; color:#515154; letter-spacing:.3px; }
body.page-contact .form-input, body.page-contact .form-select, body.page-contact .form-textarea {
  padding:13px 16px; border-radius:12px;
  border:1.5px solid #E8E8ED; background:#FAFAFA;
  font-size:14px; color:#1D1D1F; font-family:inherit;
  outline:none; transition:border-color .2s, background .2s;
  width:100%;
}
body.page-contact .form-input:focus, body.page-contact .form-select:focus, body.page-contact .form-textarea:focus {
  border-color:#FF2D55; background:#fff;
}
body.page-contact .form-input::placeholder, body.page-contact .form-textarea::placeholder { color:#AEAEB2; }
body.page-contact .form-select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23AEAEB2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
body.page-contact .form-textarea { resize:vertical; min-height:130px; line-height:1.6; }

/* File upload */
body.page-contact .upload-zone {
  border:1.5px dashed #E8E8ED; border-radius:12px;
  padding:24px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s; background:#FAFAFA;
}
body.page-contact .upload-zone:hover { border-color:#FF2D55; background:#FFF5F7; }
body.page-contact .upload-zone-icon { display:flex; justify-content:center; margin-bottom:8px; }
body.page-contact .upload-zone-text { font-size:13px; color:#86868B; line-height:1.5; }
body.page-contact .upload-zone-text strong { color:#1D1D1F; font-weight:600; }

/* Privacy note */
body.page-contact .form-privacy { display:flex; align-items:flex-start; gap:10px; margin:20px 0; }
body.page-contact .form-privacy input[type="checkbox"] { width:16px; height:16px; margin-top:1px; accent-color:#FF2D55; flex-shrink:0; cursor:pointer; }
body.page-contact .form-privacy label { font-size:12px; color:#86868B; line-height:1.55; cursor:pointer; }
body.page-contact .form-privacy a { color:#FF2D55; }

body.page-contact .btn-submit {
  width:100%; padding:16px; border-radius:14px;
  background:#1D1D1F; color:#fff;
  font-size:15px; font-weight:700; cursor:pointer;
  transition:all .25s; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
body.page-contact .btn-submit:hover { background:#3a3a3c; transform:scale(1.01); }
body.page-contact .btn-submit svg { width:16px; height:16px; transition:transform .2s; }
body.page-contact .btn-submit:hover svg { transform:translateX(3px); }

/* Success message */
body.page-contact .form-success {
  display:none; text-align:center; padding:40px 20px;
}
body.page-contact .form-success-icon { display:flex; justify-content:center; margin-bottom:16px; }
body.page-contact .form-success h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
body.page-contact .form-success p { font-size:13px; color:#86868B; line-height:1.6; }

/* Right sidebar */
body.page-contact .contact-sidebar { display:flex; flex-direction:column; gap:16px; }

/* Info card */
body.page-contact .info-card {
  background:#fff; border-radius:20px; padding:32px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
body.page-contact .info-card h3 { font-size:16px; font-weight:700; margin-bottom:20px; }
body.page-contact .info-item { display:flex; gap:14px; margin-bottom:20px; }
body.page-contact .info-item:last-child { margin-bottom:0; }
body.page-contact .info-icon {
  width:40px; height:40px; border-radius:12px; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.page-contact .info-label { font-size:11px; font-weight:600; color:#86868B; letter-spacing:.5px; text-transform:uppercase; margin-bottom:3px; }
body.page-contact .info-val { font-size:14px; font-weight:600; color:#1D1D1F; }
body.page-contact .info-sub { font-size:12px; color:#86868B; margin-top:1px; }

/* Response time card */
body.page-contact .resp-card {
  background:#1D1D1F; border-radius:20px; padding:28px;
  position:relative; overflow:hidden;
}
body.page-contact .resp-card::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.25) 0%,transparent 70%); filter:blur(30px); }
body.page-contact .resp-card h3 { font-size:15px; font-weight:700; color:#fff; margin-bottom:14px; position:relative; z-index:1; }
body.page-contact .resp-items { display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
body.page-contact .resp-item { display:flex; justify-content:space-between; align-items:center; }
body.page-contact .resp-ch { font-size:13px; color:rgba(255,255,255,0.55); }
body.page-contact .resp-time { font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,0.1); padding:4px 10px; border-radius:100px; }
body.page-contact .resp-time.fast { background:rgba(52,199,89,0.2); color:#34C759; }

/* Social card */
body.page-contact .social-card {
  background:#F0EDE8; border-radius:20px; padding:28px;
}
body.page-contact .social-card h3 { font-size:15px; font-weight:700; margin-bottom:16px; }
body.page-contact .social-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.page-contact .soc-link {
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:12px; padding:12px 14px;
  font-size:13px; font-weight:600; color:#1D1D1F;
  transition:all .2s; cursor:pointer; border:1.5px solid transparent;
}
body.page-contact .soc-link:hover { border-color:#FF2D55; color:#FF2D55; }
body.page-contact .soc-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── MAP SECTION ── */
body.page-contact .map-s { padding:0 0 72px; }
body.page-contact .map-card {
  background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
  display:grid; grid-template-columns:1fr 340px;
  min-height:400px;
}
body.page-contact .map-embed { position:relative; overflow:hidden; min-height:400px; }
body.page-contact .map-embed iframe,
body.page-contact .map-embed svg { width:100%; height:100%; border:none; min-height:400px; display:block; }
body.page-contact .map-embed iframe { filter:grayscale(15%) contrast(1.05); }
body.page-contact .map-info { padding:40px 36px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
body.page-contact .map-info h2 { font-size:22px; font-weight:700; letter-spacing:-.3px; }
body.page-contact .map-info p { font-size:13px; color:#86868B; line-height:1.7; }
body.page-contact .map-detail { display:flex; flex-direction:column; gap:14px; }
body.page-contact .map-item { display:flex; gap:12px; align-items:flex-start; }
body.page-contact .map-item-icon { width:34px; height:34px; background:#F5F5F7; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.page-contact .map-item-label { font-size:11px; font-weight:600; color:#86868B; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
body.page-contact .map-item-val { font-size:13px; font-weight:600; color:#1D1D1F; }
body.page-contact .btn-directions {
  display:inline-flex; align-items:center; gap:8px;
  background:#1D1D1F; color:#fff; padding:12px 22px;
  border-radius:100px; font-size:13px; font-weight:600;
  transition:all .2s; align-self:flex-start;
}
body.page-contact .btn-directions:hover { background:#3a3a3c; transform:scale(1.02); }

/* ── FAQ SECTION ── */
body.page-contact .faq-s { padding:0 0 72px; }
body.page-contact .faq-grid { display:grid; grid-template-columns:360px 1fr; gap:64px; align-items:start; }
body.page-contact .faq-left { position:sticky; top:100px; }
body.page-contact .faq-left .st { margin-bottom:16px; }
body.page-contact .faq-left p { font-size:13px; color:#86868B; line-height:1.7; margin-bottom:24px; }
body.page-contact .faq-cats { display:flex; flex-direction:column; gap:6px; }
body.page-contact .faq-cat {
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500;
  color:#515154; cursor:pointer; transition:all .2s; text-align:left;
  border:1.5px solid transparent;
}
body.page-contact .faq-cat.on { background:#fff; color:#1D1D1F; font-weight:600; border-color:#E8E8ED; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-contact .faq-cat:hover:not(.on) { background:rgba(0,0,0,0.03); color:#1D1D1F; }

body.page-contact .faq-list { display:flex; flex-direction:column; gap:12px; }
body.page-contact .faq-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-contact .faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; cursor:pointer; gap:16px;
  transition:background .2s;
}
body.page-contact .faq-q:hover { background:#FAFAFA; }
body.page-contact .faq-q-text { font-size:14px; font-weight:600; color:#1D1D1F; line-height:1.4; }
body.page-contact .faq-chevron {
  width:28px; height:28px; border-radius:50%; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s, transform .25s;
}
body.page-contact .faq-chevron svg { width:12px; height:12px; color:#515154; }
body.page-contact .faq-item.open .faq-chevron { background:#FF2D55; transform:rotate(180deg); }
body.page-contact .faq-item.open .faq-chevron svg { color:#fff; }
body.page-contact .faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.25,1,.5,1);
}
body.page-contact .faq-item.open .faq-a { max-height:300px; }
body.page-contact .faq-a-inner { padding:0 24px 22px; font-size:13px; color:#86868B; line-height:1.75; border-top:1px solid #F5F5F7; padding-top:18px; }
body.page-contact .faq-a-inner a { color:#FF2D55; font-weight:500; }

/* ── SUPPORT CHANNELS ── */
body.page-contact .channels-s { padding:0 0 72px; }
body.page-contact .channels-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.page-contact .ch-card {
  background:#fff; border-radius:20px; padding:32px 28px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  transition:all .3s; cursor:pointer;
  border:1.5px solid transparent;
}
body.page-contact .ch-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.09); border-color:#FF2D55; }
body.page-contact .ch-icon-wrap {
  width:52px; height:52px; border-radius:16px; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
body.page-contact .ch-card:hover .ch-icon-wrap { background:#FFF0F3; }
body.page-contact .ch-title { font-size:16px; font-weight:700; }
body.page-contact .ch-desc { font-size:12px; color:#86868B; line-height:1.6; }
body.page-contact .ch-action { font-size:13px; font-weight:600; color:#FF2D55; margin-top:auto; display:flex; align-items:center; gap:4px; }
body.page-contact .ch-action::after { content:'→'; transition:transform .2s; }
body.page-contact .ch-card:hover .ch-action::after { transform:translateX(3px); }
body.page-contact .ch-badge { font-size:10px; font-weight:700; background:#E8FFF0; color:#34C759; padding:3px 8px; border-radius:100px; letter-spacing:.3px; display:inline-block; }

/* ── TRUST STRIP ── */
body.page-contact .trust-s {
  margin-bottom:72px;
  background:#fff; border-radius:20px; padding:36px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04); flex-wrap:wrap;
}
body.page-contact .trust-item { display:flex; align-items:center; gap:12px; }
body.page-contact .trust-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; }
body.page-contact .trust-title { font-size:13px; font-weight:700; }
body.page-contact .trust-sub { font-size:11px; color:#86868B; }
body.page-contact .trust-divider { width:1px; height:40px; background:#E8E8ED; flex-shrink:0; }

/* ── NEWSLETTER MINI ── */
body.page-contact .nl-s { padding:0 0 72px; }
body.page-contact .nl-banner {
  background:#1D1D1F; border-radius:24px; padding:52px 64px;
  display:flex; align-items:center; gap:80px;
  position:relative; overflow:hidden;
}
body.page-contact .nl-banner::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.2) 0%,transparent 70%); filter:blur(40px); }
body.page-contact .nl-left { flex:1; position:relative; z-index:1; }
body.page-contact .nl-left .sl { color:rgba(255,255,255,0.3); }
body.page-contact .nl-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-contact .nl-left p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.65; }
body.page-contact .nl-right { min-width:380px; position:relative; z-index:1; }
body.page-contact .nl-form { display:flex; gap:10px; }
body.page-contact .nl-in { flex:1; padding:12px 18px; border-radius:100px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; outline:none; font-family:inherit; }
body.page-contact .nl-in::placeholder { color:rgba(255,255,255,0.3); }
body.page-contact .nl-in:focus { border-color:rgba(255,45,85,0.6); }
body.page-contact .nl-btn { background:#FF2D55; color:#fff; padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .2s; }
body.page-contact .nl-btn:hover { background:#FF4D6A; }

/* ── FOOTER ── */
body.page-contact footer { background:#1D1D1F; padding:56px 0 36px; }
body.page-contact .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-contact .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-contact .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-contact .flogo em { color:#FF2D55; font-style:normal; }
body.page-contact .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-contact .fsocs { display:flex; gap:8px; }
body.page-contact .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.5); font-weight:600; }
body.page-contact .fsoc:hover { background:#FF2D55; border-color:#FF2D55; color:#fff; }
body.page-contact .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-contact .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-contact .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-contact .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-contact .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-contact .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-contact .fpay { display:flex; gap:8px; }
body.page-contact .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ── SCROLL REVEAL ── */
body.page-contact .rv { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
body.page-contact .rv.show { opacity:1; transform:translateY(0); }
body.page-contact .rv2 { opacity:0; transform:translateY(20px); transition:opacity .65s ease .1s,transform .65s ease .1s; }
body.page-contact .rv2.show { opacity:1; transform:translateY(0); }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */

/* Tablet landscape ≤1100px */
@media (max-width:1024px) {
  body.page-contact .wrap { padding:0 28px; }
  body.page-contact .hw { padding:0 20px 0 24px; }
  body.page-contact .page-hero-inner { padding:56px 56px 0; gap:40px; }
  body.page-contact .hero-left h1 { font-size:44px; }
  body.page-contact .channels-grid { grid-template-columns:repeat(2,1fr); }
  body.page-contact .contact-grid { grid-template-columns:1fr 320px; gap:16px; }
  body.page-contact .form-card { padding:36px; }
  body.page-contact .faq-grid { grid-template-columns:280px 1fr; gap:40px; }
  body.page-contact .map-card { grid-template-columns:1fr 300px; }
  body.page-contact .ftop { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; }
  body.page-contact .ftop > div:last-child { display:none; }
  body.page-contact .nl-banner { padding:40px 48px; gap:48px; }
}

/* Tablet portrait ≤860px */
@media (max-width:768px) {
  /* Capsule header collapses nav */
  body.page-contact header { top:10px; width:calc(100% - 32px); border-radius:100px; }
  body.page-contact .hw { height:54px; padding:0 14px 0 20px; gap:8px; }
  body.page-contact header nav { display:none; }
  body.page-contact .search-pill span { display:none; }
  body.page-contact .search-pill { padding:7px 10px; }

  body.page-contact .wrap { padding:0 20px; }
  body.page-contact .wrap > *:first-child { margin-top:80px; }

  /* Hero */
  body.page-contact .page-hero-inner {
    grid-template-columns:1fr;
    padding:48px 36px 0;
    min-height:auto;
  }
  body.page-contact .hero-right { display:none; }
  body.page-contact .hero-left { padding-bottom:48px; }
  body.page-contact .hero-left h1 { font-size:38px; }
  body.page-contact .hero-left p { font-size:14px; }

  /* Channels */
  body.page-contact .channels-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  body.page-contact .ch-card { padding:24px 20px; }

  /* Contact grid */
  body.page-contact .contact-grid { grid-template-columns:1fr; }
  body.page-contact .contact-sidebar { flex-direction:row; flex-wrap:wrap; gap:12px; }
  body.page-contact .contact-sidebar > * { flex:1 1 calc(50% - 6px); min-width:260px; }
  body.page-contact .form-card { padding:28px; }

  /* FAQ */
  body.page-contact .faq-grid { grid-template-columns:1fr; gap:24px; }
  body.page-contact .faq-left { position:static; }
  body.page-contact .faq-cats { flex-direction:row; flex-wrap:wrap; gap:6px; }
  body.page-contact .faq-cat { padding:7px 14px; }

  /* Map */
  body.page-contact .map-card { grid-template-columns:1fr; }
  body.page-contact .map-embed iframe { min-height:280px; }
  body.page-contact .map-info { padding:28px; }

  /* Trust strip */
  body.page-contact .trust-s { padding:24px 28px; flex-wrap:wrap; gap:16px; justify-content:flex-start; }
  body.page-contact .trust-divider { display:none; }
  body.page-contact .trust-item { flex:1 1 calc(50% - 8px); min-width:140px; }

  /* Newsletter */
  body.page-contact .nl-banner { flex-direction:column; gap:28px; padding:40px 36px; }
  body.page-contact .nl-right { min-width:unset; width:100%; }

  /* Footer */
  body.page-contact .ftop { grid-template-columns:1fr 1fr; gap:28px 36px; }
  body.page-contact .ftop > div:first-child { grid-column:span 2; }
  body.page-contact .ftop > div:last-child { display:block; }
}

/* Mobile ≤560px */
@media (max-width:380px) {
  body.page-contact header { width:calc(100% - 24px); }
  body.page-contact .hw { gap:6px; }
  body.page-contact .logo { font-size:17px; }

  body.page-contact .wrap { padding:0 16px; }
  body.page-contact .wrap > *:first-child { margin-top:72px; }

  /* Hero */
  body.page-contact .page-hero-inner { padding:36px 24px 0; }
  body.page-contact .hero-left h1 { font-size:32px; letter-spacing:-1px; }
  body.page-contact .hero-badges { gap:6px; }
  body.page-contact .hero-badge { font-size:11px; padding:5px 10px; }

  /* Channels */
  body.page-contact .channels-grid { grid-template-columns:1fr; }

  /* Form */
  body.page-contact .form-row { grid-template-columns:1fr; }
  body.page-contact .form-card { padding:22px 20px; }
  body.page-contact .form-card h2 { font-size:20px; }

  /* Sidebar */
  body.page-contact .contact-sidebar { flex-direction:column; }
  body.page-contact .contact-sidebar > * { flex:none; width:100%; }

  /* FAQ */
  body.page-contact .faq-cats { }
  body.page-contact .faq-q { padding:16px 18px; }
  body.page-contact .faq-q-text { font-size:13px; }
  body.page-contact .faq-a-inner { padding:14px 18px 18px; }

  /* Map */
  body.page-contact .map-info { padding:22px; }
  body.page-contact .map-info h2 { font-size:18px; }
  body.page-contact .sh .st { font-size:26px; }

  /* Trust */
  body.page-contact .trust-item { flex:1 1 100%; }

  /* Newsletter */
  body.page-contact .nl-banner { padding:32px 24px; }
  body.page-contact .nl-form { flex-direction:column; }
  body.page-contact .nl-btn { width:100%; padding:13px; }
  body.page-contact .nl-left h2 { font-size:22px; }

  /* Footer */
  body.page-contact .ftop { grid-template-columns:1fr; gap:24px; }
  body.page-contact .ftop > div:first-child { grid-column:span 1; }
  body.page-contact .fbot { flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ── HAMBURGER & MOBILE DRAWER (added for consistency) ── */
body.page-contact .hamburger { display:none; }
body.page-contact .mobile-drawer { display:none; }
@media (max-width:1024px) {
  body.page-contact .hamburger { display:flex; }
  body.page-contact header nav { display:none; }
}
@media (max-width:1024px) {
  body.page-contact .mobile-drawer { display:block; }
  body.page-contact .mobile-drawer .md-back { position:fixed; inset:0; background:rgba(0,0,0,0); backdrop-filter:blur(0); z-index:998; transition:background .4s, backdrop-filter .4s; pointer-events:none; }
  body.page-contact .mobile-drawer.on .md-back { background:rgba(0,0,0,.28); backdrop-filter:blur(6px); pointer-events:auto; }
  body.page-contact .md-panel { position:fixed; top:0; right:0; width:min(420px,85vw); height:100vh; background:var(--surface); z-index:999; transform:translateX(100%); transition:transform .5s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; border-left:1.5px solid var(--line); }
  body.page-contact .mobile-drawer.on .md-panel { transform:translateX(0); }
  body.page-contact .md-head { display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:72px; border-bottom:1.5px solid var(--line); }
  body.page-contact .md-head .logo { font-size:22px; font-weight:700; letter-spacing:-.5px; }
  body.page-contact .md-head .logo em { color:var(--brand); font-style:normal; }
  body.page-contact .md-close { width:36px; height:36px; border-radius:50%; background:var(--line-soft); display:flex; align-items:center; justify-content:center; }
  body.page-contact .md-body { flex:1; overflow-y:auto; padding:20px 24px 40px; }
  
  
}
@media (max-width:768px) {
  body.page-contact .hamburger { display:flex; }
  body.page-contact header nav { display:none; }
  body.page-contact .search-pill { display:none; }
}

/* ============================================================
   faq.html
   ============================================================ */

/* ===== faq.html ===== */

/* ── DESIGN TOKENS ── */
body.page-faq body.no-scroll { overflow:hidden; }
body.page-faq a { text-decoration:none; color:inherit; }
body.page-faq button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-faq img { display:block; max-width:100%; }
body.page-faq input, body.page-faq select { font-family:inherit; }
body.page-faq a:focus-visible, body.page-faq button:focus-visible, body.page-faq input:focus-visible, body.page-faq summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ── ANNOUNCEMENT BAR ── */
body.page-faq .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-faq .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-faq .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-faq .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-faq header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-faq header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-faq .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-faq .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-faq .logo em { color:var(--brand); font-style:normal; }
body.page-faq header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-faq .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-faq .ni > a:hover, body.page-faq .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-faq .ni.active > a { color:var(--brand); }
body.page-faq .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-faq .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-faq .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-faq .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-faq .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-faq .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-faq .ib:hover { background:rgba(0,0,0,0.05); }
body.page-faq .ib svg { width:17px; height:17px; }
body.page-faq .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-faq .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-faq .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-faq .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-faq .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-faq .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-faq .bcrumb a:hover { color:var(--ink); }
body.page-faq .bcrumb .sep { color:var(--muted-3); }
body.page-faq .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-faq .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-faq .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-faq .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-faq .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-faq .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-faq .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-faq .chips-row:empty { padding:0; }
body.page-faq .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-faq .fchip:hover { border-color:var(--ink); }
body.page-faq .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-faq .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-faq .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-faq .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-faq .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-faq .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-faq .filters::-webkit-scrollbar { width:5px; }
body.page-faq .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-faq .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-faq .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-faq .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-faq .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-faq .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-faq .fgroup { border-top:1px solid var(--line-soft); }
body.page-faq .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-faq .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-faq .fgroup > summary::-webkit-details-marker { display:none; }
body.page-faq .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-faq .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-faq .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-faq .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-faq .fopt:hover { color:var(--ink); }
body.page-faq .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-faq .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-faq .fopt-mark.radio { border-radius:50%; }
body.page-faq .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-faq .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-faq .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-faq .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-faq .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-faq .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-faq .fopt-text { flex:1; }
body.page-faq .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-faq .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-faq .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-faq .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-faq .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-faq .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-faq .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-faq .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-faq .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-faq .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-faq .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-faq .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-faq .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-faq .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-faq .results { min-width:0; }
body.page-faq .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-faq .t-left { display:flex; align-items:center; gap:14px; }
body.page-faq .t-count { font-size:13px; color:var(--muted-2); }
body.page-faq .t-count strong { color:var(--ink); font-weight:700; }
body.page-faq .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-faq .sortdrop { position:relative; z-index:10; }
body.page-faq .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-faq .sortbtn:hover { border-color:var(--ink); }
body.page-faq .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-faq .sortbtn .val { font-weight:600; }
body.page-faq .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-faq .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-faq .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-faq .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-faq .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-faq .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-faq .sortopt.on { color:var(--ink); font-weight:600; }
body.page-faq .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-faq .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-faq .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-faq .vbtn:hover { color:var(--ink); }
body.page-faq .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-faq .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-faq .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-faq .fbtn-mobile svg { width:14px; height:14px; }
body.page-faq .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-faq .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-faq .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-faq .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-faq .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-faq .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-faq .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-faq .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-faq .pgrid.list-view .pcard-quick { display:none; }
body.page-faq .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-faq .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-faq .pgrid.list-view .pcard-name { font-size:16px; }
body.page-faq .pgrid.list-view .pcard-var { font-size:13px; }
body.page-faq .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-faq .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-faq .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-faq .pcard { cursor:pointer; }
body.page-faq .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-faq .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-faq .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-faq .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-faq .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-faq .bg-new { background:var(--ink); color:#fff; }
body.page-faq .bg-hot { background:var(--brand); color:#fff; }
body.page-faq .bg-sale { background:#FF9500; color:#fff; }
body.page-faq .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-faq .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-faq .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-faq .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-faq .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-faq .pcard:hover .pcard-quick { bottom:12px; }
body.page-faq .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-faq .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-faq .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-faq .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-faq .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-faq .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-faq .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-faq .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-faq .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-faq .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-faq .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-faq .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-faq .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-faq footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-faq .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-faq .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-faq .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-faq .flogo em { color:var(--brand); font-style:normal; }
body.page-faq .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-faq .fsocs { display:flex; gap:8px; }
body.page-faq .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-faq .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-faq .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-faq .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-faq .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-faq .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-faq .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-faq .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-faq .fpay { display:flex; gap:8px; }
body.page-faq .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-faq .wrap, body.page-faq .fw { padding:0 28px; }
  body.page-faq header { width:calc(100% - 32px); }
  body.page-faq .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-faq header nav { gap:0; }
  body.page-faq .ni > a { padding:7px 10px; font-size:12.5px; }
  body.page-faq .search-pill span { display:none; }
  body.page-faq .search-pill { padding:8px 10px; }

  body.page-faq .shop-title { font-size:34px; }
  body.page-faq .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-faq .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-faq .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-faq .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-faq .hamburger { display:flex; }
  body.page-faq header nav, body.page-faq header .search-pill { display:none; }
  body.page-faq header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-faq .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-faq .logo { font-size:17px; }
  body.page-faq .ib { width:40px; height:40px; }
  body.page-faq .ib svg { width:18px; height:18px; }
  body.page-faq .ann-bar { padding:8px 0; }
  body.page-faq .ann-track { gap:36px; }
  body.page-faq .ann-track span { font-size:11px; }
  body.page-faq .wrap, body.page-faq .fw { padding:0 16px; }

  /* hero */
  body.page-faq .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-faq .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-faq .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-faq .shop-meta { padding-bottom:0; }
  body.page-faq .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-faq .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-faq .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-faq .filters.on { transform:translateY(0); }
  body.page-faq .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-faq .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-faq .fgroup > summary { padding:18px 20px 14px; }
  body.page-faq .fgroup-body { padding:0 20px 18px; }
  body.page-faq .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-faq .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-faq .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-faq .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-faq .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-faq .toolbar { gap:10px; padding-bottom:14px; }
  body.page-faq .t-left { gap:10px; flex:1; }
  body.page-faq .sortbtn .lbl { display:none; }
  body.page-faq .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-faq .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-faq .pcard-img { border-radius:var(--radius-sm); }
  body.page-faq .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-faq .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-faq .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-faq .pcard-name { font-size:13px; }
  body.page-faq .pcard-p { font-size:14px; }

  /* footer */
  body.page-faq footer { padding:40px 0 28px; margin-top:48px; }
  body.page-faq .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-faq .ftop > div:first-child { grid-column:1/-1; }
  body.page-faq .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-faq .filters .f-head-clear-desktop { display:none; }
  body.page-faq .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-faq .hw { padding:0 4px 0 14px; }
  body.page-faq .logo { font-size:16px; }
  body.page-faq .ib { width:36px; height:36px; }
  body.page-faq .pgrid { gap:14px 10px; }
  body.page-faq .pcard-name, body.page-faq .pcard-p { font-size:12.5px; }
}

/* ── PAGE HERO ── */
body.page-faq .page-hero { padding:24px 0 0; margin-bottom:24px; }
body.page-faq .page-hero-inner {
  background:#1D1D1F; border-radius:28px; padding:72px 72px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:380px;
}
body.page-faq .page-hero-inner::before {
  content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px);
}
body.page-faq .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-faq .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-faq .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-faq .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-faq .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-faq .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }

/* ── FAQ SECTION ── */
body.page-faq .faq-s { padding:64px 0 72px; }
body.page-faq .faq-grid { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
body.page-faq .faq-left { position:sticky; top:100px; }
body.page-faq .faq-left .st { margin-bottom:16px; }
body.page-faq .faq-left p { font-size:13px; color:#86868B; line-height:1.7; margin-bottom:24px; }
body.page-faq .faq-cats { display:flex; flex-direction:column; gap:6px; }
body.page-faq .faq-cat {
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500;
  color:#515154; cursor:pointer; transition:all .2s; text-align:left; border:1.5px solid transparent; background:none;
}
body.page-faq .faq-cat.on { background:#fff; color:#1D1D1F; font-weight:600; border-color:#E8E8ED; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-faq .faq-cat:hover:not(.on) { background:rgba(0,0,0,0.03); color:#1D1D1F; }

body.page-faq .faq-list { display:flex; flex-direction:column; gap:12px; }
body.page-faq .faq-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-faq .faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; cursor:pointer; gap:16px; transition:background .2s; border:none; background:none; width:100%; text-align:left; font:inherit;
}
body.page-faq .faq-q:hover { background:#FAFAFA; }
body.page-faq .faq-q-text { font-size:14px; font-weight:600; color:#1D1D1F; line-height:1.4; }
body.page-faq .faq-chevron {
  width:28px; height:28px; border-radius:50%; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s, transform .25s;
}
body.page-faq .faq-chevron svg { width:12px; height:12px; color:#515154; }
body.page-faq .faq-item.open .faq-chevron { background:#FF2D55; transform:rotate(180deg); }
body.page-faq .faq-item.open .faq-chevron svg { color:#fff; }
body.page-faq .faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.25,1,.5,1);
}
body.page-faq .faq-item.open .faq-a { max-height:400px; }
body.page-faq .faq-a-inner { padding:0 24px 22px; font-size:13px; color:#86868B; line-height:1.75; border-top:1px solid #F5F5F7; padding-top:18px; }
body.page-faq .faq-a-inner a { color:#FF2D55; font-weight:500; }

/* ── CTA BANNER ── */
body.page-faq .cta-s { padding:0 0 72px; }
body.page-faq .cta-banner {
  background:#1D1D1F; border-radius:24px; padding:52px 64px;
  display:flex; align-items:center; justify-content:space-between; gap:48px;
  position:relative; overflow:hidden;
}
body.page-faq .cta-banner::before {
  content:''; position:absolute; top:-80px; right:-80px; width:350px; height:350px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(50px);
}
body.page-faq .cta-left { position:relative; z-index:1; }
body.page-faq .cta-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:8px; }
body.page-faq .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); line-height:1.6; }
body.page-faq .cta-right { position:relative; z-index:1; display:flex; gap:12px; flex-shrink:0; }
body.page-faq .btn-w { background:#fff; color:#1D1D1F; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; }
body.page-faq .btn-w:hover { transform:scale(1.03); }
body.page-faq .btn-o { background:rgba(255,255,255,0.08); color:#fff; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:500; border:1px solid rgba(255,255,255,0.15); transition:all .2s; }
body.page-faq .btn-o:hover { background:rgba(255,255,255,0.15); }

/* ── SHARED LABELS ── */
body.page-faq .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-faq .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-faq .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-faq .page-hero-inner { padding:56px 56px 0; gap:40px; }
  body.page-faq .hero-left h1 { font-size:44px; }
  body.page-faq .faq-grid { grid-template-columns:240px 1fr; gap:32px; }
  body.page-faq .cta-banner { padding:40px 48px; }
}
@media (max-width:768px) {
  body.page-faq .page-hero-inner { grid-template-columns:1fr; padding:48px 36px 0; min-height:auto; }
  body.page-faq .hero-right { display:none; }
  body.page-faq .hero-left { padding-bottom:48px; }
  body.page-faq .hero-left h1 { font-size:38px; }
  body.page-faq .faq-grid { grid-template-columns:1fr; gap:24px; }
  body.page-faq .faq-left { position:static; }
  body.page-faq .faq-cats { flex-direction:row; flex-wrap:wrap; gap:6px; }
  body.page-faq .faq-cat { padding:7px 14px; }
  body.page-faq .cta-banner { flex-direction:column; align-items:flex-start; gap:24px; padding:36px 28px; }
  body.page-faq .cta-right { width:100%; flex-direction:column; }
  body.page-faq .btn-w, body.page-faq .btn-o { width:100%; text-align:center; }
}
@media (max-width:380px) {
  body.page-faq .page-hero-inner { padding:36px 24px 0; }
  body.page-faq .hero-left h1 { font-size:32px; }
  body.page-faq .faq-q { padding:16px 18px; }
  body.page-faq .faq-q-text { font-size:13px; }
  body.page-faq .faq-a-inner { padding:14px 18px 18px; }
}

/* ============================================================
   blog.html
   ============================================================ */

/* ===== blog.html ===== */

/* ── DESIGN TOKENS ── */
/* ══ PDP WC-COMPAT ══════════════════════════════════════════════════════════ */
/* pdp-sticky show state (JS-driven) */
body.page-pdp .pdp-sticky.show {
  display: block;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}
body.page-pdp .pdp-sticky-inner {
  max-width: 1360px; margin: 0 auto; padding: 12px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Tab btn underline */
body.page-pdp .tab-btn::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:2px; background:var(--ink);
  transform:scaleX(0); transition:transform .2s;
}
body.page-pdp .tab-btn.on::after { transform:scaleX(1); }
/* Reviews toolbar select */
body.page-pdp .reviews-toolbar select {
  padding:7px 12px; border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:13px; font-family:inherit; color:var(--ink); background:#fff; outline:none;
}
/* Qty value */
.qty-val { min-width:28px; text-align:center; font-size:15px; font-weight:600; user-select:none; }
/* WC form default reset */
body.page-pdp .variations_form { margin:0; }
body.page-pdp .woocommerce-variation-price { display:none; }


:is(body.page-pdp, body.single-product)  (ported from site-v8/css/styles.css)
   ═══════════════════════════════════════════════════════════════ */

:is(body.page-pdp, body.single-product) body.no-scroll { overflow:hidden; }
:is(body.page-pdp, body.single-product) input, :is(body.page-pdp, body.single-product) select { font-family:inherit; }
:is(body.page-pdp, body.single-product) body.no-scroll { overflow:hidden; }
:is(body.page-pdp, body.single-product) a { text-decoration:none; color:inherit; }
:is(body.page-pdp, body.single-product) button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
:is(body.page-pdp, body.single-product) img { display:block; max-width:100%; }
:is(body.page-pdp, body.single-product) input, :is(body.page-pdp, body.single-product) select { font-family:inherit; }
:is(body.page-pdp, body.single-product) a:focus-visible, :is(body.page-pdp, body.single-product) button:focus-visible, :is(body.page-pdp, body.single-product) input:focus-visible, :is(body.page-pdp, body.single-product) summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ── ANNOUNCEMENT BAR ── */
:is(body.page-pdp, body.single-product) .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
:is(body.page-pdp, body.single-product) .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
:is(body.page-pdp, body.single-product) .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
:is(body.page-pdp, body.single-product) .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
:is(body.page-pdp, body.single-product) header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
:is(body.page-pdp, body.single-product) header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
:is(body.page-pdp, body.single-product) .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
:is(body.page-pdp, body.single-product) .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
:is(body.page-pdp, body.single-product) .logo em { color:var(--brand); font-style:normal; }
:is(body.page-pdp, body.single-product) header nav { display:flex; gap:1px; flex:1; justify-content:center; }
:is(body.page-pdp, body.single-product) .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
:is(body.page-pdp, body.single-product) .ni > a:hover, :is(body.page-pdp, body.single-product) .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
:is(body.page-pdp, body.single-product) .ni.active > a { color:var(--brand); }
:is(body.page-pdp, body.single-product) .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
:is(body.page-pdp, body.single-product) .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
:is(body.page-pdp, body.single-product) .search-pill:hover { background:rgba(0,0,0,0.08); }
:is(body.page-pdp, body.single-product) .search-pill svg { width:13px; height:13px; opacity:.4; }
:is(body.page-pdp, body.single-product) .search-pill span { font-size:13px; color:var(--muted-2); }
:is(body.page-pdp, body.single-product) .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
:is(body.page-pdp, body.single-product) .ib:hover { background:rgba(0,0,0,0.05); }
:is(body.page-pdp, body.single-product) .ib svg { width:17px; height:17px; }
:is(body.page-pdp, body.single-product) .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
:is(body.page-pdp, body.single-product) .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
:is(body.page-pdp, body.single-product) .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB ── */
:is(body.page-pdp, body.single-product) .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; padding:24px 0 28px; }
:is(body.page-pdp, body.single-product) .bcrumb a { color:var(--muted-2); transition:color .2s; }
:is(body.page-pdp, body.single-product) .bcrumb a:hover { color:var(--ink); }
:is(body.page-pdp, body.single-product) .bcrumb .sep { color:var(--muted-3); }
:is(body.page-pdp, body.single-product) .bcrumb .cur { color:var(--ink); font-weight:500; }

/* ── PDP MAIN GRID ── */
:is(body.page-pdp, body.single-product) .pdp-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  gap:64px;
  padding-bottom:80px;
}

/* ── GALLERY ── */
:is(body.page-pdp, body.single-product) .pdp-gallery { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:start; }
:is(body.page-pdp, body.single-product) .pdp-thumbs { display:flex; flex-direction:column; gap:10px; }
:is(body.page-pdp, body.single-product) .pdp-thumb {
  width:72px; aspect-ratio:1; border-radius:14px;
  border:2px solid transparent; overflow:hidden;
  background:#fff; padding:0; cursor:pointer;
  transition:border-color .2s,transform .15s;
}
:is(body.page-pdp, body.single-product) .pdp-thumb:hover { transform:scale(1.03); }
:is(body.page-pdp, body.single-product) .pdp-thumb.on { border-color:var(--ink); }
:is(body.page-pdp, body.single-product) .pdp-thumb img { width:100%; height:100%; object-fit:cover; }
:is(body.page-pdp, body.single-product) .pdp-main-img {
  position:relative; aspect-ratio:1;
  border-radius:var(--radius-lg); overflow:hidden;
  background:#fff;
}
:is(body.page-pdp, body.single-product) .pdp-main-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
:is(body.page-pdp, body.single-product) .pdp-main-img:hover img { transform:scale(1.02); }
:is(body.page-pdp, body.single-product) .pdp-badge {
  position:absolute; top:18px; left:18px; z-index:2;
  padding:5px 12px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  background:var(--ink); color:#fff;
}
:is(body.page-pdp, body.single-product) .pdp-zoom-hint {
  position:absolute; bottom:18px; right:18px;
  padding:7px 12px; background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px); border-radius:var(--radius-pill);
  font-size:11px; font-weight:500; color:var(--muted);
  display:flex; align-items:center; gap:6px;
  letter-spacing:.2px;
}
:is(body.page-pdp, body.single-product) .pdp-zoom-hint svg { width:12px; height:12px; }

/* ── INFO PANEL ── */
:is(body.page-pdp, body.single-product) .pdp-info { padding-top:6px; min-width:0; }
:is(body.page-pdp, body.single-product) .pdp-meta {
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--muted-2); margin-bottom:10px;
}
:is(body.page-pdp, body.single-product) .pdp-meta .stars { color:#FFCC00; letter-spacing:1px; font-size:13px; }
:is(body.page-pdp, body.single-product) .pdp-meta .review-cnt { color:var(--muted); font-weight:500; }
:is(body.page-pdp, body.single-product) .pdp-meta .review-cnt:hover { color:var(--ink); text-decoration:underline; cursor:pointer; }
:is(body.page-pdp, body.single-product) .pdp-info h1 {
  font-size:32px; font-weight:700; line-height:1.1;
  letter-spacing:-.5px; margin-bottom:10px;
}
:is(body.page-pdp, body.single-product) .pdp-tagline {
  font-size:14px; color:var(--muted); line-height:1.6;
  margin-bottom:24px;
}
:is(body.page-pdp, body.single-product) .pdp-price-row {
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:24px; margin-bottom:24px;
  border-bottom:1px solid var(--line-soft);
}
:is(body.page-pdp, body.single-product) .pdp-price { font-size:32px; font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
:is(body.page-pdp, body.single-product) .pdp-price-orig { font-size:16px; color:var(--muted-3); text-decoration:line-through; font-variant-numeric:tabular-nums; }
:is(body.page-pdp, body.single-product) .pdp-price-off {
  font-size:11px; font-weight:700; color:var(--brand);
  padding:4px 9px; background:var(--brand-soft); border-radius:6px;
  letter-spacing:.4px; text-transform:uppercase;
}

/* color/variant select */
:is(body.page-pdp, body.single-product) .pdp-opt { margin-bottom:22px; }
:is(body.page-pdp, body.single-product) .pdp-opt-label {
  font-size:12.5px; color:var(--muted-2); margin-bottom:12px;
  display:block;
}
:is(body.page-pdp, body.single-product) .pdp-opt-label strong { color:var(--ink); font-weight:600; margin-left:4px; }
:is(body.page-pdp, body.single-product) .pdp-swatches { display:flex; gap:12px; flex-wrap:wrap; }
:is(body.page-pdp, body.single-product) .pdp-swatch {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(0,0,0,0.08); cursor:pointer;
  position:relative; transition:transform .15s;
  flex-shrink:0;
}
:is(body.page-pdp, body.single-product) .pdp-swatch:hover { transform:scale(1.06); }
:is(body.page-pdp, body.single-product) .pdp-swatch.on::after {
  content:''; position:absolute; inset:-5px;
  border:1.5px solid var(--ink); border-radius:50%;
}

/* qty + add to cart row */
:is(body.page-pdp, body.single-product) .pdp-cta-row {
  display:grid; grid-template-columns:auto 1fr; gap:10px;
  margin-bottom:10px;
}
:is(body.page-pdp, body.single-product) .pdp-qty {
  display:flex; align-items:center;
  background:var(--bg); border-radius:var(--radius-pill);
  padding:3px;
}
:is(body.page-pdp, body.single-product) .pdp-qty button {
  width:42px; height:42px; border-radius:50%;
  font-size:17px; color:var(--muted); transition:color .15s,background .15s;
  display:flex; align-items:center; justify-content:center;
}
:is(body.page-pdp, body.single-product) .pdp-qty button:hover { color:var(--ink); background:rgba(0,0,0,0.03); }
:is(body.page-pdp, body.single-product) .pdp-qty button:active { transform:scale(.94); }
:is(body.page-pdp, body.single-product) .pdp-qty .qty-val {
  width:32px; text-align:center; font-weight:600;
  font-size:14px; font-variant-numeric:tabular-nums;
}
:is(body.page-pdp, body.single-product) .pdp-cart {
  background:var(--ink); color:#fff;
  font-weight:600; font-size:14px; letter-spacing:.3px;
  border-radius:var(--radius-pill); height:48px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .25s;
}
:is(body.page-pdp, body.single-product) .pdp-cart:hover { background:var(--brand); }
:is(body.page-pdp, body.single-product) .pdp-cart svg { width:16px; height:16px; }

:is(body.page-pdp, body.single-product) .pdp-wish {
  width:100%; height:46px;
  border:1.5px solid var(--line); border-radius:var(--radius-pill);
  font-size:13px; font-weight:500; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:24px; transition:border-color .2s,color .2s;
}
:is(body.page-pdp, body.single-product) .pdp-wish svg { width:16px; height:16px; }
:is(body.page-pdp, body.single-product) .pdp-wish:hover { border-color:var(--ink); }
:is(body.page-pdp, body.single-product) .pdp-wish.on { border-color:var(--brand); color:var(--brand); }

/* trust badges */
:is(body.page-pdp, body.single-product) .pdp-trust {
  list-style:none; display:flex; flex-direction:column; gap:11px;
  padding:20px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  margin-bottom:24px;
}
:is(body.page-pdp, body.single-product) .pdp-trust li {
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:11px;
}
:is(body.page-pdp, body.single-product) .pdp-trust li svg { width:16px; height:16px; color:var(--ink); flex-shrink:0; }

/* key features */
:is(body.page-pdp, body.single-product) .pdp-features h4 {
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink); font-weight:700; margin-bottom:14px;
}
:is(body.page-pdp, body.single-product) .pdp-features ul {
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr;
  gap:11px 16px;
}
:is(body.page-pdp, body.single-product) .pdp-features li {
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; gap:9px;
}
:is(body.page-pdp, body.single-product) .pdp-features li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--brand); flex-shrink:0;
}

/* Stock indicator */
:is(body.page-pdp, body.single-product) .pdp-stock {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:#34C759;
  margin-bottom:22px;
}
:is(body.page-pdp, body.single-product) .pdp-stock .dot {
  width:8px; height:8px; border-radius:50%;
  background:#34C759;
  box-shadow:0 0 0 3px rgba(52,199,89,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
:is(body.page-pdp, body.single-product) .pdp-stock .ship-eta { color:var(--muted-2); font-weight:400; }
@keyframes pulse {
  :is(body.page-pdp, body.single-product) 0%, :is(body.page-pdp, body.single-product) 100% { box-shadow:0 0 0 3px rgba(52,199,89,.18); }
  :is(body.page-pdp, body.single-product) 50% { box-shadow:0 0 0 6px rgba(52,199,89,.06); }
}

/* Woo-style meta block (SKU, categories, share) */
:is(body.page-pdp, body.single-product) .pdp-meta-block {
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:10px;
}
:is(body.page-pdp, body.single-product) .pdp-meta-row {
  font-size:12.5px; color:var(--muted);
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
:is(body.page-pdp, body.single-product) .pdp-meta-row .lbl {
  font-size:11px; font-weight:700; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--ink);
  flex-shrink:0; min-width:80px;
}
:is(body.page-pdp, body.single-product) .pdp-meta-row a {
  color:var(--muted); transition:color .15s;
}
:is(body.page-pdp, body.single-product) .pdp-meta-row a:hover { color:var(--brand); }
:is(body.page-pdp, body.single-product) .pdp-meta-row .sep { color:var(--muted-3); margin:0 2px; }
:is(body.page-pdp, body.single-product) .pdp-share-btns { display:flex; gap:6px; }
:is(body.page-pdp, body.single-product) .pdp-share-btn {
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all .2s;
}
:is(body.page-pdp, body.single-product) .pdp-share-btn:hover { color:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
:is(body.page-pdp, body.single-product) .pdp-share-btn svg { width:12px; height:12px; }

/* ── TABS SECTION ── */
:is(body.page-pdp, body.single-product) .pdp-tabs {
  margin-top:24px; padding:48px 0 64px;
  border-top:1px solid var(--line);
}
:is(body.page-pdp, body.single-product) .tab-nav {
  display:flex; gap:32px;
  border-bottom:1px solid var(--line);
  margin-bottom:36px; overflow-x:auto;
  scrollbar-width:none;
}
:is(body.page-pdp, body.single-product) .tab-nav::-webkit-scrollbar { display:none; }
:is(body.page-pdp, body.single-product) .tab-btn {
  padding:14px 0; font-size:14px; font-weight:500;
  color:var(--muted-2); position:relative; white-space:nowrap;
  transition:color .2s;
}
:is(body.page-pdp, body.single-product) .tab-btn:hover { color:var(--ink); }
:is(body.page-pdp, body.single-product) .tab-btn.on { color:var(--ink); font-weight:600; }
:is(body.page-pdp, body.single-product) .tab-btn.on::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:2px; background:var(--ink);
}
:is(body.page-pdp, body.single-product) .tab-content > div { display:none; }
:is(body.page-pdp, body.single-product) .tab-content > div.on { display:block; animation:tabfade .25s ease; }
@keyframes tabfade { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }

/* description */
:is(body.page-pdp, body.single-product) .tab-desc { font-size:14.5px; line-height:1.7; color:var(--muted); max-width:780px; }
:is(body.page-pdp, body.single-product) .tab-desc p { margin-bottom:18px; }
:is(body.page-pdp, body.single-product) .tab-desc h3 {
  font-size:16px; color:var(--ink); margin:28px 0 12px;
  font-weight:700; letter-spacing:-.2px;
}
:is(body.page-pdp, body.single-product) .tab-desc strong { color:var(--ink); font-weight:600; }

/* spec grid */
:is(body.page-pdp, body.single-product) .spec-grid {
  display:grid; grid-template-columns:240px 1fr;
  max-width:720px;
}
:is(body.page-pdp, body.single-product) .spec-grid > div {
  padding:14px 0; border-bottom:1px solid var(--line-soft);
  font-size:14px; line-height:1.5;
}
:is(body.page-pdp, body.single-product) .spec-grid > div:nth-child(odd) { font-weight:600; color:var(--ink); }
:is(body.page-pdp, body.single-product) .spec-grid > div:nth-child(even) { color:var(--muted); }
:is(body.page-pdp, body.single-product) .spec-grid > div:nth-last-child(-n+2) { border-bottom:none; }

/* reviews */
:is(body.page-pdp, body.single-product) .reviews-layout {
  display:grid; grid-template-columns:300px 1fr; gap:56px;
}
:is(body.page-pdp, body.single-product) .review-summary {
  padding:24px; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--radius-md);
  position:sticky; top:108px; align-self:start;
}
:is(body.page-pdp, body.single-product) .review-big {
  font-size:48px; font-weight:800; letter-spacing:-1.5px;
  line-height:1; color:var(--ink); margin-bottom:6px;
}
:is(body.page-pdp, body.single-product) .review-stars-big { color:#FFCC00; font-size:15px; letter-spacing:1.5px; margin-bottom:4px; }
:is(body.page-pdp, body.single-product) .review-count-big { font-size:12.5px; color:var(--muted-2); margin-bottom:22px; }
:is(body.page-pdp, body.single-product) .review-bars { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
:is(body.page-pdp, body.single-product) .review-bar { display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--muted-2); font-variant-numeric:tabular-nums; }
:is(body.page-pdp, body.single-product) .review-bar .lbl { width:30px; }
:is(body.page-pdp, body.single-product) .review-bar-track {
  flex:1; height:5px; background:var(--line);
  border-radius:3px; overflow:hidden;
}
:is(body.page-pdp, body.single-product) .review-bar-fill { height:100%; background:var(--ink); border-radius:3px; }
:is(body.page-pdp, body.single-product) .review-bar .pct { width:32px; text-align:right; }
:is(body.page-pdp, body.single-product) .review-write {
  width:100%; height:42px;
  background:var(--ink); color:#fff;
  border-radius:var(--radius-pill);
  font-size:13px; font-weight:600;
  transition:background .2s;
}
:is(body.page-pdp, body.single-product) .review-write:hover { background:var(--brand); }

:is(body.page-pdp, body.single-product) .review-list { display:flex; flex-direction:column; gap:0; }
:is(body.page-pdp, body.single-product) .review-item {
  padding:22px 0; border-bottom:1px solid var(--line-soft);
}
:is(body.page-pdp, body.single-product) .review-item:first-child { padding-top:0; }
:is(body.page-pdp, body.single-product) .review-item:last-child { border-bottom:none; }
:is(body.page-pdp, body.single-product) .review-head {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  flex-wrap:wrap;
}
:is(body.page-pdp, body.single-product) .review-stars { color:#FFCC00; font-size:13px; letter-spacing:1px; }
:is(body.page-pdp, body.single-product) .review-author { font-size:13px; font-weight:600; color:var(--ink); }
:is(body.page-pdp, body.single-product) .review-verified {
  font-size:11px; color:#34C759; font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
}
:is(body.page-pdp, body.single-product) .review-verified svg { width:11px; height:11px; }
:is(body.page-pdp, body.single-product) .review-date { font-size:12px; color:var(--muted-3); margin-left:auto; }
:is(body.page-pdp, body.single-product) .review-title { font-size:14.5px; font-weight:600; margin-bottom:4px; color:var(--ink); }
:is(body.page-pdp, body.single-product) .review-body { font-size:13.5px; line-height:1.65; color:var(--muted); }

/* ── CUSTOMER REVIEWS (card grid) ── */
:is(body.page-pdp, body.single-product) .reviews-section {
  padding:64px 0 56px;
  border-top:1px solid var(--line);
}
:is(body.page-pdp, body.single-product) .reviews-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:28px; flex-wrap:wrap;
}
:is(body.page-pdp, body.single-product) .reviews-head h2 {
  font-size:28px; font-weight:700; letter-spacing:-.5px;
  margin-bottom:6px;
}
:is(body.page-pdp, body.single-product) .reviews-subhead { font-size:13.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
:is(body.page-pdp, body.single-product) .reviews-subhead .rh-stars { color:#FFCC00; letter-spacing:1px; font-size:14px; }
:is(body.page-pdp, body.single-product) .btn-write-review {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:600;
  transition:background .2s;
}
:is(body.page-pdp, body.single-product) .btn-write-review:hover { background:var(--brand); }
:is(body.page-pdp, body.single-product) .btn-write-review svg { width:14px; height:14px; }

/* Summary card */
:is(body.page-pdp, body.single-product) .rs-card {
  display:grid; grid-template-columns:auto auto 1fr; gap:48px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:28px 32px;
  margin-bottom:28px; align-items:center;
}
:is(body.page-pdp, body.single-product) .rs-rating { text-align:center; padding-right:24px; border-right:1px solid var(--line-soft); }
:is(body.page-pdp, body.single-product) .rs-big {
  font-size:54px; font-weight:800; letter-spacing:-2px; line-height:1;
  color:var(--ink); margin-bottom:6px;
}
:is(body.page-pdp, body.single-product) .rs-stars-big { color:#FFCC00; font-size:14px; letter-spacing:1.5px; margin-bottom:4px; }
:is(body.page-pdp, body.single-product) .rs-count-big { font-size:12px; color:var(--muted-2); }
:is(body.page-pdp, body.single-product) .rs-bars { display:flex; flex-direction:column; gap:7px; min-width:200px; }
:is(body.page-pdp, body.single-product) .rs-bar {
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
:is(body.page-pdp, body.single-product) .rs-lbl { width:24px; flex-shrink:0; }
:is(body.page-pdp, body.single-product) .rs-bar-track { flex:1; height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
:is(body.page-pdp, body.single-product) .rs-bar-fill { height:100%; background:var(--ink); border-radius:3px; }
:is(body.page-pdp, body.single-product) .rs-pct { width:32px; text-align:right; flex-shrink:0; }
:is(body.page-pdp, body.single-product) .rs-tags h5 {
  font-size:11px; font-weight:700; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:1.4px; margin-bottom:12px;
}
:is(body.page-pdp, body.single-product) .rs-tag-list { display:flex; flex-wrap:wrap; gap:6px; }
:is(body.page-pdp, body.single-product) .rs-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:var(--radius-pill);
  background:var(--bg); border:1px solid transparent;
  font-size:12px; color:var(--ink); font-weight:500;
  transition:border-color .15s,background .15s;
}
:is(body.page-pdp, body.single-product) .rs-tag:hover { border-color:var(--ink); }
:is(body.page-pdp, body.single-product) .rs-tag span { color:var(--muted-2); font-weight:400; font-variant-numeric:tabular-nums; }

/* Reviews toolbar */
:is(body.page-pdp, body.single-product) .reviews-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 0 20px;
}
:is(body.page-pdp, body.single-product) .reviews-toolbar-left { font-size:13px; color:var(--muted-2); }
:is(body.page-pdp, body.single-product) .reviews-toolbar-left strong { color:var(--ink); font-weight:700; }
:is(body.page-pdp, body.single-product) .reviews-toolbar-right {
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted-2);
}
:is(body.page-pdp, body.single-product) .reviews-toolbar-right select {
  border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:8px 14px 8px 14px; background:#fff;
  font-size:13px; font-weight:500; color:var(--ink); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%231D1D1F' stroke-width='2'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:32px;
}
:is(body.page-pdp, body.single-product) .reviews-toolbar-right select:hover { border-color:var(--ink); }

/* Reviews grid */
:is(body.page-pdp, body.single-product) .reviews-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-bottom:32px;
}
:is(body.page-pdp, body.single-product) .review-card {
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:24px;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  display:flex; flex-direction:column;
}
:is(body.page-pdp, body.single-product) .review-card:hover {
  border-color:var(--line);
  box-shadow:0 4px 20px rgba(0,0,0,0.05);
  transform:translateY(-2px);
}
:is(body.page-pdp, body.single-product) .rc-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
:is(body.page-pdp, body.single-product) .rc-stars { color:#FFCC00; font-size:14px; letter-spacing:1.5px; }
:is(body.page-pdp, body.single-product) .rc-stars .empty { color:var(--line); }
:is(body.page-pdp, body.single-product) .rc-date { font-size:11.5px; color:var(--muted-3); }
:is(body.page-pdp, body.single-product) .rc-title {
  font-size:15px; font-weight:700; color:var(--ink);
  letter-spacing:-.1px; margin-bottom:8px; line-height:1.3;
}
:is(body.page-pdp, body.single-product) .rc-body {
  font-size:13.5px; line-height:1.6; color:var(--muted);
  margin-bottom:18px; flex:1;
}
:is(body.page-pdp, body.single-product) .rc-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--line-soft);
  gap:8px;
}
:is(body.page-pdp, body.single-product) .rc-author { display:flex; align-items:center; gap:10px; min-width:0; }
:is(body.page-pdp, body.single-product) .rc-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--ink);
  letter-spacing:.5px; flex-shrink:0;
  text-shadow:0 1px 2px rgba(255,255,255,.4);
}
:is(body.page-pdp, body.single-product) .rc-name { font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
:is(body.page-pdp, body.single-product) .rc-verified {
  font-size:11px; color:#34C759; font-weight:500;
  display:inline-flex; align-items:center; gap:3px; margin-top:2px;
}
:is(body.page-pdp, body.single-product) .rc-verified svg { width:10px; height:10px; }
:is(body.page-pdp, body.single-product) .rc-helpful {
  font-size:12px; color:var(--muted-2); font-weight:500;
  padding:7px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  transition:color .15s,border-color .15s;
  flex-shrink:0;
}
:is(body.page-pdp, body.single-product) .rc-helpful:hover { color:var(--ink); border-color:var(--ink); }

:is(body.page-pdp, body.single-product) .reviews-load-more { text-align:center; }
:is(body.page-pdp, body.single-product) .btn-load-more {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
:is(body.page-pdp, body.single-product) .btn-load-more:hover {
  border-color:var(--ink); transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

/* ── RELATED PRODUCTS ── */
:is(body.page-pdp, body.single-product) .related { padding:60px 0 80px; border-top:1px solid var(--line); }
:is(body.page-pdp, body.single-product) .related-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; }
:is(body.page-pdp, body.single-product) .related-head h2 {
  font-size:24px; font-weight:700; letter-spacing:-.4px;
}
:is(body.page-pdp, body.single-product) .related-head a {
  font-size:13px; color:var(--muted-2); font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
  transition:color .2s;
}
:is(body.page-pdp, body.single-product) .related-head a:hover { color:var(--ink); }
:is(body.page-pdp, body.single-product) .related-head a svg { width:11px; height:11px; }

:is(body.page-pdp, body.single-product) .pgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px 18px; }
:is(body.page-pdp, body.single-product) .pcard { cursor:pointer; }
:is(body.page-pdp, body.single-product) .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
:is(body.page-pdp, body.single-product) .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
:is(body.page-pdp, body.single-product) .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
:is(body.page-pdp, body.single-product) .pcard:hover .pcard-img img { transform:scale(1.05); }
:is(body.page-pdp, body.single-product) .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
:is(body.page-pdp, body.single-product) .bg-new { background:var(--ink); color:#fff; }
:is(body.page-pdp, body.single-product) .bg-hot { background:var(--brand); color:#fff; }
:is(body.page-pdp, body.single-product) .bg-sale { background:#FF9500; color:#fff; }
:is(body.page-pdp, body.single-product) .bg-top { background:#34C759; color:#fff; }
:is(body.page-pdp, body.single-product) .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
:is(body.page-pdp, body.single-product) .pcard-stars span { color:var(--muted-3); font-size:11px; }
:is(body.page-pdp, body.single-product) .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
:is(body.page-pdp, body.single-product) .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
:is(body.page-pdp, body.single-product) .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
:is(body.page-pdp, body.single-product) .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
:is(body.page-pdp, body.single-product) .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
:is(body.page-pdp, body.single-product) .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── HOVER ZOOM (main image) ── */
:is(body.page-pdp, body.single-product) .pdp-main-img { cursor:zoom-in; overflow:hidden; }
:is(body.page-pdp, body.single-product) .pdp-main-img img {
  transition:transform .25s cubic-bezier(.2,.6,.3,1);
  transform-origin:center center;
}
:is(body.page-pdp, body.single-product) .pdp-main-img.zooming img {
  transition:transform-origin 80ms ease-out;
  transform:scale(2.2);
}
/* hide the existing :hover scale rule when actively zooming */
:is(body.page-pdp, body.single-product) .pdp-main-img.zooming:hover img { transform:scale(2.2); }

/* ── LIGHTBOX ── */
:is(body.page-pdp, body.single-product) .lightbox {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  visibility:hidden; opacity:0;
  transition:opacity .3s,visibility .3s;
  display:flex; align-items:center; justify-content:center;
}
:is(body.page-pdp, body.single-product) .lightbox.on { visibility:visible; opacity:1; }
:is(body.page-pdp, body.single-product) .lb-stage {
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:64px 80px;
}
:is(body.page-pdp, body.single-product) .lb-img {
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  border-radius:var(--radius-md);
  user-select:none; -webkit-user-drag:none;
  box-shadow:0 24px 80px rgba(0,0,0,0.4);
  animation:lbFade .35s ease-out;
}
@keyframes lbFade {
  from { opacity:0; transform:scale(.96); }
  to   { opacity:1; transform:scale(1); }
}
:is(body.page-pdp, body.single-product) .lb-close, :is(body.page-pdp, body.single-product) .lb-nav {
  position:absolute;
  z-index:2;                        /* v3.7.39: above .lb-stage so clicks register */
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:50%;
  transition:background .2s,border-color .2s,transform .2s;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
:is(body.page-pdp, body.single-product) .lb-close:hover, :is(body.page-pdp, body.single-product) .lb-nav:hover {
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.25);
}
:is(body.page-pdp, body.single-product) .lb-close { top:24px; right:24px; width:44px; height:44px; }
:is(body.page-pdp, body.single-product) .lb-close:hover { transform:rotate(90deg); }
:is(body.page-pdp, body.single-product) .lb-close svg { width:18px; height:18px; }
:is(body.page-pdp, body.single-product) .lb-nav { top:50%; transform:translateY(-50%); width:52px; height:52px; }
:is(body.page-pdp, body.single-product) .lb-nav:hover { transform:translateY(-50%) scale(1.06); }
:is(body.page-pdp, body.single-product) .lb-prev { left:24px; }
:is(body.page-pdp, body.single-product) .lb-next { right:24px; }
:is(body.page-pdp, body.single-product) .lb-nav svg { width:20px; height:20px; }

:is(body.page-pdp, body.single-product) .lb-counter {
  position:absolute; left:50%; bottom:24px;
  transform:translateX(-50%);
  color:rgba(255,255,255,0.7);
  font-size:13px; letter-spacing:1.5px;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:14px;
}
:is(body.page-pdp, body.single-product) .lb-counter .dots { display:flex; gap:6px; }
:is(body.page-pdp, body.single-product) .lb-counter .dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:background .2s,transform .2s;
  cursor:pointer;
  border:none; padding:0;
}
:is(body.page-pdp, body.single-product) .lb-counter .dot.on { background:#fff; transform:scale(1.4); }
:is(body.page-pdp, body.single-product) .lb-counter .dot:hover { background:rgba(255,255,255,0.55); }

@media (max-width:768px) {
  :is(body.page-pdp, body.single-product) .lb-stage { padding:60px 16px; }
  :is(body.page-pdp, body.single-product) .lb-close { top:14px; right:14px; width:38px; height:38px; }
  :is(body.page-pdp, body.single-product) .lb-nav { width:44px; height:44px; }
  :is(body.page-pdp, body.single-product) .lb-prev { left:8px; }
  :is(body.page-pdp, body.single-product) .lb-next { right:8px; }
  :is(body.page-pdp, body.single-product) .lb-counter { bottom:20px; font-size:12px; }
  /* on touch, hover zoom is N/A — disable the cursor hint */
  :is(body.page-pdp, body.single-product) .pdp-main-img { cursor:pointer; }
}
@media (hover:none) {
  :is(body.page-pdp, body.single-product) .pdp-main-img.zooming img { transform:none !important; }
}

/* ── MOBILE STICKY CTA ── */
:is(body.page-pdp, body.single-product) .pdp-sticky { display:none; }

/* ── FOOTER ── */
:is(body.page-pdp, body.single-product) footer { background:#1D1D1F; padding:56px 0 36px; }
:is(body.page-pdp, body.single-product) .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
:is(body.page-pdp, body.single-product) .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
:is(body.page-pdp, body.single-product) .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
:is(body.page-pdp, body.single-product) .flogo em { color:var(--brand); font-style:normal; }
:is(body.page-pdp, body.single-product) .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
:is(body.page-pdp, body.single-product) .fsocs { display:flex; gap:8px; }
:is(body.page-pdp, body.single-product) .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
:is(body.page-pdp, body.single-product) .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
:is(body.page-pdp, body.single-product) .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
:is(body.page-pdp, body.single-product) .flinks { display:flex; flex-direction:column; gap:9px; }
:is(body.page-pdp, body.single-product) .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
:is(body.page-pdp, body.single-product) .flinks a:hover { color:rgba(255,255,255,0.72); }
:is(body.page-pdp, body.single-product) .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
:is(body.page-pdp, body.single-product) .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
:is(body.page-pdp, body.single-product) .fpay { display:flex; gap:8px; }
:is(body.page-pdp, body.single-product) .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ─────────── TABLET ≤ 1024px ─────────── */
@media (max-width:1024px) {
  :is(body.page-pdp, body.single-product) .wrap, :is(body.page-pdp, body.single-product) .fw { padding:0 28px; }
  :is(body.page-pdp, body.single-product) header { width:calc(100% - 32px); }
  :is(body.page-pdp, body.single-product) .hw { padding:0 16px 0 22px; gap:14px; }
  :is(body.page-pdp, body.single-product) header nav { gap:0; }
  :is(body.page-pdp, body.single-product) .ni > a { padding:7px 10px; font-size:12.5px; }
  :is(body.page-pdp, body.single-product) .search-pill span { display:none; }
  :is(body.page-pdp, body.single-product) .search-pill { padding:8px 10px; }

  :is(body.page-pdp, body.single-product) .pdp-grid { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; }
  :is(body.page-pdp, body.single-product) .rs-card { gap:32px; padding:24px; }
  :is(body.page-pdp, body.single-product) .rs-rating { padding-right:18px; }
  :is(body.page-pdp, body.single-product) .rs-big { font-size:46px; }
  :is(body.page-pdp, body.single-product) .pgrid { grid-template-columns:repeat(3, 1fr); gap:20px 14px; }
  :is(body.page-pdp, body.single-product) .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  :is(body.page-pdp, body.single-product) .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ─────────── MOBILE ≤ 768px ─────────── */
@media (max-width:768px) {
  :is(body.page-pdp, body.single-product) .hamburger { display:flex; }
  :is(body.page-pdp, body.single-product) header nav, :is(body.page-pdp, body.single-product) header .search-pill { display:none; }
  :is(body.page-pdp, body.single-product) header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  :is(body.page-pdp, body.single-product) .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  :is(body.page-pdp, body.single-product) .logo { font-size:17px; }
  :is(body.page-pdp, body.single-product) .ib { width:40px; height:40px; }
  :is(body.page-pdp, body.single-product) .ib svg { width:18px; height:18px; }
  :is(body.page-pdp, body.single-product) .ann-bar { padding:8px 0; }
  :is(body.page-pdp, body.single-product) .ann-track { gap:36px; }
  :is(body.page-pdp, body.single-product) .ann-track span { font-size:11px; }
  :is(body.page-pdp, body.single-product) .wrap, :is(body.page-pdp, body.single-product) .fw { padding:0 16px; }

  :is(body.page-pdp, body.single-product) .bcrumb { padding:16px 0 18px; font-size:12px; }

  /* PDP grid stacks */
  :is(body.page-pdp, body.single-product) .pdp-grid { grid-template-columns:1fr; gap:22px; padding-bottom:32px; }

  /* gallery: main image first, thumbs row below — v3.7.40: clip-based */
  :is(body.page-pdp, body.single-product) .pdp-gallery { grid-template-columns:1fr; gap:10px; }
  :is(body.page-pdp, body.single-product) .pdp-thumbs-clip { order:2; }
  :is(body.page-pdp, body.single-product) .pdp-thumbs {
    flex-direction:row;
    padding-bottom:0;
  }
  :is(body.page-pdp, body.single-product) .pdp-thumb { width:60px; flex-shrink:0; border-radius:10px; }
  :is(body.page-pdp, body.single-product) .pdp-main-img { border-radius:var(--radius-md); }
  :is(body.page-pdp, body.single-product) .pdp-zoom-hint { display:none; }
  :is(body.page-pdp, body.single-product) .pdp-badge { top:12px; left:12px; font-size:10px; padding:4px 10px; }

  :is(body.page-pdp, body.single-product) .pdp-info { padding-top:0; }
  :is(body.page-pdp, body.single-product) .pdp-info h1 { font-size:25px; }
  :is(body.page-pdp, body.single-product) .pdp-tagline { font-size:13.5px; margin-bottom:18px; }
  :is(body.page-pdp, body.single-product) .pdp-price { font-size:26px; }
  :is(body.page-pdp, body.single-product) .pdp-price-row { padding-bottom:18px; margin-bottom:18px; }

  /* hide desktop-only Add-to-Cart row, replaced by mobile sticky */
  :is(body.page-pdp, body.single-product) .pdp-cta-row { display:none; }
  :is(body.page-pdp, body.single-product) .pdp-wish { margin-bottom:20px; height:42px; }
  :is(body.page-pdp, body.single-product) .pdp-trust { gap:9px; padding:16px 0; margin-bottom:20px; }
  :is(body.page-pdp, body.single-product) .pdp-features ul { grid-template-columns:1fr; gap:9px; }

  /* tabs */
  :is(body.page-pdp, body.single-product) .pdp-tabs { padding:32px 0 40px; margin-top:14px; }
  :is(body.page-pdp, body.single-product) .tab-nav { gap:22px; margin-bottom:24px; }
  :is(body.page-pdp, body.single-product) .tab-btn { font-size:13px; padding:12px 0; }
  :is(body.page-pdp, body.single-product) .spec-grid { grid-template-columns:130px 1fr; }
  :is(body.page-pdp, body.single-product) .spec-grid > div { padding:11px 0; font-size:13px; }

  /* reviews section mobile */
  :is(body.page-pdp, body.single-product) .reviews-section { padding:36px 0 32px; }
  :is(body.page-pdp, body.single-product) .reviews-head h2 { font-size:22px; }
  :is(body.page-pdp, body.single-product) .btn-write-review { padding:9px 16px; font-size:12px; }
  :is(body.page-pdp, body.single-product) .btn-write-review svg { width:13px; height:13px; }
  :is(body.page-pdp, body.single-product) .rs-card {
    grid-template-columns:1fr; gap:24px;
    padding:22px; margin-bottom:22px;
  }
  :is(body.page-pdp, body.single-product) .rs-rating {
    text-align:left; padding-right:0; padding-bottom:20px;
    border-right:none; border-bottom:1px solid var(--line-soft);
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  :is(body.page-pdp, body.single-product) .rs-big { font-size:40px; margin-bottom:0; }
  :is(body.page-pdp, body.single-product) .rs-stars-big { font-size:13px; margin-bottom:0; }
  :is(body.page-pdp, body.single-product) .rs-count-big { width:100%; }
  :is(body.page-pdp, body.single-product) .rs-bars { min-width:0; }
  :is(body.page-pdp, body.single-product) .reviews-toolbar { flex-direction:column; align-items:stretch; gap:10px; }
  :is(body.page-pdp, body.single-product) .reviews-toolbar-right { justify-content:space-between; }
  :is(body.page-pdp, body.single-product) .reviews-grid { grid-template-columns:1fr; gap:14px; margin-bottom:24px; }
  :is(body.page-pdp, body.single-product) .review-card { padding:20px; }
  :is(body.page-pdp, body.single-product) .rc-helpful { padding:6px 10px; font-size:11px; }

  /* Woo meta block */
  :is(body.page-pdp, body.single-product) .pdp-meta-row { font-size:12px; }
  :is(body.page-pdp, body.single-product) .pdp-meta-row .lbl { min-width:64px; font-size:10px; }

  /* related */
  :is(body.page-pdp, body.single-product) .related { padding:36px 0 100px; }    /* extra bottom for sticky cta */
  :is(body.page-pdp, body.single-product) .related-head h2 { font-size:20px; }
  :is(body.page-pdp, body.single-product) .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  :is(body.page-pdp, body.single-product) .pcard-img { border-radius:var(--radius-sm); }
  :is(body.page-pdp, body.single-product) .pcard-name { font-size:13px; }
  :is(body.page-pdp, body.single-product) .pcard-p { font-size:14px; }

  /* footer */
  :is(body.page-pdp, body.single-product) footer { padding:40px 0 28px; }
  :is(body.page-pdp, body.single-product) .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  :is(body.page-pdp, body.single-product) .ftop > div:first-child { grid-column:1/-1; }
  :is(body.page-pdp, body.single-product) .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* Mobile sticky CTA bar (v3.7.42 redesign — kept in sync with body.page-pdp block) */
  :is(body.page-pdp, body.single-product) .pdp-sticky {
    display:flex; align-items:center; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:700;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
  }
  :is(body.page-pdp, body.single-product) .pdp-sticky-price {
    display:flex; flex-direction:column; line-height:1.1; flex-shrink:0;
    min-width:0; padding-right:2px;
  }
  :is(body.page-pdp, body.single-product) .pdp-sticky-price .pp { font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-0.3px; }
  :is(body.page-pdp, body.single-product) .pdp-sticky-price .po { font-size:11px; color:var(--muted-3); text-decoration:line-through; }
  :is(body.page-pdp, body.single-product) .pdp-sticky-qty {
    display:inline-flex; align-items:center;
    background:rgba(0,0,0,0.05); border-radius:100px;
    height:42px; flex-shrink:0; overflow:hidden;
  }
  :is(body.page-pdp, body.single-product) .pdp-sticky-qty .sq-btn {
    width:34px; height:42px; border:none; background:transparent;
    font-size:18px; font-weight:500; color:var(--ink); cursor:pointer;
    padding:0; display:inline-flex; align-items:center; justify-content:center;
    transition:background .12s; -webkit-tap-highlight-color:transparent;
  }
  :is(body.page-pdp, body.single-product) .pdp-sticky-qty .sq-btn:active { background:rgba(0,0,0,0.08); }
  :is(body.page-pdp, body.single-product) .pdp-sticky-qty .sq-val {
    min-width:24px; text-align:center;
    font-size:14px; font-weight:600; color:var(--ink); user-select:none;
  }
  :is(body.page-pdp, body.single-product) .pdp-sticky-cart {
    flex:1; min-width:0; height:46px; padding:0 18px;
    border:none; border-radius:100px;
    background:linear-gradient(135deg, var(--brand) 0%, #FF4D6A 100%);
    color:#fff;
    font-size:14px; font-weight:600; letter-spacing:.3px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    cursor:pointer; font-family:inherit;
    box-shadow:0 2px 12px rgba(255, 45, 85, 0.28),
               0 1px 3px rgba(255, 45, 85, 0.18);
    transition:transform .12s ease, box-shadow .15s ease, filter .15s;
    -webkit-tap-highlight-color:transparent;
  }
  :is(body.page-pdp, body.single-product) .pdp-sticky-cart svg { flex-shrink:0; }
  :is(body.page-pdp, body.single-product) .pdp-sticky-cart:hover { filter:brightness(1.05); box-shadow:0 4px 16px rgba(255, 45, 85, 0.36); }
  :is(body.page-pdp, body.single-product) .pdp-sticky-cart:active { transform:scale(0.97); }

  @media (max-width:380px) {
    :is(body.page-pdp, body.single-product) .pdp-sticky { padding:10px 10px calc(10px + env(safe-area-inset-bottom)); gap:6px; }
    :is(body.page-pdp, body.single-product) .pdp-sticky-price .po { display:none; }
    :is(body.page-pdp, body.single-product) .pdp-sticky-price .pp { font-size:15px; }
    :is(body.page-pdp, body.single-product) .pdp-sticky-qty { height:40px; }
    :is(body.page-pdp, body.single-product) .pdp-sticky-qty .sq-btn { width:30px; height:40px; }
    :is(body.page-pdp, body.single-product) .pdp-sticky-cart { height:42px; padding:0 12px; font-size:13px; }
    :is(body.page-pdp, body.single-product) .pdp-sticky-cart svg { display:none; }
  }
}

@media (max-width:380px) {
  :is(body.page-pdp, body.single-product) .hw { padding:0 4px 0 14px; }
  :is(body.page-pdp, body.single-product) .logo { font-size:16px; }
  :is(body.page-pdp, body.single-product) .pgrid { gap:14px 10px; }
}

/* ============================================================
   contact.html
   ============================================================ */

/* ===== contact.html ===== */

body.page-contact body.no-scroll { overflow:hidden; }
body.page-contact a { text-decoration:none; color:inherit; }
body.page-contact button { border:none; cursor:pointer; font-family:inherit; background:none; }
body.page-contact img { display:block; max-width:100%; }
body.page-contact input, body.page-contact select { font-family:inherit; }
body.page-contact a:focus-visible, body.page-contact button:focus-visible, body.page-contact input:focus-visible, body.page-contact summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ── ANNOUNCEMENT BAR ── */
body.page-contact .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-contact .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-contact .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-contact .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER CAPSULE ── */
body.page-contact header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800; border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-contact .hw { padding:0 24px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-contact .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-contact .logo em { color:#FF2D55; font-style:normal; }
body.page-contact header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-contact .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-contact .ni > a:hover { color:#1D1D1F; background:rgba(0,0,0,0.05); }
body.page-contact .chev { width:11px; height:11px; opacity:.4; transition:transform .2s; }
body.page-contact .ni:hover .chev { transform:rotate(180deg); }

body.page-contact .dg { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
body.page-contact .di { padding:11px; border-radius:10px; transition:background .15s; cursor:pointer; }
body.page-contact .di:hover { background:#F5F5F7; }
body.page-contact .di-name { font-size:13px; font-weight:600; margin-bottom:2px; }
body.page-contact .di-desc { font-size:11px; color:#86868B; line-height:1.4; }
body.page-contact .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-contact .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-contact .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-contact .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-contact .search-pill span { font-size:13px; color:#86868B; }
body.page-contact .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-contact .ib:hover { background:rgba(0,0,0,0.05); }
body.page-contact .ib svg { width:17px; height:17px; }
body.page-contact .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:#FF2D55; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ── WRAPPER ── */
body.page-contact .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-contact .wrap > *:first-child { padding-top:24px; }

/* ── SHARED ── */
body.page-contact .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-contact .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-contact .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }

/* ── PAGE HERO ── */
body.page-contact .page-hero {
  padding:48px 0 0; margin-bottom:24px; position:relative;
}
body.page-contact .page-hero-inner {
  background:#1D1D1F; border-radius:28px;
  padding:72px 72px 0;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:380px;
}
body.page-contact .page-hero-inner::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%);
  filter:blur(60px);
}
body.page-contact .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-contact .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-contact .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-contact .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-contact .hero-badges { display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
body.page-contact .hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  border-radius:100px; padding:6px 14px;
  font-size:12px; color:rgba(255,255,255,0.6); font-weight:500;
}
body.page-contact .hero-badge .dot { width:6px; height:6px; border-radius:50%; background:#34C759; flex-shrink:0; }
body.page-contact .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-contact .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }

/* ── CONTACT GRID ── */
body.page-contact .contact-s { padding:64px 0 72px; }
body.page-contact .contact-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }

/* Contact Form */
body.page-contact .form-card {
  background:#fff; border-radius:24px; padding:48px;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
body.page-contact .form-card h2 { font-size:24px; font-weight:700; letter-spacing:-.3px; margin-bottom:6px; }
body.page-contact .form-card .sub { font-size:13px; color:#86868B; margin-bottom:36px; line-height:1.6; }

body.page-contact .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
body.page-contact .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
body.page-contact .form-group label { font-size:12px; font-weight:600; color:#515154; letter-spacing:.3px; }
body.page-contact .form-input, body.page-contact .form-select, body.page-contact .form-textarea {
  padding:13px 16px; border-radius:12px;
  border:1.5px solid #E8E8ED; background:#FAFAFA;
  font-size:14px; color:#1D1D1F; font-family:inherit;
  outline:none; transition:border-color .2s, background .2s;
  width:100%;
}
body.page-contact .form-input:focus, body.page-contact .form-select:focus, body.page-contact .form-textarea:focus {
  border-color:#FF2D55; background:#fff;
}
body.page-contact .form-input::placeholder, body.page-contact .form-textarea::placeholder { color:#AEAEB2; }
body.page-contact .form-select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23AEAEB2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
body.page-contact .form-textarea { resize:vertical; min-height:130px; line-height:1.6; }

/* File upload */
body.page-contact .upload-zone {
  border:1.5px dashed #E8E8ED; border-radius:12px;
  padding:24px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s; background:#FAFAFA;
}
body.page-contact .upload-zone:hover { border-color:#FF2D55; background:#FFF5F7; }
body.page-contact .upload-zone-icon { display:flex; justify-content:center; margin-bottom:8px; }
body.page-contact .upload-zone-text { font-size:13px; color:#86868B; line-height:1.5; }
body.page-contact .upload-zone-text strong { color:#1D1D1F; font-weight:600; }

/* Privacy note */
body.page-contact .form-privacy { display:flex; align-items:flex-start; gap:10px; margin:20px 0; }
body.page-contact .form-privacy input[type="checkbox"] { width:16px; height:16px; margin-top:1px; accent-color:#FF2D55; flex-shrink:0; cursor:pointer; }
body.page-contact .form-privacy label { font-size:12px; color:#86868B; line-height:1.55; cursor:pointer; }
body.page-contact .form-privacy a { color:#FF2D55; }

body.page-contact .btn-submit {
  width:100%; padding:16px; border-radius:14px;
  background:#1D1D1F; color:#fff;
  font-size:15px; font-weight:700; cursor:pointer;
  transition:all .25s; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
body.page-contact .btn-submit:hover { background:#3a3a3c; transform:scale(1.01); }
body.page-contact .btn-submit svg { width:16px; height:16px; transition:transform .2s; }
body.page-contact .btn-submit:hover svg { transform:translateX(3px); }

/* Success message */
body.page-contact .form-success {
  display:none; text-align:center; padding:40px 20px;
}
body.page-contact .form-success-icon { display:flex; justify-content:center; margin-bottom:16px; }
body.page-contact .form-success h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
body.page-contact .form-success p { font-size:13px; color:#86868B; line-height:1.6; }

/* Right sidebar */
body.page-contact .contact-sidebar { display:flex; flex-direction:column; gap:16px; }

/* Info card */
body.page-contact .info-card {
  background:#fff; border-radius:20px; padding:32px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
body.page-contact .info-card h3 { font-size:16px; font-weight:700; margin-bottom:20px; }
body.page-contact .info-item { display:flex; gap:14px; margin-bottom:20px; }
body.page-contact .info-item:last-child { margin-bottom:0; }
body.page-contact .info-icon {
  width:40px; height:40px; border-radius:12px; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.page-contact .info-label { font-size:11px; font-weight:600; color:#86868B; letter-spacing:.5px; text-transform:uppercase; margin-bottom:3px; }
body.page-contact .info-val { font-size:14px; font-weight:600; color:#1D1D1F; }
body.page-contact .info-sub { font-size:12px; color:#86868B; margin-top:1px; }

/* Response time card */
body.page-contact .resp-card {
  background:#1D1D1F; border-radius:20px; padding:28px;
  position:relative; overflow:hidden;
}
body.page-contact .resp-card::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.25) 0%,transparent 70%); filter:blur(30px); }
body.page-contact .resp-card h3 { font-size:15px; font-weight:700; color:#fff; margin-bottom:14px; position:relative; z-index:1; }
body.page-contact .resp-items { display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
body.page-contact .resp-item { display:flex; justify-content:space-between; align-items:center; }
body.page-contact .resp-ch { font-size:13px; color:rgba(255,255,255,0.55); }
body.page-contact .resp-time { font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,0.1); padding:4px 10px; border-radius:100px; }
body.page-contact .resp-time.fast { background:rgba(52,199,89,0.2); color:#34C759; }

/* Social card */
body.page-contact .social-card {
  background:#F0EDE8; border-radius:20px; padding:28px;
}
body.page-contact .social-card h3 { font-size:15px; font-weight:700; margin-bottom:16px; }
body.page-contact .social-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.page-contact .soc-link {
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:12px; padding:12px 14px;
  font-size:13px; font-weight:600; color:#1D1D1F;
  transition:all .2s; cursor:pointer; border:1.5px solid transparent;
}
body.page-contact .soc-link:hover { border-color:#FF2D55; color:#FF2D55; }
body.page-contact .soc-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── MAP SECTION ── */
body.page-contact .map-s { padding:0 0 72px; }
body.page-contact .map-card {
  background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
  display:grid; grid-template-columns:1fr 340px;
  min-height:400px;
}
body.page-contact .map-embed { position:relative; overflow:hidden; min-height:400px; }
body.page-contact .map-embed iframe,
body.page-contact .map-embed svg { width:100%; height:100%; border:none; min-height:400px; display:block; }
body.page-contact .map-embed iframe { filter:grayscale(15%) contrast(1.05); }
body.page-contact .map-info { padding:40px 36px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
body.page-contact .map-info h2 { font-size:22px; font-weight:700; letter-spacing:-.3px; }
body.page-contact .map-info p { font-size:13px; color:#86868B; line-height:1.7; }
body.page-contact .map-detail { display:flex; flex-direction:column; gap:14px; }
body.page-contact .map-item { display:flex; gap:12px; align-items:flex-start; }
body.page-contact .map-item-icon { width:34px; height:34px; background:#F5F5F7; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.page-contact .map-item-label { font-size:11px; font-weight:600; color:#86868B; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
body.page-contact .map-item-val { font-size:13px; font-weight:600; color:#1D1D1F; }
body.page-contact .btn-directions {
  display:inline-flex; align-items:center; gap:8px;
  background:#1D1D1F; color:#fff; padding:12px 22px;
  border-radius:100px; font-size:13px; font-weight:600;
  transition:all .2s; align-self:flex-start;
}
body.page-contact .btn-directions:hover { background:#3a3a3c; transform:scale(1.02); }

/* ── FAQ SECTION ── */
body.page-contact .faq-s { padding:0 0 72px; }
body.page-contact .faq-grid { display:grid; grid-template-columns:360px 1fr; gap:64px; align-items:start; }
body.page-contact .faq-left { position:sticky; top:100px; }
body.page-contact .faq-left .st { margin-bottom:16px; }
body.page-contact .faq-left p { font-size:13px; color:#86868B; line-height:1.7; margin-bottom:24px; }
body.page-contact .faq-cats { display:flex; flex-direction:column; gap:6px; }
body.page-contact .faq-cat {
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500;
  color:#515154; cursor:pointer; transition:all .2s; text-align:left;
  border:1.5px solid transparent;
}
body.page-contact .faq-cat.on { background:#fff; color:#1D1D1F; font-weight:600; border-color:#E8E8ED; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-contact .faq-cat:hover:not(.on) { background:rgba(0,0,0,0.03); color:#1D1D1F; }

body.page-contact .faq-list { display:flex; flex-direction:column; gap:12px; }
body.page-contact .faq-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-contact .faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; cursor:pointer; gap:16px;
  transition:background .2s;
}
body.page-contact .faq-q:hover { background:#FAFAFA; }
body.page-contact .faq-q-text { font-size:14px; font-weight:600; color:#1D1D1F; line-height:1.4; }
body.page-contact .faq-chevron {
  width:28px; height:28px; border-radius:50%; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s, transform .25s;
}
body.page-contact .faq-chevron svg { width:12px; height:12px; color:#515154; }
body.page-contact .faq-item.open .faq-chevron { background:#FF2D55; transform:rotate(180deg); }
body.page-contact .faq-item.open .faq-chevron svg { color:#fff; }
body.page-contact .faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.25,1,.5,1);
}
body.page-contact .faq-item.open .faq-a { max-height:300px; }
body.page-contact .faq-a-inner { padding:0 24px 22px; font-size:13px; color:#86868B; line-height:1.75; border-top:1px solid #F5F5F7; padding-top:18px; }
body.page-contact .faq-a-inner a { color:#FF2D55; font-weight:500; }

/* ── SUPPORT CHANNELS ── */
body.page-contact .channels-s { padding:0 0 72px; }
body.page-contact .channels-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.page-contact .ch-card {
  background:#fff; border-radius:20px; padding:32px 28px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  transition:all .3s; cursor:pointer;
  border:1.5px solid transparent;
}
body.page-contact .ch-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.09); border-color:#FF2D55; }
body.page-contact .ch-icon-wrap {
  width:52px; height:52px; border-radius:16px; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
body.page-contact .ch-card:hover .ch-icon-wrap { background:#FFF0F3; }
body.page-contact .ch-title { font-size:16px; font-weight:700; }
body.page-contact .ch-desc { font-size:12px; color:#86868B; line-height:1.6; }
body.page-contact .ch-action { font-size:13px; font-weight:600; color:#FF2D55; margin-top:auto; display:flex; align-items:center; gap:4px; }
body.page-contact .ch-action::after { content:'→'; transition:transform .2s; }
body.page-contact .ch-card:hover .ch-action::after { transform:translateX(3px); }
body.page-contact .ch-badge { font-size:10px; font-weight:700; background:#E8FFF0; color:#34C759; padding:3px 8px; border-radius:100px; letter-spacing:.3px; display:inline-block; }

/* ── TRUST STRIP ── */
body.page-contact .trust-s {
  margin-bottom:72px;
  background:#fff; border-radius:20px; padding:36px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04); flex-wrap:wrap;
}
body.page-contact .trust-item { display:flex; align-items:center; gap:12px; }
body.page-contact .trust-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; }
body.page-contact .trust-title { font-size:13px; font-weight:700; }
body.page-contact .trust-sub { font-size:11px; color:#86868B; }
body.page-contact .trust-divider { width:1px; height:40px; background:#E8E8ED; flex-shrink:0; }

/* ── NEWSLETTER MINI ── */
body.page-contact .nl-s { padding:0 0 72px; }
body.page-contact .nl-banner {
  background:#1D1D1F; border-radius:24px; padding:52px 64px;
  display:flex; align-items:center; gap:80px;
  position:relative; overflow:hidden;
}
body.page-contact .nl-banner::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.2) 0%,transparent 70%); filter:blur(40px); }
body.page-contact .nl-left { flex:1; position:relative; z-index:1; }
body.page-contact .nl-left .sl { color:rgba(255,255,255,0.3); }
body.page-contact .nl-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-contact .nl-left p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.65; }
body.page-contact .nl-right { min-width:380px; position:relative; z-index:1; }
body.page-contact .nl-form { display:flex; gap:10px; }
body.page-contact .nl-in { flex:1; padding:12px 18px; border-radius:100px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; outline:none; font-family:inherit; }
body.page-contact .nl-in::placeholder { color:rgba(255,255,255,0.3); }
body.page-contact .nl-in:focus { border-color:rgba(255,45,85,0.6); }
body.page-contact .nl-btn { background:#FF2D55; color:#fff; padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .2s; }
body.page-contact .nl-btn:hover { background:#FF4D6A; }

/* ── FOOTER ── */
body.page-contact footer { background:#1D1D1F; padding:56px 0 36px; }
body.page-contact .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-contact .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-contact .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-contact .flogo em { color:#FF2D55; font-style:normal; }
body.page-contact .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-contact .fsocs { display:flex; gap:8px; }
body.page-contact .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.5); font-weight:600; }
body.page-contact .fsoc:hover { background:#FF2D55; border-color:#FF2D55; color:#fff; }
body.page-contact .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-contact .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-contact .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-contact .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-contact .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-contact .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-contact .fpay { display:flex; gap:8px; }
body.page-contact .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ── SCROLL REVEAL ── */
body.page-contact .rv { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
body.page-contact .rv.show { opacity:1; transform:translateY(0); }
body.page-contact .rv2 { opacity:0; transform:translateY(20px); transition:opacity .65s ease .1s,transform .65s ease .1s; }
body.page-contact .rv2.show { opacity:1; transform:translateY(0); }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */

/* Tablet landscape ≤1100px */
@media (max-width:1024px) {
  body.page-contact .wrap { padding:0 28px; }
  body.page-contact .hw { padding:0 20px 0 24px; }
  body.page-contact .page-hero-inner { padding:56px 56px 0; gap:40px; }
  body.page-contact .hero-left h1 { font-size:44px; }
  body.page-contact .channels-grid { grid-template-columns:repeat(2,1fr); }
  body.page-contact .contact-grid { grid-template-columns:1fr 320px; gap:16px; }
  body.page-contact .form-card { padding:36px; }
  body.page-contact .faq-grid { grid-template-columns:280px 1fr; gap:40px; }
  body.page-contact .map-card { grid-template-columns:1fr 300px; }
  body.page-contact .ftop { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; }
  body.page-contact .ftop > div:last-child { display:none; }
  body.page-contact .nl-banner { padding:40px 48px; gap:48px; }
}

/* Tablet portrait ≤860px */
@media (max-width:768px) {
  /* Capsule header collapses nav */
  body.page-contact header { top:10px; width:calc(100% - 32px); border-radius:100px; }
  body.page-contact .hw { height:54px; padding:0 14px 0 20px; gap:8px; }
  body.page-contact header nav { display:none; }
  body.page-contact .search-pill span { display:none; }
  body.page-contact .search-pill { padding:7px 10px; }

  body.page-contact .wrap { padding:0 20px; }
  body.page-contact .wrap > *:first-child { margin-top:80px; }

  /* Hero */
  body.page-contact .page-hero-inner {
    grid-template-columns:1fr;
    padding:48px 36px 0;
    min-height:auto;
  }
  body.page-contact .hero-right { display:none; }
  body.page-contact .hero-left { padding-bottom:48px; }
  body.page-contact .hero-left h1 { font-size:38px; }
  body.page-contact .hero-left p { font-size:14px; }

  /* Channels */
  body.page-contact .channels-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  body.page-contact .ch-card { padding:24px 20px; }

  /* Contact grid */
  body.page-contact .contact-grid { grid-template-columns:1fr; }
  body.page-contact .contact-sidebar { flex-direction:row; flex-wrap:wrap; gap:12px; }
  body.page-contact .contact-sidebar > * { flex:1 1 calc(50% - 6px); min-width:260px; }
  body.page-contact .form-card { padding:28px; }

  /* FAQ */
  body.page-contact .faq-grid { grid-template-columns:1fr; gap:24px; }
  body.page-contact .faq-left { position:static; }
  body.page-contact .faq-cats { flex-direction:row; flex-wrap:wrap; gap:6px; }
  body.page-contact .faq-cat { padding:7px 14px; }

  /* Map */
  body.page-contact .map-card { grid-template-columns:1fr; }
  body.page-contact .map-embed iframe { min-height:280px; }
  body.page-contact .map-info { padding:28px; }

  /* Trust strip */
  body.page-contact .trust-s { padding:24px 28px; flex-wrap:wrap; gap:16px; justify-content:flex-start; }
  body.page-contact .trust-divider { display:none; }
  body.page-contact .trust-item { flex:1 1 calc(50% - 8px); min-width:140px; }

  /* Newsletter */
  body.page-contact .nl-banner { flex-direction:column; gap:28px; padding:40px 36px; }
  body.page-contact .nl-right { min-width:unset; width:100%; }

  /* Footer */
  body.page-contact .ftop { grid-template-columns:1fr 1fr; gap:28px 36px; }
  body.page-contact .ftop > div:first-child { grid-column:span 2; }
  body.page-contact .ftop > div:last-child { display:block; }
}

/* Mobile ≤560px */
@media (max-width:380px) {
  body.page-contact header { width:calc(100% - 24px); }
  body.page-contact .hw { gap:6px; }
  body.page-contact .logo { font-size:17px; }

  body.page-contact .wrap { padding:0 16px; }
  body.page-contact .wrap > *:first-child { margin-top:72px; }

  /* Hero */
  body.page-contact .page-hero-inner { padding:36px 24px 0; }
  body.page-contact .hero-left h1 { font-size:32px; letter-spacing:-1px; }
  body.page-contact .hero-badges { gap:6px; }
  body.page-contact .hero-badge { font-size:11px; padding:5px 10px; }

  /* Channels */
  body.page-contact .channels-grid { grid-template-columns:1fr; }

  /* Form */
  body.page-contact .form-row { grid-template-columns:1fr; }
  body.page-contact .form-card { padding:22px 20px; }
  body.page-contact .form-card h2 { font-size:20px; }

  /* Sidebar */
  body.page-contact .contact-sidebar { flex-direction:column; }
  body.page-contact .contact-sidebar > * { flex:none; width:100%; }

  /* FAQ */
  body.page-contact .faq-cats { }
  body.page-contact .faq-q { padding:16px 18px; }
  body.page-contact .faq-q-text { font-size:13px; }
  body.page-contact .faq-a-inner { padding:14px 18px 18px; }

  /* Map */
  body.page-contact .map-info { padding:22px; }
  body.page-contact .map-info h2 { font-size:18px; }
  body.page-contact .sh .st { font-size:26px; }

  /* Trust */
  body.page-contact .trust-item { flex:1 1 100%; }

  /* Newsletter */
  body.page-contact .nl-banner { padding:32px 24px; }
  body.page-contact .nl-form { flex-direction:column; }
  body.page-contact .nl-btn { width:100%; padding:13px; }
  body.page-contact .nl-left h2 { font-size:22px; }

  /* Footer */
  body.page-contact .ftop { grid-template-columns:1fr; gap:24px; }
  body.page-contact .ftop > div:first-child { grid-column:span 1; }
  body.page-contact .fbot { flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ── HAMBURGER & MOBILE DRAWER (added for consistency) ── */
body.page-contact .hamburger { display:none; }
body.page-contact .mobile-drawer { display:none; }
@media (max-width:1024px) {
  body.page-contact .hamburger { display:flex; }
  body.page-contact header nav { display:none; }
}
@media (max-width:1024px) {
  body.page-contact .mobile-drawer { display:block; }
  body.page-contact .mobile-drawer .md-back { position:fixed; inset:0; background:rgba(0,0,0,0); backdrop-filter:blur(0); z-index:998; transition:background .4s, backdrop-filter .4s; pointer-events:none; }
  body.page-contact .mobile-drawer.on .md-back { background:rgba(0,0,0,.28); backdrop-filter:blur(6px); pointer-events:auto; }
  body.page-contact .md-panel { position:fixed; top:0; right:0; width:min(420px,85vw); height:100vh; background:var(--surface); z-index:999; transform:translateX(100%); transition:transform .5s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; border-left:1.5px solid var(--line); }
  body.page-contact .mobile-drawer.on .md-panel { transform:translateX(0); }
  body.page-contact .md-head { display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:72px; border-bottom:1.5px solid var(--line); }
  body.page-contact .md-head .logo { font-size:22px; font-weight:700; letter-spacing:-.5px; }
  body.page-contact .md-head .logo em { color:var(--brand); font-style:normal; }
  body.page-contact .md-close { width:36px; height:36px; border-radius:50%; background:var(--line-soft); display:flex; align-items:center; justify-content:center; }
  body.page-contact .md-body { flex:1; overflow-y:auto; padding:20px 24px 40px; }
  
  
}
@media (max-width:768px) {
  body.page-contact .hamburger { display:flex; }
  body.page-contact header nav { display:none; }
  body.page-contact .search-pill { display:none; }
}

/* ============================================================
   faq.html
   ============================================================ */

/* ===== faq.html ===== */

/* ── DESIGN TOKENS ── */
body.page-faq body.no-scroll { overflow:hidden; }
body.page-faq a { text-decoration:none; color:inherit; }
body.page-faq button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-faq img { display:block; max-width:100%; }
body.page-faq input, body.page-faq select { font-family:inherit; }
body.page-faq a:focus-visible, body.page-faq button:focus-visible, body.page-faq input:focus-visible, body.page-faq summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}

/* ── ANNOUNCEMENT BAR ── */
body.page-faq .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-faq .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-faq .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-faq .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-faq header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-faq header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-faq .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-faq .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-faq .logo em { color:var(--brand); font-style:normal; }
body.page-faq header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-faq .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-faq .ni > a:hover, body.page-faq .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-faq .ni.active > a { color:var(--brand); }
body.page-faq .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-faq .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-faq .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-faq .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-faq .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-faq .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-faq .ib:hover { background:rgba(0,0,0,0.05); }
body.page-faq .ib svg { width:17px; height:17px; }
body.page-faq .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-faq .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-faq .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-faq .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-faq .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-faq .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-faq .bcrumb a:hover { color:var(--ink); }
body.page-faq .bcrumb .sep { color:var(--muted-3); }
body.page-faq .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-faq .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-faq .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-faq .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-faq .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-faq .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-faq .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-faq .chips-row:empty { padding:0; }
body.page-faq .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-faq .fchip:hover { border-color:var(--ink); }
body.page-faq .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-faq .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-faq .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-faq .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-faq .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-faq .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-faq .filters::-webkit-scrollbar { width:5px; }
body.page-faq .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-faq .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-faq .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-faq .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-faq .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-faq .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-faq .fgroup { border-top:1px solid var(--line-soft); }
body.page-faq .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-faq .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-faq .fgroup > summary::-webkit-details-marker { display:none; }
body.page-faq .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-faq .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-faq .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-faq .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-faq .fopt:hover { color:var(--ink); }
body.page-faq .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-faq .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-faq .fopt-mark.radio { border-radius:50%; }
body.page-faq .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-faq .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-faq .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-faq .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-faq .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-faq .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-faq .fopt-text { flex:1; }
body.page-faq .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-faq .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-faq .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-faq .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-faq .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-faq .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-faq .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-faq .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-faq .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-faq .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-faq .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-faq .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-faq .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-faq .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-faq .results { min-width:0; }
body.page-faq .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-faq .t-left { display:flex; align-items:center; gap:14px; }
body.page-faq .t-count { font-size:13px; color:var(--muted-2); }
body.page-faq .t-count strong { color:var(--ink); font-weight:700; }
body.page-faq .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-faq .sortdrop { position:relative; z-index:10; }
body.page-faq .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-faq .sortbtn:hover { border-color:var(--ink); }
body.page-faq .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-faq .sortbtn .val { font-weight:600; }
body.page-faq .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-faq .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-faq .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-faq .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-faq .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-faq .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-faq .sortopt.on { color:var(--ink); font-weight:600; }
body.page-faq .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-faq .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-faq .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-faq .vbtn:hover { color:var(--ink); }
body.page-faq .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-faq .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-faq .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-faq .fbtn-mobile svg { width:14px; height:14px; }
body.page-faq .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-faq .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-faq .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-faq .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-faq .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-faq .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-faq .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-faq .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-faq .pgrid.list-view .pcard-quick { display:none; }
body.page-faq .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-faq .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-faq .pgrid.list-view .pcard-name { font-size:16px; }
body.page-faq .pgrid.list-view .pcard-var { font-size:13px; }
body.page-faq .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-faq .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-faq .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-faq .pcard { cursor:pointer; }
body.page-faq .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-faq .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-faq .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-faq .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-faq .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-faq .bg-new { background:var(--ink); color:#fff; }
body.page-faq .bg-hot { background:var(--brand); color:#fff; }
body.page-faq .bg-sale { background:#FF9500; color:#fff; }
body.page-faq .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-faq .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-faq .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-faq .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-faq .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-faq .pcard:hover .pcard-quick { bottom:12px; }
body.page-faq .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-faq .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-faq .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-faq .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-faq .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-faq .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-faq .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-faq .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-faq .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-faq .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-faq .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-faq .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-faq .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-faq footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-faq .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-faq .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-faq .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-faq .flogo em { color:var(--brand); font-style:normal; }
body.page-faq .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-faq .fsocs { display:flex; gap:8px; }
body.page-faq .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-faq .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-faq .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-faq .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-faq .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-faq .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-faq .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-faq .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-faq .fpay { display:flex; gap:8px; }
body.page-faq .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-faq .wrap, body.page-faq .fw { padding:0 28px; }
  body.page-faq header { width:calc(100% - 32px); }
  body.page-faq .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-faq header nav { gap:0; }
  body.page-faq .ni > a { padding:7px 10px; font-size:12.5px; }
  body.page-faq .search-pill span { display:none; }
  body.page-faq .search-pill { padding:8px 10px; }

  body.page-faq .shop-title { font-size:34px; }
  body.page-faq .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-faq .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-faq .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-faq .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-faq .hamburger { display:flex; }
  body.page-faq header nav, body.page-faq header .search-pill { display:none; }
  body.page-faq header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-faq .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-faq .logo { font-size:17px; }
  body.page-faq .ib { width:40px; height:40px; }
  body.page-faq .ib svg { width:18px; height:18px; }
  body.page-faq .ann-bar { padding:8px 0; }
  body.page-faq .ann-track { gap:36px; }
  body.page-faq .ann-track span { font-size:11px; }
  body.page-faq .wrap, body.page-faq .fw { padding:0 16px; }

  /* hero */
  body.page-faq .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-faq .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-faq .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-faq .shop-meta { padding-bottom:0; }
  body.page-faq .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-faq .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-faq .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-faq .filters.on { transform:translateY(0); }
  body.page-faq .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-faq .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-faq .fgroup > summary { padding:18px 20px 14px; }
  body.page-faq .fgroup-body { padding:0 20px 18px; }
  body.page-faq .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-faq .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-faq .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-faq .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-faq .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-faq .toolbar { gap:10px; padding-bottom:14px; }
  body.page-faq .t-left { gap:10px; flex:1; }
  body.page-faq .sortbtn .lbl { display:none; }
  body.page-faq .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-faq .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-faq .pcard-img { border-radius:var(--radius-sm); }
  body.page-faq .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-faq .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-faq .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-faq .pcard-name { font-size:13px; }
  body.page-faq .pcard-p { font-size:14px; }

  /* footer */
  body.page-faq footer { padding:40px 0 28px; margin-top:48px; }
  body.page-faq .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-faq .ftop > div:first-child { grid-column:1/-1; }
  body.page-faq .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-faq .filters .f-head-clear-desktop { display:none; }
  body.page-faq .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-faq .hw { padding:0 4px 0 14px; }
  body.page-faq .logo { font-size:16px; }
  body.page-faq .ib { width:36px; height:36px; }
  body.page-faq .pgrid { gap:14px 10px; }
  body.page-faq .pcard-name, body.page-faq .pcard-p { font-size:12.5px; }
}

/* ── PAGE HERO ── */
body.page-faq .page-hero { padding:24px 0 0; margin-bottom:24px; }
body.page-faq .page-hero-inner {
  background:#1D1D1F; border-radius:28px; padding:72px 72px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:380px;
}
body.page-faq .page-hero-inner::before {
  content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px);
}
body.page-faq .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-faq .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-faq .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-faq .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-faq .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-faq .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }

/* ── FAQ SECTION ── */
body.page-faq .faq-s { padding:64px 0 72px; }
body.page-faq .faq-grid { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
body.page-faq .faq-left { position:sticky; top:100px; }
body.page-faq .faq-left .st { margin-bottom:16px; }
body.page-faq .faq-left p { font-size:13px; color:#86868B; line-height:1.7; margin-bottom:24px; }
body.page-faq .faq-cats { display:flex; flex-direction:column; gap:6px; }
body.page-faq .faq-cat {
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500;
  color:#515154; cursor:pointer; transition:all .2s; text-align:left; border:1.5px solid transparent; background:none;
}
body.page-faq .faq-cat.on { background:#fff; color:#1D1D1F; font-weight:600; border-color:#E8E8ED; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-faq .faq-cat:hover:not(.on) { background:rgba(0,0,0,0.03); color:#1D1D1F; }

body.page-faq .faq-list { display:flex; flex-direction:column; gap:12px; }
body.page-faq .faq-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-faq .faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; cursor:pointer; gap:16px; transition:background .2s; border:none; background:none; width:100%; text-align:left; font:inherit;
}
body.page-faq .faq-q:hover { background:#FAFAFA; }
body.page-faq .faq-q-text { font-size:14px; font-weight:600; color:#1D1D1F; line-height:1.4; }
body.page-faq .faq-chevron {
  width:28px; height:28px; border-radius:50%; background:#F5F5F7;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s, transform .25s;
}
body.page-faq .faq-chevron svg { width:12px; height:12px; color:#515154; }
body.page-faq .faq-item.open .faq-chevron { background:#FF2D55; transform:rotate(180deg); }
body.page-faq .faq-item.open .faq-chevron svg { color:#fff; }
body.page-faq .faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.25,1,.5,1);
}
body.page-faq .faq-item.open .faq-a { max-height:400px; }
body.page-faq .faq-a-inner { padding:0 24px 22px; font-size:13px; color:#86868B; line-height:1.75; border-top:1px solid #F5F5F7; padding-top:18px; }
body.page-faq .faq-a-inner a { color:#FF2D55; font-weight:500; }

/* ── CTA BANNER ── */
body.page-faq .cta-s { padding:0 0 72px; }
body.page-faq .cta-banner {
  background:#1D1D1F; border-radius:24px; padding:52px 64px;
  display:flex; align-items:center; justify-content:space-between; gap:48px;
  position:relative; overflow:hidden;
}
body.page-faq .cta-banner::before {
  content:''; position:absolute; top:-80px; right:-80px; width:350px; height:350px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(50px);
}
body.page-faq .cta-left { position:relative; z-index:1; }
body.page-faq .cta-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:8px; }
body.page-faq .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); line-height:1.6; }
body.page-faq .cta-right { position:relative; z-index:1; display:flex; gap:12px; flex-shrink:0; }
body.page-faq .btn-w { background:#fff; color:#1D1D1F; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; }
body.page-faq .btn-w:hover { transform:scale(1.03); }
body.page-faq .btn-o { background:rgba(255,255,255,0.08); color:#fff; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:500; border:1px solid rgba(255,255,255,0.15); transition:all .2s; }
body.page-faq .btn-o:hover { background:rgba(255,255,255,0.15); }

/* ── SHARED LABELS ── */
body.page-faq .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-faq .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-faq .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-faq .page-hero-inner { padding:56px 56px 0; gap:40px; }
  body.page-faq .hero-left h1 { font-size:44px; }
  body.page-faq .faq-grid { grid-template-columns:240px 1fr; gap:32px; }
  body.page-faq .cta-banner { padding:40px 48px; }
}
@media (max-width:768px) {
  body.page-faq .page-hero-inner { grid-template-columns:1fr; padding:48px 36px 0; min-height:auto; }
  body.page-faq .hero-right { display:none; }
  body.page-faq .hero-left { padding-bottom:48px; }
  body.page-faq .hero-left h1 { font-size:38px; }
  body.page-faq .faq-grid { grid-template-columns:1fr; gap:24px; }
  body.page-faq .faq-left { position:static; }
  body.page-faq .faq-cats { flex-direction:row; flex-wrap:wrap; gap:6px; }
  body.page-faq .faq-cat { padding:7px 14px; }
  body.page-faq .cta-banner { flex-direction:column; align-items:flex-start; gap:24px; padding:36px 28px; }
  body.page-faq .cta-right { width:100%; flex-direction:column; }
  body.page-faq .btn-w, body.page-faq .btn-o { width:100%; text-align:center; }
}
@media (max-width:380px) {
  body.page-faq .page-hero-inner { padding:36px 24px 0; }
  body.page-faq .hero-left h1 { font-size:32px; }
  body.page-faq .faq-q { padding:16px 18px; }
  body.page-faq .faq-q-text { font-size:13px; }
  body.page-faq .faq-a-inner { padding:14px 18px 18px; }
}

/* ============================================================
   blog.html
   ============================================================ */

/* ===== blog.html ===== */

/* ── DESIGN TOKENS ── */
/* ══ PDP WC-COMPAT ══════════════════════════════════════════════════════════ */
/* pdp-sticky show state (JS-driven) */
:is(body.page-pdp, body.single-product) .pdp-sticky.show {
  display: block;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}
:is(body.page-pdp, body.single-product) .pdp-sticky-inner {
  max-width: 1360px; margin: 0 auto; padding: 12px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Tab btn underline */
:is(body.page-pdp, body.single-product) .tab-btn::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:2px; background:var(--ink);
  transform:scaleX(0); transition:transform .2s;
}
:is(body.page-pdp, body.single-product) .tab-btn.on::after { transform:scaleX(1); }
/* Reviews toolbar select */
:is(body.page-pdp, body.single-product) .reviews-toolbar select {
  padding:7px 12px; border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:13px; font-family:inherit; color:var(--ink); background:#fff; outline:none;
}
/* Qty value */
.qty-val { min-width:28px; text-align:center; font-size:15px; font-weight:600; user-select:none; }
/* WC form default reset */
:is(body.page-pdp, body.single-product) .variations_form { margin:0; }
:is(body.page-pdp, body.single-product) .woocommerce-variation-price { display:none; }



body.page-blog.no-scroll { overflow:hidden; }
body.page-blog input, body.page-blog select { font-family:inherit; }
body.page-blog.no-scroll { overflow:hidden; }
body.page-blog a { text-decoration:none; color:inherit; }
body.page-blog button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-blog img { display:block; max-width:100%; }
body.page-blog input, body.page-blog select { font-family:inherit; }
body.page-blog a:focus-visible, body.page-blog button:focus-visible, body.page-blog input:focus-visible, body.page-blog summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-blog .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-blog .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-blog .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-blog .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-blog .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-blog header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-blog header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-blog .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-blog .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-blog .logo em { color:var(--brand); font-style:normal; }
body.page-blog header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-blog .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-blog .ni > a:hover, body.page-blog .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-blog .ni.active > a { color:var(--brand); }
body.page-blog .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-blog .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-blog .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-blog .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-blog .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-blog .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-blog .ib:hover { background:rgba(0,0,0,0.05); }
body.page-blog .ib svg { width:17px; height:17px; }
body.page-blog .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-blog .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-blog .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-blog .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-blog .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-blog .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-blog .bcrumb a:hover { color:var(--ink); }
body.page-blog .bcrumb .sep { color:var(--muted-3); }
body.page-blog .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-blog .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-blog .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-blog .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-blog .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-blog .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-blog .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-blog .chips-row:empty { padding:0; }
body.page-blog .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-blog .fchip:hover { border-color:var(--ink); }
body.page-blog .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-blog .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-blog .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-blog .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-blog .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-blog .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-blog .filters::-webkit-scrollbar { width:5px; }
body.page-blog .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-blog .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-blog .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-blog .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-blog .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-blog .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-blog .fgroup { border-top:1px solid var(--line-soft); }
body.page-blog .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-blog .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-blog .fgroup > summary::-webkit-details-marker { display:none; }
body.page-blog .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-blog .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-blog .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-blog .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-blog .fopt:hover { color:var(--ink); }
body.page-blog .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-blog .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-blog .fopt-mark.radio { border-radius:50%; }
body.page-blog .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-blog .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-blog .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-blog .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-blog .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-blog .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-blog .fopt-text { flex:1; }
body.page-blog .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-blog .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-blog .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-blog .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-blog .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-blog .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-blog .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-blog .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-blog .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-blog .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-blog .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-blog .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-blog .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-blog .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-blog .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-blog .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-blog .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-blog .results { min-width:0; }
body.page-blog .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-blog .t-left { display:flex; align-items:center; gap:14px; }
body.page-blog .t-count { font-size:13px; color:var(--muted-2); }
body.page-blog .t-count strong { color:var(--ink); font-weight:700; }
body.page-blog .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-blog .sortdrop { position:relative; z-index:10; }
body.page-blog .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-blog .sortbtn:hover { border-color:var(--ink); }
body.page-blog .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-blog .sortbtn .val { font-weight:600; }
body.page-blog .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-blog .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-blog .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-blog .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-blog .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-blog .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-blog .sortopt.on { color:var(--ink); font-weight:600; }
body.page-blog .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-blog .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-blog .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-blog .vbtn:hover { color:var(--ink); }
body.page-blog .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-blog .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-blog .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-blog .fbtn-mobile svg { width:14px; height:14px; }
body.page-blog .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-blog .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-blog .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-blog .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-blog .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-blog .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-blog .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-blog .pgrid.list-view .pcard-quick { display:none; }
body.page-blog .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-blog .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-blog .pgrid.list-view .pcard-name { font-size:16px; }
body.page-blog .pgrid.list-view .pcard-var { font-size:13px; }
body.page-blog .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-blog .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-blog .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-blog .pcard { cursor:pointer; }
body.page-blog .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-blog .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-blog .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-blog .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-blog .bg-new { background:var(--ink); color:#fff; }
body.page-blog .bg-hot { background:var(--brand); color:#fff; }
body.page-blog .bg-sale { background:#FF9500; color:#fff; }
body.page-blog .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-blog .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-blog .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-blog .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-blog .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-blog .pcard:hover .pcard-quick { bottom:12px; }
body.page-blog .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-blog .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-blog .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-blog .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-blog .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-blog .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-blog .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-blog .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-blog .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-blog .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-blog .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-blog .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-blog .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-blog footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-blog .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-blog .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-blog .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-blog .flogo em { color:var(--brand); font-style:normal; }
body.page-blog .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-blog .fsocs { display:flex; gap:8px; }
body.page-blog .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-blog .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-blog .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-blog .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-blog .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-blog .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-blog .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-blog .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-blog .fpay { display:flex; gap:8px; }
body.page-blog .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-blog .wrap, body.page-blog .fw { padding:0 28px; }
  body.page-blog header { width:calc(100% - 32px); }
  body.page-blog .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-blog header nav { gap:0; }
  body.page-blog .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-blog .search-pill span { display:none; }
  body.page-blog .search-pill { padding:8px 10px; }

  body.page-blog .shop-title { font-size:34px; }
  body.page-blog .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-blog .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-blog .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-blog .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-blog .hamburger { display:flex; }
  body.page-blog header nav, body.page-blog header .search-pill { display:none; }
  body.page-blog header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-blog .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-blog .logo { font-size:17px; }
  body.page-blog .ib { width:40px; height:40px; }
  body.page-blog .ib svg { width:18px; height:18px; }
  body.page-blog .ann-bar { padding:8px 0; }
  body.page-blog .ann-track { gap:36px; }
  body.page-blog .ann-track span { font-size:11px; }
  body.page-blog .wrap, body.page-blog .fw { padding:0 16px; }

  /* hero */
  body.page-blog .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-blog .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-blog .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-blog .shop-meta { padding-bottom:0; }
  body.page-blog .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-blog .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-blog .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-blog .filters.on { transform:translateY(0); }
  body.page-blog .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-blog .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-blog .fgroup > summary { padding:18px 20px 14px; }
  body.page-blog .fgroup-body { padding:0 20px 18px; }
  body.page-blog .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-blog .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-blog .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-blog .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-blog .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-blog .toolbar { gap:10px; padding-bottom:14px; }
  body.page-blog .t-left { gap:10px; flex:1; }
  body.page-blog .sortbtn .lbl { display:none; }
  body.page-blog .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-blog .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-blog .pcard-img { border-radius:var(--radius-sm); }
  body.page-blog .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-blog .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-blog .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-blog .pcard-name { font-size:13px; }
  body.page-blog .pcard-p { font-size:14px; }

  /* footer */
  body.page-blog footer { padding:40px 0 28px; margin-top:48px; }
  body.page-blog .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-blog .ftop > div:first-child { grid-column:1/-1; }
  body.page-blog .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-blog .filters .f-head-clear-desktop { display:none; }
  body.page-blog .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-blog .hw { padding:0 4px 0 14px; }
  body.page-blog .logo { font-size:16px; }
  body.page-blog .ib { width:36px; height:36px; }
  body.page-blog .pgrid { gap:14px 10px; }
  body.page-blog .pcard-name, body.page-blog .pcard-p { font-size:12.5px; }
}


/* ── PAGE HERO ── */
body.page-blog .page-hero { padding:24px 0 0; margin-bottom:24px; }
body.page-blog .page-hero-inner {
  background:#1D1D1F; border-radius:28px; padding:72px 72px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:380px;
}
body.page-blog .page-hero-inner::before {
  content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px);
}
body.page-blog .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-blog .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-blog .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-blog .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-blog .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-blog .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }

/* ── FILTER TABS ── */
body.page-blog .blog-filters { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
body.page-blog .bf { padding:8px 18px; border-radius:100px; font-size:13px; font-weight:500; cursor:pointer; border:1.5px solid #E8E8ED; color:#86868B; transition:all .2s; background:#fff; }
body.page-blog .bf.on { background:#1D1D1F; color:#fff; border-color:#1D1D1F; }
body.page-blog .bf:hover:not(.on) { border-color:#1D1D1F; color:#1D1D1F; }

/* ── BLOG GRID ── */
body.page-blog .blog-s { padding:64px 0 72px; }
body.page-blog .blogrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.page-blog .blogc { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; }
body.page-blog .blogc:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-blog .blogc:first-child { grid-column:span 2; }
body.page-blog .blogc:first-child .bimg { height:320px; }
body.page-blog .bimg { position:relative; height:220px; overflow:hidden; }
body.page-blog .bimg img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-blog .blogc:hover .bimg img { transform:scale(1.06); }
body.page-blog .bcat {
  position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  padding:5px 12px; border-radius:100px; font-size:11px; font-weight:600; color:#1D1D1F; z-index:2;
}
body.page-blog .bbody2 { padding:22px 24px 24px; }
body.page-blog .bdate { font-size:12px; color:#86868B; margin-bottom:8px; }
body.page-blog .btitle2 { font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.2px; margin-bottom:10px; color:#1D1D1F; }
body.page-blog .blogc:first-child .btitle2 { font-size:22px; }
body.page-blog .bexc { font-size:13px; color:#86868B; line-height:1.6; margin-bottom:14px; }
body.page-blog .bmore { font-size:13px; font-weight:600; color:#FF2D55; transition:opacity .2s; }
body.page-blog .bmore:hover { opacity:.75; }
body.page-blog .bmeta { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid #F5F5F7; }
body.page-blog .bav { width:24px; height:24px; border-radius:50%; object-fit:cover; }
body.page-blog .bauth { font-size:12px; font-weight:600; color:#515154; }
body.page-blog .btime { font-size:11px; color:#AEAEB2; margin-left:auto; }

/* ── NEWSLETTER ── */
body.page-blog .nl-s { padding:0 0 72px; }
body.page-blog .nl-banner {
  background:#1D1D1F; border-radius:24px; padding:52px 64px;
  display:flex; align-items:center; gap:80px; position:relative; overflow:hidden;
}
body.page-blog .nl-banner::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.2) 0%,transparent 70%); filter:blur(40px); }
body.page-blog .nl-left { flex:1; position:relative; z-index:1; }
body.page-blog .nl-left .sl { color:rgba(255,255,255,0.3); }
body.page-blog .nl-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-blog .nl-left p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.65; }
body.page-blog .nl-right { min-width:380px; position:relative; z-index:1; }
body.page-blog .nl-form { display:flex; gap:10px; }
body.page-blog .nl-in { flex:1; padding:12px 18px; border-radius:100px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; outline:none; font-family:inherit; }
body.page-blog .nl-in::placeholder { color:rgba(255,255,255,0.3); }
body.page-blog .nl-in:focus { border-color:rgba(255,45,85,0.6); }
body.page-blog .nl-btn { background:#FF2D55; color:#fff; padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .2s; }
body.page-blog .nl-btn:hover { background:#FF4D6A; }

/* ── SHARED ── */
body.page-blog .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-blog .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-blog .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-blog .page-hero-inner { padding:56px 56px 0; gap:40px; }
  body.page-blog .hero-left h1 { font-size:44px; }
  body.page-blog .blogrid { grid-template-columns:1fr 1fr; }
  body.page-blog .blogc:first-child { grid-column:span 2; }
  body.page-blog .nl-banner { padding:40px 48px; gap:48px; }
}
@media (max-width:768px) {
  body.page-blog .page-hero-inner { grid-template-columns:1fr; padding:48px 36px 0; min-height:auto; }
  body.page-blog .hero-right { display:none; }
  body.page-blog .hero-left { padding-bottom:48px; }
  body.page-blog .hero-left h1 { font-size:38px; }
  body.page-blog .blogrid { grid-template-columns:1fr; }
  body.page-blog .blogc:first-child { grid-column:span 1; }
  body.page-blog .blogc:first-child .bimg { height:220px; }
  body.page-blog .bimg { height:200px; }
  body.page-blog .nl-banner { flex-direction:column; gap:28px; padding:36px 28px; }
  body.page-blog .nl-right { min-width:unset; width:100%; }
}
@media (max-width:380px) {
  body.page-blog .page-hero-inner { padding:36px 24px 0; }
  body.page-blog .hero-left h1 { font-size:32px; }
  body.page-blog .blog-filters { gap:6px; }
  body.page-blog .bf { padding:6px 12px; font-size:12px; }
  body.page-blog .nl-banner { padding:32px 24px; }
  body.page-blog .nl-form { flex-direction:column; }
  body.page-blog .nl-btn { width:100%; padding:13px; }
  body.page-blog .nl-left h2 { font-size:22px; }
}

/* ============================================================
   blog-post.html
   ============================================================ */

/* ===== blog-post.html ===== */

/* ── DESIGN TOKENS ── */


body.page-blog-post.no-scroll { overflow:hidden; }
body.page-blog-post input, body.page-blog-post select { font-family:inherit; }
body.page-blog-post.no-scroll { overflow:hidden; }
body.page-blog-post a { text-decoration:none; color:inherit; }
body.page-blog-post button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-blog-post img { display:block; max-width:100%; }
body.page-blog-post input, body.page-blog-post select { font-family:inherit; }
body.page-blog-post a:focus-visible, body.page-blog-post button:focus-visible, body.page-blog-post input:focus-visible, body.page-blog-post summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-blog-post .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-blog-post .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-blog-post .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-blog-post .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-blog-post .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-blog-post header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-blog-post header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-blog-post .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-blog-post .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-blog-post .logo em { color:var(--brand); font-style:normal; }
body.page-blog-post header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-blog-post .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-blog-post .ni > a:hover, body.page-blog-post .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-blog-post .ni.active > a { color:var(--brand); }
body.page-blog-post .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-blog-post .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-blog-post .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-blog-post .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-blog-post .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-blog-post .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-blog-post .ib:hover { background:rgba(0,0,0,0.05); }
body.page-blog-post .ib svg { width:17px; height:17px; }
body.page-blog-post .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-blog-post .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-blog-post .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-blog-post .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-blog-post .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-blog-post .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-blog-post .bcrumb a:hover { color:var(--ink); }
body.page-blog-post .bcrumb .sep { color:var(--muted-3); }
body.page-blog-post .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-blog-post .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-blog-post .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-blog-post .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-blog-post .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-blog-post .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-blog-post .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-blog-post .chips-row:empty { padding:0; }
body.page-blog-post .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-blog-post .fchip:hover { border-color:var(--ink); }
body.page-blog-post .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-blog-post .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-blog-post .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-blog-post .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-blog-post .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-blog-post .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-blog-post .filters::-webkit-scrollbar { width:5px; }
body.page-blog-post .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-blog-post .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-blog-post .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-blog-post .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-blog-post .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-blog-post .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-blog-post .fgroup { border-top:1px solid var(--line-soft); }
body.page-blog-post .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-blog-post .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-blog-post .fgroup > summary::-webkit-details-marker { display:none; }
body.page-blog-post .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-blog-post .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-blog-post .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-blog-post .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-blog-post .fopt:hover { color:var(--ink); }
body.page-blog-post .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-blog-post .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-blog-post .fopt-mark.radio { border-radius:50%; }
body.page-blog-post .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-blog-post .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-blog-post .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-blog-post .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-blog-post .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-blog-post .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-blog-post .fopt-text { flex:1; }
body.page-blog-post .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-blog-post .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-blog-post .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-blog-post .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-blog-post .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-blog-post .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-blog-post .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-blog-post .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-blog-post .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-blog-post .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-blog-post .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-blog-post .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-blog-post .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-blog-post .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-blog-post .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-blog-post .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-blog-post .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-blog-post .results { min-width:0; }
body.page-blog-post .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-blog-post .t-left { display:flex; align-items:center; gap:14px; }
body.page-blog-post .t-count { font-size:13px; color:var(--muted-2); }
body.page-blog-post .t-count strong { color:var(--ink); font-weight:700; }
body.page-blog-post .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-blog-post .sortdrop { position:relative; z-index:10; }
body.page-blog-post .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-blog-post .sortbtn:hover { border-color:var(--ink); }
body.page-blog-post .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-blog-post .sortbtn .val { font-weight:600; }
body.page-blog-post .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-blog-post .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-blog-post .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-blog-post .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-blog-post .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-blog-post .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-blog-post .sortopt.on { color:var(--ink); font-weight:600; }
body.page-blog-post .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-blog-post .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-blog-post .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-blog-post .vbtn:hover { color:var(--ink); }
body.page-blog-post .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-blog-post .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-blog-post .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-blog-post .fbtn-mobile svg { width:14px; height:14px; }
body.page-blog-post .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-blog-post .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-blog-post .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-blog-post .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-blog-post .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog-post .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-blog-post .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-blog-post .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-blog-post .pgrid.list-view .pcard-quick { display:none; }
body.page-blog-post .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-blog-post .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-blog-post .pgrid.list-view .pcard-name { font-size:16px; }
body.page-blog-post .pgrid.list-view .pcard-var { font-size:13px; }
body.page-blog-post .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-blog-post .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-blog-post .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-blog-post .pcard { cursor:pointer; }
body.page-blog-post .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-blog-post .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog-post .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-blog-post .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-blog-post .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-blog-post .bg-new { background:var(--ink); color:#fff; }
body.page-blog-post .bg-hot { background:var(--brand); color:#fff; }
body.page-blog-post .bg-sale { background:#FF9500; color:#fff; }
body.page-blog-post .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-blog-post .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-blog-post .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-blog-post .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-blog-post .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-blog-post .pcard:hover .pcard-quick { bottom:12px; }
body.page-blog-post .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-blog-post .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-blog-post .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-blog-post .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-blog-post .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-blog-post .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-blog-post .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-blog-post .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-blog-post .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-blog-post .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-blog-post .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-blog-post .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-blog-post .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-blog-post footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-blog-post .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-blog-post .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-blog-post .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-blog-post .flogo em { color:var(--brand); font-style:normal; }
body.page-blog-post .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-blog-post .fsocs { display:flex; gap:8px; }
body.page-blog-post .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-blog-post .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-blog-post .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-blog-post .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-blog-post .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-blog-post .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-blog-post .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-blog-post .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-blog-post .fpay { display:flex; gap:8px; }
body.page-blog-post .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-blog-post .wrap, body.page-blog-post .fw { padding:0 28px; }
  body.page-blog-post header { width:calc(100% - 32px); }
  body.page-blog-post .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-blog-post header nav { gap:0; }
  body.page-blog-post .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-blog-post .search-pill span { display:none; }
  body.page-blog-post .search-pill { padding:8px 10px; }

  body.page-blog-post .shop-title { font-size:34px; }
  body.page-blog-post .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-blog-post .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-blog-post .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-blog-post .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-blog-post .hamburger { display:flex; }
  body.page-blog-post header nav, body.page-blog-post header .search-pill { display:none; }
  body.page-blog-post header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-blog-post .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-blog-post .logo { font-size:17px; }
  body.page-blog-post .ib { width:40px; height:40px; }
  body.page-blog-post .ib svg { width:18px; height:18px; }
  body.page-blog-post .ann-bar { padding:8px 0; }
  body.page-blog-post .ann-track { gap:36px; }
  body.page-blog-post .ann-track span { font-size:11px; }
  body.page-blog-post .wrap, body.page-blog-post .fw { padding:0 16px; }

  /* hero */
  body.page-blog-post .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-blog-post .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-blog-post .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-blog-post .shop-meta { padding-bottom:0; }
  body.page-blog-post .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-blog-post .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-blog-post .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-blog-post .filters.on { transform:translateY(0); }
  body.page-blog-post .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-blog-post .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-blog-post .fgroup > summary { padding:18px 20px 14px; }
  body.page-blog-post .fgroup-body { padding:0 20px 18px; }
  body.page-blog-post .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-blog-post .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-blog-post .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-blog-post .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-blog-post .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-blog-post .toolbar { gap:10px; padding-bottom:14px; }
  body.page-blog-post .t-left { gap:10px; flex:1; }
  body.page-blog-post .sortbtn .lbl { display:none; }
  body.page-blog-post .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-blog-post .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-blog-post .pcard-img { border-radius:var(--radius-sm); }
  body.page-blog-post .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-blog-post .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-blog-post .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-blog-post .pcard-name { font-size:13px; }
  body.page-blog-post .pcard-p { font-size:14px; }

  /* footer */
  body.page-blog-post footer { padding:40px 0 28px; margin-top:48px; }
  body.page-blog-post .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-blog-post .ftop > div:first-child { grid-column:1/-1; }
  body.page-blog-post .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-blog-post .filters .f-head-clear-desktop { display:none; }
  body.page-blog-post .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-blog-post .hw { padding:0 4px 0 14px; }
  body.page-blog-post .logo { font-size:16px; }
  body.page-blog-post .ib { width:36px; height:36px; }
  body.page-blog-post .pgrid { gap:14px 10px; }
  body.page-blog-post .pcard-name, body.page-blog-post .pcard-p { font-size:12.5px; }
}


/* ── ARTICLE HERO ── */
body.page-blog-post .post-hero { padding:24px 0 0; }
body.page-blog-post .post-hero-inner {
  position:relative; border-radius:28px; overflow:hidden; min-height:520px;
  display:flex; align-items:flex-end;
}
body.page-blog-post .post-hero-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
body.page-blog-post .post-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}
body.page-blog-post .post-hero-content {
  position:relative; z-index:2; padding:64px 72px 48px; max-width:800px;
}
body.page-blog-post .post-hero-content .bcat {
  display:inline-flex; background:var(--brand); color:#fff; padding:5px 14px; border-radius:100px;
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:16px;
}
body.page-blog-post .post-hero-content h1 { font-size:48px; font-weight:800; letter-spacing:-1.2px; line-height:1.05; color:#fff; margin-bottom:20px; }
body.page-blog-post .post-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
body.page-blog-post .post-meta img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
body.page-blog-post .post-meta-name { font-size:14px; font-weight:600; color:#fff; }
body.page-blog-post .post-meta-date { font-size:13px; color:rgba(255,255,255,0.55); }
body.page-blog-post .post-meta-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.4); }

/* ── ARTICLE BODY ── */
body.page-blog-post .post-s { padding:48px 0 72px; }
body.page-blog-post .post-grid { display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; }
body.page-blog-post .post-content { font-size:15px; line-height:1.75; color:var(--ink-2); }
body.page-blog-post .post-content h2 { font-size:26px; font-weight:700; letter-spacing:-.4px; margin:40px 0 16px; color:var(--ink); line-height:1.2; }
body.page-blog-post .post-content h3 { font-size:19px; font-weight:700; margin:28px 0 12px; color:var(--ink); }
body.page-blog-post .post-content p { margin-bottom:16px; }
body.page-blog-post .post-content blockquote {
  border-left:3px solid var(--brand); padding:12px 24px; margin:24px 0;
  background:var(--brand-soft); border-radius:0 12px 12px 0; font-style:italic;
}
body.page-blog-post .post-content blockquote p { margin:0; color:var(--ink-2); }
body.page-blog-post .post-content ul { margin:16px 0; padding-left:24px; }
body.page-blog-post .post-content li { margin-bottom:8px; }
body.page-blog-post .post-content img { width:100%; border-radius:16px; margin:24px 0; }
body.page-blog-post .post-content figcaption { font-size:12px; color:var(--muted-2); text-align:center; margin-top:-16px; margin-bottom:24px; }

/* ── SHARE BAR ── */
body.page-blog-post .share-bar { display:flex; align-items:center; gap:12px; padding:20px 0; margin:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
body.page-blog-post .share-label { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
body.page-blog-post .share-btn { width:36px; height:36px; border-radius:50%; background:var(--line-soft); display:flex; align-items:center; justify-content:center; transition:background .2s; }
body.page-blog-post .share-btn:hover { background:var(--brand); color:#fff; }
body.page-blog-post .share-btn svg { width:15px; height:15px; }

/* ── AUTHOR CARD ── */
body.page-blog-post .author-card { background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); margin-top:32px; }
body.page-blog-post .author-card-inner { display:flex; gap:18px; }
body.page-blog-post .author-card img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
body.page-blog-post .author-info { }
body.page-blog-post .author-name { font-size:16px; font-weight:700; margin-bottom:2px; }
body.page-blog-post .author-role { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
body.page-blog-post .author-bio { font-size:13px; color:var(--muted); line-height:1.6; }

/* ── SIDEBAR ── */
body.page-blog-post .post-sidebar { display:flex; flex-direction:column; gap:24px; position:sticky; top:100px; }
body.page-blog-post .sidebar-block { background:#fff; border-radius:20px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-blog-post .sidebar-title { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
body.page-blog-post .sidebar-link { display:block; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px; font-weight:500; color:var(--ink); transition:color .2s; }
body.page-blog-post .sidebar-link:hover { color:var(--brand); }
body.page-blog-post .sidebar-link:last-child { border-bottom:none; }
body.page-blog-post .sidebar-tags { display:flex; flex-wrap:wrap; gap:8px; }
body.page-blog-post .tag { padding:6px 14px; border-radius:100px; background:var(--line-soft); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; transition:all .2s; }
body.page-blog-post .tag:hover { background:var(--brand); color:#fff; }

/* ── RELATED ARTICLES ── */
body.page-blog-post .related-s { padding:0 0 72px; }
body.page-blog-post .related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.page-blog-post .rcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; }
body.page-blog-post .rcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-blog-post .rcard-img { height:160px; overflow:hidden; }
body.page-blog-post .rcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-blog-post .rcard:hover .rcard-img img { transform:scale(1.06); }
body.page-blog-post .rcard-body { padding:18px 20px 22px; }
body.page-blog-post .rcard-date { font-size:11px; color:var(--muted-2); margin-bottom:6px; }
body.page-blog-post .rcard-title { font-size:15px; font-weight:700; line-height:1.3; color:var(--ink); }

/* ── SHARED ── */
body.page-blog-post .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-blog-post .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-blog-post .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-blog-post .post-hero-content { padding:48px 48px 36px; }
  body.page-blog-post .post-hero-content h1 { font-size:40px; }
  body.page-blog-post .post-grid { grid-template-columns:1fr 260px; gap:32px; }
  body.page-blog-post .related-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  body.page-blog-post .post-hero-inner { min-height:420px; }
  body.page-blog-post .post-hero-content { padding:36px 28px 28px; }
  body.page-blog-post .post-hero-content h1 { font-size:32px; letter-spacing:-.8px; }
  body.page-blog-post .post-grid { grid-template-columns:1fr; }
  body.page-blog-post .post-sidebar { position:static; }
  body.page-blog-post .related-grid { grid-template-columns:1fr; }
  body.page-blog-post .share-bar { flex-wrap:wrap; }
}
@media (max-width:380px) {
  body.page-blog-post .post-hero-content { padding:28px 20px 22px; }
  body.page-blog-post .post-hero-content h1 { font-size:26px; }
  body.page-blog-post .post-content h2 { font-size:22px; }
  body.page-blog-post .author-card-inner { flex-direction:column; align-items:center; text-align:center; }
}

/* ============================================================
   about.html
   ============================================================ */

/* ===== about.html ===== */

/* ── DESIGN TOKENS ── */


body.page-about.no-scroll { overflow:hidden; }
body.page-about input, body.page-about select { font-family:inherit; }
body.page-about.no-scroll { overflow:hidden; }
body.page-about a { text-decoration:none; color:inherit; }
body.page-about button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-about img { display:block; max-width:100%; }
body.page-about input, body.page-about select { font-family:inherit; }
body.page-about a:focus-visible, body.page-about button:focus-visible, body.page-about input:focus-visible, body.page-about summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-about .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-about .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-about .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-about .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-about .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-about header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-about header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-about .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-about .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-about .logo em { color:var(--brand); font-style:normal; }
body.page-about header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-about .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-about .ni > a:hover, body.page-about .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-about .ni.active > a { color:var(--brand); }
body.page-about .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-about .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-about .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-about .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-about .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-about .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-about .ib:hover { background:rgba(0,0,0,0.05); }
body.page-about .ib svg { width:17px; height:17px; }
body.page-about .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-about .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-about .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-about .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-about .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-about .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-about .bcrumb a:hover { color:var(--ink); }
body.page-about .bcrumb .sep { color:var(--muted-3); }
body.page-about .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-about .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-about .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-about .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-about .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-about .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-about .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-about .chips-row:empty { padding:0; }
body.page-about .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-about .fchip:hover { border-color:var(--ink); }
body.page-about .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-about .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-about .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-about .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-about .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-about .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-about .filters::-webkit-scrollbar { width:5px; }
body.page-about .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-about .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-about .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-about .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-about .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-about .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-about .fgroup { border-top:1px solid var(--line-soft); }
body.page-about .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-about .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-about .fgroup > summary::-webkit-details-marker { display:none; }
body.page-about .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-about .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-about .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-about .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-about .fopt:hover { color:var(--ink); }
body.page-about .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-about .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-about .fopt-mark.radio { border-radius:50%; }
body.page-about .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-about .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-about .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-about .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-about .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-about .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-about .fopt-text { flex:1; }
body.page-about .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-about .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-about .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-about .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-about .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-about .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-about .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-about .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-about .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-about .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-about .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-about .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-about .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-about .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-about .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-about .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-about .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-about .results { min-width:0; }
body.page-about .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-about .t-left { display:flex; align-items:center; gap:14px; }
body.page-about .t-count { font-size:13px; color:var(--muted-2); }
body.page-about .t-count strong { color:var(--ink); font-weight:700; }
body.page-about .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-about .sortdrop { position:relative; z-index:10; }
body.page-about .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-about .sortbtn:hover { border-color:var(--ink); }
body.page-about .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-about .sortbtn .val { font-weight:600; }
body.page-about .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-about .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-about .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-about .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-about .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-about .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-about .sortopt.on { color:var(--ink); font-weight:600; }
body.page-about .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-about .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-about .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-about .vbtn:hover { color:var(--ink); }
body.page-about .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-about .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-about .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-about .fbtn-mobile svg { width:14px; height:14px; }
body.page-about .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-about .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-about .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-about .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-about .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-about .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-about .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-about .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-about .pgrid.list-view .pcard-quick { display:none; }
body.page-about .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-about .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-about .pgrid.list-view .pcard-name { font-size:16px; }
body.page-about .pgrid.list-view .pcard-var { font-size:13px; }
body.page-about .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-about .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-about .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-about .pcard { cursor:pointer; }
body.page-about .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-about .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-about .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-about .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-about .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-about .bg-new { background:var(--ink); color:#fff; }
body.page-about .bg-hot { background:var(--brand); color:#fff; }
body.page-about .bg-sale { background:#FF9500; color:#fff; }
body.page-about .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-about .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-about .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-about .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-about .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-about .pcard:hover .pcard-quick { bottom:12px; }
body.page-about .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-about .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-about .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-about .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-about .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-about .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-about .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-about .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-about .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-about .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-about .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-about .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-about .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-about footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-about .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-about .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-about .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-about .flogo em { color:var(--brand); font-style:normal; }
body.page-about .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-about .fsocs { display:flex; gap:8px; }
body.page-about .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-about .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-about .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-about .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-about .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-about .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-about .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-about .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-about .fpay { display:flex; gap:8px; }
body.page-about .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-about .wrap, body.page-about .fw { padding:0 28px; }
  body.page-about header { width:calc(100% - 32px); }
  body.page-about .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-about header nav { gap:0; }
  body.page-about .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-about .search-pill span { display:none; }
  body.page-about .search-pill { padding:8px 10px; }

  body.page-about .shop-title { font-size:34px; }
  body.page-about .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-about .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-about .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-about .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-about .hamburger { display:flex; }
  body.page-about header nav, body.page-about header .search-pill { display:none; }
  body.page-about header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-about .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-about .logo { font-size:17px; }
  body.page-about .ib { width:40px; height:40px; }
  body.page-about .ib svg { width:18px; height:18px; }
  body.page-about .ann-bar { padding:8px 0; }
  body.page-about .ann-track { gap:36px; }
  body.page-about .ann-track span { font-size:11px; }
  body.page-about .wrap, body.page-about .fw { padding:0 16px; }

  /* hero */
  body.page-about .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-about .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-about .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-about .shop-meta { padding-bottom:0; }
  body.page-about .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-about .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-about .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-about .filters.on { transform:translateY(0); }
  body.page-about .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-about .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-about .fgroup > summary { padding:18px 20px 14px; }
  body.page-about .fgroup-body { padding:0 20px 18px; }
  body.page-about .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-about .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-about .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-about .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-about .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-about .toolbar { gap:10px; padding-bottom:14px; }
  body.page-about .t-left { gap:10px; flex:1; }
  body.page-about .sortbtn .lbl { display:none; }
  body.page-about .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-about .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-about .pcard-img { border-radius:var(--radius-sm); }
  body.page-about .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-about .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-about .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-about .pcard-name { font-size:13px; }
  body.page-about .pcard-p { font-size:14px; }

  /* footer */
  body.page-about footer { padding:40px 0 28px; margin-top:48px; }
  body.page-about .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-about .ftop > div:first-child { grid-column:1/-1; }
  body.page-about .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-about .filters .f-head-clear-desktop { display:none; }
  body.page-about .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-about .hw { padding:0 4px 0 14px; }
  body.page-about .logo { font-size:16px; }
  body.page-about .ib { width:36px; height:36px; }
  body.page-about .pgrid { gap:14px 10px; }
  body.page-about .pcard-name, body.page-about .pcard-p { font-size:12.5px; }
}


/* ── PAGE HERO ── */
body.page-about .page-hero { padding:24px 0 0; margin-bottom:24px; }
body.page-about .page-hero-inner {
  background:#1D1D1F; border-radius:28px; padding:72px 72px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:400px;
}
body.page-about .page-hero-inner::before {
  content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px);
}
body.page-about .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-about .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-about .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-about .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-about .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-about .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }

/* ── MISSION ── */
body.page-about .mission-s { padding:72px 0 64px; }
body.page-about .mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
body.page-about .mission-left { }
body.page-about .mission-left .sl { margin-bottom:12px; }
body.page-about .mission-left h2 { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; margin-bottom:18px; }
body.page-about .mission-left p { font-size:15px; color:#86868B; line-height:1.75; margin-bottom:16px; }
body.page-about .mission-right { border-radius:24px; overflow:hidden; }
body.page-about .mission-right img { width:100%; height:420px; object-fit:cover; }

/* ── VALUES (BENTO) ── */
body.page-about .values-s { padding:0 0 72px; }
body.page-about .values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
body.page-about .vcard { background:#fff; border-radius:20px; padding:32px; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; }
body.page-about .vcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-about .vicon { width:48px; height:48px; border-radius:14px; background:#F5F5F7; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
body.page-about .vicon svg { width:22px; height:22px; }
body.page-about .vtitle { font-size:17px; font-weight:700; margin-bottom:8px; }
body.page-about .vdesc { font-size:13px; color:#86868B; line-height:1.65; }

/* ── TIMELINE ── */
body.page-about .timeline-s { padding:0 0 72px; }
body.page-about .timeline { display:flex; flex-direction:column; gap:0; position:relative; }
body.page-about .timeline::before { content:''; position:absolute; left:24px; top:0; bottom:0; width:2px; background:#E8E8ED; }
body.page-about .titem { display:flex; gap:24px; padding:28px 0; position:relative; }
body.page-about .tdot { width:16px; height:16px; border-radius:50%; background:#FF2D55; border:3px solid #F5F5F7; flex-shrink:0; margin-top:4px; position:relative; z-index:1; margin-left:16px; }
body.page-about .tcontent { flex:1; background:#fff; border-radius:16px; padding:24px 28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-about .tyear { font-size:12px; font-weight:700; color:#FF2D55; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
body.page-about .ttitle { font-size:18px; font-weight:700; margin-bottom:6px; }
body.page-about .tdesc { font-size:13px; color:#86868B; line-height:1.6; }

/* ── TEAM ── */
body.page-about .team-s { padding:0 0 72px; }
body.page-about .team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-about .tcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); text-align:center; transition:transform .3s; }
body.page-about .tcard:hover { transform:translateY(-4px); }
body.page-about .tcard-img { height:220px; overflow:hidden; }
body.page-about .tcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-about .tcard:hover .tcard-img img { transform:scale(1.06); }
body.page-about .tcard-body { padding:20px 16px 24px; }
body.page-about .tname { font-size:15px; font-weight:700; margin-bottom:2px; }
body.page-about .trole { font-size:12px; color:#86868B; }

/* ── STATS ── */
body.page-about .stats-s { padding:0 0 72px; }
body.page-about .stats-bar { background:#fff; border-radius:24px; padding:40px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; box-shadow:0 2px 8px rgba(0,0,0,0.04); flex-wrap:wrap; }
body.page-about .stat-item { text-align:center; flex:1; min-width:120px; }
body.page-about .stat-num { font-size:36px; font-weight:800; letter-spacing:-1.5px; color:#FF2D55; line-height:1; }
body.page-about .stat-label { font-size:12px; color:#86868B; margin-top:6px; }

/* ── CTA BANNER ── */
body.page-about .cta-s { padding:0 0 72px; }
body.page-about .cta-banner {
  background:#1D1D1F; border-radius:24px; padding:52px 64px;
  display:flex; align-items:center; justify-content:space-between; gap:48px;
  position:relative; overflow:hidden;
}
body.page-about .cta-banner::before {
  content:''; position:absolute; top:-80px; right:-80px; width:350px; height:350px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(50px);
}
body.page-about .cta-left { position:relative; z-index:1; }
body.page-about .cta-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:8px; }
body.page-about .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); line-height:1.6; }
body.page-about .cta-right { position:relative; z-index:1; display:flex; gap:12px; flex-shrink:0; }
body.page-about .btn-w { background:#fff; color:#1D1D1F; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; }
body.page-about .btn-w:hover { transform:scale(1.03); }
body.page-about .btn-o { background:rgba(255,255,255,0.08); color:#fff; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:500; border:1px solid rgba(255,255,255,0.15); transition:all .2s; }
body.page-about .btn-o:hover { background:rgba(255,255,255,0.15); }

/* ── SHARED ── */
body.page-about .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-about .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-about .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-about .page-hero-inner { padding:56px 56px 0; gap:40px; }
  body.page-about .hero-left h1 { font-size:44px; }
  body.page-about .mission-grid { gap:32px; }
  body.page-about .values-grid { grid-template-columns:1fr 1fr; }
  body.page-about .team-grid { grid-template-columns:1fr 1fr; }
  body.page-about .stats-bar { padding:32px 36px; }
  body.page-about .cta-banner { padding:40px 48px; }
}
@media (max-width:768px) {
  body.page-about .page-hero-inner { grid-template-columns:1fr; padding:48px 36px 0; min-height:auto; }
  body.page-about .hero-right { display:none; }
  body.page-about .hero-left { padding-bottom:48px; }
  body.page-about .hero-left h1 { font-size:38px; }
  body.page-about .mission-grid { grid-template-columns:1fr; }
  body.page-about .mission-right img { height:280px; }
  body.page-about .values-grid { grid-template-columns:1fr; }
  body.page-about .team-grid { grid-template-columns:1fr 1fr; }
  body.page-about .timeline::before { left:18px; }
  body.page-about .tdot { margin-left:10px; }
  body.page-about .stats-bar { flex-direction:column; gap:24px; padding:32px; }
  body.page-about .cta-banner { flex-direction:column; align-items:flex-start; gap:24px; padding:36px 28px; }
  body.page-about .cta-right { width:100%; flex-direction:column; }
  body.page-about .btn-w, body.page-about .btn-o { width:100%; text-align:center; }
}
@media (max-width:380px) {
  body.page-about .page-hero-inner { padding:36px 24px 0; }
  body.page-about .hero-left h1 { font-size:32px; }
  body.page-about .team-grid { grid-template-columns:1fr; }
  body.page-about .tcard-img { height:200px; }
  body.page-about .stats-bar { padding:24px; }
  body.page-about .stat-num { font-size:28px; }
  body.page-about .cta-banner { padding:32px 24px; }
}

/* ============================================================
   cart.html
   ============================================================ */

/* ===== cart.html ===== */

/* ── DESIGN TOKENS ── */


body.page-cart.no-scroll { overflow:hidden; }
body.page-cart input, body.page-cart select { font-family:inherit; }
body.page-cart.no-scroll { overflow:hidden; }
body.page-cart a { text-decoration:none; color:inherit; }
body.page-cart button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-cart img { display:block; max-width:100%; }
body.page-cart input, body.page-cart select { font-family:inherit; }
body.page-cart a:focus-visible, body.page-cart button:focus-visible, body.page-cart input:focus-visible, body.page-cart summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-cart .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-cart .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-cart .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-cart .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-cart .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-cart header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-cart header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-cart .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-cart .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-cart .logo em { color:var(--brand); font-style:normal; }
body.page-cart header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-cart .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-cart .ni > a:hover, body.page-cart .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-cart .ni.active > a { color:var(--brand); }
body.page-cart .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-cart .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-cart .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-cart .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-cart .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-cart .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-cart .ib:hover { background:rgba(0,0,0,0.05); }
body.page-cart .ib svg { width:17px; height:17px; }
body.page-cart .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-cart .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-cart .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-cart .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-cart .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-cart .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-cart .bcrumb a:hover { color:var(--ink); }
body.page-cart .bcrumb .sep { color:var(--muted-3); }
body.page-cart .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-cart .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-cart .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-cart .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-cart .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-cart .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-cart .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-cart .chips-row:empty { padding:0; }
body.page-cart .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-cart .fchip:hover { border-color:var(--ink); }
body.page-cart .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-cart .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-cart .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-cart .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-cart .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-cart .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-cart .filters::-webkit-scrollbar { width:5px; }
body.page-cart .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-cart .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-cart .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-cart .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-cart .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-cart .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-cart .fgroup { border-top:1px solid var(--line-soft); }
body.page-cart .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-cart .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-cart .fgroup > summary::-webkit-details-marker { display:none; }
body.page-cart .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-cart .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-cart .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-cart .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-cart .fopt:hover { color:var(--ink); }
body.page-cart .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-cart .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-cart .fopt-mark.radio { border-radius:50%; }
body.page-cart .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-cart .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-cart .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-cart .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-cart .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-cart .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-cart .fopt-text { flex:1; }
body.page-cart .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-cart .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-cart .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-cart .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-cart .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-cart .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-cart .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-cart .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-cart .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-cart .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-cart .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-cart .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-cart .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-cart .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-cart .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-cart .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-cart .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-cart .results { min-width:0; }
body.page-cart .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-cart .t-left { display:flex; align-items:center; gap:14px; }
body.page-cart .t-count { font-size:13px; color:var(--muted-2); }
body.page-cart .t-count strong { color:var(--ink); font-weight:700; }
body.page-cart .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-cart .sortdrop { position:relative; z-index:10; }
body.page-cart .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-cart .sortbtn:hover { border-color:var(--ink); }
body.page-cart .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-cart .sortbtn .val { font-weight:600; }
body.page-cart .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-cart .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-cart .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-cart .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-cart .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-cart .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-cart .sortopt.on { color:var(--ink); font-weight:600; }
body.page-cart .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-cart .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-cart .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-cart .vbtn:hover { color:var(--ink); }
body.page-cart .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-cart .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-cart .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-cart .fbtn-mobile svg { width:14px; height:14px; }
body.page-cart .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-cart .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-cart .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-cart .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-cart .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-cart .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-cart .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-cart .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-cart .pgrid.list-view .pcard-quick { display:none; }
body.page-cart .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-cart .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-cart .pgrid.list-view .pcard-name { font-size:16px; }
body.page-cart .pgrid.list-view .pcard-var { font-size:13px; }
body.page-cart .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-cart .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-cart .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-cart .pcard { cursor:pointer; }
body.page-cart .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-cart .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-cart .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-cart .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-cart .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-cart .bg-new { background:var(--ink); color:#fff; }
body.page-cart .bg-hot { background:var(--brand); color:#fff; }
body.page-cart .bg-sale { background:#FF9500; color:#fff; }
body.page-cart .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-cart .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-cart .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-cart .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-cart .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-cart .pcard:hover .pcard-quick { bottom:12px; }
body.page-cart .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-cart .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-cart .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-cart .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-cart .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-cart .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-cart .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-cart .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-cart .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-cart .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-cart .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-cart .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-cart .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-cart footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-cart .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-cart .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-cart .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-cart .flogo em { color:var(--brand); font-style:normal; }
body.page-cart .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-cart .fsocs { display:flex; gap:8px; }
body.page-cart .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-cart .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-cart .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-cart .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-cart .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-cart .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-cart .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-cart .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-cart .fpay { display:flex; gap:8px; }
body.page-cart .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-cart .wrap, body.page-cart .fw { padding:0 28px; }
  body.page-cart header { width:calc(100% - 32px); }
  body.page-cart .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-cart header nav { gap:0; }
  body.page-cart .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-cart .search-pill span { display:none; }
  body.page-cart .search-pill { padding:8px 10px; }

  body.page-cart .shop-title { font-size:34px; }
  body.page-cart .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-cart .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-cart .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-cart .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-cart .hamburger { display:flex; }
  body.page-cart header nav, body.page-cart header .search-pill { display:none; }
  body.page-cart header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-cart .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-cart .logo { font-size:17px; }
  body.page-cart .ib { width:40px; height:40px; }
  body.page-cart .ib svg { width:18px; height:18px; }
  body.page-cart .ann-bar { padding:8px 0; }
  body.page-cart .ann-track { gap:36px; }
  body.page-cart .ann-track span { font-size:11px; }
  body.page-cart .wrap, body.page-cart .fw { padding:0 16px; }

  /* hero */
  body.page-cart .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-cart .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-cart .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-cart .shop-meta { padding-bottom:0; }
  body.page-cart .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-cart .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-cart .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-cart .filters.on { transform:translateY(0); }
  body.page-cart .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-cart .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-cart .fgroup > summary { padding:18px 20px 14px; }
  body.page-cart .fgroup-body { padding:0 20px 18px; }
  body.page-cart .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-cart .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-cart .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-cart .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-cart .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-cart .toolbar { gap:10px; padding-bottom:14px; }
  body.page-cart .t-left { gap:10px; flex:1; }
  body.page-cart .sortbtn .lbl { display:none; }
  body.page-cart .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-cart .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-cart .pcard-img { border-radius:var(--radius-sm); }
  body.page-cart .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-cart .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-cart .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-cart .pcard-name { font-size:13px; }
  body.page-cart .pcard-p { font-size:14px; }

  /* footer */
  body.page-cart footer { padding:40px 0 28px; margin-top:48px; }
  body.page-cart .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-cart .ftop > div:first-child { grid-column:1/-1; }
  body.page-cart .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-cart .filters .f-head-clear-desktop { display:none; }
  body.page-cart .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-cart .hw { padding:0 4px 0 14px; }
  body.page-cart .logo { font-size:16px; }
  body.page-cart .ib { width:36px; height:36px; }
  body.page-cart .pgrid { gap:14px 10px; }
  body.page-cart .pcard-name, body.page-cart .pcard-p { font-size:12.5px; }
}


/* ── BREADCRUMB ── */
body.page-cart .bcrumb-row { padding-top:28px; padding-bottom:12px; }
body.page-cart .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-cart .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-cart .bcrumb a:hover { color:var(--ink); }
body.page-cart .bcrumb .sep { color:var(--muted-3); }
body.page-cart .bcrumb .cur { color:var(--ink); font-weight:500; }

/* ── CART LAYOUT ── */
body.page-cart .cart-s { padding: 24px 0 72px; }
body.page-cart .cart-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 20px;
}
body.page-cart .cart-title {
  font-size: 34px; font-weight: 700; letter-spacing: -.7px; line-height: 1.1;
  color: var(--ink);
}
body.page-cart .cart-count {
  font-size: 14px; color: var(--muted-2); font-weight: 500;
}

/* ── Free-shipping progress ── */
body.page-cart .ship-bar {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 20px;
  transition: background .3s, border-color .3s;
}
body.page-cart .ship-bar.done {
  background: linear-gradient(180deg, rgba(255, 224, 232, 0.55) 0%, rgba(255, 240, 244, 0.45) 100%);
  border-color: rgba(255, 45, 85, 0.18);
}
body.page-cart .ship-bar-text {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--muted);
  margin-bottom: 10px;
}
body.page-cart .ship-bar-text strong { color: var(--ink); font-weight: 700; }
body.page-cart .ship-bar.done .ship-bar-text { color: var(--brand); }
body.page-cart .ship-bar.done .ship-bar-text strong { color: var(--brand); }
body.page-cart .ship-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
body.page-cart .ship-bar.done .ship-icon { color: var(--brand); }
body.page-cart .ship-icon svg { width: 18px; height: 18px; }
body.page-cart .ship-bar-track {
  height: 6px; border-radius: 100px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
body.page-cart .ship-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF99B0 0%, #FF2D55 100%);
  border-radius: 100px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ── Cart grid ── */
body.page-cart .cart-grid {
  display: grid; grid-template-columns: 1fr 400px; gap: 32px;
  align-items: start;
}

/* cart-left: flex fill, min-width 0 prevents overflow */
body.page-cart .cart-left { flex: 1; min-width: 0; }


/* ── Items list ── */
body.page-cart .cart-items {
  display: flex; flex-direction: column; gap: 12px;
}
body.page-cart .cart-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
body.page-cart .cart-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}
body.page-cart .ci-img-link {
  display: block;
  width: 110px; height: 110px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}
body.page-cart .ci-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
body.page-cart .ci-img-link:hover .ci-img { transform: scale(1.04); }

body.page-cart .ci-main {
  display: flex; flex-direction: column;
  min-width: 0;
  justify-content: space-between;
  gap: 10px;
}
body.page-cart .ci-name-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
body.page-cart .ci-name {
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35; letter-spacing: -.1px;
  text-decoration: none;
  flex: 1; min-width: 0;
}
body.page-cart .ci-name:hover { color: var(--brand); }

body.page-cart .ci-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--muted-2);
  align-items: center;
}
body.page-cart .ci-variant {
  font-size: 12.5px; color: var(--muted-2);
  margin-right: 4px;
}
body.page-cart .ci-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 100px;
  font-size: 11px; font-weight: 500; color: var(--muted);
}
body.page-cart .ci-tag-stock {
  background: rgba(40, 167, 90, 0.1);
  color: #1f8048;
  font-weight: 600;
}
body.page-cart .ci-tag-stock .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #28a75a;
}

body.page-cart .ci-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}

/* Stepper */
body.page-cart .ci-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  overflow: hidden;
  height: 36px;
}
body.page-cart .ci-qty-btn {
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  font-size: 16px; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.page-cart .ci-qty-btn:hover { background: rgba(0, 0, 0, 0.05); }
body.page-cart .ci-qty-btn:active { background: rgba(0, 0, 0, 0.08); }
body.page-cart .ci-qty-val,
body.page-cart .ci-qty input.ci-qty-val,
body.page-cart .woocommerce-cart-form .ci-qty-val {
  width: 38px; height: 34px;
  text-align: center;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
  font-family: inherit;
  margin: 0;
  padding: 0;
}
body.page-cart .ci-qty-val:focus,
body.page-cart .ci-qty input.ci-qty-val:focus,
body.page-cart .woocommerce-cart-form .ci-qty-val:focus {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
body.page-cart .ci-qty-val::-webkit-inner-spin-button,
body.page-cart .ci-qty-val::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

body.page-cart .ci-prices {
  text-align: right;
  display: flex; flex-direction: column; gap: 2px;
}
body.page-cart .ci-unit {
  font-size: 11.5px; color: var(--muted-2); font-weight: 500;
}
body.page-cart .ci-total {
  font-size: 17px; font-weight: 700; color: var(--ink);
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}

body.page-cart .ci-remove {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-3);
  transition: background .15s, color .15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
body.page-cart .ci-remove svg { width: 14px; height: 14px; }
body.page-cart .ci-remove:hover {
  background: rgba(255, 45, 85, 0.1);
  color: var(--brand);
}

/* Cart actions */
body.page-cart .cart-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 4px 0;
}
body.page-cart .continue-shop {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none;
  padding: 8px 0;
  transition: color .15s;
}
body.page-cart .continue-shop:hover { color: var(--brand); }
body.page-cart .continue-shop svg { transition: transform .2s; }
body.page-cart .continue-shop:hover svg { transform: translateX(-3px); }

body.page-cart .clear-cart {
  background: transparent;
  border: none;
  font-size: 13px; color: var(--muted-2);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 100px;
  transition: background .15s, color .15s;
}
body.page-cart .clear-cart:hover {
  background: rgba(255, 45, 85, 0.08);
  color: var(--brand);
}

/* Empty cart state */
body.page-cart .cart-empty {
  background: #fff;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  padding: 64px 24px;
  text-align: center;
}
body.page-cart .cart-empty-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: var(--muted-3);
}
body.page-cart .cart-empty h3 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin-bottom: 8px;
}
body.page-cart .cart-empty p {
  font-size: 14px; color: var(--muted-2);
  margin-bottom: 24px;
}
body.page-cart .cart-empty-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--ink);
  color: #fff;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: background .2s;
}
body.page-cart .cart-empty-btn:hover { background: var(--brand); }

/* ── Order summary card ── */
body.page-cart .cart-right { position: sticky; top: 96px; }
body.page-cart .summary {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 22px;
  padding: 26px;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
body.page-cart .sum-title {
  font-size: 19px; font-weight: 700; color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -.2px;
}
body.page-cart .sum-rows {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
body.page-cart .sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: var(--muted);
}
body.page-cart .sum-row[hidden] { display: none; }
body.page-cart .sum-row > span:last-child {
  color: var(--ink); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
body.page-cart .sum-row-meta {
  font-size: 12px; color: var(--muted-2);
  font-weight: 400;
  margin-left: 4px;
}
body.page-cart .sum-row-discount > span:last-child {
  color: var(--brand);
  font-weight: 600;
}
body.page-cart .sum-shipping.is-free {
  color: #1f8048 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

body.page-cart .sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 20px; font-weight: 800; color: var(--ink);
  letter-spacing: -.3px;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

body.page-cart .sum-discount {
  display: flex; gap: 8px;
  margin-bottom: 6px;
}
body.page-cart .sum-discount input {
  flex: 1; min-width: 0;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
}
body.page-cart .sum-discount input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
body.page-cart .sum-discount button {
  padding: 11px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
body.page-cart .sum-discount button:hover {
  background: #ECECF0;
  border-color: rgba(0, 0, 0, 0.15);
}
body.page-cart .sum-discount-msg {
  font-size: 12px;
  margin: 0 0 6px;
  padding: 0 4px;
}
body.page-cart .sum-discount-msg.ok  { color: #1f8048; font-weight: 600; }
body.page-cart .sum-discount-msg.err { color: var(--brand); }

body.page-cart .checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14.5px; font-weight: 700;
  transition: background .2s, transform .15s, box-shadow .2s;
  letter-spacing: 0.1px;
  margin-top: 10px;
}
body.page-cart .checkout-btn:hover {
  background: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 45, 85, 0.25);
}
body.page-cart .checkout-btn svg { transition: transform .2s; }
body.page-cart .checkout-btn:hover svg { transform: translateX(3px); }

body.page-cart .sum-deliv {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
  margin-top: 14px; padding: 10px 12px;
  background: var(--bg);
  border-radius: 10px;
  justify-content: center;
}
body.page-cart .sum-deliv strong { color: var(--ink); font-weight: 600; }
body.page-cart .sum-deliv svg { color: var(--muted-2); }

body.page-cart .sum-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
body.page-cart .trust-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 10.5px; font-weight: 500; color: var(--muted);
  line-height: 1.4;
}
body.page-cart .trust-item svg { color: var(--muted-2); }

body.page-cart .sum-pays {
  display: flex; flex-wrap: wrap; gap: 5px;
  justify-content: center;
  margin-top: 14px;
}
body.page-cart .pay-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
}

/* ── Recommended ── */
body.page-cart .rec-s { padding: 8px 0 64px; }
body.page-cart .rec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
body.page-cart .rec-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .2s;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
}
body.page-cart .rec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
}
body.page-cart .rec-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg);
}
body.page-cart .rec-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
body.page-cart .rec-card:hover .rec-img img { transform: scale(1.05); }
body.page-cart .rec-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column;
  flex: 1;
}
body.page-cart .rec-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  line-height: 1.35;
  margin-bottom: 3px;
}
body.page-cart .rec-meta {
  font-size: 11.5px; color: var(--muted-2);
  margin-bottom: 12px;
}
body.page-cart .rec-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  gap: 8px;
}
body.page-cart .rec-price {
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: -.1px;
}
body.page-cart .rec-add {
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  font-size: 12px; font-weight: 600;
  border: none; cursor: pointer;
  transition: background .2s;
}
body.page-cart .rec-add:hover { background: var(--brand); }
body.page-cart .rec-add.added { background: #1f8048; }

/* ── Mobile ── */
@media (max-width: 960px) {
  body.page-cart .cart-grid {
    grid-template-columns: 1fr; gap: 24px;
  }
  body.page-cart .cart-right { position: static; }
  body.page-cart .rec-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  body.page-cart .cart-title { font-size: 26px; }
  body.page-cart .cart-head { gap: 10px; flex-wrap: wrap; }
  body.page-cart .ship-bar { padding: 12px 14px; }
  body.page-cart .ship-bar-text { font-size: 12.5px; }
  body.page-cart .cart-item {
    grid-template-columns: 84px 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
  }
  body.page-cart .ci-img-link { width: 84px; height: 84px; border-radius: 12px; }
  body.page-cart .ci-name { font-size: 14px; }
  body.page-cart .ci-bottom { gap: 8px; }
  body.page-cart .ci-qty { height: 34px; }
  body.page-cart .ci-qty-btn { width: 30px; height: 32px; }
  body.page-cart .ci-qty-val { width: 32px; height: 32px; font-size: 13px; }
  body.page-cart .ci-total { font-size: 16px; }
  body.page-cart .ci-unit { display: none; }
  body.page-cart .summary { padding: 22px; border-radius: 18px; }
  body.page-cart .rec-grid { grid-template-columns: repeat(2, 1fr); }
  body.page-cart .sum-trust { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  body.page-cart .trust-item { font-size: 9.5px; }
  body.page-cart .cart-empty { padding: 48px 20px; }
}

/* ── SUMMARY ── */
body.page-cart .summary { position:sticky; top:96px; background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-cart .sum-title { font-size:18px; font-weight:700; margin-bottom:20px; }
body.page-cart .sum-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:12px; color:var(--muted); }
body.page-cart .sum-row.total { font-size:18px; font-weight:700; color:var(--ink); padding-top:12px; border-top:1px solid var(--line-soft); margin-top:12px; }
body.page-cart .sum-discount { display:flex; gap:8px; margin:16px 0; }
body.page-cart .sum-discount input { flex:1; padding:10px 14px; border-radius:8px; border:1px solid var(--line); font-size:13px; outline:none; font-family:inherit; }
body.page-cart .sum-discount input:focus { border-color:var(--brand); }
body.page-cart .sum-discount button { padding:10px 16px; border-radius:8px; background:var(--bg); font-size:13px; font-weight:600; border:none; cursor:pointer; transition:background .2s; }
body.page-cart .sum-discount button:hover { background:var(--line); }
body.page-cart .checkout-btn {
  width:100%; padding:16px; border-radius:100px; background:var(--brand); color:#fff;
  font-size:15px; font-weight:700; border:none; cursor:pointer; transition:background .2s; margin-top:8px;
}
body.page-cart .checkout-btn:hover { background:var(--brand-hover); }
body.page-cart .secure-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; font-size:12px; color:var(--muted-2); }
body.page-cart .secure-note svg { width:14px; height:14px; }

/* ── EMPTY STATE ── */
body.page-cart .empty-cart { text-align:center; padding:80px 20px; }
body.page-cart .empty-cart svg { width:64px; height:64px; color:var(--muted-3); margin-bottom:20px; }
body.page-cart .empty-cart h3 { font-size:22px; font-weight:700; margin-bottom:8px; }
body.page-cart .empty-cart p { font-size:14px; color:var(--muted); margin-bottom:24px; }
body.page-cart .empty-btn { display:inline-block; padding:14px 32px; border-radius:100px; background:var(--ink); color:#fff; font-size:14px; font-weight:600; transition:background .2s; }
body.page-cart .empty-btn:hover { background:var(--brand); }

/* ── SHARED ── */
body.page-cart .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
body.page-cart .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-cart .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-cart .cart-grid { grid-template-columns:1fr 320px; gap:32px; }
  body.page-cart .rec-grid { grid-template-columns:repeat(2,1fr); }
  body.page-cart .cart-item { grid-template-columns:80px 1fr auto auto; gap:14px; }
  body.page-cart .ci-img { width:80px; height:80px; }
}
@media (max-width:768px) {
  body.page-cart .cart-grid { grid-template-columns:1fr; gap:24px; }
  body.page-cart .summary { position:static; }
  body.page-cart .cart-item { grid-template-columns:70px 1fr auto; row-gap:8px; }
  body.page-cart .ci-img { width:70px; height:70px; }
  body.page-cart .ci-price { display:none; }
  body.page-cart .ci-total { grid-column:3; }
  body.page-cart .ci-remove { grid-column:3; justify-self:end; }
  body.page-cart .ci-qty-wrap { grid-column:2; justify-self:start; margin-top:4px; }
  body.page-cart .rec-grid { grid-template-columns:1fr 1fr; }
  body.page-cart .cart-title { font-size:26px; }
}
@media (max-width:380px) {
  body.page-cart .cart-item { grid-template-columns:60px 1fr; }
  body.page-cart .ci-img { width:60px; height:60px; }
  body.page-cart .ci-qty-wrap { grid-column:2; }
  body.page-cart .ci-total { grid-column:2; justify-self:start; font-size:14px; }
  body.page-cart .ci-remove { grid-column:2; justify-self:end; margin-top:-28px; }
  body.page-cart .rec-grid { grid-template-columns:1fr; }
}

/* ============================================================
   checkout.html
   ============================================================ */

/* ===== checkout.html ===== */

/* ── DESIGN TOKENS ── */


body.page-checkout.no-scroll { overflow:hidden; }
body.page-checkout input, body.page-checkout select { font-family:inherit; }
body.page-checkout.no-scroll { overflow:hidden; }
body.page-checkout a { text-decoration:none; color:inherit; }
body.page-checkout button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-checkout img { display:block; max-width:100%; }
body.page-checkout input, body.page-checkout select { font-family:inherit; }
body.page-checkout a:focus-visible, body.page-checkout button:focus-visible, body.page-checkout input:focus-visible, body.page-checkout summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-checkout .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-checkout .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-checkout .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-checkout .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-checkout .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-checkout header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-checkout header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-checkout .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-checkout .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-checkout .logo em { color:var(--brand); font-style:normal; }
body.page-checkout header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-checkout .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-checkout .ni > a:hover, body.page-checkout .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-checkout .ni.active > a { color:var(--brand); }
body.page-checkout .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-checkout .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-checkout .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-checkout .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-checkout .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-checkout .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-checkout .ib:hover { background:rgba(0,0,0,0.05); }
body.page-checkout .ib svg { width:17px; height:17px; }
body.page-checkout .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-checkout .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-checkout .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-checkout .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-checkout .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-checkout .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-checkout .bcrumb a:hover { color:var(--ink); }
body.page-checkout .bcrumb .sep { color:var(--muted-3); }
body.page-checkout .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-checkout .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-checkout .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-checkout .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-checkout .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-checkout .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-checkout .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-checkout .chips-row:empty { padding:0; }
body.page-checkout .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-checkout .fchip:hover { border-color:var(--ink); }
body.page-checkout .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-checkout .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-checkout .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-checkout .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-checkout .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-checkout .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-checkout .filters::-webkit-scrollbar { width:5px; }
body.page-checkout .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-checkout .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-checkout .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-checkout .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-checkout .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-checkout .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-checkout .fgroup { border-top:1px solid var(--line-soft); }
body.page-checkout .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-checkout .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-checkout .fgroup > summary::-webkit-details-marker { display:none; }
body.page-checkout .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-checkout .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-checkout .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-checkout .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-checkout .fopt:hover { color:var(--ink); }
body.page-checkout .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-checkout .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-checkout .fopt-mark.radio { border-radius:50%; }
body.page-checkout .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-checkout .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-checkout .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-checkout .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-checkout .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-checkout .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-checkout .fopt-text { flex:1; }
body.page-checkout .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-checkout .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-checkout .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-checkout .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-checkout .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-checkout .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-checkout .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-checkout .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-checkout .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-checkout .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-checkout .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-checkout .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-checkout .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-checkout .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-checkout .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-checkout .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-checkout .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-checkout .results { min-width:0; }
body.page-checkout .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-checkout .t-left { display:flex; align-items:center; gap:14px; }
body.page-checkout .t-count { font-size:13px; color:var(--muted-2); }
body.page-checkout .t-count strong { color:var(--ink); font-weight:700; }
body.page-checkout .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-checkout .sortdrop { position:relative; z-index:10; }
body.page-checkout .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-checkout .sortbtn:hover { border-color:var(--ink); }
body.page-checkout .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-checkout .sortbtn .val { font-weight:600; }
body.page-checkout .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-checkout .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-checkout .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-checkout .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-checkout .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-checkout .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-checkout .sortopt.on { color:var(--ink); font-weight:600; }
body.page-checkout .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-checkout .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-checkout .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-checkout .vbtn:hover { color:var(--ink); }
body.page-checkout .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-checkout .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-checkout .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-checkout .fbtn-mobile svg { width:14px; height:14px; }
body.page-checkout .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-checkout .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-checkout .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-checkout .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-checkout .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-checkout .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-checkout .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-checkout .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-checkout .pgrid.list-view .pcard-quick { display:none; }
body.page-checkout .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-checkout .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-checkout .pgrid.list-view .pcard-name { font-size:16px; }
body.page-checkout .pgrid.list-view .pcard-var { font-size:13px; }
body.page-checkout .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-checkout .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-checkout .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-checkout .pcard { cursor:pointer; }
body.page-checkout .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-checkout .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-checkout .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-checkout .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-checkout .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-checkout .bg-new { background:var(--ink); color:#fff; }
body.page-checkout .bg-hot { background:var(--brand); color:#fff; }
body.page-checkout .bg-sale { background:#FF9500; color:#fff; }
body.page-checkout .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-checkout .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-checkout .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-checkout .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-checkout .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-checkout .pcard:hover .pcard-quick { bottom:12px; }
body.page-checkout .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-checkout .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-checkout .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-checkout .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-checkout .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-checkout .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-checkout .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-checkout .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-checkout .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-checkout .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-checkout .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-checkout .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-checkout .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-checkout footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-checkout .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-checkout .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-checkout .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-checkout .flogo em { color:var(--brand); font-style:normal; }
body.page-checkout .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-checkout .fsocs { display:flex; gap:8px; }
body.page-checkout .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-checkout .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-checkout .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-checkout .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-checkout .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-checkout .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-checkout .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-checkout .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-checkout .fpay { display:flex; gap:8px; }
body.page-checkout .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-checkout .wrap, body.page-checkout .fw { padding:0 28px; }
  body.page-checkout header { width:calc(100% - 32px); }
  body.page-checkout .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-checkout header nav { gap:0; }
  body.page-checkout .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-checkout .search-pill span { display:none; }
  body.page-checkout .search-pill { padding:8px 10px; }

  body.page-checkout .shop-title { font-size:34px; }
  body.page-checkout .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-checkout .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-checkout .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-checkout .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-checkout .hamburger { display:flex; }
  body.page-checkout header nav, body.page-checkout header .search-pill { display:none; }
  body.page-checkout header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-checkout .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-checkout .logo { font-size:17px; }
  body.page-checkout .ib { width:40px; height:40px; }
  body.page-checkout .ib svg { width:18px; height:18px; }
  body.page-checkout .ann-bar { padding:8px 0; }
  body.page-checkout .ann-track { gap:36px; }
  body.page-checkout .ann-track span { font-size:11px; }
  body.page-checkout .wrap, body.page-checkout .fw { padding:0 16px; }

  /* hero */
  body.page-checkout .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-checkout .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-checkout .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-checkout .shop-meta { padding-bottom:0; }
  body.page-checkout .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-checkout .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-checkout .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-checkout .filters.on { transform:translateY(0); }
  body.page-checkout .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-checkout .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-checkout .fgroup > summary { padding:18px 20px 14px; }
  body.page-checkout .fgroup-body { padding:0 20px 18px; }
  body.page-checkout .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-checkout .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-checkout .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-checkout .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-checkout .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-checkout .toolbar { gap:10px; padding-bottom:14px; }
  body.page-checkout .t-left { gap:10px; flex:1; }
  body.page-checkout .sortbtn .lbl { display:none; }
  body.page-checkout .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-checkout .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-checkout .pcard-img { border-radius:var(--radius-sm); }
  body.page-checkout .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-checkout .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-checkout .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-checkout .pcard-name { font-size:13px; }
  body.page-checkout .pcard-p { font-size:14px; }

  /* footer */
  body.page-checkout footer { padding:40px 0 28px; margin-top:48px; }
  body.page-checkout .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-checkout .ftop > div:first-child { grid-column:1/-1; }
  body.page-checkout .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-checkout .filters .f-head-clear-desktop { display:none; }
  body.page-checkout .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-checkout .hw { padding:0 4px 0 14px; }
  body.page-checkout .logo { font-size:16px; }
  body.page-checkout .ib { width:36px; height:36px; }
  body.page-checkout .pgrid { gap:14px 10px; }
  body.page-checkout .pcard-name, body.page-checkout .pcard-p { font-size:12.5px; }
}


/* ── BREADCRUMB ── */
body.page-checkout .bcrumb-row { padding-top:28px; padding-bottom:8px; }
body.page-checkout .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-checkout .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-checkout .bcrumb a:hover { color:var(--ink); }
body.page-checkout .bcrumb .sep { color:var(--muted-3); }
body.page-checkout .bcrumb .cur { color:var(--ink); font-weight:500; }

/* ── STEPPER ── */
body.page-checkout .stepper { display:flex; align-items:center; gap:0; margin-bottom:32px; }
body.page-checkout .step { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--muted-3); }
body.page-checkout .step.on { color:var(--ink); font-weight:700; }
body.page-checkout .step.on .step-num { background:var(--brand); color:#fff; }
body.page-checkout .step.done { color:var(--brand); }
body.page-checkout .step.done .step-num { background:var(--brand-soft); color:var(--brand); }
body.page-checkout .step-num { width:28px; height:28px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
body.page-checkout .step-line { width:40px; height:1px; background:var(--line); margin:0 8px; }
body.page-checkout .step-line.done { background:var(--brand); }

/* ── CHECKOUT LAYOUT ── */
body.page-checkout .checkout-s { padding:12px 0 72px; }
body.page-checkout .checkout-grid { display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }

/* ── FORM SECTIONS ── */
body.page-checkout .form-section { background:#fff; border-radius:20px; padding:28px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-checkout .form-title { font-size:16px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
body.page-checkout .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
body.page-checkout .form-row.full { grid-template-columns:1fr; }
body.page-checkout .form-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
body.page-checkout .form-input {
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
  font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; background:#fff; font-family:inherit;
}
body.page-checkout .form-input:focus { border-color:var(--brand); }
body.page-checkout .form-input::placeholder { color:var(--muted-3); }
body.page-checkout select.form-input { appearance:none; background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2386868B" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>'); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

/* ── RADIO OPTIONS ── */
body.page-checkout .radio-option {
  display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line);
  border-radius:12px; margin-bottom:10px; cursor:pointer; transition:border-color .2s,background .2s;
}
body.page-checkout .radio-option:hover { border-color:var(--muted-3); }
body.page-checkout .radio-option.on { border-color:var(--brand); background:var(--brand-soft); }
body.page-checkout .radio-option input { width:18px; height:18px; accent-color:var(--brand); flex-shrink:0; }
body.page-checkout .ro-content { flex:1; }
body.page-checkout .ro-title { font-size:14px; font-weight:600; }
body.page-checkout .ro-desc { font-size:12px; color:var(--muted-2); margin-top:2px; }
body.page-checkout .ro-price { font-size:14px; font-weight:700; }

/* ── PAYMENT CARDS ── */
body.page-checkout .pay-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:14px; }
body.page-checkout .pay-card { border:1.5px solid var(--line); border-radius:10px; padding:12px; text-align:center; cursor:pointer; transition:border-color .2s; }
body.page-checkout .pay-card:hover { border-color:var(--muted-3); }
body.page-checkout .pay-card.on { border-color:var(--brand); }
body.page-checkout .pay-card svg { width:28px; height:28px; margin-bottom:4px; }
body.page-checkout .pay-card span { display:block; font-size:12px; font-weight:600; }

/* ── SUMMARY ── */
body.page-checkout .summary { position:sticky; top:96px; background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-checkout .sum-title { font-size:18px; font-weight:700; margin-bottom:20px; }
body.page-checkout .sum-item { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
body.page-checkout .sum-item img { width:48px; height:48px; border-radius:8px; object-fit:cover; }
body.page-checkout .sum-item-info { flex:1; }
body.page-checkout .sum-item-name { font-size:13px; font-weight:600; }
body.page-checkout .sum-item-qty { font-size:12px; color:var(--muted-2); }
body.page-checkout .sum-item-price { font-size:13px; font-weight:700; }
body.page-checkout .sum-divider { height:1px; background:var(--line-soft); margin:16px 0; }
body.page-checkout .sum-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--muted); }
body.page-checkout .sum-row.total { font-size:18px; font-weight:700; color:var(--ink); padding-top:10px; border-top:1px solid var(--line-soft); margin-top:10px; }
body.page-checkout .place-order-btn {
  width:100%; padding:16px; border-radius:100px; background:var(--brand); color:#fff;
  font-size:15px; font-weight:700; border:none; cursor:pointer; transition:background .2s; margin-top:8px;
}
body.page-checkout .place-order-btn:hover { background:var(--brand-hover); }
body.page-checkout .secure-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; font-size:12px; color:var(--muted-2); }

/* ── SHARED ── */
body.page-checkout .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-checkout .checkout-grid { grid-template-columns:1fr 300px; gap:32px; }
  body.page-checkout .pay-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  body.page-checkout .checkout-grid { grid-template-columns:1fr; gap:24px; }
  body.page-checkout .summary { position:static; }
  body.page-checkout .form-row { grid-template-columns:1fr; }
  body.page-checkout .pay-row { grid-template-columns:1fr 1fr; }
  body.page-checkout .stepper { font-size:12px; }
  body.page-checkout .step-line { width:20px; }
  /* v3.7.32: on mobile, show Order Summary above the form so the user
     sees what they're buying before filling out address fields. */
  body.page-checkout .checkout-left  { order: 2; }
  body.page-checkout .checkout-right { order: 1; }
}
@media (max-width:380px) {
  body.page-checkout .form-section { padding:20px; }
  body.page-checkout .stepper { display:none; }
}

/* ============================================================
   login.html
   ============================================================ */

/* ===== login.html ===== */

/* ── DESIGN TOKENS ── */


body.page-login.no-scroll { overflow:hidden; }
body.page-login input, body.page-login select { font-family:inherit; }
body.page-login.no-scroll { overflow:hidden; }
body.page-login a { text-decoration:none; color:inherit; }
body.page-login button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-login img { display:block; max-width:100%; }
body.page-login input, body.page-login select { font-family:inherit; }
body.page-login a:focus-visible, body.page-login button:focus-visible, body.page-login input:focus-visible, body.page-login summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-login .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-login .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-login .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-login .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-login .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-login header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-login header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-login .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-login .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-login .logo em { color:var(--brand); font-style:normal; }
body.page-login header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-login .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-login .ni > a:hover, body.page-login .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-login .ni.active > a { color:var(--brand); }
body.page-login .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-login .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-login .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-login .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-login .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-login .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-login .ib:hover { background:rgba(0,0,0,0.05); }
body.page-login .ib svg { width:17px; height:17px; }
body.page-login .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-login .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-login .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-login .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-login .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-login .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-login .bcrumb a:hover { color:var(--ink); }
body.page-login .bcrumb .sep { color:var(--muted-3); }
body.page-login .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-login .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-login .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-login .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-login .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-login .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-login .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-login .chips-row:empty { padding:0; }
body.page-login .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-login .fchip:hover { border-color:var(--ink); }
body.page-login .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-login .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-login .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-login .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-login .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-login .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-login .filters::-webkit-scrollbar { width:5px; }
body.page-login .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-login .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-login .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-login .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-login .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-login .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-login .fgroup { border-top:1px solid var(--line-soft); }
body.page-login .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-login .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-login .fgroup > summary::-webkit-details-marker { display:none; }
body.page-login .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-login .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-login .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-login .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-login .fopt:hover { color:var(--ink); }
body.page-login .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-login .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-login .fopt-mark.radio { border-radius:50%; }
body.page-login .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-login .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-login .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-login .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-login .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-login .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-login .fopt-text { flex:1; }
body.page-login .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-login .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-login .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-login .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-login .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-login .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-login .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-login .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-login .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-login .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-login .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-login .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-login .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-login .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-login .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-login .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-login .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-login .results { min-width:0; }
body.page-login .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-login .t-left { display:flex; align-items:center; gap:14px; }
body.page-login .t-count { font-size:13px; color:var(--muted-2); }
body.page-login .t-count strong { color:var(--ink); font-weight:700; }
body.page-login .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-login .sortdrop { position:relative; z-index:10; }
body.page-login .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-login .sortbtn:hover { border-color:var(--ink); }
body.page-login .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-login .sortbtn .val { font-weight:600; }
body.page-login .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-login .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-login .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-login .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-login .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-login .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-login .sortopt.on { color:var(--ink); font-weight:600; }
body.page-login .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-login .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-login .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-login .vbtn:hover { color:var(--ink); }
body.page-login .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-login .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-login .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-login .fbtn-mobile svg { width:14px; height:14px; }
body.page-login .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-login .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-login .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-login .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-login .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-login .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-login .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-login .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-login .pgrid.list-view .pcard-quick { display:none; }
body.page-login .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-login .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-login .pgrid.list-view .pcard-name { font-size:16px; }
body.page-login .pgrid.list-view .pcard-var { font-size:13px; }
body.page-login .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-login .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-login .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-login .pcard { cursor:pointer; }
body.page-login .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-login .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-login .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-login .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-login .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-login .bg-new { background:var(--ink); color:#fff; }
body.page-login .bg-hot { background:var(--brand); color:#fff; }
body.page-login .bg-sale { background:#FF9500; color:#fff; }
body.page-login .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-login .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-login .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-login .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-login .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-login .pcard:hover .pcard-quick { bottom:12px; }
body.page-login .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-login .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-login .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-login .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-login .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-login .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-login .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-login .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-login .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-login .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-login .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-login .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-login .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-login footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-login .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-login .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-login .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-login .flogo em { color:var(--brand); font-style:normal; }
body.page-login .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-login .fsocs { display:flex; gap:8px; }
body.page-login .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-login .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-login .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-login .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-login .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-login .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-login .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-login .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-login .fpay { display:flex; gap:8px; }
body.page-login .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-login .wrap, body.page-login .fw { padding:0 28px; }
  body.page-login header { width:calc(100% - 32px); }
  body.page-login .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-login header nav { gap:0; }
  body.page-login .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-login .search-pill span { display:none; }
  body.page-login .search-pill { padding:8px 10px; }

  body.page-login .shop-title { font-size:34px; }
  body.page-login .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-login .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-login .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-login .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-login .hamburger { display:flex; }
  body.page-login header nav, body.page-login header .search-pill { display:none; }
  body.page-login header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-login .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-login .logo { font-size:17px; }
  body.page-login .ib { width:40px; height:40px; }
  body.page-login .ib svg { width:18px; height:18px; }
  body.page-login .ann-bar { padding:8px 0; }
  body.page-login .ann-track { gap:36px; }
  body.page-login .ann-track span { font-size:11px; }
  body.page-login .wrap, body.page-login .fw { padding:0 16px; }

  /* hero */
  body.page-login .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-login .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-login .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-login .shop-meta { padding-bottom:0; }
  body.page-login .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-login .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-login .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-login .filters.on { transform:translateY(0); }
  body.page-login .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-login .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-login .fgroup > summary { padding:18px 20px 14px; }
  body.page-login .fgroup-body { padding:0 20px 18px; }
  body.page-login .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-login .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-login .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-login .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-login .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-login .toolbar { gap:10px; padding-bottom:14px; }
  body.page-login .t-left { gap:10px; flex:1; }
  body.page-login .sortbtn .lbl { display:none; }
  body.page-login .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-login .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-login .pcard-img { border-radius:var(--radius-sm); }
  body.page-login .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-login .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-login .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-login .pcard-name { font-size:13px; }
  body.page-login .pcard-p { font-size:14px; }

  /* footer */
  body.page-login footer { padding:40px 0 28px; margin-top:48px; }
  body.page-login .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-login .ftop > div:first-child { grid-column:1/-1; }
  body.page-login .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-login .filters .f-head-clear-desktop { display:none; }
  body.page-login .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-login .hw { padding:0 4px 0 14px; }
  body.page-login .logo { font-size:16px; }
  body.page-login .ib { width:36px; height:36px; }
  body.page-login .pgrid { gap:14px 10px; }
  body.page-login .pcard-name, body.page-login .pcard-p { font-size:12.5px; }
}


/* ── LOGIN LAYOUT ── */
body.page-login .login-wrap { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
body.page-login .login-left {
  background:#1D1D1F; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:48px; position:relative; overflow:hidden;
}
body.page-login .login-left::before {
  content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.22) 0%,transparent 70%); filter:blur(60px);
}
body.page-login .login-visual { position:relative; z-index:1; text-align:center; }
body.page-login .login-visual .logo { font-size:32px; font-weight:800; color:#fff; margin-bottom:24px; display:block; }
body.page-login .login-visual .logo em { color:#FF2D55; font-style:normal; }
body.page-login .login-visual p { font-size:16px; color:rgba(255,255,255,0.5); line-height:1.7; max-width:360px; margin:0 auto 32px; }
body.page-login .login-stats { display:flex; gap:32px; position:relative; z-index:1; }
body.page-login .login-stat { text-align:center; }
body.page-login .login-stat-num { font-size:32px; font-weight:800; color:#FF2D55; line-height:1; }
body.page-login .login-stat-label { font-size:12px; color:rgba(255,255,255,0.4); margin-top:6px; }

body.page-login .login-right {
  display:flex; flex-direction:column; justify-content:center; padding:48px 64px;
  background:var(--bg);
}
body.page-login .login-box { width:100%; max-width:420px; margin:0 auto; }
body.page-login .login-tabs { display:flex; gap:0; margin-bottom:28px; border-bottom:2px solid var(--line); }
body.page-login .login-tab { flex:1; padding:12px; text-align:center; font-size:15px; font-weight:600; color:var(--muted-2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; }
body.page-login .login-tab.on { color:var(--ink); border-bottom-color:var(--brand); }
body.page-login .login-tab:hover:not(.on) { color:var(--ink); }

body.page-login .login-form { display:none; }
body.page-login .login-form.on { display:block; }

body.page-login .form-group { margin-bottom:18px; }
body.page-login .form-group label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
body.page-login .form-group input {
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
  font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; background:#fff; font-family:inherit;
}
body.page-login .form-group input:focus { border-color:var(--brand); }
body.page-login .form-group input::placeholder { color:var(--muted-3); }

body.page-login .login-options { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
body.page-login .remember { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; }
body.page-login .remember input { accent-color:var(--brand); }
body.page-login .forgot { font-size:13px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-login .forgot:hover { opacity:.75; }

body.page-login .login-btn {
  width:100%; padding:14px; border-radius:100px; background:var(--ink); color:#fff;
  font-size:15px; font-weight:700; border:none; cursor:pointer; transition:background .2s; margin-bottom:20px;
}
body.page-login .login-btn:hover { background:var(--brand); }

body.page-login .divider { display:flex; align-items:center; gap:16px; margin-bottom:20px; color:var(--muted-3); font-size:13px; }
body.page-login .divider::before, body.page-login .divider::after { content:''; flex:1; height:1px; background:var(--line); }

body.page-login .social-row { display:flex; gap:12px; }
body.page-login .social-btn {
  flex:1; padding:12px; border-radius:12px; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:500;
  color:var(--ink); cursor:pointer; transition:border-color .2s,background .2s; font-family:inherit;
}
body.page-login .social-btn:hover { border-color:var(--ink); background:var(--bg); }
body.page-login .social-btn svg { width:18px; height:18px; }

body.page-login .login-foot { text-align:center; margin-top:24px; font-size:13px; color:var(--muted); }
body.page-login .login-foot a { color:var(--brand); font-weight:500; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-login .login-right { padding:40px; }
}
@media (max-width:768px) {
  body.page-login .login-wrap { grid-template-columns:1fr; }
  body.page-login .login-left { display:none; }
  body.page-login .login-right { padding:32px 24px; min-height:100vh; }
  body.page-login .login-box { max-width:100%; }
}

/* ============================================================
   order-confirmation.html
   ============================================================ */

/* ===== order-confirmation.html ===== */

/* ── DESIGN TOKENS ── */


body.page-order-confirmation.no-scroll { overflow:hidden; }
body.page-order-confirmation input, body.page-order-confirmation select { font-family:inherit; }
body.page-order-confirmation.no-scroll { overflow:hidden; }
body.page-order-confirmation a { text-decoration:none; color:inherit; }
body.page-order-confirmation button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-order-confirmation img { display:block; max-width:100%; }
body.page-order-confirmation input, body.page-order-confirmation select { font-family:inherit; }
body.page-order-confirmation a:focus-visible, body.page-order-confirmation button:focus-visible, body.page-order-confirmation input:focus-visible, body.page-order-confirmation summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-order-confirmation .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-order-confirmation .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-order-confirmation .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-order-confirmation .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-order-confirmation .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-order-confirmation header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-order-confirmation header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-order-confirmation .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-order-confirmation .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-order-confirmation .logo em { color:var(--brand); font-style:normal; }
body.page-order-confirmation header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-order-confirmation .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-order-confirmation .ni > a:hover, body.page-order-confirmation .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-order-confirmation .ni.active > a { color:var(--brand); }
body.page-order-confirmation .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-order-confirmation .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-order-confirmation .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-order-confirmation .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-order-confirmation .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-order-confirmation .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-order-confirmation .ib:hover { background:rgba(0,0,0,0.05); }
body.page-order-confirmation .ib svg { width:17px; height:17px; }
body.page-order-confirmation .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-order-confirmation .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-order-confirmation .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-order-confirmation .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-order-confirmation .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-order-confirmation .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-order-confirmation .bcrumb a:hover { color:var(--ink); }
body.page-order-confirmation .bcrumb .sep { color:var(--muted-3); }
body.page-order-confirmation .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-order-confirmation .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-order-confirmation .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-order-confirmation .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-order-confirmation .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-order-confirmation .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-order-confirmation .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-order-confirmation .chips-row:empty { padding:0; }
body.page-order-confirmation .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-order-confirmation .fchip:hover { border-color:var(--ink); }
body.page-order-confirmation .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-order-confirmation .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-order-confirmation .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-order-confirmation .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-order-confirmation .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-order-confirmation .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-order-confirmation .filters::-webkit-scrollbar { width:5px; }
body.page-order-confirmation .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-order-confirmation .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-order-confirmation .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-order-confirmation .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-order-confirmation .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-order-confirmation .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-order-confirmation .fgroup { border-top:1px solid var(--line-soft); }
body.page-order-confirmation .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-order-confirmation .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-order-confirmation .fgroup > summary::-webkit-details-marker { display:none; }
body.page-order-confirmation .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-order-confirmation .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-order-confirmation .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-order-confirmation .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-order-confirmation .fopt:hover { color:var(--ink); }
body.page-order-confirmation .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-order-confirmation .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-order-confirmation .fopt-mark.radio { border-radius:50%; }
body.page-order-confirmation .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-order-confirmation .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-order-confirmation .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-order-confirmation .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-order-confirmation .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-order-confirmation .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-order-confirmation .fopt-text { flex:1; }
body.page-order-confirmation .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-order-confirmation .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-order-confirmation .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-order-confirmation .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-order-confirmation .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-order-confirmation .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-order-confirmation .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-order-confirmation .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-order-confirmation .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-order-confirmation .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-order-confirmation .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-order-confirmation .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-order-confirmation .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-order-confirmation .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-order-confirmation .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-order-confirmation .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-order-confirmation .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-order-confirmation .results { min-width:0; }
body.page-order-confirmation .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-order-confirmation .t-left { display:flex; align-items:center; gap:14px; }
body.page-order-confirmation .t-count { font-size:13px; color:var(--muted-2); }
body.page-order-confirmation .t-count strong { color:var(--ink); font-weight:700; }
body.page-order-confirmation .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-order-confirmation .sortdrop { position:relative; z-index:10; }
body.page-order-confirmation .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-order-confirmation .sortbtn:hover { border-color:var(--ink); }
body.page-order-confirmation .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-order-confirmation .sortbtn .val { font-weight:600; }
body.page-order-confirmation .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-order-confirmation .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-order-confirmation .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-order-confirmation .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-order-confirmation .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-order-confirmation .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-order-confirmation .sortopt.on { color:var(--ink); font-weight:600; }
body.page-order-confirmation .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-order-confirmation .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-order-confirmation .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-order-confirmation .vbtn:hover { color:var(--ink); }
body.page-order-confirmation .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-order-confirmation .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-order-confirmation .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-order-confirmation .fbtn-mobile svg { width:14px; height:14px; }
body.page-order-confirmation .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-order-confirmation .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-order-confirmation .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-order-confirmation .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-order-confirmation .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-order-confirmation .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-order-confirmation .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-order-confirmation .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-order-confirmation .pgrid.list-view .pcard-quick { display:none; }
body.page-order-confirmation .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-order-confirmation .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-order-confirmation .pgrid.list-view .pcard-name { font-size:16px; }
body.page-order-confirmation .pgrid.list-view .pcard-var { font-size:13px; }
body.page-order-confirmation .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-order-confirmation .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-order-confirmation .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-order-confirmation .pcard { cursor:pointer; }
body.page-order-confirmation .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-order-confirmation .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-order-confirmation .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-order-confirmation .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-order-confirmation .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-order-confirmation .bg-new { background:var(--ink); color:#fff; }
body.page-order-confirmation .bg-hot { background:var(--brand); color:#fff; }
body.page-order-confirmation .bg-sale { background:#FF9500; color:#fff; }
body.page-order-confirmation .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-order-confirmation .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-order-confirmation .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-order-confirmation .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-order-confirmation .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-order-confirmation .pcard:hover .pcard-quick { bottom:12px; }
body.page-order-confirmation .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-order-confirmation .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-order-confirmation .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-order-confirmation .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-order-confirmation .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-order-confirmation .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-order-confirmation .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-order-confirmation .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-order-confirmation .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-order-confirmation .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-order-confirmation .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-order-confirmation .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-order-confirmation .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-order-confirmation footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-order-confirmation .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-order-confirmation .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-order-confirmation .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-order-confirmation .flogo em { color:var(--brand); font-style:normal; }
body.page-order-confirmation .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-order-confirmation .fsocs { display:flex; gap:8px; }
body.page-order-confirmation .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-order-confirmation .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-order-confirmation .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-order-confirmation .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-order-confirmation .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-order-confirmation .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-order-confirmation .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-order-confirmation .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-order-confirmation .fpay { display:flex; gap:8px; }
body.page-order-confirmation .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-order-confirmation .wrap, body.page-order-confirmation .fw { padding:0 28px; }
  body.page-order-confirmation header { width:calc(100% - 32px); }
  body.page-order-confirmation .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-order-confirmation header nav { gap:0; }
  body.page-order-confirmation .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-order-confirmation .search-pill span { display:none; }
  body.page-order-confirmation .search-pill { padding:8px 10px; }

  body.page-order-confirmation .shop-title { font-size:34px; }
  body.page-order-confirmation .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-order-confirmation .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-order-confirmation .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-order-confirmation .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-order-confirmation .hamburger { display:flex; }
  body.page-order-confirmation header nav, body.page-order-confirmation header .search-pill { display:none; }
  body.page-order-confirmation header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-order-confirmation .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-order-confirmation .logo { font-size:17px; }
  body.page-order-confirmation .ib { width:40px; height:40px; }
  body.page-order-confirmation .ib svg { width:18px; height:18px; }
  body.page-order-confirmation .ann-bar { padding:8px 0; }
  body.page-order-confirmation .ann-track { gap:36px; }
  body.page-order-confirmation .ann-track span { font-size:11px; }
  body.page-order-confirmation .wrap, body.page-order-confirmation .fw { padding:0 16px; }

  /* hero */
  body.page-order-confirmation .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-order-confirmation .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-order-confirmation .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-order-confirmation .shop-meta { padding-bottom:0; }
  body.page-order-confirmation .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-order-confirmation .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-order-confirmation .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-order-confirmation .filters.on { transform:translateY(0); }
  body.page-order-confirmation .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-order-confirmation .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-order-confirmation .fgroup > summary { padding:18px 20px 14px; }
  body.page-order-confirmation .fgroup-body { padding:0 20px 18px; }
  body.page-order-confirmation .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-order-confirmation .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-order-confirmation .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-order-confirmation .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-order-confirmation .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-order-confirmation .toolbar { gap:10px; padding-bottom:14px; }
  body.page-order-confirmation .t-left { gap:10px; flex:1; }
  body.page-order-confirmation .sortbtn .lbl { display:none; }
  body.page-order-confirmation .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-order-confirmation .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-order-confirmation .pcard-img { border-radius:var(--radius-sm); }
  body.page-order-confirmation .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-order-confirmation .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-order-confirmation .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-order-confirmation .pcard-name { font-size:13px; }
  body.page-order-confirmation .pcard-p { font-size:14px; }

  /* footer */
  body.page-order-confirmation footer { padding:40px 0 28px; margin-top:48px; }
  body.page-order-confirmation .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-order-confirmation .ftop > div:first-child { grid-column:1/-1; }
  body.page-order-confirmation .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-order-confirmation .filters .f-head-clear-desktop { display:none; }
  body.page-order-confirmation .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-order-confirmation .hw { padding:0 4px 0 14px; }
  body.page-order-confirmation .logo { font-size:16px; }
  body.page-order-confirmation .ib { width:36px; height:36px; }
  body.page-order-confirmation .pgrid { gap:14px 10px; }
  body.page-order-confirmation .pcard-name, body.page-order-confirmation .pcard-p { font-size:12.5px; }
}


/* ── BREADCRUMB ── */
body.page-order-confirmation .bcrumb-row { padding-top:28px; padding-bottom:8px; }
body.page-order-confirmation .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-order-confirmation .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-order-confirmation .bcrumb a:hover { color:var(--ink); }
body.page-order-confirmation .bcrumb .sep { color:var(--muted-3); }
body.page-order-confirmation .bcrumb .cur { color:var(--ink); font-weight:500; }

/* ── SUCCESS HERO ── */
body.page-order-confirmation .success-hero { padding:48px 0 32px; text-align:center; }
body.page-order-confirmation .success-icon {
  width:80px; height:80px; border-radius:50%; background:var(--brand-soft); display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; animation:scaleIn .5s cubic-bezier(.25,1,.5,1);
}
@keyframes scaleIn { from{transform:scale(0)} to{transform:scale(1)} }
body.page-order-confirmation .success-icon svg { width:36px; height:36px; color:var(--brand); }
body.page-order-confirmation .success-hero h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-order-confirmation .success-hero p { font-size:15px; color:var(--muted); max-width:460px; margin:0 auto 20px; line-height:1.6; }
body.page-order-confirmation .order-num { display:inline-block; background:var(--bg); padding:8px 20px; border-radius:100px; font-size:14px; font-weight:600; color:var(--ink); }
body.page-order-confirmation .order-num span { color:var(--muted-2); font-weight:500; }

/* ── CONFIRMATION LAYOUT ── */
body.page-order-confirmation .confirm-s { padding:0 0 72px; }
body.page-order-confirmation .confirm-grid { display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }

/* ── INFO CARDS ── */
body.page-order-confirmation .info-card { background:#fff; border-radius:20px; padding:28px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-order-confirmation .info-title { font-size:16px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
body.page-order-confirmation .info-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
body.page-order-confirmation .info-row:last-child { border-bottom:none; }
body.page-order-confirmation .info-label { color:var(--muted); }
body.page-order-confirmation .info-value { font-weight:600; color:var(--ink); }
body.page-order-confirmation .info-address { font-size:14px; color:var(--ink-2); line-height:1.7; }
body.page-order-confirmation .info-address strong { display:block; color:var(--ink); margin-bottom:4px; }

/* ── TIMELINE ── */
body.page-order-confirmation .delivery-track { display:flex; justify-content:space-between; position:relative; margin:24px 0 8px; }
body.page-order-confirmation .delivery-track::before { content:''; position:absolute; top:14px; left:0; right:0; height:2px; background:var(--line); z-index:0; }
body.page-order-confirmation .dstep { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; z-index:1; }
body.page-order-confirmation .dstep-dot { width:28px; height:28px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; }
body.page-order-confirmation .dstep-dot svg { width:14px; height:14px; color:#fff; }
body.page-order-confirmation .dstep-dot.pending { background:var(--bg); border:2px solid var(--line); }
body.page-order-confirmation .dstep-dot.pending svg { display:none; }
body.page-order-confirmation .dstep-label { font-size:11px; font-weight:600; color:var(--muted); text-align:center; }
body.page-order-confirmation .dstep.on .dstep-label { color:var(--brand); }

/* ── SUMMARY ── */
body.page-order-confirmation .summary { position:sticky; top:96px; background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-order-confirmation .sum-title { font-size:18px; font-weight:700; margin-bottom:20px; }
body.page-order-confirmation .sum-item { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
body.page-order-confirmation .sum-item img { width:48px; height:48px; border-radius:8px; object-fit:cover; }
body.page-order-confirmation .sum-item-info { flex:1; }
body.page-order-confirmation .sum-item-name { font-size:13px; font-weight:600; }
body.page-order-confirmation .sum-item-qty { font-size:12px; color:var(--muted-2); }
body.page-order-confirmation .sum-item-price { font-size:13px; font-weight:700; }
body.page-order-confirmation .sum-divider { height:1px; background:var(--line-soft); margin:16px 0; }
body.page-order-confirmation .sum-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--muted); }
body.page-order-confirmation .sum-row.total { font-size:18px; font-weight:700; color:var(--ink); padding-top:10px; border-top:1px solid var(--line-soft); margin-top:10px; }

/* ── ACTION BUTTONS ── */
body.page-order-confirmation .action-row { display:flex; gap:12px; margin-top:20px; }
body.page-order-confirmation .action-btn {
  flex:1; padding:14px; border-radius:100px; text-align:center; font-size:14px; font-weight:600;
  transition:all .2s; cursor:pointer; text-decoration:none;
}
body.page-order-confirmation .action-btn.primary { background:var(--ink); color:#fff; border:none; }
body.page-order-confirmation .action-btn.primary:hover { background:var(--brand); }
body.page-order-confirmation .action-btn.secondary { background:var(--bg); color:var(--ink); border:1.5px solid var(--line); }
body.page-order-confirmation .action-btn.secondary:hover { border-color:var(--ink); }

/* ── SHARED ── */
body.page-order-confirmation .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-order-confirmation .confirm-grid { grid-template-columns:1fr 300px; gap:32px; }
}
@media (max-width:768px) {
  body.page-order-confirmation .confirm-grid { grid-template-columns:1fr; gap:24px; }
  body.page-order-confirmation .summary { position:static; }
  body.page-order-confirmation .success-hero h1 { font-size:28px; }
  body.page-order-confirmation .delivery-track { gap:8px; }
  body.page-order-confirmation .dstep-label { font-size:10px; }
  body.page-order-confirmation .action-row { flex-direction:column; }
}
@media (max-width:380px) {
  body.page-order-confirmation .success-hero { padding:32px 0 20px; }
  body.page-order-confirmation .success-icon { width:64px; height:64px; }
  body.page-order-confirmation .success-icon svg { width:28px; height:28px; }
  body.page-order-confirmation .success-hero h1 { font-size:24px; }
  body.page-order-confirmation .info-card { padding:20px; }
}

/* ============================================================
   wishlist.html
   ============================================================ */

/* ===== wishlist.html ===== */

/* ── DESIGN TOKENS ── */


body.page-wishlist.no-scroll { overflow:hidden; }
body.page-wishlist input, body.page-wishlist select { font-family:inherit; }
body.page-wishlist.no-scroll { overflow:hidden; }
body.page-wishlist a { text-decoration:none; color:inherit; }
body.page-wishlist button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-wishlist img { display:block; max-width:100%; }
body.page-wishlist input, body.page-wishlist select { font-family:inherit; }
body.page-wishlist a:focus-visible, body.page-wishlist button:focus-visible, body.page-wishlist input:focus-visible, body.page-wishlist summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-wishlist .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-wishlist .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-wishlist .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-wishlist .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-wishlist .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-wishlist header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-wishlist header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-wishlist .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-wishlist .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-wishlist .logo em { color:var(--brand); font-style:normal; }
body.page-wishlist header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-wishlist .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-wishlist .ni > a:hover, body.page-wishlist .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-wishlist .ni.active > a { color:var(--brand); }
body.page-wishlist .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-wishlist .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-wishlist .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-wishlist .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-wishlist .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-wishlist .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-wishlist .ib:hover { background:rgba(0,0,0,0.05); }
body.page-wishlist .ib svg { width:17px; height:17px; }
body.page-wishlist .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-wishlist .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-wishlist .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-wishlist .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-wishlist .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-wishlist .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-wishlist .bcrumb a:hover { color:var(--ink); }
body.page-wishlist .bcrumb .sep { color:var(--muted-3); }
body.page-wishlist .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-wishlist .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-wishlist .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-wishlist .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-wishlist .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-wishlist .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-wishlist .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-wishlist .chips-row:empty { padding:0; }
body.page-wishlist .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-wishlist .fchip:hover { border-color:var(--ink); }
body.page-wishlist .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-wishlist .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-wishlist .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-wishlist .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-wishlist .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-wishlist .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-wishlist .filters::-webkit-scrollbar { width:5px; }
body.page-wishlist .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-wishlist .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-wishlist .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-wishlist .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-wishlist .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-wishlist .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-wishlist .fgroup { border-top:1px solid var(--line-soft); }
body.page-wishlist .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-wishlist .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-wishlist .fgroup > summary::-webkit-details-marker { display:none; }
body.page-wishlist .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-wishlist .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-wishlist .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-wishlist .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-wishlist .fopt:hover { color:var(--ink); }
body.page-wishlist .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-wishlist .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-wishlist .fopt-mark.radio { border-radius:50%; }
body.page-wishlist .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-wishlist .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-wishlist .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-wishlist .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-wishlist .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-wishlist .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-wishlist .fopt-text { flex:1; }
body.page-wishlist .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-wishlist .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-wishlist .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-wishlist .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-wishlist .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-wishlist .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-wishlist .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-wishlist .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-wishlist .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-wishlist .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-wishlist .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-wishlist .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-wishlist .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-wishlist .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-wishlist .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-wishlist .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-wishlist .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-wishlist .results { min-width:0; }
body.page-wishlist .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-wishlist .t-left { display:flex; align-items:center; gap:14px; }
body.page-wishlist .t-count { font-size:13px; color:var(--muted-2); }
body.page-wishlist .t-count strong { color:var(--ink); font-weight:700; }
body.page-wishlist .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-wishlist .sortdrop { position:relative; z-index:10; }
body.page-wishlist .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-wishlist .sortbtn:hover { border-color:var(--ink); }
body.page-wishlist .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-wishlist .sortbtn .val { font-weight:600; }
body.page-wishlist .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-wishlist .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-wishlist .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-wishlist .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-wishlist .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-wishlist .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-wishlist .sortopt.on { color:var(--ink); font-weight:600; }
body.page-wishlist .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-wishlist .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-wishlist .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-wishlist .vbtn:hover { color:var(--ink); }
body.page-wishlist .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-wishlist .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-wishlist .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-wishlist .fbtn-mobile svg { width:14px; height:14px; }
body.page-wishlist .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-wishlist .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-wishlist .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-wishlist .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-wishlist .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-wishlist .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-wishlist .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-wishlist .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-wishlist .pgrid.list-view .pcard-quick { display:none; }
body.page-wishlist .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-wishlist .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-wishlist .pgrid.list-view .pcard-name { font-size:16px; }
body.page-wishlist .pgrid.list-view .pcard-var { font-size:13px; }
body.page-wishlist .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-wishlist .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-wishlist .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-wishlist .pcard { cursor:pointer; }
body.page-wishlist .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-wishlist .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-wishlist .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-wishlist .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-wishlist .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-wishlist .bg-new { background:var(--ink); color:#fff; }
body.page-wishlist .bg-hot { background:var(--brand); color:#fff; }
body.page-wishlist .bg-sale { background:#FF9500; color:#fff; }
body.page-wishlist .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-wishlist .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-wishlist .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-wishlist .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-wishlist .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-wishlist .pcard:hover .pcard-quick { bottom:12px; }
body.page-wishlist .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-wishlist .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-wishlist .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-wishlist .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-wishlist .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-wishlist .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-wishlist .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-wishlist .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-wishlist .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-wishlist .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-wishlist .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-wishlist .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-wishlist .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-wishlist footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-wishlist .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-wishlist .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-wishlist .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-wishlist .flogo em { color:var(--brand); font-style:normal; }
body.page-wishlist .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-wishlist .fsocs { display:flex; gap:8px; }
body.page-wishlist .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-wishlist .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-wishlist .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-wishlist .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-wishlist .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-wishlist .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-wishlist .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-wishlist .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-wishlist .fpay { display:flex; gap:8px; }
body.page-wishlist .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-wishlist .wrap, body.page-wishlist .fw { padding:0 28px; }
  body.page-wishlist header { width:calc(100% - 32px); }
  body.page-wishlist .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-wishlist header nav { gap:0; }
  body.page-wishlist .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-wishlist .search-pill span { display:none; }
  body.page-wishlist .search-pill { padding:8px 10px; }

  body.page-wishlist .shop-title { font-size:34px; }
  body.page-wishlist .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-wishlist .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-wishlist .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-wishlist .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-wishlist .hamburger { display:flex; }
  body.page-wishlist header nav, body.page-wishlist header .search-pill { display:none; }
  body.page-wishlist header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-wishlist .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-wishlist .logo { font-size:17px; }
  body.page-wishlist .ib { width:40px; height:40px; }
  body.page-wishlist .ib svg { width:18px; height:18px; }
  body.page-wishlist .ann-bar { padding:8px 0; }
  body.page-wishlist .ann-track { gap:36px; }
  body.page-wishlist .ann-track span { font-size:11px; }
  body.page-wishlist .wrap, body.page-wishlist .fw { padding:0 16px; }

  /* hero */
  body.page-wishlist .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-wishlist .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-wishlist .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-wishlist .shop-meta { padding-bottom:0; }
  body.page-wishlist .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-wishlist .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-wishlist .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-wishlist .filters.on { transform:translateY(0); }
  body.page-wishlist .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-wishlist .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-wishlist .fgroup > summary { padding:18px 20px 14px; }
  body.page-wishlist .fgroup-body { padding:0 20px 18px; }
  body.page-wishlist .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-wishlist .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-wishlist .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-wishlist .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-wishlist .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-wishlist .toolbar { gap:10px; padding-bottom:14px; }
  body.page-wishlist .t-left { gap:10px; flex:1; }
  body.page-wishlist .sortbtn .lbl { display:none; }
  body.page-wishlist .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-wishlist .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-wishlist .pcard-img { border-radius:var(--radius-sm); }
  body.page-wishlist .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-wishlist .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-wishlist .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-wishlist .pcard-name { font-size:13px; }
  body.page-wishlist .pcard-p { font-size:14px; }

  /* footer */
  body.page-wishlist footer { padding:40px 0 28px; margin-top:48px; }
  body.page-wishlist .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-wishlist .ftop > div:first-child { grid-column:1/-1; }
  body.page-wishlist .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-wishlist .filters .f-head-clear-desktop { display:none; }
  body.page-wishlist .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-wishlist .hw { padding:0 4px 0 14px; }
  body.page-wishlist .logo { font-size:16px; }
  body.page-wishlist .ib { width:36px; height:36px; }
  body.page-wishlist .pgrid { gap:14px 10px; }
  body.page-wishlist .pcard-name, body.page-wishlist .pcard-p { font-size:12.5px; }
}


/* ── BREADCRUMB ── */
body.page-wishlist .bcrumb-row { padding-top:28px; padding-bottom:12px; }
body.page-wishlist .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-wishlist .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-wishlist .bcrumb a:hover { color:var(--ink); }
body.page-wishlist .bcrumb .sep { color:var(--muted-3); }
body.page-wishlist .bcrumb .cur { color:var(--ink); font-weight:500; }

/* ── WISHLIST SECTION ── */
body.page-wishlist .wish-s { padding:12px 0 72px; }
body.page-wishlist .wish-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
body.page-wishlist .wish-title { font-size:32px; font-weight:700; letter-spacing:-.6px; }
body.page-wishlist .wish-count { font-size:15px; color:var(--muted-2); font-weight:500; }
body.page-wishlist .wish-actions { display:flex; gap:10px; }
body.page-wishlist .wish-btn { padding:10px 20px; border-radius:100px; font-size:13px; font-weight:600; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition:all .2s; font-family:inherit; }
body.page-wishlist .wish-btn:hover { border-color:var(--ink); }
body.page-wishlist .wish-btn.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
body.page-wishlist .wish-btn.primary:hover { background:var(--brand); border-color:var(--brand); }

/* ── PRODUCT GRID ── */
body.page-wishlist .wish-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-wishlist .wcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; position:relative; }
body.page-wishlist .wcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-wishlist .wimg { position:relative; height:260px; overflow:hidden; }
body.page-wishlist .wimg img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-wishlist .wcard:hover .wimg img { transform:scale(1.06); }
body.page-wishlist .wbadge { position:absolute; top:12px; left:12px; background:rgba(255,45,85,0.9); color:#fff; padding:4px 10px; border-radius:100px; font-size:11px; font-weight:700; }
body.page-wishlist .wheart {
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; border:none;
}
body.page-wishlist .wheart:hover { background:var(--brand); color:#fff; }
body.page-wishlist .wheart svg { width:16px; height:16px; }
body.page-wishlist .wbody { padding:18px 20px 22px; }
body.page-wishlist .wbrand { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
body.page-wishlist .wname { font-size:15px; font-weight:700; line-height:1.3; margin-bottom:6px; }
body.page-wishlist .wmeta { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
body.page-wishlist .wstars { display:flex; gap:2px; }
body.page-wishlist .wstars svg { width:12px; height:12px; color:#FFB800; }
body.page-wishlist .wrev { font-size:12px; color:var(--muted-2); }
body.page-wishlist .wfoot { display:flex; align-items:center; justify-content:space-between; }
body.page-wishlist .wprice { font-size:17px; font-weight:700; }
body.page-wishlist .wprice .was { font-size:13px; color:var(--muted-3); text-decoration:line-through; font-weight:500; margin-left:6px; }
body.page-wishlist .wadd { padding:8px 18px; border-radius:100px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:background .2s; }
body.page-wishlist .wadd:hover { background:var(--brand); }

/* ── EMPTY STATE ── */
body.page-wishlist .empty-wish { text-align:center; padding:80px 20px; }
body.page-wishlist .empty-wish svg { width:64px; height:64px; color:var(--muted-3); margin-bottom:20px; }
body.page-wishlist .empty-wish h3 { font-size:22px; font-weight:700; margin-bottom:8px; }
body.page-wishlist .empty-wish p { font-size:14px; color:var(--muted); margin-bottom:24px; }

/* ── RECOMMENDED ── */
body.page-wishlist .rec-s { padding:0 0 72px; }
body.page-wishlist .rec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ── SHARED ── */
body.page-wishlist .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
body.page-wishlist .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-wishlist .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-wishlist .wish-grid { grid-template-columns:repeat(3,1fr); }
  body.page-wishlist .rec-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  body.page-wishlist .wish-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  body.page-wishlist .wish-head { flex-direction:column; align-items:flex-start; }
  body.page-wishlist .rec-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:380px) {
  body.page-wishlist .wish-grid { grid-template-columns:1fr; }
  body.page-wishlist .wimg { height:220px; }
  body.page-wishlist .rec-grid { grid-template-columns:1fr; }
  body.page-wishlist .wish-title { font-size:26px; }
}

/* ============================================================
   search.html
   ============================================================ */

/* ===== search.html ===== */

/* ── DESIGN TOKENS ── */


body.page-search.no-scroll { overflow:hidden; }
body.page-search input, body.page-search select { font-family:inherit; }
body.page-search.no-scroll { overflow:hidden; }
body.page-search a { text-decoration:none; color:inherit; }
body.page-search button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-search img { display:block; max-width:100%; }
body.page-search input, body.page-search select { font-family:inherit; }
body.page-search a:focus-visible, body.page-search button:focus-visible, body.page-search input:focus-visible, body.page-search summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-search .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-search .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-search .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-search .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-search .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-search header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-search header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-search .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-search .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-search .logo em { color:var(--brand); font-style:normal; }
body.page-search header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-search .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-search .ni > a:hover, body.page-search .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-search .ni.active > a { color:var(--brand); }
body.page-search .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-search .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-search .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-search .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-search .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-search .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-search .ib:hover { background:rgba(0,0,0,0.05); }
body.page-search .ib svg { width:17px; height:17px; }
body.page-search .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-search .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-search .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-search .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-search .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-search .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-search .bcrumb a:hover { color:var(--ink); }
body.page-search .bcrumb .sep { color:var(--muted-3); }
body.page-search .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-search .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-search .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-search .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-search .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-search .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-search .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-search .chips-row:empty { padding:0; }
body.page-search .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-search .fchip:hover { border-color:var(--ink); }
body.page-search .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-search .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-search .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-search .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-search .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-search .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-search .filters::-webkit-scrollbar { width:5px; }
body.page-search .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-search .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-search .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-search .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-search .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-search .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-search .fgroup { border-top:1px solid var(--line-soft); }
body.page-search .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-search .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-search .fgroup > summary::-webkit-details-marker { display:none; }
body.page-search .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-search .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-search .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-search .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-search .fopt:hover { color:var(--ink); }
body.page-search .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-search .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-search .fopt-mark.radio { border-radius:50%; }
body.page-search .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-search .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-search .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-search .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-search .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-search .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-search .fopt-text { flex:1; }
body.page-search .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-search .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-search .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-search .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-search .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-search .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-search .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-search .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-search .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-search .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-search .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-search .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-search .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-search .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-search .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-search .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-search .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-search .results { min-width:0; }
body.page-search .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-search .t-left { display:flex; align-items:center; gap:14px; }
body.page-search .t-count { font-size:13px; color:var(--muted-2); }
body.page-search .t-count strong { color:var(--ink); font-weight:700; }
body.page-search .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-search .sortdrop { position:relative; z-index:10; }
body.page-search .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-search .sortbtn:hover { border-color:var(--ink); }
body.page-search .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-search .sortbtn .val { font-weight:600; }
body.page-search .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-search .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-search .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-search .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-search .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-search .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-search .sortopt.on { color:var(--ink); font-weight:600; }
body.page-search .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-search .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-search .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-search .vbtn:hover { color:var(--ink); }
body.page-search .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-search .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-search .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-search .fbtn-mobile svg { width:14px; height:14px; }
body.page-search .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-search .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-search .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-search .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-search .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-search .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-search .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-search .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-search .pgrid.list-view .pcard-quick { display:none; }
body.page-search .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-search .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-search .pgrid.list-view .pcard-name { font-size:16px; }
body.page-search .pgrid.list-view .pcard-var { font-size:13px; }
body.page-search .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-search .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-search .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-search .pcard { cursor:pointer; }
body.page-search .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-search .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-search .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-search .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-search .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-search .bg-new { background:var(--ink); color:#fff; }
body.page-search .bg-hot { background:var(--brand); color:#fff; }
body.page-search .bg-sale { background:#FF9500; color:#fff; }
body.page-search .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-search .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-search .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-search .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-search .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-search .pcard:hover .pcard-quick { bottom:12px; }
body.page-search .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-search .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-search .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-search .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-search .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-search .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-search .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-search .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-search .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-search .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-search .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-search .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-search .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-search footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-search .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-search .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-search .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-search .flogo em { color:var(--brand); font-style:normal; }
body.page-search .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-search .fsocs { display:flex; gap:8px; }
body.page-search .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-search .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-search .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-search .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-search .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-search .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-search .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-search .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-search .fpay { display:flex; gap:8px; }
body.page-search .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-search .wrap, body.page-search .fw { padding:0 28px; }
  body.page-search header { width:calc(100% - 32px); }
  body.page-search .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-search header nav { gap:0; }
  body.page-search .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-search .search-pill span { display:none; }
  body.page-search .search-pill { padding:8px 10px; }

  body.page-search .shop-title { font-size:34px; }
  body.page-search .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-search .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-search .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-search .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-search .hamburger { display:flex; }
  body.page-search header nav, body.page-search header .search-pill { display:none; }
  body.page-search header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-search .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-search .logo { font-size:17px; }
  body.page-search .ib { width:40px; height:40px; }
  body.page-search .ib svg { width:18px; height:18px; }
  body.page-search .ann-bar { padding:8px 0; }
  body.page-search .ann-track { gap:36px; }
  body.page-search .ann-track span { font-size:11px; }
  body.page-search .wrap, body.page-search .fw { padding:0 16px; }

  /* hero */
  body.page-search .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-search .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-search .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-search .shop-meta { padding-bottom:0; }
  body.page-search .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-search .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-search .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-search .filters.on { transform:translateY(0); }
  body.page-search .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-search .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-search .fgroup > summary { padding:18px 20px 14px; }
  body.page-search .fgroup-body { padding:0 20px 18px; }
  body.page-search .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-search .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-search .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-search .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-search .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-search .toolbar { gap:10px; padding-bottom:14px; }
  body.page-search .t-left { gap:10px; flex:1; }
  body.page-search .sortbtn .lbl { display:none; }
  body.page-search .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-search .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-search .pcard-img { border-radius:var(--radius-sm); }
  body.page-search .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-search .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-search .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-search .pcard-name { font-size:13px; }
  body.page-search .pcard-p { font-size:14px; }

  /* footer */
  body.page-search footer { padding:40px 0 28px; margin-top:48px; }
  body.page-search .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-search .ftop > div:first-child { grid-column:1/-1; }
  body.page-search .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-search .filters .f-head-clear-desktop { display:none; }
  body.page-search .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-search .hw { padding:0 4px 0 14px; }
  body.page-search .logo { font-size:16px; }
  body.page-search .ib { width:36px; height:36px; }
  body.page-search .pgrid { gap:14px 10px; }
  body.page-search .pcard-name, body.page-search .pcard-p { font-size:12.5px; }
}


/* ── SEARCH HERO ── */
body.page-search .search-hero { padding:48px 0 32px; text-align:center; }
body.page-search .search-hero h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-search .search-hero p { font-size:15px; color:var(--muted); }
body.page-search .search-box { max-width:640px; margin:24px auto 0; position:relative; }
body.page-search .search-box input {
  width:100%; padding:16px 24px 16px 52px; border-radius:100px; border:1.5px solid var(--line);
  font-size:16px; color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s;
  background:#fff; font-family:inherit;
}
body.page-search .search-box input:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,45,85,0.08); }
body.page-search .search-box svg { position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted-3); }
body.page-search .search-box button {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  padding:10px 22px; border-radius:100px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600; border:none; cursor:pointer; transition:background .2s;
}
body.page-search .search-box button:hover { background:var(--brand); }

/* ── RESULTS META ── */
body.page-search .results-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
body.page-search .results-count { font-size:14px; color:var(--muted); }
body.page-search .results-count strong { color:var(--ink); }
body.page-search .sort-select { padding:8px 14px; border-radius:8px; border:1.5px solid var(--line); font-size:13px; color:var(--ink); background:#fff; font-family:inherit; outline:none; }

/* ── RESULTS LAYOUT ── */
body.page-search .results-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:72px; }
body.page-search .rcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; }
body.page-search .rcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-search .rcard-img { position:relative; height:260px; overflow:hidden; }
body.page-search .rcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-search .rcard:hover .rcard-img img { transform:scale(1.06); }
body.page-search .rcard-body { padding:18px 20px 22px; }
body.page-search .rcard-brand { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
body.page-search .rcard-name { font-size:15px; font-weight:700; line-height:1.3; margin-bottom:8px; }
body.page-search .rcard-meta { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
body.page-search .rcard-stars { display:flex; gap:2px; }
body.page-search .rcard-stars svg { width:12px; height:12px; color:#FFB800; }
body.page-search .rcard-rev { font-size:12px; color:var(--muted-2); }
body.page-search .rcard-foot { display:flex; align-items:center; justify-content:space-between; }
body.page-search .rcard-price { font-size:17px; font-weight:700; }
body.page-search .rcard-add { padding:8px 18px; border-radius:100px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:background .2s; }
body.page-search .rcard-add:hover { background:var(--brand); }

/* ── NO RESULTS ── */
body.page-search .no-results { text-align:center; padding:60px 20px; }
body.page-search .no-results svg { width:56px; height:56px; color:var(--muted-3); margin-bottom:16px; }
body.page-search .no-results h3 { font-size:20px; font-weight:700; margin-bottom:6px; }
body.page-search .no-results p { font-size:14px; color:var(--muted); margin-bottom:20px; }
body.page-search .no-results a { color:var(--brand); font-weight:600; }

/* ── SHARED ── */
body.page-search .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-search .results-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  body.page-search .search-hero h1 { font-size:28px; }
  body.page-search .results-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  body.page-search .rcard-img { height:220px; }
}
@media (max-width:380px) {
  body.page-search .search-hero { padding:32px 0 20px; }
  body.page-search .search-box input { padding:14px 20px 14px 44px; font-size:15px; }
  body.page-search .results-grid { grid-template-columns:1fr; }
  body.page-search .rcard-img { height:280px; }
}

/* ============================================================
   account.html
   ============================================================ */

/* ===== account.html ===== */

/* ── DESIGN TOKENS ── */


body.page-account.no-scroll { overflow:hidden; }
body.page-account input, body.page-account select { font-family:inherit; }
body.page-account.no-scroll { overflow:hidden; }
body.page-account a { text-decoration:none; color:inherit; }
body.page-account button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-account img { display:block; max-width:100%; }
body.page-account input, body.page-account select { font-family:inherit; }
body.page-account a:focus-visible, body.page-account button:focus-visible, body.page-account input:focus-visible, body.page-account summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-account .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-account .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-account .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-account .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-account .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-account header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-account header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-account .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-account .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-account .logo em { color:var(--brand); font-style:normal; }
body.page-account header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-account .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-account .ni > a:hover, body.page-account .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-account .ni.active > a { color:var(--brand); }
body.page-account .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-account .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-account .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-account .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-account .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-account .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-account .ib:hover { background:rgba(0,0,0,0.05); }
body.page-account .ib svg { width:17px; height:17px; }
body.page-account .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-account .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-account .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-account .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-account .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-account .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-account .bcrumb a:hover { color:var(--ink); }
body.page-account .bcrumb .sep { color:var(--muted-3); }
body.page-account .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-account .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-account .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-account .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-account .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-account .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-account .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-account .chips-row:empty { padding:0; }
body.page-account .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-account .fchip:hover { border-color:var(--ink); }
body.page-account .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-account .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-account .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-account .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-account .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-account .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-account .filters::-webkit-scrollbar { width:5px; }
body.page-account .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-account .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-account .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-account .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-account .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-account .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-account .fgroup { border-top:1px solid var(--line-soft); }
body.page-account .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-account .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-account .fgroup > summary::-webkit-details-marker { display:none; }
body.page-account .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-account .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-account .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-account .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-account .fopt:hover { color:var(--ink); }
body.page-account .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-account .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-account .fopt-mark.radio { border-radius:50%; }
body.page-account .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-account .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-account .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-account .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-account .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-account .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-account .fopt-text { flex:1; }
body.page-account .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-account .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-account .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-account .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-account .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-account .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-account .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-account .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-account .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-account .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-account .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-account .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-account .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-account .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-account .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-account .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-account .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-account .results { min-width:0; }
body.page-account .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-account .t-left { display:flex; align-items:center; gap:14px; }
body.page-account .t-count { font-size:13px; color:var(--muted-2); }
body.page-account .t-count strong { color:var(--ink); font-weight:700; }
body.page-account .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-account .sortdrop { position:relative; z-index:10; }
body.page-account .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-account .sortbtn:hover { border-color:var(--ink); }
body.page-account .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-account .sortbtn .val { font-weight:600; }
body.page-account .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-account .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-account .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-account .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-account .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-account .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-account .sortopt.on { color:var(--ink); font-weight:600; }
body.page-account .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-account .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-account .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-account .vbtn:hover { color:var(--ink); }
body.page-account .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-account .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-account .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-account .fbtn-mobile svg { width:14px; height:14px; }
body.page-account .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-account .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-account .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-account .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-account .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-account .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-account .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-account .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-account .pgrid.list-view .pcard-quick { display:none; }
body.page-account .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-account .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-account .pgrid.list-view .pcard-name { font-size:16px; }
body.page-account .pgrid.list-view .pcard-var { font-size:13px; }
body.page-account .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-account .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-account .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-account .pcard { cursor:pointer; }
body.page-account .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-account .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-account .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-account .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-account .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-account .bg-new { background:var(--ink); color:#fff; }
body.page-account .bg-hot { background:var(--brand); color:#fff; }
body.page-account .bg-sale { background:#FF9500; color:#fff; }
body.page-account .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-account .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-account .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-account .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-account .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-account .pcard:hover .pcard-quick { bottom:12px; }
body.page-account .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-account .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-account .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-account .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-account .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-account .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-account .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-account .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-account .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-account .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-account .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-account .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-account .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-account footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-account .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-account .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-account .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-account .flogo em { color:var(--brand); font-style:normal; }
body.page-account .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-account .fsocs { display:flex; gap:8px; }
body.page-account .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-account .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-account .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-account .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-account .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-account .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-account .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-account .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-account .fpay { display:flex; gap:8px; }
body.page-account .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-account .wrap, body.page-account .fw { padding:0 28px; }
  body.page-account header { width:calc(100% - 32px); }
  body.page-account .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-account header nav { gap:0; }
  body.page-account .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-account .search-pill span { display:none; }
  body.page-account .search-pill { padding:8px 10px; }

  body.page-account .shop-title { font-size:34px; }
  body.page-account .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-account .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-account .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-account .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-account .hamburger { display:flex; }
  body.page-account header nav, body.page-account header .search-pill { display:none; }
  body.page-account header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-account .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-account .logo { font-size:17px; }
  body.page-account .ib { width:40px; height:40px; }
  body.page-account .ib svg { width:18px; height:18px; }
  body.page-account .ann-bar { padding:8px 0; }
  body.page-account .ann-track { gap:36px; }
  body.page-account .ann-track span { font-size:11px; }
  body.page-account .wrap, body.page-account .fw { padding:0 16px; }

  /* hero */
  body.page-account .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-account .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-account .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-account .shop-meta { padding-bottom:0; }
  body.page-account .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-account .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-account .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-account .filters.on { transform:translateY(0); }
  body.page-account .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-account .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-account .fgroup > summary { padding:18px 20px 14px; }
  body.page-account .fgroup-body { padding:0 20px 18px; }
  body.page-account .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-account .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-account .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-account .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-account .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-account .toolbar { gap:10px; padding-bottom:14px; }
  body.page-account .t-left { gap:10px; flex:1; }
  body.page-account .sortbtn .lbl { display:none; }
  body.page-account .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-account .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-account .pcard-img { border-radius:var(--radius-sm); }
  body.page-account .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-account .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-account .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-account .pcard-name { font-size:13px; }
  body.page-account .pcard-p { font-size:14px; }

  /* footer */
  body.page-account footer { padding:40px 0 28px; margin-top:48px; }
  body.page-account .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-account .ftop > div:first-child { grid-column:1/-1; }
  body.page-account .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-account .filters .f-head-clear-desktop { display:none; }
  body.page-account .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-account .hw { padding:0 4px 0 14px; }
  body.page-account .logo { font-size:16px; }
  body.page-account .ib { width:36px; height:36px; }
  body.page-account .pgrid { gap:14px 10px; }
  body.page-account .pcard-name, body.page-account .pcard-p { font-size:12.5px; }
}


/* ── ACCOUNT LAYOUT ── */
body.page-account .acct-wrap { min-height:calc(100vh - 80px); padding:24px 0 72px; }
body.page-account .acct-grid { display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }

/* ── SIDEBAR ── */
body.page-account .acct-sidebar { background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); position:sticky; top:96px; }
body.page-account .acct-user { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line-soft); }
body.page-account .acct-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--bg); }
body.page-account .acct-name { font-size:16px; font-weight:700; }
body.page-account .acct-email { font-size:12px; color:var(--muted-2); }
body.page-account .acct-nav { display:flex; flex-direction:column; gap:2px; }
body.page-account .acct-nav-btn {
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px;
  font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; transition:all .2s;
  background:none; border:none; text-align:left; font-family:inherit;
}
body.page-account .acct-nav-btn:hover { background:var(--bg); color:var(--ink); }
body.page-account .acct-nav-btn.on { background:var(--brand-soft); color:var(--brand); font-weight:600; }
body.page-account .acct-nav-btn svg { width:18px; height:18px; flex-shrink:0; }

/* ── CONTENT PANEL ── */
body.page-account .acct-panel { display:none; }
body.page-account .acct-panel.on { display:block; }
body.page-account .acct-card { background:#fff; border-radius:20px; padding:28px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-account .acct-card-title { font-size:18px; font-weight:700; margin-bottom:20px; }

/* ── ORDERS ── */
body.page-account .order-item { display:grid; grid-template-columns:1fr auto auto auto; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line-soft); }
body.page-account .order-item:last-child { border-bottom:none; }
body.page-account .order-info { }
body.page-account .order-num { font-size:14px; font-weight:600; color:var(--ink); }
body.page-account .order-date { font-size:12px; color:var(--muted-2); margin-top:2px; }
body.page-account .order-status { padding:4px 12px; border-radius:100px; font-size:12px; font-weight:600; }
body.page-account .order-status.delivered { background:#e8f5e9; color:#2e7d32; }
body.page-account .order-status.shipped { background:#fff3e0; color:#ef6c00; }
body.page-account .order-status.processing { background:#e3f2fd; color:#1565c0; }
body.page-account .order-total { font-size:15px; font-weight:700; }
body.page-account .order-view { font-size:13px; font-weight:600; color:var(--brand); cursor:pointer; transition:opacity .2s; }
body.page-account .order-view:hover { opacity:.75; }

/* ── ADDRESS ── */
body.page-account .addr-card { border:1.5px solid var(--line); border-radius:14px; padding:20px; position:relative; transition:border-color .2s; }
body.page-account .addr-card:hover { border-color:var(--muted-3); }
body.page-account .addr-card.default { border-color:var(--brand); background:var(--brand-soft); }
body.page-account .addr-badge { position:absolute; top:12px; right:12px; padding:3px 10px; border-radius:100px; background:var(--brand); color:#fff; font-size:11px; font-weight:700; }
body.page-account .addr-name { font-size:15px; font-weight:700; margin-bottom:4px; }
body.page-account .addr-line { font-size:13px; color:var(--muted); line-height:1.6; }
body.page-account .addr-actions { display:flex; gap:12px; margin-top:14px; }
body.page-account .addr-actions button { font-size:13px; font-weight:600; color:var(--brand); cursor:pointer; background:none; border:none; transition:opacity .2s; }
body.page-account .addr-actions button:hover { opacity:.75; }
body.page-account .addr-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
body.page-account .add-addr {
  border:2px dashed var(--line); border-radius:14px; padding:24px; text-align:center;
  cursor:pointer; transition:border-color .2s,background .2s; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:14px; font-weight:500;
}
body.page-account .add-addr:hover { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
body.page-account .add-addr svg { width:24px; height:24px; }

/* ── PROFILE FORM ── */
body.page-account .prof-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
body.page-account .prof-row.full { grid-template-columns:1fr; }
body.page-account .prof-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
body.page-account .prof-input {
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
  font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; background:#fff; font-family:inherit;
}
body.page-account .prof-input:focus { border-color:var(--brand); }
body.page-account .save-btn { padding:14px 32px; border-radius:100px; background:var(--ink); color:#fff; font-size:14px; font-weight:700; border:none; cursor:pointer; transition:background .2s; }
body.page-account .save-btn:hover { background:var(--brand); }

/* ── SECURITY ── */
body.page-account .sec-item { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line-soft); }
body.page-account .sec-item:last-child { border-bottom:none; }
body.page-account .sec-label { font-size:14px; font-weight:600; }
body.page-account .sec-desc { font-size:12px; color:var(--muted-2); margin-top:2px; }
body.page-account .sec-btn { padding:8px 18px; border-radius:8px; border:1.5px solid var(--line); background:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
body.page-account .sec-btn:hover { border-color:var(--ink); }

/* ── SHARED ── */
body.page-account .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  body.page-account .acct-grid { grid-template-columns:240px 1fr; gap:28px; }
  body.page-account .addr-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  body.page-account .acct-grid { grid-template-columns:1fr; }
  body.page-account .acct-sidebar { position:static; }
  body.page-account .acct-nav { flex-direction:row; flex-wrap:wrap; gap:6px; }
  body.page-account .acct-nav-btn { padding:8px 14px; border-radius:100px; font-size:13px; }
  body.page-account .acct-nav-btn.on { background:var(--ink); color:#fff; }
  body.page-account .prof-row { grid-template-columns:1fr; }
  body.page-account .order-item { grid-template-columns:1fr auto; row-gap:8px; }
  body.page-account .order-status { justify-self:start; }
  body.page-account .order-total { grid-column:2; }
  body.page-account .order-view { grid-column:1; }
}
@media (max-width:380px) {
  body.page-account .acct-card { padding:20px; }
  body.page-account .acct-sidebar { padding:20px; }
}

/* ============================================================
   404.html
   ============================================================ */

/* ===== 404.html ===== */

/* ── DESIGN TOKENS ── */


body.page-404 body.no-scroll { overflow:hidden; }
body.page-404 input, body.page-404 select { font-family:inherit; }
body.page-404 body.no-scroll { overflow:hidden; }
body.page-404 a { text-decoration:none; color:inherit; }
body.page-404 button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-404 img { display:block; max-width:100%; }
body.page-404 input, body.page-404 select { font-family:inherit; }
body.page-404 a:focus-visible, body.page-404 button:focus-visible, body.page-404 input:focus-visible, body.page-404 summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
/* v3.7.45: same reduced-motion fix as line 50 — was bare, killed animations
   globally because of the leading universal `*` selector. */
@media (prefers-reduced-motion: reduce) {
  *, body.page-404 *::before, body.page-404 *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body.page-404 .ann-track { animation: none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-404 .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-404 .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-404 .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-404 .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-404 header {
  position:sticky; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-404 header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-404 .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-404 .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-404 .logo em { color:var(--brand); font-style:normal; }
body.page-404 header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-404 .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-404 .ni > a:hover, body.page-404 .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-404 .ni.active > a { color:var(--brand); }
body.page-404 .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-404 .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-404 .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-404 .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-404 .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-404 .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-404 .ib:hover { background:rgba(0,0,0,0.05); }
body.page-404 .ib svg { width:17px; height:17px; }
body.page-404 .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-404 .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-404 .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-404 .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-404 .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-404 .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-404 .bcrumb a:hover { color:var(--ink); }
body.page-404 .bcrumb .sep { color:var(--muted-3); }
body.page-404 .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-404 .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-404 .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-404 .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-404 .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-404 .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-404 .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-404 .chips-row:empty { padding:0; }
body.page-404 .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-404 .fchip:hover { border-color:var(--ink); }
body.page-404 .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-404 .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-404 .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-404 .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-404 .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-404 .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-404 .filters::-webkit-scrollbar { width:5px; }
body.page-404 .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-404 .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-404 .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-404 .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-404 .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-404 .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-404 .fgroup { border-top:1px solid var(--line-soft); }
body.page-404 .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-404 .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-404 .fgroup > summary::-webkit-details-marker { display:none; }
body.page-404 .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-404 .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-404 .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-404 .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-404 .fopt:hover { color:var(--ink); }
body.page-404 .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-404 .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-404 .fopt-mark.radio { border-radius:50%; }
body.page-404 .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-404 .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-404 .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-404 .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-404 .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-404 .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-404 .fopt-text { flex:1; }
body.page-404 .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-404 .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-404 .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-404 .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-404 .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-404 .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-404 .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-404 .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-404 .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-404 .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-404 .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-404 .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-404 .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-404 .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-404 .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-404 .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-404 .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-404 .results { min-width:0; }
body.page-404 .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-404 .t-left { display:flex; align-items:center; gap:14px; }
body.page-404 .t-count { font-size:13px; color:var(--muted-2); }
body.page-404 .t-count strong { color:var(--ink); font-weight:700; }
body.page-404 .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-404 .sortdrop { position:relative; z-index:10; }
body.page-404 .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-404 .sortbtn:hover { border-color:var(--ink); }
body.page-404 .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-404 .sortbtn .val { font-weight:600; }
body.page-404 .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-404 .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-404 .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-404 .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-404 .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-404 .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-404 .sortopt.on { color:var(--ink); font-weight:600; }
body.page-404 .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-404 .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-404 .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-404 .vbtn:hover { color:var(--ink); }
body.page-404 .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-404 .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-404 .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-404 .fbtn-mobile svg { width:14px; height:14px; }
body.page-404 .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-404 .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-404 .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-404 .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-404 .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-404 .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-404 .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-404 .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-404 .pgrid.list-view .pcard-quick { display:none; }
body.page-404 .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-404 .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-404 .pgrid.list-view .pcard-name { font-size:16px; }
body.page-404 .pgrid.list-view .pcard-var { font-size:13px; }
body.page-404 .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-404 .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-404 .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-404 .pcard { cursor:pointer; }
body.page-404 .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-404 .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-404 .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-404 .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-404 .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-404 .bg-new { background:var(--ink); color:#fff; }
body.page-404 .bg-hot { background:var(--brand); color:#fff; }
body.page-404 .bg-sale { background:#FF9500; color:#fff; }
body.page-404 .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-404 .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-404 .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-404 .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-404 .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-404 .pcard:hover .pcard-quick { bottom:12px; }
body.page-404 .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-404 .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-404 .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-404 .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-404 .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-404 .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-404 .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-404 .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-404 .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-404 .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-404 .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-404 .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-404 .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-404 footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-404 .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-404 .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-404 .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-404 .flogo em { color:var(--brand); font-style:normal; }
body.page-404 .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-404 .fsocs { display:flex; gap:8px; }
body.page-404 .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-404 .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-404 .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-404 .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-404 .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-404 .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-404 .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-404 .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-404 .fpay { display:flex; gap:8px; }
body.page-404 .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-404 .wrap, body.page-404 .fw { padding:0 28px; }
  body.page-404 header { width:calc(100% - 32px); }
  body.page-404 .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-404 header nav { gap:0; }
  body.page-404 .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-404 .search-pill span { display:none; }
  body.page-404 .search-pill { padding:8px 10px; }

  body.page-404 .shop-title { font-size:34px; }
  body.page-404 .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-404 .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-404 .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-404 .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-404 .hamburger { display:flex; }
  body.page-404 header nav, body.page-404 header .search-pill { display:none; }
  body.page-404 header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-404 .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-404 .logo { font-size:17px; }
  body.page-404 .ib { width:40px; height:40px; }
  body.page-404 .ib svg { width:18px; height:18px; }
  body.page-404 .ann-bar { padding:8px 0; }
  body.page-404 .ann-track { gap:36px; }
  body.page-404 .ann-track span { font-size:11px; }
  body.page-404 .wrap, body.page-404 .fw { padding:0 16px; }

  /* hero */
  body.page-404 .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-404 .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-404 .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-404 .shop-meta { padding-bottom:0; }
  body.page-404 .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-404 .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-404 .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-404 .filters.on { transform:translateY(0); }
  body.page-404 .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-404 .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-404 .fgroup > summary { padding:18px 20px 14px; }
  body.page-404 .fgroup-body { padding:0 20px 18px; }
  body.page-404 .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-404 .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-404 .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-404 .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-404 .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-404 .toolbar { gap:10px; padding-bottom:14px; }
  body.page-404 .t-left { gap:10px; flex:1; }
  body.page-404 .sortbtn .lbl { display:none; }
  body.page-404 .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-404 .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-404 .pcard-img { border-radius:var(--radius-sm); }
  body.page-404 .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-404 .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-404 .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-404 .pcard-name { font-size:13px; }
  body.page-404 .pcard-p { font-size:14px; }

  /* footer */
  body.page-404 footer { padding:40px 0 28px; margin-top:48px; }
  body.page-404 .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-404 .ftop > div:first-child { grid-column:1/-1; }
  body.page-404 .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-404 .filters .f-head-clear-desktop { display:none; }
  body.page-404 .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-404 .hw { padding:0 4px 0 14px; }
  body.page-404 .logo { font-size:16px; }
  body.page-404 .ib { width:36px; height:36px; }
  body.page-404 .pgrid { gap:14px 10px; }
  body.page-404 .pcard-name, body.page-404 .pcard-p { font-size:12.5px; }
}


/* ── 404 PAGE ── */
body.page-404 .e404-wrap { min-height:calc(100vh - 80px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 20px; }
body.page-404 .e404-num { font-size:160px; font-weight:800; letter-spacing:-8px; color:var(--brand); line-height:1; opacity:.9; }
body.page-404 .e404-title { font-size:32px; font-weight:700; letter-spacing:-.6px; margin:16px 0 12px; }
body.page-404 .e404-desc { font-size:15px; color:var(--muted); max-width:420px; line-height:1.7; margin-bottom:32px; }
body.page-404 .e404-actions { display:flex; gap:12px; }
body.page-404 .e404-btn { padding:14px 32px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; cursor:pointer; text-decoration:none; }
body.page-404 .e404-btn.p { background:var(--ink); color:#fff; }
body.page-404 .e404-btn.p:hover { background:var(--brand); }
body.page-404 .e404-btn.s { background:var(--bg); color:var(--ink); border:1.5px solid var(--line); }
body.page-404 .e404-btn.s:hover { border-color:var(--ink); }
body.page-404 .e404-ill { width:280px; height:200px; margin-bottom:32px; opacity:.8; }
@media (max-width:768px) {
  body.page-404 .e404-num { font-size:120px; }
  body.page-404 .e404-title { font-size:26px; }
  body.page-404 .e404-actions { flex-direction:column; width:100%; max-width:300px; }
  body.page-404 .e404-btn { width:100%; text-align:center; }
}

/* ============================================================
   shipping.html
   ============================================================ */

/* ===== shipping.html ===== */

/* ── DESIGN TOKENS ── */


body.page-shipping.no-scroll { overflow:hidden; }
body.page-shipping input, body.page-shipping select { font-family:inherit; }
body.page-shipping.no-scroll { overflow:hidden; }
body.page-shipping a { text-decoration:none; color:inherit; }
body.page-shipping button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-shipping img { display:block; max-width:100%; }
body.page-shipping input, body.page-shipping select { font-family:inherit; }
body.page-shipping a:focus-visible, body.page-shipping button:focus-visible, body.page-shipping input:focus-visible, body.page-shipping summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-shipping .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-shipping .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-shipping .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-shipping .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-shipping .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-shipping header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-shipping header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-shipping .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-shipping .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-shipping .logo em { color:var(--brand); font-style:normal; }
body.page-shipping header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-shipping .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-shipping .ni > a:hover, body.page-shipping .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-shipping .ni.active > a { color:var(--brand); }
body.page-shipping .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-shipping .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-shipping .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-shipping .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-shipping .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-shipping .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-shipping .ib:hover { background:rgba(0,0,0,0.05); }
body.page-shipping .ib svg { width:17px; height:17px; }
body.page-shipping .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-shipping .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-shipping .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-shipping .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-shipping .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-shipping .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-shipping .bcrumb a:hover { color:var(--ink); }
body.page-shipping .bcrumb .sep { color:var(--muted-3); }
body.page-shipping .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-shipping .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-shipping .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-shipping .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-shipping .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-shipping .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-shipping .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-shipping .chips-row:empty { padding:0; }
body.page-shipping .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-shipping .fchip:hover { border-color:var(--ink); }
body.page-shipping .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-shipping .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-shipping .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-shipping .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-shipping .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-shipping .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-shipping .filters::-webkit-scrollbar { width:5px; }
body.page-shipping .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-shipping .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-shipping .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-shipping .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-shipping .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-shipping .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-shipping .fgroup { border-top:1px solid var(--line-soft); }
body.page-shipping .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-shipping .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-shipping .fgroup > summary::-webkit-details-marker { display:none; }
body.page-shipping .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-shipping .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-shipping .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-shipping .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-shipping .fopt:hover { color:var(--ink); }
body.page-shipping .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-shipping .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-shipping .fopt-mark.radio { border-radius:50%; }
body.page-shipping .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-shipping .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-shipping .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-shipping .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-shipping .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-shipping .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-shipping .fopt-text { flex:1; }
body.page-shipping .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-shipping .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-shipping .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-shipping .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-shipping .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-shipping .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-shipping .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-shipping .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-shipping .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-shipping .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-shipping .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-shipping .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-shipping .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-shipping .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-shipping .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-shipping .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-shipping .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-shipping .results { min-width:0; }
body.page-shipping .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-shipping .t-left { display:flex; align-items:center; gap:14px; }
body.page-shipping .t-count { font-size:13px; color:var(--muted-2); }
body.page-shipping .t-count strong { color:var(--ink); font-weight:700; }
body.page-shipping .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-shipping .sortdrop { position:relative; z-index:10; }
body.page-shipping .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-shipping .sortbtn:hover { border-color:var(--ink); }
body.page-shipping .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-shipping .sortbtn .val { font-weight:600; }
body.page-shipping .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-shipping .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-shipping .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-shipping .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-shipping .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-shipping .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-shipping .sortopt.on { color:var(--ink); font-weight:600; }
body.page-shipping .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-shipping .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-shipping .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-shipping .vbtn:hover { color:var(--ink); }
body.page-shipping .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-shipping .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-shipping .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-shipping .fbtn-mobile svg { width:14px; height:14px; }
body.page-shipping .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-shipping .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-shipping .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-shipping .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-shipping .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-shipping .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-shipping .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-shipping .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-shipping .pgrid.list-view .pcard-quick { display:none; }
body.page-shipping .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-shipping .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-shipping .pgrid.list-view .pcard-name { font-size:16px; }
body.page-shipping .pgrid.list-view .pcard-var { font-size:13px; }
body.page-shipping .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-shipping .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-shipping .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-shipping .pcard { cursor:pointer; }
body.page-shipping .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-shipping .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-shipping .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-shipping .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-shipping .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-shipping .bg-new { background:var(--ink); color:#fff; }
body.page-shipping .bg-hot { background:var(--brand); color:#fff; }
body.page-shipping .bg-sale { background:#FF9500; color:#fff; }
body.page-shipping .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-shipping .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-shipping .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-shipping .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-shipping .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-shipping .pcard:hover .pcard-quick { bottom:12px; }
body.page-shipping .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-shipping .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-shipping .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-shipping .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-shipping .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-shipping .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-shipping .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-shipping .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-shipping .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-shipping .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-shipping .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-shipping .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-shipping .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-shipping footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-shipping .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-shipping .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-shipping .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-shipping .flogo em { color:var(--brand); font-style:normal; }
body.page-shipping .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-shipping .fsocs { display:flex; gap:8px; }
body.page-shipping .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-shipping .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-shipping .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-shipping .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-shipping .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-shipping .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-shipping .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-shipping .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-shipping .fpay { display:flex; gap:8px; }
body.page-shipping .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-shipping .wrap, body.page-shipping .fw { padding:0 28px; }
  body.page-shipping header { width:calc(100% - 32px); }
  body.page-shipping .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-shipping header nav { gap:0; }
  body.page-shipping .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-shipping .search-pill span { display:none; }
  body.page-shipping .search-pill { padding:8px 10px; }

  body.page-shipping .shop-title { font-size:34px; }
  body.page-shipping .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-shipping .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-shipping .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-shipping .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-shipping .hamburger { display:flex; }
  body.page-shipping header nav, body.page-shipping header .search-pill { display:none; }
  body.page-shipping header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-shipping .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-shipping .logo { font-size:17px; }
  body.page-shipping .ib { width:40px; height:40px; }
  body.page-shipping .ib svg { width:18px; height:18px; }
  body.page-shipping .ann-bar { padding:8px 0; }
  body.page-shipping .ann-track { gap:36px; }
  body.page-shipping .ann-track span { font-size:11px; }
  body.page-shipping .wrap, body.page-shipping .fw { padding:0 16px; }

  /* hero */
  body.page-shipping .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-shipping .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-shipping .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-shipping .shop-meta { padding-bottom:0; }
  body.page-shipping .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-shipping .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-shipping .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-shipping .filters.on { transform:translateY(0); }
  body.page-shipping .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-shipping .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-shipping .fgroup > summary { padding:18px 20px 14px; }
  body.page-shipping .fgroup-body { padding:0 20px 18px; }
  body.page-shipping .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-shipping .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-shipping .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-shipping .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-shipping .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-shipping .toolbar { gap:10px; padding-bottom:14px; }
  body.page-shipping .t-left { gap:10px; flex:1; }
  body.page-shipping .sortbtn .lbl { display:none; }
  body.page-shipping .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-shipping .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-shipping .pcard-img { border-radius:var(--radius-sm); }
  body.page-shipping .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-shipping .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-shipping .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-shipping .pcard-name { font-size:13px; }
  body.page-shipping .pcard-p { font-size:14px; }

  /* footer */
  body.page-shipping footer { padding:40px 0 28px; margin-top:48px; }
  body.page-shipping .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-shipping .ftop > div:first-child { grid-column:1/-1; }
  body.page-shipping .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-shipping .filters .f-head-clear-desktop { display:none; }
  body.page-shipping .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-shipping .hw { padding:0 4px 0 14px; }
  body.page-shipping .logo { font-size:16px; }
  body.page-shipping .ib { width:36px; height:36px; }
  body.page-shipping .pgrid { gap:14px 10px; }
  body.page-shipping .pcard-name, body.page-shipping .pcard-p { font-size:12.5px; }
}


/* ── SHIPPING PAGE ── */
body.page-shipping .ship-hero { padding:24px 0 0; }
body.page-shipping .ship-hero-inner {
  background:#1D1D1F; border-radius:28px; padding:56px 56px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:320px;
}
body.page-shipping .ship-hero-inner::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px); }
body.page-shipping .ship-hl { position:relative; z-index:2; padding-bottom:48px; }
body.page-shipping .ship-hl .sl { color:rgba(255,255,255,0.3); }
body.page-shipping .ship-hl h1 { font-size:42px; font-weight:800; letter-spacing:-1px; line-height:1.05; color:#fff; margin-bottom:12px; }
body.page-shipping .ship-hl p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-shipping .ship-hr { position:relative; z-index:2; align-self:flex-end; }
body.page-shipping .ship-hr img { width:100%; max-width:400px; border-radius:16px 16px 0 0; object-fit:cover; height:260px; margin-left:auto; }

body.page-shipping .ship-s { padding:48px 0 72px; }
body.page-shipping .ship-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
body.page-shipping .ship-block { margin-bottom:40px; }
body.page-shipping .ship-block h2 { font-size:22px; font-weight:700; margin-bottom:16px; }
body.page-shipping .ship-block p { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:14px; }
body.page-shipping .ship-table { width:100%; border-collapse:collapse; margin:16px 0; }
body.page-shipping .ship-table th { text-align:left; padding:12px 14px; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--line); }
body.page-shipping .ship-table td { padding:14px; font-size:14px; border-bottom:1px solid var(--line-soft); }
body.page-shipping .ship-table td strong { color:var(--ink); }
body.page-shipping .ship-table tr:last-child td { border-bottom:none; }
body.page-shipping .ship-note { background:var(--brand-soft); border-radius:14px; padding:18px 22px; font-size:13px; color:var(--ink-2); line-height:1.7; margin:20px 0; }
body.page-shipping .ship-note strong { color:var(--brand); }
body.page-shipping .ship-icon-row { display:flex; gap:24px; margin:24px 0; flex-wrap:wrap; }
body.page-shipping .ship-icon-item { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; }
body.page-shipping .ship-icon-item svg { width:22px; height:22px; color:var(--brand); flex-shrink:0; }

body.page-shipping .cta-s { padding:0 0 72px; }
body.page-shipping .cta-banner { background:#1D1D1F; border-radius:24px; padding:48px 56px; display:flex; align-items:center; justify-content:space-between; gap:48px; position:relative; overflow:hidden; }
body.page-shipping .cta-banner::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(40px); }
body.page-shipping .cta-left { position:relative; z-index:1; }
body.page-shipping .cta-left h2 { font-size:26px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-shipping .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); }
body.page-shipping .cta-right { position:relative; z-index:1; }
body.page-shipping .cta-btn { display:inline-block; padding:14px 28px; border-radius:100px; background:#fff; color:#1D1D1F; font-size:14px; font-weight:600; transition:all .2s; text-decoration:none; }
body.page-shipping .cta-btn:hover { transform:scale(1.03); }

body.page-shipping .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }

@media (max-width:1024px) {
  body.page-shipping .ship-hero-inner { padding:40px 40px 0; min-height:280px; }
  body.page-shipping .ship-hl h1 { font-size:36px; }
  body.page-shipping .ship-grid { gap:32px; }
}
@media (max-width:768px) {
  body.page-shipping .ship-hero-inner { grid-template-columns:1fr; padding:40px 32px 0; min-height:auto; }
  body.page-shipping .ship-hr { display:none; }
  body.page-shipping .ship-hl { padding-bottom:40px; }
  body.page-shipping .ship-grid { grid-template-columns:1fr; }
  body.page-shipping .ship-hl h1 { font-size:30px; }
  body.page-shipping .cta-banner { flex-direction:column; align-items:flex-start; gap:20px; padding:36px 28px; }
  body.page-shipping .ship-table th, body.page-shipping .ship-table td { padding:10px 8px; font-size:13px; }
}
@media (max-width:380px) {
  body.page-shipping .ship-hero-inner { padding:32px 24px 0; }
  body.page-shipping .ship-hl h1 { font-size:26px; }
  body.page-shipping .ship-icon-row { gap:14px; }
}

/* ============================================================
   returns.html
   ============================================================ */

/* ===== returns.html ===== */

/* ── DESIGN TOKENS ── */


body.page-returns.no-scroll { overflow:hidden; }
body.page-returns input, body.page-returns select { font-family:inherit; }
body.page-returns.no-scroll { overflow:hidden; }
body.page-returns a { text-decoration:none; color:inherit; }
body.page-returns button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-returns img { display:block; max-width:100%; }
body.page-returns input, body.page-returns select { font-family:inherit; }
body.page-returns a:focus-visible, body.page-returns button:focus-visible, body.page-returns input:focus-visible, body.page-returns summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-returns .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-returns .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-returns .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-returns .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-returns .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-returns header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-returns header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-returns .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-returns .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-returns .logo em { color:var(--brand); font-style:normal; }
body.page-returns header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-returns .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-returns .ni > a:hover, body.page-returns .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-returns .ni.active > a { color:var(--brand); }
body.page-returns .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-returns .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-returns .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-returns .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-returns .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-returns .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-returns .ib:hover { background:rgba(0,0,0,0.05); }
body.page-returns .ib svg { width:17px; height:17px; }
body.page-returns .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-returns .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-returns .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-returns .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-returns .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-returns .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-returns .bcrumb a:hover { color:var(--ink); }
body.page-returns .bcrumb .sep { color:var(--muted-3); }
body.page-returns .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-returns .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-returns .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-returns .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-returns .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-returns .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-returns .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-returns .chips-row:empty { padding:0; }
body.page-returns .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-returns .fchip:hover { border-color:var(--ink); }
body.page-returns .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-returns .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-returns .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-returns .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-returns .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-returns .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-returns .filters::-webkit-scrollbar { width:5px; }
body.page-returns .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-returns .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-returns .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-returns .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-returns .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-returns .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-returns .fgroup { border-top:1px solid var(--line-soft); }
body.page-returns .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-returns .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-returns .fgroup > summary::-webkit-details-marker { display:none; }
body.page-returns .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-returns .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-returns .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-returns .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-returns .fopt:hover { color:var(--ink); }
body.page-returns .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-returns .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-returns .fopt-mark.radio { border-radius:50%; }
body.page-returns .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-returns .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-returns .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-returns .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-returns .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-returns .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-returns .fopt-text { flex:1; }
body.page-returns .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-returns .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-returns .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-returns .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-returns .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-returns .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-returns .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-returns .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-returns .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-returns .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-returns .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-returns .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-returns .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-returns .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-returns .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-returns .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-returns .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-returns .results { min-width:0; }
body.page-returns .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-returns .t-left { display:flex; align-items:center; gap:14px; }
body.page-returns .t-count { font-size:13px; color:var(--muted-2); }
body.page-returns .t-count strong { color:var(--ink); font-weight:700; }
body.page-returns .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-returns .sortdrop { position:relative; z-index:10; }
body.page-returns .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-returns .sortbtn:hover { border-color:var(--ink); }
body.page-returns .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-returns .sortbtn .val { font-weight:600; }
body.page-returns .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-returns .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-returns .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-returns .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-returns .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-returns .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-returns .sortopt.on { color:var(--ink); font-weight:600; }
body.page-returns .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-returns .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-returns .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-returns .vbtn:hover { color:var(--ink); }
body.page-returns .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-returns .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-returns .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-returns .fbtn-mobile svg { width:14px; height:14px; }
body.page-returns .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-returns .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-returns .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-returns .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-returns .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-returns .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-returns .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-returns .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-returns .pgrid.list-view .pcard-quick { display:none; }
body.page-returns .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-returns .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-returns .pgrid.list-view .pcard-name { font-size:16px; }
body.page-returns .pgrid.list-view .pcard-var { font-size:13px; }
body.page-returns .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-returns .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-returns .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-returns .pcard { cursor:pointer; }
body.page-returns .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-returns .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-returns .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-returns .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-returns .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-returns .bg-new { background:var(--ink); color:#fff; }
body.page-returns .bg-hot { background:var(--brand); color:#fff; }
body.page-returns .bg-sale { background:#FF9500; color:#fff; }
body.page-returns .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-returns .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-returns .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-returns .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-returns .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-returns .pcard:hover .pcard-quick { bottom:12px; }
body.page-returns .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-returns .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-returns .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-returns .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-returns .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-returns .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-returns .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-returns .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-returns .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-returns .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-returns .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-returns .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-returns .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-returns footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-returns .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-returns .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-returns .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-returns .flogo em { color:var(--brand); font-style:normal; }
body.page-returns .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-returns .fsocs { display:flex; gap:8px; }
body.page-returns .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-returns .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-returns .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-returns .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-returns .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-returns .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-returns .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-returns .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-returns .fpay { display:flex; gap:8px; }
body.page-returns .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-returns .wrap, body.page-returns .fw { padding:0 28px; }
  body.page-returns header { width:calc(100% - 32px); }
  body.page-returns .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-returns header nav { gap:0; }
  body.page-returns .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-returns .search-pill span { display:none; }
  body.page-returns .search-pill { padding:8px 10px; }

  body.page-returns .shop-title { font-size:34px; }
  body.page-returns .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-returns .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-returns .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-returns .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-returns .hamburger { display:flex; }
  body.page-returns header nav, body.page-returns header .search-pill { display:none; }
  body.page-returns header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-returns .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-returns .logo { font-size:17px; }
  body.page-returns .ib { width:40px; height:40px; }
  body.page-returns .ib svg { width:18px; height:18px; }
  body.page-returns .ann-bar { padding:8px 0; }
  body.page-returns .ann-track { gap:36px; }
  body.page-returns .ann-track span { font-size:11px; }
  body.page-returns .wrap, body.page-returns .fw { padding:0 16px; }

  /* hero */
  body.page-returns .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-returns .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-returns .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-returns .shop-meta { padding-bottom:0; }
  body.page-returns .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-returns .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-returns .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-returns .filters.on { transform:translateY(0); }
  body.page-returns .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-returns .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-returns .fgroup > summary { padding:18px 20px 14px; }
  body.page-returns .fgroup-body { padding:0 20px 18px; }
  body.page-returns .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-returns .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-returns .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-returns .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-returns .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-returns .toolbar { gap:10px; padding-bottom:14px; }
  body.page-returns .t-left { gap:10px; flex:1; }
  body.page-returns .sortbtn .lbl { display:none; }
  body.page-returns .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-returns .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-returns .pcard-img { border-radius:var(--radius-sm); }
  body.page-returns .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-returns .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-returns .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-returns .pcard-name { font-size:13px; }
  body.page-returns .pcard-p { font-size:14px; }

  /* footer */
  body.page-returns footer { padding:40px 0 28px; margin-top:48px; }
  body.page-returns .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-returns .ftop > div:first-child { grid-column:1/-1; }
  body.page-returns .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-returns .filters .f-head-clear-desktop { display:none; }
  body.page-returns .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-returns .hw { padding:0 4px 0 14px; }
  body.page-returns .logo { font-size:16px; }
  body.page-returns .ib { width:36px; height:36px; }
  body.page-returns .pgrid { gap:14px 10px; }
  body.page-returns .pcard-name, body.page-returns .pcard-p { font-size:12.5px; }
}


/* ── RETURNS PAGE ── */
body.page-returns .ret-hero { padding:24px 0 0; }
body.page-returns .ret-hero-inner {
  background:#1D1D1F; border-radius:28px; padding:56px 56px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:320px;
}
body.page-returns .ret-hero-inner::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px); }
body.page-returns .ret-hl { position:relative; z-index:2; padding-bottom:48px; }
body.page-returns .ret-hl .sl { color:rgba(255,255,255,0.3); }
body.page-returns .ret-hl h1 { font-size:42px; font-weight:800; letter-spacing:-1px; line-height:1.05; color:#fff; margin-bottom:12px; }
body.page-returns .ret-hl p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-returns .ret-hr { position:relative; z-index:2; align-self:flex-end; }
body.page-returns .ret-hr img { width:100%; max-width:400px; border-radius:16px 16px 0 0; object-fit:cover; height:260px; margin-left:auto; }

body.page-returns .ret-s { padding:48px 0 72px; }
body.page-returns .ret-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
body.page-returns .ret-block { margin-bottom:40px; }
body.page-returns .ret-block h2 { font-size:22px; font-weight:700; margin-bottom:16px; }
body.page-returns .ret-block p { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:14px; }
body.page-returns .ret-steps { display:flex; flex-direction:column; gap:0; margin:20px 0; position:relative; }
body.page-returns .ret-steps::before { content:''; position:absolute; left:19px; top:0; bottom:0; width:2px; background:var(--line); }
body.page-returns .ret-step { display:flex; gap:16px; padding:18px 0; position:relative; }
body.page-returns .ret-step-num { width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; position:relative; z-index:1; }
body.page-returns .ret-step-body { flex:1; padding-top:2px; }
body.page-returns .ret-step-title { font-size:15px; font-weight:700; margin-bottom:4px; }
body.page-returns .ret-step-desc { font-size:13px; color:var(--muted); line-height:1.6; }
body.page-returns .ret-note { background:var(--bg); border-radius:14px; padding:18px 22px; font-size:13px; color:var(--muted); line-height:1.7; margin:16px 0; border:1.5px solid var(--line); }
body.page-returns .ret-note strong { color:var(--ink); }
body.page-returns .ret-eligible { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
body.page-returns .ret-eligible-item { display:flex; align-items:center; gap:10px; font-size:14px; }
body.page-returns .ret-eligible-item svg { width:18px; height:18px; color:var(--brand); flex-shrink:0; }
body.page-returns .ret-not-eligible { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
body.page-returns .ret-not-eligible-item { display:flex; align-items:center; gap:10px; font-size:14px; }
body.page-returns .ret-not-eligible-item svg { width:18px; height:18px; color:var(--muted-3); flex-shrink:0; }

body.page-returns .cta-s { padding:0 0 72px; }
body.page-returns .cta-banner { background:#1D1D1F; border-radius:24px; padding:48px 56px; display:flex; align-items:center; justify-content:space-between; gap:48px; position:relative; overflow:hidden; }
body.page-returns .cta-banner::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(40px); }
body.page-returns .cta-left { position:relative; z-index:1; }
body.page-returns .cta-left h2 { font-size:26px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-returns .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); }
body.page-returns .cta-btn { display:inline-block; padding:14px 28px; border-radius:100px; background:#fff; color:#1D1D1F; font-size:14px; font-weight:600; transition:all .2s; text-decoration:none; }
body.page-returns .cta-btn:hover { transform:scale(1.03); }

body.page-returns .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }

@media (max-width:1024px) {
  body.page-returns .ret-hero-inner { padding:40px 40px 0; min-height:280px; }
  body.page-returns .ret-hl h1 { font-size:36px; }
  body.page-returns .ret-grid { gap:32px; }
}
@media (max-width:768px) {
  body.page-returns .ret-hero-inner { grid-template-columns:1fr; padding:40px 32px 0; min-height:auto; }
  body.page-returns .ret-hr { display:none; }
  body.page-returns .ret-hl { padding-bottom:40px; }
  body.page-returns .ret-grid { grid-template-columns:1fr; }
  body.page-returns .ret-hl h1 { font-size:30px; }
  body.page-returns .cta-banner { flex-direction:column; align-items:flex-start; gap:20px; padding:36px 28px; }
}
@media (max-width:380px) {
  body.page-returns .ret-hero-inner { padding:32px 24px 0; }
  body.page-returns .ret-hl h1 { font-size:26px; }
}

/* ============================================================
   privacy.html
   ============================================================ */

/* ===== privacy.html ===== */

/* ── DESIGN TOKENS ── */


body.page-privacy.no-scroll { overflow:hidden; }
body.page-privacy input, body.page-privacy select { font-family:inherit; }
body.page-privacy.no-scroll { overflow:hidden; }
body.page-privacy a { text-decoration:none; color:inherit; }
body.page-privacy button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-privacy img { display:block; max-width:100%; }
body.page-privacy input, body.page-privacy select { font-family:inherit; }
body.page-privacy a:focus-visible, body.page-privacy button:focus-visible, body.page-privacy input:focus-visible, body.page-privacy summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-privacy .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-privacy .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-privacy .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-privacy .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-privacy .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-privacy header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-privacy header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-privacy .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-privacy .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-privacy .logo em { color:var(--brand); font-style:normal; }
body.page-privacy header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-privacy .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-privacy .ni > a:hover, body.page-privacy .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-privacy .ni.active > a { color:var(--brand); }
body.page-privacy .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-privacy .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-privacy .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-privacy .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-privacy .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-privacy .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-privacy .ib:hover { background:rgba(0,0,0,0.05); }
body.page-privacy .ib svg { width:17px; height:17px; }
body.page-privacy .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-privacy .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-privacy .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-privacy .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-privacy .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-privacy .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-privacy .bcrumb a:hover { color:var(--ink); }
body.page-privacy .bcrumb .sep { color:var(--muted-3); }
body.page-privacy .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-privacy .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-privacy .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-privacy .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-privacy .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-privacy .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-privacy .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-privacy .chips-row:empty { padding:0; }
body.page-privacy .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-privacy .fchip:hover { border-color:var(--ink); }
body.page-privacy .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-privacy .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-privacy .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-privacy .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-privacy .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-privacy .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-privacy .filters::-webkit-scrollbar { width:5px; }
body.page-privacy .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-privacy .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-privacy .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-privacy .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-privacy .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-privacy .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-privacy .fgroup { border-top:1px solid var(--line-soft); }
body.page-privacy .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-privacy .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-privacy .fgroup > summary::-webkit-details-marker { display:none; }
body.page-privacy .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-privacy .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-privacy .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-privacy .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-privacy .fopt:hover { color:var(--ink); }
body.page-privacy .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-privacy .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-privacy .fopt-mark.radio { border-radius:50%; }
body.page-privacy .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-privacy .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-privacy .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-privacy .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-privacy .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-privacy .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-privacy .fopt-text { flex:1; }
body.page-privacy .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-privacy .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-privacy .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-privacy .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-privacy .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-privacy .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-privacy .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-privacy .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-privacy .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-privacy .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-privacy .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-privacy .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-privacy .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-privacy .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-privacy .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-privacy .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-privacy .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-privacy .results { min-width:0; }
body.page-privacy .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-privacy .t-left { display:flex; align-items:center; gap:14px; }
body.page-privacy .t-count { font-size:13px; color:var(--muted-2); }
body.page-privacy .t-count strong { color:var(--ink); font-weight:700; }
body.page-privacy .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-privacy .sortdrop { position:relative; z-index:10; }
body.page-privacy .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-privacy .sortbtn:hover { border-color:var(--ink); }
body.page-privacy .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-privacy .sortbtn .val { font-weight:600; }
body.page-privacy .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-privacy .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-privacy .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-privacy .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-privacy .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-privacy .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-privacy .sortopt.on { color:var(--ink); font-weight:600; }
body.page-privacy .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-privacy .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-privacy .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-privacy .vbtn:hover { color:var(--ink); }
body.page-privacy .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-privacy .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-privacy .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-privacy .fbtn-mobile svg { width:14px; height:14px; }
body.page-privacy .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-privacy .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-privacy .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-privacy .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-privacy .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-privacy .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-privacy .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-privacy .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-privacy .pgrid.list-view .pcard-quick { display:none; }
body.page-privacy .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-privacy .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-privacy .pgrid.list-view .pcard-name { font-size:16px; }
body.page-privacy .pgrid.list-view .pcard-var { font-size:13px; }
body.page-privacy .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-privacy .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-privacy .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-privacy .pcard { cursor:pointer; }
body.page-privacy .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-privacy .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-privacy .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-privacy .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-privacy .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-privacy .bg-new { background:var(--ink); color:#fff; }
body.page-privacy .bg-hot { background:var(--brand); color:#fff; }
body.page-privacy .bg-sale { background:#FF9500; color:#fff; }
body.page-privacy .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-privacy .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-privacy .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-privacy .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-privacy .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-privacy .pcard:hover .pcard-quick { bottom:12px; }
body.page-privacy .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-privacy .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-privacy .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-privacy .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-privacy .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-privacy .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-privacy .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-privacy .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-privacy .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-privacy .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-privacy .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-privacy .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-privacy .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-privacy footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-privacy .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-privacy .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-privacy .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-privacy .flogo em { color:var(--brand); font-style:normal; }
body.page-privacy .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-privacy .fsocs { display:flex; gap:8px; }
body.page-privacy .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-privacy .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-privacy .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-privacy .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-privacy .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-privacy .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-privacy .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-privacy .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-privacy .fpay { display:flex; gap:8px; }
body.page-privacy .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-privacy .wrap, body.page-privacy .fw { padding:0 28px; }
  body.page-privacy header { width:calc(100% - 32px); }
  body.page-privacy .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-privacy header nav { gap:0; }
  body.page-privacy .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-privacy .search-pill span { display:none; }
  body.page-privacy .search-pill { padding:8px 10px; }

  body.page-privacy .shop-title { font-size:34px; }
  body.page-privacy .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-privacy .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-privacy .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-privacy .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-privacy .hamburger { display:flex; }
  body.page-privacy header nav, body.page-privacy header .search-pill { display:none; }
  body.page-privacy header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-privacy .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-privacy .logo { font-size:17px; }
  body.page-privacy .ib { width:40px; height:40px; }
  body.page-privacy .ib svg { width:18px; height:18px; }
  body.page-privacy .ann-bar { padding:8px 0; }
  body.page-privacy .ann-track { gap:36px; }
  body.page-privacy .ann-track span { font-size:11px; }
  body.page-privacy .wrap, body.page-privacy .fw { padding:0 16px; }

  /* hero */
  body.page-privacy .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-privacy .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-privacy .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-privacy .shop-meta { padding-bottom:0; }
  body.page-privacy .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-privacy .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-privacy .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-privacy .filters.on { transform:translateY(0); }
  body.page-privacy .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-privacy .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-privacy .fgroup > summary { padding:18px 20px 14px; }
  body.page-privacy .fgroup-body { padding:0 20px 18px; }
  body.page-privacy .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-privacy .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-privacy .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-privacy .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-privacy .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-privacy .toolbar { gap:10px; padding-bottom:14px; }
  body.page-privacy .t-left { gap:10px; flex:1; }
  body.page-privacy .sortbtn .lbl { display:none; }
  body.page-privacy .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-privacy .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-privacy .pcard-img { border-radius:var(--radius-sm); }
  body.page-privacy .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-privacy .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-privacy .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-privacy .pcard-name { font-size:13px; }
  body.page-privacy .pcard-p { font-size:14px; }

  /* footer */
  body.page-privacy footer { padding:40px 0 28px; margin-top:48px; }
  body.page-privacy .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-privacy .ftop > div:first-child { grid-column:1/-1; }
  body.page-privacy .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-privacy .filters .f-head-clear-desktop { display:none; }
  body.page-privacy .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-privacy .hw { padding:0 4px 0 14px; }
  body.page-privacy .logo { font-size:16px; }
  body.page-privacy .ib { width:36px; height:36px; }
  body.page-privacy .pgrid { gap:14px 10px; }
  body.page-privacy .pcard-name, body.page-privacy .pcard-p { font-size:12.5px; }
}


/* ── PRIVACY PAGE ── */
body.page-privacy .legal-wrap { padding:32px 0 72px; }
body.page-privacy .legal-head { margin-bottom:40px; }
body.page-privacy .legal-head h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-privacy .legal-head p { font-size:14px; color:var(--muted); }
body.page-privacy .legal-head .updated { font-size:12px; color:var(--muted-2); margin-top:6px; }
body.page-privacy .legal-grid { display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
body.page-privacy .legal-toc { position:sticky; top:100px; }
body.page-privacy .legal-toc-title { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
body.page-privacy .legal-toc a { display:block; padding:8px 0; font-size:13px; font-weight:500; color:var(--muted-2); border-bottom:1px solid var(--line-soft); transition:color .2s; }
body.page-privacy .legal-toc a:hover { color:var(--brand); }
body.page-privacy .legal-toc a:last-child { border-bottom:none; }
body.page-privacy .legal-body { font-size:14px; line-height:1.85; color:var(--ink-2); }
body.page-privacy .legal-body h2 { font-size:22px; font-weight:700; color:var(--ink); margin:36px 0 14px; line-height:1.2; }
body.page-privacy .legal-body h3 { font-size:16px; font-weight:700; color:var(--ink); margin:24px 0 10px; }
body.page-privacy .legal-body p { margin-bottom:14px; }
body.page-privacy .legal-body ul { margin:12px 0; padding-left:24px; }
body.page-privacy .legal-body li { margin-bottom:8px; }
body.page-privacy .legal-body strong { color:var(--ink); }
body.page-privacy .legal-highlight { background:var(--brand-soft); border-left:3px solid var(--brand); padding:14px 20px; border-radius:0 12px 12px 0; margin:20px 0; font-size:13px; }
body.page-privacy .legal-highlight strong { color:var(--brand); }

@media (max-width:1024px) {
  body.page-privacy .legal-grid { grid-template-columns:220px 1fr; gap:32px; }
}
@media (max-width:768px) {
  body.page-privacy .legal-grid { grid-template-columns:1fr; }
  body.page-privacy .legal-toc { position:static; margin-bottom:24px; }
  body.page-privacy .legal-head h1 { font-size:28px; }
}

/* ============================================================
   terms.html
   ============================================================ */

/* ===== terms.html ===== */

/* ── DESIGN TOKENS ── */


body.page-terms.no-scroll { overflow:hidden; }
body.page-terms input, body.page-terms select { font-family:inherit; }
body.page-terms.no-scroll { overflow:hidden; }
body.page-terms a { text-decoration:none; color:inherit; }
body.page-terms button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-terms img { display:block; max-width:100%; }
body.page-terms input, body.page-terms select { font-family:inherit; }
body.page-terms a:focus-visible, body.page-terms button:focus-visible, body.page-terms input:focus-visible, body.page-terms summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-terms .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-terms .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-terms .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-terms .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-terms .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-terms header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-terms header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-terms .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-terms .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-terms .logo em { color:var(--brand); font-style:normal; }
body.page-terms header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-terms .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-terms .ni > a:hover, body.page-terms .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-terms .ni.active > a { color:var(--brand); }
body.page-terms .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-terms .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-terms .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-terms .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-terms .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-terms .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-terms .ib:hover { background:rgba(0,0,0,0.05); }
body.page-terms .ib svg { width:17px; height:17px; }
body.page-terms .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-terms .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-terms .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-terms .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-terms .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-terms .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-terms .bcrumb a:hover { color:var(--ink); }
body.page-terms .bcrumb .sep { color:var(--muted-3); }
body.page-terms .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-terms .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-terms .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-terms .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-terms .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-terms .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-terms .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-terms .chips-row:empty { padding:0; }
body.page-terms .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-terms .fchip:hover { border-color:var(--ink); }
body.page-terms .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-terms .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-terms .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-terms .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-terms .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-terms .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-terms .filters::-webkit-scrollbar { width:5px; }
body.page-terms .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-terms .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-terms .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-terms .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-terms .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-terms .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-terms .fgroup { border-top:1px solid var(--line-soft); }
body.page-terms .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-terms .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-terms .fgroup > summary::-webkit-details-marker { display:none; }
body.page-terms .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-terms .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-terms .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-terms .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-terms .fopt:hover { color:var(--ink); }
body.page-terms .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-terms .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-terms .fopt-mark.radio { border-radius:50%; }
body.page-terms .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-terms .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-terms .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-terms .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-terms .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-terms .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-terms .fopt-text { flex:1; }
body.page-terms .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-terms .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-terms .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-terms .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-terms .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-terms .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-terms .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-terms .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-terms .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-terms .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-terms .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-terms .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-terms .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-terms .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-terms .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-terms .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-terms .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-terms .results { min-width:0; }
body.page-terms .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-terms .t-left { display:flex; align-items:center; gap:14px; }
body.page-terms .t-count { font-size:13px; color:var(--muted-2); }
body.page-terms .t-count strong { color:var(--ink); font-weight:700; }
body.page-terms .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-terms .sortdrop { position:relative; z-index:10; }
body.page-terms .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-terms .sortbtn:hover { border-color:var(--ink); }
body.page-terms .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-terms .sortbtn .val { font-weight:600; }
body.page-terms .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-terms .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-terms .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-terms .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-terms .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-terms .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-terms .sortopt.on { color:var(--ink); font-weight:600; }
body.page-terms .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-terms .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-terms .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-terms .vbtn:hover { color:var(--ink); }
body.page-terms .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-terms .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-terms .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-terms .fbtn-mobile svg { width:14px; height:14px; }
body.page-terms .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-terms .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-terms .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-terms .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-terms .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-terms .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-terms .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-terms .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-terms .pgrid.list-view .pcard-quick { display:none; }
body.page-terms .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-terms .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-terms .pgrid.list-view .pcard-name { font-size:16px; }
body.page-terms .pgrid.list-view .pcard-var { font-size:13px; }
body.page-terms .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-terms .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-terms .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-terms .pcard { cursor:pointer; }
body.page-terms .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-terms .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-terms .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-terms .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-terms .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-terms .bg-new { background:var(--ink); color:#fff; }
body.page-terms .bg-hot { background:var(--brand); color:#fff; }
body.page-terms .bg-sale { background:#FF9500; color:#fff; }
body.page-terms .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-terms .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-terms .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-terms .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-terms .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-terms .pcard:hover .pcard-quick { bottom:12px; }
body.page-terms .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-terms .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-terms .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-terms .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-terms .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-terms .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-terms .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-terms .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-terms .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-terms .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-terms .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-terms .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-terms .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-terms footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-terms .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-terms .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-terms .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-terms .flogo em { color:var(--brand); font-style:normal; }
body.page-terms .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-terms .fsocs { display:flex; gap:8px; }
body.page-terms .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-terms .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-terms .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-terms .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-terms .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-terms .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-terms .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-terms .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-terms .fpay { display:flex; gap:8px; }
body.page-terms .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-terms .wrap, body.page-terms .fw { padding:0 28px; }
  body.page-terms header { width:calc(100% - 32px); }
  body.page-terms .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-terms header nav { gap:0; }
  body.page-terms .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-terms .search-pill span { display:none; }
  body.page-terms .search-pill { padding:8px 10px; }

  body.page-terms .shop-title { font-size:34px; }
  body.page-terms .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-terms .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-terms .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-terms .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-terms .hamburger { display:flex; }
  body.page-terms header nav, body.page-terms header .search-pill { display:none; }
  body.page-terms header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-terms .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-terms .logo { font-size:17px; }
  body.page-terms .ib { width:40px; height:40px; }
  body.page-terms .ib svg { width:18px; height:18px; }
  body.page-terms .ann-bar { padding:8px 0; }
  body.page-terms .ann-track { gap:36px; }
  body.page-terms .ann-track span { font-size:11px; }
  body.page-terms .wrap, body.page-terms .fw { padding:0 16px; }

  /* hero */
  body.page-terms .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-terms .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-terms .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-terms .shop-meta { padding-bottom:0; }
  body.page-terms .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-terms .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-terms .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-terms .filters.on { transform:translateY(0); }
  body.page-terms .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-terms .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-terms .fgroup > summary { padding:18px 20px 14px; }
  body.page-terms .fgroup-body { padding:0 20px 18px; }
  body.page-terms .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-terms .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-terms .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-terms .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-terms .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-terms .toolbar { gap:10px; padding-bottom:14px; }
  body.page-terms .t-left { gap:10px; flex:1; }
  body.page-terms .sortbtn .lbl { display:none; }
  body.page-terms .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-terms .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-terms .pcard-img { border-radius:var(--radius-sm); }
  body.page-terms .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-terms .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-terms .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-terms .pcard-name { font-size:13px; }
  body.page-terms .pcard-p { font-size:14px; }

  /* footer */
  body.page-terms footer { padding:40px 0 28px; margin-top:48px; }
  body.page-terms .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-terms .ftop > div:first-child { grid-column:1/-1; }
  body.page-terms .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-terms .filters .f-head-clear-desktop { display:none; }
  body.page-terms .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-terms .hw { padding:0 4px 0 14px; }
  body.page-terms .logo { font-size:16px; }
  body.page-terms .ib { width:36px; height:36px; }
  body.page-terms .pgrid { gap:14px 10px; }
  body.page-terms .pcard-name, body.page-terms .pcard-p { font-size:12.5px; }
}


/* ── TERMS PAGE ── */
body.page-terms .legal-wrap { padding:32px 0 72px; }
body.page-terms .legal-head { margin-bottom:40px; }
body.page-terms .legal-head h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-terms .legal-head p { font-size:14px; color:var(--muted); }
body.page-terms .legal-head .updated { font-size:12px; color:var(--muted-2); margin-top:6px; }
body.page-terms .legal-grid { display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
body.page-terms .legal-toc { position:sticky; top:100px; }
body.page-terms .legal-toc-title { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
body.page-terms .legal-toc a { display:block; padding:8px 0; font-size:13px; font-weight:500; color:var(--muted-2); border-bottom:1px solid var(--line-soft); transition:color .2s; }
body.page-terms .legal-toc a:hover { color:var(--brand); }
body.page-terms .legal-toc a:last-child { border-bottom:none; }
body.page-terms .legal-body { font-size:14px; line-height:1.85; color:var(--ink-2); }
body.page-terms .legal-body h2 { font-size:22px; font-weight:700; color:var(--ink); margin:36px 0 14px; line-height:1.2; }
body.page-terms .legal-body h3 { font-size:16px; font-weight:700; color:var(--ink); margin:24px 0 10px; }
body.page-terms .legal-body p { margin-bottom:14px; }
body.page-terms .legal-body ul { margin:12px 0; padding-left:24px; }
body.page-terms .legal-body li { margin-bottom:8px; }
body.page-terms .legal-body strong { color:var(--ink); }
body.page-terms .legal-highlight { background:var(--brand-soft); border-left:3px solid var(--brand); padding:14px 20px; border-radius:0 12px 12px 0; margin:20px 0; font-size:13px; }
body.page-terms .legal-highlight strong { color:var(--brand); }

@media (max-width:1024px) {
  body.page-terms .legal-grid { grid-template-columns:220px 1fr; gap:32px; }
}
@media (max-width:768px) {
  body.page-terms .legal-grid { grid-template-columns:1fr; }
  body.page-terms .legal-toc { position:static; margin-bottom:24px; }
  body.page-terms .legal-head h1 { font-size:28px; }
}

/* ============================================================
   new-arrivals.html
   ============================================================ */

/* ===== new-arrivals.html ===== */

/* ── DESIGN TOKENS ── */


body.page-new-arrivals.no-scroll { overflow:hidden; }
body.page-new-arrivals input, body.page-new-arrivals select { font-family:inherit; }
body.page-new-arrivals.no-scroll { overflow:hidden; }
body.page-new-arrivals a { text-decoration:none; color:inherit; }
body.page-new-arrivals button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-new-arrivals img { display:block; max-width:100%; }
body.page-new-arrivals input, body.page-new-arrivals select { font-family:inherit; }
body.page-new-arrivals a:focus-visible, body.page-new-arrivals button:focus-visible, body.page-new-arrivals input:focus-visible, body.page-new-arrivals summary:focus-visible {
  outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  
  body.page-new-arrivals .ann-track { animation:none !important; }
}

/* ── ANNOUNCEMENT BAR ── */
body.page-new-arrivals .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-new-arrivals .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-new-arrivals .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-new-arrivals .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── HEADER ── */
body.page-new-arrivals header {
  position:sticky;
  overflow:visible; top:16px; margin:10px auto 0;
  width:calc(100% - 64px); max-width:1360px;
  z-index:800;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition:box-shadow .3s;
}
body.page-new-arrivals header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-new-arrivals .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-new-arrivals .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-new-arrivals .logo em { color:var(--brand); font-style:normal; }
body.page-new-arrivals header nav { display:flex; gap:8px; flex:1; justify-content:center; }
body.page-new-arrivals .ni > a { display:flex; align-items:center; gap:3px; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-new-arrivals .ni > a:hover, body.page-new-arrivals .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-new-arrivals .ni.active > a { color:var(--brand); }
body.page-new-arrivals .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-new-arrivals .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-new-arrivals .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-new-arrivals .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-new-arrivals .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-new-arrivals .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-new-arrivals .ib:hover { background:rgba(0,0,0,0.05); }
body.page-new-arrivals .ib svg { width:17px; height:17px; }
body.page-new-arrivals .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-new-arrivals .hamburger { display:none; }

/* ── MOBILE DRAWER ── */

/* ── WRAP ── */
body.page-new-arrivals .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }

/* ── BREADCRUMB / PAGE HERO ── */
body.page-new-arrivals .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-new-arrivals .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-new-arrivals .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-new-arrivals .bcrumb a:hover { color:var(--ink); }
body.page-new-arrivals .bcrumb .sep { color:var(--muted-3); }
body.page-new-arrivals .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-new-arrivals .shop-title-row {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-new-arrivals .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-new-arrivals .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-new-arrivals .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-new-arrivals .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }

/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-new-arrivals .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-new-arrivals .chips-row:empty { padding:0; }
body.page-new-arrivals .fchip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; color:var(--ink);
  transition:border-color .2s,background .2s;
}
body.page-new-arrivals .fchip:hover { border-color:var(--ink); }
body.page-new-arrivals .fchip-x {
  width:17px; height:17px; border-radius:50%;
  background:var(--bg); color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-new-arrivals .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-new-arrivals .fchip-clear {
  font-size:12px; font-weight:600; color:var(--brand);
  padding:5px 4px; transition:opacity .2s;
}
body.page-new-arrivals .fchip-clear:hover { opacity:.75; }

/* ── SHOP LAYOUT ── */
body.page-new-arrivals .shop-grid {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  padding:20px 0 80px;
  align-items:flex-start;
}

/* ── FILTER SIDEBAR ── */
body.page-new-arrivals .filters {
  position:sticky; top:96px;
  background:transparent;
  max-height:calc(100vh - 116px);
  overflow-y:auto;
  scrollbar-width:thin;
}
body.page-new-arrivals .filters::-webkit-scrollbar { width:5px; }
body.page-new-arrivals .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-new-arrivals .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }

body.page-new-arrivals .f-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 12px;
}
body.page-new-arrivals .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-new-arrivals .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-new-arrivals .f-head-clear:hover { opacity:.7; }

/* filter group (details/summary) */
body.page-new-arrivals .fgroup { border-top:1px solid var(--line-soft); }
body.page-new-arrivals .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-new-arrivals .fgroup > summary {
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 12px;
  font-size:13px; font-weight:600; color:var(--ink);
  letter-spacing:.1px;
}
body.page-new-arrivals .fgroup > summary::-webkit-details-marker { display:none; }
body.page-new-arrivals .fgroup > summary .chev {
  width:11px; height:11px; opacity:.4; transition:transform .25s;
  flex-shrink:0;
}
body.page-new-arrivals .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-new-arrivals .fgroup-body { padding:2px 0 14px; }

/* checkbox/radio rows */
body.page-new-arrivals .fopt {
  display:flex; align-items:center; gap:11px;
  padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
  transition:color .15s;
}
body.page-new-arrivals .fopt:hover { color:var(--ink); }
body.page-new-arrivals .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-new-arrivals .fopt-mark {
  width:16px; height:16px; border-radius:4px;
  border:1.5px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  position:relative;
  background:#fff;
}
body.page-new-arrivals .fopt-mark.radio { border-radius:50%; }
body.page-new-arrivals .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-new-arrivals .fopt-mark::after {
  content:''; opacity:0; transition:opacity .15s;
}
body.page-new-arrivals .fopt input:checked ~ .fopt-mark {
  background:var(--brand); border-color:var(--brand);
}
body.page-new-arrivals .fopt input:checked ~ .fopt-mark::after {
  opacity:1;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
body.page-new-arrivals .fopt input:checked ~ .fopt-mark.radio::after {
  width:6px; height:6px; border:none; background:#fff;
  border-radius:50%; transform:none;
}
body.page-new-arrivals .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-new-arrivals .fopt-text { flex:1; }
body.page-new-arrivals .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }

/* ── PRICE ── */
body.page-new-arrivals .price-readout {
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink); font-weight:600;
  margin:4px 0 18px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
body.page-new-arrivals .price-readout .dash { color:var(--muted-3); font-weight:400; }

body.page-new-arrivals .price-slider {
  position:relative; height:22px; margin:0 0 4px;
}
body.page-new-arrivals .price-track {
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
  height:2px; background:var(--line); border-radius:1px;
}
body.page-new-arrivals .price-fill {
  position:absolute; top:50%; transform:translateY(-50%);
  height:2px; background:var(--ink); border-radius:1px;
  left:10%; right:50%;
}
body.page-new-arrivals .price-slider input[type=range] {
  position:absolute; top:0; left:0; right:0; width:100%;
  -webkit-appearance:none; appearance:none;
  background:none; pointer-events:none; height:22px; margin:0;
}
body.page-new-arrivals .price-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s,box-shadow .15s;
}
body.page-new-arrivals .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-new-arrivals .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-new-arrivals .price-slider input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:none;
  cursor:grab; pointer-events:auto;
  box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}

/* ── TOGGLES ── */
body.page-new-arrivals .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-new-arrivals .toggle-sw {
  width:34px; height:20px; border-radius:100px; background:var(--line);
  position:relative; transition:background .2s; flex-shrink:0;
}
body.page-new-arrivals .toggle-sw::before {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-new-arrivals .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-new-arrivals .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }

/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-new-arrivals .f-mobile-apply { display:none; }

/* ── RESULTS / TOOLBAR ── */
body.page-new-arrivals .results { min-width:0; }
body.page-new-arrivals .toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-new-arrivals .t-left { display:flex; align-items:center; gap:14px; }
body.page-new-arrivals .t-count { font-size:13px; color:var(--muted-2); }
body.page-new-arrivals .t-count strong { color:var(--ink); font-weight:700; }
body.page-new-arrivals .t-right { display:flex; align-items:center; gap:8px; }

/* custom sort dropdown */
body.page-new-arrivals .sortdrop { position:relative; z-index:10; }
body.page-new-arrivals .sortbtn {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
body.page-new-arrivals .sortbtn:hover { border-color:var(--ink); }
body.page-new-arrivals .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-new-arrivals .sortbtn .val { font-weight:600; }
body.page-new-arrivals .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-new-arrivals .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-new-arrivals .sortmenu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:50;
}
body.page-new-arrivals .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-new-arrivals .sortopt {
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px;
  font-size:13px; color:var(--muted); transition:background .15s,color .15s;
  cursor:pointer;
}
body.page-new-arrivals .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-new-arrivals .sortopt.on { color:var(--ink); font-weight:600; }
body.page-new-arrivals .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }

/* view toggle */
body.page-new-arrivals .viewtog {
  display:flex; gap:2px; padding:2px;
  background:var(--bg); border-radius:var(--radius-pill);
}
body.page-new-arrivals .vbtn {
  width:30px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); transition:all .15s;
}
body.page-new-arrivals .vbtn:hover { color:var(--ink); }
body.page-new-arrivals .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-new-arrivals .vbtn svg { width:14px; height:14px; }

/* mobile filter button */
body.page-new-arrivals .fbtn-mobile {
  display:none; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:600;
}
body.page-new-arrivals .fbtn-mobile svg { width:14px; height:14px; }
body.page-new-arrivals .fbtn-mobile .badge {
  background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── PRODUCT GRID ── */
body.page-new-arrivals .pgrid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-new-arrivals .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-new-arrivals .pgrid.list-view .pcard {
  display:flex; gap:20px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  align-items:center;
  transition:box-shadow .2s,transform .2s;
}
body.page-new-arrivals .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-new-arrivals .pgrid.list-view .pcard-img {
  width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
  border-radius:var(--radius-sm); box-shadow:none;
}
body.page-new-arrivals .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-new-arrivals .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-new-arrivals .pgrid.list-view .pcard-quick { display:none; }
body.page-new-arrivals .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-new-arrivals .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-new-arrivals .pgrid.list-view .pcard-name { font-size:16px; }
body.page-new-arrivals .pgrid.list-view .pcard-var { font-size:13px; }
body.page-new-arrivals .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-new-arrivals .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-new-arrivals .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-new-arrivals .pcard { cursor:pointer; }
body.page-new-arrivals .pcard-img {
  background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
  overflow:hidden; margin-bottom:12px; position:relative;
  box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-new-arrivals .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-new-arrivals .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-new-arrivals .pcard:hover .pcard-img img { transform:scale(1.05); }

/* badges */
body.page-new-arrivals .pcard-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-new-arrivals .bg-new { background:var(--ink); color:#fff; }
body.page-new-arrivals .bg-hot { background:var(--brand); color:#fff; }
body.page-new-arrivals .bg-sale { background:#FF9500; color:#fff; }
body.page-new-arrivals .bg-top { background:#34C759; color:#fff; }

/* wishlist */
body.page-new-arrivals .pcard-wish {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .2s,color .2s,transform .2s;
  color:var(--ink);
}
body.page-new-arrivals .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-new-arrivals .pcard-wish.on { background:var(--brand); color:#fff; }

/* quick view */
body.page-new-arrivals .pcard-quick {
  position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
  background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
  color:#fff; padding:11px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
  text-align:center;
}
body.page-new-arrivals .pcard:hover .pcard-quick { bottom:12px; }
body.page-new-arrivals .pcard-quick:hover { background:var(--brand); }

/* meta */
body.page-new-arrivals .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-new-arrivals .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-new-arrivals .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-new-arrivals .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }

/* price */
body.page-new-arrivals .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-new-arrivals .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-new-arrivals .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-new-arrivals .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }

/* ── LOAD MORE ── */
body.page-new-arrivals .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-new-arrivals .lmore {
  padding:13px 32px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); background:#fff;
  font-size:13px; font-weight:600; color:var(--ink);
  transition:all .2s;
}
body.page-new-arrivals .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-new-arrivals .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }

/* ── FOOTER ── */
body.page-new-arrivals footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-new-arrivals .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-new-arrivals .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-new-arrivals .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-new-arrivals .flogo em { color:var(--brand); font-style:normal; }
body.page-new-arrivals .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-new-arrivals .fsocs { display:flex; gap:8px; }
body.page-new-arrivals .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-new-arrivals .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-new-arrivals .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-new-arrivals .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-new-arrivals .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-new-arrivals .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-new-arrivals .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-new-arrivals .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-new-arrivals .fpay { display:flex; gap:8px; }
body.page-new-arrivals .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }

/* ───────────────────────────────────────────────
   TABLET — ≤ 1024px
   ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  body.page-new-arrivals .wrap, body.page-new-arrivals .fw { padding:0 28px; }
  body.page-new-arrivals header { width:calc(100% - 32px); }
  body.page-new-arrivals .hw { padding:0 16px 0 22px; gap:14px; }
  body.page-new-arrivals header nav { gap:0; }
  body.page-new-arrivals .ni > a { padding:8px 14px; font-size:12.5px; }
  body.page-new-arrivals .search-pill span { display:none; }
  body.page-new-arrivals .search-pill { padding:8px 10px; }

  body.page-new-arrivals .shop-title { font-size:34px; }
  body.page-new-arrivals .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
  body.page-new-arrivals .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }

  body.page-new-arrivals .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  body.page-new-arrivals .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}

/* ───────────────────────────────────────────────
   MOBILE — ≤ 768px
   ─────────────────────────────────────────────── */
@media (max-width:768px) {
  body.page-new-arrivals .hamburger { display:flex; }
  body.page-new-arrivals header nav, body.page-new-arrivals header .search-pill { display:none; }
  body.page-new-arrivals header { top:8px; width:calc(100% - 16px); border-radius:18px; }
  body.page-new-arrivals .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
  body.page-new-arrivals .logo { font-size:17px; }
  body.page-new-arrivals .ib { width:40px; height:40px; }
  body.page-new-arrivals .ib svg { width:18px; height:18px; }
  body.page-new-arrivals .ann-bar { padding:8px 0; }
  body.page-new-arrivals .ann-track { gap:36px; }
  body.page-new-arrivals .ann-track span { font-size:11px; }
  body.page-new-arrivals .wrap, body.page-new-arrivals .fw { padding:0 16px; }

  /* hero */
  body.page-new-arrivals .shop-hero { padding-top:22px; padding-bottom:16px; }
  body.page-new-arrivals .shop-title { font-size:26px; letter-spacing:-.5px; }
  body.page-new-arrivals .shop-sub { font-size:13.5px; margin-top:6px; }
  body.page-new-arrivals .shop-meta { padding-bottom:0; }
  body.page-new-arrivals .shop-title-row { gap:14px; }

  /* convert sidebar to bottom-sheet */
  body.page-new-arrivals .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
  body.page-new-arrivals .filters {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:100%; max-height:85vh; max-width:100%;
    border-radius:24px 24px 0 0; padding:0;
    transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
    z-index:960; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(0,0,0,0.18);
    background:#fff;
  }
  body.page-new-arrivals .filters.on { transform:translateY(0); }
  body.page-new-arrivals .filters::before {
    content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:var(--line); border-radius:2px;
    margin:8px auto; flex-shrink:0;
  }
  /* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
  body.page-new-arrivals .f-head { padding:6px 20px 14px; margin-bottom:0; }
  body.page-new-arrivals .fgroup > summary { padding:18px 20px 14px; }
  body.page-new-arrivals .fgroup-body { padding:0 20px 18px; }
  body.page-new-arrivals .f-mobile-apply {
    display:block;
    position:sticky; bottom:0; padding:14px 20px 18px;
    background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
    margin-top:auto;
  }
  body.page-new-arrivals .f-mobile-apply button {
    width:100%; padding:14px; border-radius:var(--radius-pill);
    background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  }
  body.page-new-arrivals .filter-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
    z-index:955;
  }
  body.page-new-arrivals .filter-backdrop.on { opacity:1; visibility:visible; }

  /* show mobile filter trigger */
  body.page-new-arrivals .fbtn-mobile { display:inline-flex; }

  /* toolbar layout */
  body.page-new-arrivals .toolbar { gap:10px; padding-bottom:14px; }
  body.page-new-arrivals .t-left { gap:10px; flex:1; }
  body.page-new-arrivals .sortbtn .lbl { display:none; }
  body.page-new-arrivals .sortbtn { padding:8px 12px; }

  /* products: 2 cols */
  body.page-new-arrivals .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
  body.page-new-arrivals .pcard-img { border-radius:var(--radius-sm); }
  body.page-new-arrivals .pcard-quick { display:none; }   /* tap goes to PDP, less clutter */
  body.page-new-arrivals .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
  body.page-new-arrivals .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
  body.page-new-arrivals .pcard-name { font-size:13px; }
  body.page-new-arrivals .pcard-p { font-size:14px; }

  /* footer */
  body.page-new-arrivals footer { padding:40px 0 28px; margin-top:48px; }
  body.page-new-arrivals .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
  body.page-new-arrivals .ftop > div:first-child { grid-column:1/-1; }
  body.page-new-arrivals .fbot { flex-direction:column; align-items:flex-start; gap:14px; }

  /* hide mobile-only-hidden things */
  body.page-new-arrivals .filters .f-head-clear-desktop { display:none; }
  body.page-new-arrivals .desktop-only { display:none; }
}

/* small mobile */
@media (max-width:380px) {
  body.page-new-arrivals .hw { padding:0 4px 0 14px; }
  body.page-new-arrivals .logo { font-size:16px; }
  body.page-new-arrivals .ib { width:36px; height:36px; }
  body.page-new-arrivals .pgrid { gap:14px 10px; }
  body.page-new-arrivals .pcard-name, body.page-new-arrivals .pcard-p { font-size:12.5px; }
}


/* ── NEW ARRIVALS PAGE ── */
body.page-new-arrivals .na-hero { padding:24px 0 0; }
body.page-new-arrivals .na-hero-inner {
  background:#1D1D1F; border-radius:28px; padding:56px 56px 0;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-end;
  overflow:hidden; position:relative; min-height:320px;
}
body.page-new-arrivals .na-hero-inner::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px); }
body.page-new-arrivals .na-hl { position:relative; z-index:2; padding-bottom:48px; }
body.page-new-arrivals .na-hl .sl { color:rgba(255,255,255,0.3); }
body.page-new-arrivals .na-hl h1 { font-size:42px; font-weight:800; letter-spacing:-1px; line-height:1.05; color:#fff; margin-bottom:12px; }
body.page-new-arrivals .na-hl p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-new-arrivals .na-hr { position:relative; z-index:2; align-self:flex-end; }
body.page-new-arrivals .na-hr img { width:100%; max-width:400px; border-radius:16px 16px 0 0; object-fit:cover; height:260px; margin-left:auto; }

body.page-new-arrivals .na-s { padding:48px 0 72px; }
body.page-new-arrivals .na-filters { display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
body.page-new-arrivals .na-filter { padding:8px 18px; border-radius:100px; font-size:13px; font-weight:500; border:1.5px solid var(--line); color:var(--muted-2); cursor:pointer; transition:all .2s; background:#fff; }
body.page-new-arrivals .na-filter.on { background:var(--ink); color:#fff; border-color:var(--ink); }
body.page-new-arrivals .na-filter:hover:not(.on) { border-color:var(--ink); color:var(--ink); }
body.page-new-arrivals .na-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-new-arrivals .na-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; position:relative; }
body.page-new-arrivals .na-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-new-arrivals .na-img { position:relative; height:260px; overflow:hidden; }
body.page-new-arrivals .na-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-new-arrivals .na-card:hover .na-img img { transform:scale(1.06); }
body.page-new-arrivals .na-badge { position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:100px; font-size:11px; font-weight:700; }
body.page-new-arrivals .na-badge.new { background:var(--brand); color:#fff; }
body.page-new-arrivals .na-badge.pre { background:var(--ink); color:#fff; }
body.page-new-arrivals .na-heart { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; border:none; }
body.page-new-arrivals .na-heart:hover { background:var(--brand); color:#fff; }
body.page-new-arrivals .na-heart svg { width:16px; height:16px; }
body.page-new-arrivals .na-body { padding:18px 20px 22px; }
body.page-new-arrivals .na-brand { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
body.page-new-arrivals .na-name { font-size:15px; font-weight:700; line-height:1.3; margin-bottom:6px; }
body.page-new-arrivals .na-desc { font-size:12px; color:var(--muted-2); line-height:1.5; margin-bottom:10px; }
body.page-new-arrivals .na-meta { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
body.page-new-arrivals .na-stars { display:flex; gap:2px; }
body.page-new-arrivals .na-stars svg { width:12px; height:12px; color:#FFB800; }
body.page-new-arrivals .na-rev { font-size:12px; color:var(--muted-2); }
body.page-new-arrivals .na-foot { display:flex; align-items:center; justify-content:space-between; }
body.page-new-arrivals .na-price { font-size:17px; font-weight:700; }
body.page-new-arrivals .na-add { padding:8px 18px; border-radius:100px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:background .2s; }
body.page-new-arrivals .na-add:hover { background:var(--brand); }

body.page-new-arrivals .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }

@media (max-width:1024px) {
  body.page-new-arrivals .na-hero-inner { padding:40px 40px 0; min-height:280px; }
  body.page-new-arrivals .na-hl h1 { font-size:36px; }
  body.page-new-arrivals .na-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  body.page-new-arrivals .na-hero-inner { grid-template-columns:1fr; padding:40px 32px 0; min-height:auto; }
  body.page-new-arrivals .na-hr { display:none; }
  body.page-new-arrivals .na-hl { padding-bottom:40px; }
  body.page-new-arrivals .na-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  body.page-new-arrivals .na-img { height:220px; }
  body.page-new-arrivals .na-hl h1 { font-size:30px; }
}
@media (max-width:380px) {
  body.page-new-arrivals .na-hero-inner { padding:32px 24px 0; }
  body.page-new-arrivals .na-hl h1 { font-size:26px; }
  body.page-new-arrivals .na-grid { grid-template-columns:1fr; }
  body.page-new-arrivals .na-img { height:280px; }
}

/* ============================================================
   SQUARE IMAGE RATIO (1:1) - Global override
   ============================================================ */

/* Product card images - square */
.pcimg, .pc-img, .product-img, .product-image,
.pcard-img, .pcard-image, .product-card-img,
.ci-img, .cart-item-img, .cart-img,
.rec-img, .related-img, .suggestion-img,
.wishlist-img, .wish-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Blog card images - square */
.bcard-img, .blog-img, .blog-card-img, .journal-img,
.blog-image, .article-img, .article-image,
.bci, .blog-cover, .post-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* PDP gallery images - square */
.pdp-img, .pdp-image, .pdp-gallery-img,
.gallery-img, .gallery-image, .product-detail-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Search result images */
.sr-img, .result-img, .search-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Cart and checkout item images */
.ci-img img, .cart-item-img, .cart-img,
.order-item-img, .checkout-item-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Also enforce on direct img elements within card structures */
.pgrid .pcimg img,
.product-grid .product-img img,
.blog-grid .blog-img img,
.blog-list .blog-card-img img,
.bgrid .bcard-img img,
.results .sr-img img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}


/* ════════ LUXE LIVE SEARCH (added) ════════ */
.search-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 100px;
  padding: 8px 14px;
  cursor: text;
  transition: background .2s ease;
  width: 220px;
  min-width: 0;
  flex-shrink: 0;
}
.search-pill:hover { background: rgba(0, 0, 0, 0.06); }
.search-pill:focus-within {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
/* Override the global a11y focus ring on the header search input only —
   the pill itself is the focus indicator (changes background to white). */
.luxe-search-input:focus,
.luxe-search-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-radius: 0 !important;
}

.search-pill > svg:first-of-type {
  width: 16px;
  height: 16px;
  color: #86868B;
  flex-shrink: 0;
  pointer-events: none;
}
.luxe-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #1D1D1F;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}
.luxe-search-input::placeholder { color: #86868B; }
.luxe-search-input::-webkit-search-cancel-button { display: none; }
.luxe-search-clear {
  display: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #515154;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.luxe-search-clear svg { width: 10px; height: 10px; }
.luxe-search-clear:hover { background: rgba(0, 0, 0, 0.15); color: #1D1D1F; }
.search-pill.has-value .luxe-search-clear { display: inline-flex; }

/* ════════ LUXE LIVE SEARCH DROPDOWN — clean, theme-consistent (v3.7.16) ════════
   Anchor for the absolutely-positioned dropdown. All page-scoped .search-pill
   rules (body.page-index, body.page-shop, body.page-pdp, body.page-contact, …)
   were missing position:relative, so the dropdown's top:100% / left:0 / right:0
   were evaluating against <body>, dumping the whole panel at the page bottom.
   This unscoped rule guarantees the positioning context regardless of body class. */
.search-pill { position: relative; }

/* ── Dropdown container ──────────────────────────────────────────────────── */
.luxe-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* Pin to the right edge of the search-pill; allow the panel to widen left
     so 6-column-ish content (thumb + name + price) fits comfortably even when
     the pill itself is narrow. */
  width: 380px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 999;
  display: none;
  padding: 6px;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
.luxe-search-dropdown.open { display: block; animation: luxeSdFade .16s ease-out; }
@keyframes luxeSdFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.luxe-sd-section + .luxe-sd-section {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.luxe-sd-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: #86868B;
  padding: 10px 12px 4px;
  display: block;
}
.luxe-sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px 10px;
}

/* ── Result row ──────────────────────────────────────────────────────────── */
.luxe-sd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
  transition: background .15s ease;
}
.luxe-sd-item:hover,
.luxe-sd-item.active,
.luxe-sd-item:focus-visible {
  background: #F5F5F7;
  outline: none;
}
.luxe-sd-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #F5F5F7;
  display: block;
}
.luxe-sd-thumb--empty {
  background: linear-gradient(135deg, #F5F5F7, #E8E8ED);
}
.luxe-sd-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.luxe-sd-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1D1D1F;
  letter-spacing: -0.1px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.luxe-sd-name mark {
  background: rgba(255, 45, 85, 0.12);
  color: #FF2D55;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}
.luxe-sd-meta {
  font-size: 11.5px;
  color: #86868B;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── Price (handles WC sale: <del> regular + <ins> current) ──────────────── */
.luxe-sd-price {
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 13px;
  font-weight: 700;
  color: #1D1D1F;
  letter-spacing: -0.2px;
  text-align: right;
  line-height: 1.2;
}
.luxe-sd-price del {
  font-size: 11px;
  font-weight: 500;
  color: #AEAEB2;
  text-decoration: line-through;
  order: 1;
}
.luxe-sd-price ins {
  text-decoration: none !important;
  color: #FF2D55;
  font-weight: 700;
  background: transparent !important;
  order: 2;
}
.luxe-sd-price .woocommerce-Price-amount,
.luxe-sd-price .woocommerce-Price-currencySymbol,
.luxe-sd-price bdi {
  font: inherit;
  color: inherit;
  background: transparent;
}
/* Hide WC's screen-reader-only price annotations from view */
.luxe-sd-price .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── States: empty, loading ──────────────────────────────────────────────── */
/* (.luxe-sd-empty styling moved to v3.7.28 block at end of file with new
   structured markup including .luxe-sd-empty-icon / -text / -hint) */

.luxe-sd-loading {
  padding: 22px 16px;
  text-align: center;
  font-size: 12.5px;
  color: #86868B;
  letter-spacing: 0.2px;
}

/* ── Suggestion pills (popular searches) ─────────────────────────────────── */
.luxe-sd-suggest {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 13px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.035);
  font-size: 12.5px;
  font-weight: 400;
  color: #515154;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.luxe-sd-suggest:hover {
  background: #fff;
  color: #1D1D1F;
  border-color: rgba(0, 0, 0, 0.08);
}

/* ── Subtle scrollbar ────────────────────────────────────────────────────── */
.luxe-search-dropdown::-webkit-scrollbar { width: 6px; }
.luxe-search-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.luxe-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
.luxe-search-dropdown::-webkit-scrollbar-track { background: transparent; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .search-pill { width: 200px; }
}
@media (max-width: 1000px) {
  .search-pill { width: 180px; }
  .luxe-search-dropdown { width: 320px; }
}
@media (max-width: 900px) {
  .search-pill { display: none; }
  .luxe-search-dropdown { display: none !important; }
}
/* ════════ /LUXE LIVE SEARCH ════════ */

/* ════════ Universal nav-button improvements (added) ════════ */
header .ib, header .hamburger {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (max-width: 768px) {
  header .ib, header .hamburger {
    width: 44px !important;
    height: 44px !important;
  }
  header .ib svg, header .hamburger svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* Ensure hamburger is above any decorative overlays */
  header .hamburger { z-index: 5; position: relative; }
}


/* ════════ MOBILE DRAWER (consolidated, page-agnostic) ════════ */
/* Hoisted out of per-page sections so any page that contains the drawer
   markup gets the styles automatically — no need to remember to copy
   page-specific rules when adding a new section. */
.mdrawer-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; z-index:900;
}
.mdrawer-backdrop.on { opacity:1; visibility:visible; }
.mdrawer {
  position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
  background:#fff; z-index:950; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.25,1,.5,1);
  display:flex; flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,0.12);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mdrawer.on { transform:translateX(0); }
.mdrawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #F0F0F2; }
.mdrawer-search { display:flex; align-items:center; gap:8px; margin:14px 16px 6px; padding:10px 14px; background:#F5F5F7; border-radius:var(--radius-pill); }
.mdrawer-search svg { width:14px; height:14px; opacity:.45; flex-shrink:0; }
.mdrawer-search input { flex:1; border:none; outline:none; background:transparent; font-size:14px; font-family:inherit; color:var(--ink); min-width:0; }
.mnav { display:block; padding:8px 8px 16px; flex:1; }
.mni, .mni-flat { display:block; border-bottom:1px solid #F5F5F7; }
.mni summary, .mni-flat {
  list-style:none; cursor:pointer; padding:14px 14px;
  font-size:15px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.mni summary::-webkit-details-marker { display:none; }
.mni summary .chev { width:13px; height:13px; opacity:.5; transition:transform .2s; }
.mni[open] summary .chev { transform:rotate(180deg); }
.mni a { display:block; padding:10px 14px 10px 26px; font-size:14px; color:var(--muted); border-radius:8px; }
.mni a:active, .mni a:hover { background:#F5F5F7; color:var(--ink); }
.mni-flat:active, .mni-flat:hover { background:#F5F5F7; }
.mdrawer-foot { padding:16px 20px 24px; border-top:1px solid #F0F0F2; display:flex; gap:18px; }
.mdrawer-ftlink { font-size:13px; color:var(--muted-2); }
/* ════════ /MOBILE DRAWER ════════ */


/* ════════ NAV ITEM POSITIONING (added) ════════ */
/* Make every nav item the positioning context for its dropdown.
   Without this, .drop's absolute `left:50%` resolves against a
   different ancestor and floats to the wrong place. */
.ni { position: relative; }
/* ════════ /NAV ITEM POSITIONING ════════ */

/* ════════ SIMPLE DROPDOWN MENUS (added) ════════ */
/* Page-class-agnostic so any page picks them up. Plain vertical link lists,
   easy to port to a WordPress wp_nav_menu() at theme-conversion time. */

.drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 9999;
  min-width: 200px;
  width: max-content;
  max-width: 260px;
  white-space: nowrap;
}

/* Hover bridge: a transparent strip filling the gap between the trigger and
   the dropdown. Without this, the mouse loses contact with both elements
   while crossing the 10px gap, and the dropdown closes. With it, the gap
   is part of .drop's hit area — dropdown stays open. */
.drop::before {
  content: "";
  position: absolute;
  top: -12px;            /* slightly more than the gap, no leak risk */
  left: -8px;            /* extend past the rounded corners */
  right: -8px;
  height: 14px;
  /* No background — invisible. */
}

.ni:hover > .drop,
.ni:focus-within > .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.drop-link {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1D1D1F;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.drop-link:hover {
  background: #F5F5F7;
  color: #1D1D1F;
}

/* Active nav-item indicator (subtle, neutral — the brand-pink chip felt
   too loud for a static list). Leave it gentle so it survives a port to
   a WP custom-menu walker without surprises. */
.ni.active > a {
  color: #1D1D1F;
}

@media (max-width: 1024px) {
  .drop { display: none !important; }
}

/* ════════ /SIMPLE DROPDOWN MENUS ════════ */


/* Make product cards clickable (redirect handled by inline onclick). */
.pcard { cursor: pointer; }

/* Homepage product cards — clickable. */
.cprod { cursor: pointer; }
.tprod { cursor: pointer; }
.bprod { cursor: pointer; }

/* Homepage category cards — clickable. */
.cc { cursor: pointer; }

/* ── LUXE WP: Cart & Checkout layout classes (WP-specific, not in prototype CSS) ─── */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}
.cart-sidebar {
    position: sticky;
    top: 20px;
}
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}
.checkout-fields { min-width: 0; }
.checkout-sidebar {
    position: sticky;
    top: 20px;
}
@media (max-width: 960px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .cart-sidebar,
    .checkout-sidebar {
        position: static;
    }
}
/* WooCommerce account page LUXE layout */
.acct-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
}
.acct-sidebar { min-width: 0; }
.acct-content { min-width: 0; }
@media (max-width: 720px) {
    .acct-layout { grid-template-columns: 1fr; }
}
/* WooCommerce product tabs — map WC classes to LUXE tab styles */
.woocommerce-tabs { margin: 40px 0; }
.woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #D2D2D7;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
}
.woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #86868B;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: #1D1D1F;
    border-bottom-color: #FF2D55;
}
.woocommerce-Tabs-panel {
    padding: 24px 0;
    min-height: 120px;
}
/* prodtab active state (home product tabs) */
.prodtab-btn { cursor: pointer; }
.prodtab-panel { display: none; }
.prodtab-panel.active { display: block; }
.prodtab-btn.active { /* existing .active CSS already covers this */ }
/* LUXE checkout payment section */
.luxe-checkout-payment { margin-top: 24px; }
.luxe-checkout-section { margin-bottom: 32px; }

/* ── WooCommerce My Account navigation — map WC classes to LUXE styles ── */
.woocommerce-MyAccount-navigation {
    /* Same as .acct-nav — already styled */
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #D2D2D7;
}
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 8px;
    color: #1D1D1F;
    text-decoration: none;
    font-size: 14px;
    transition: color .15s, padding .15s;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--active a {
    color: #FF2D55;
    padding-left: 14px;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #86868B;
}
/* WooCommerce My Account content area */
.woocommerce-MyAccount-content { min-width: 0; }
/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}
.woocommerce-message {
    background: #EAF3DE;
    border-left: 4px solid #639922;
    color: #173404;
}
.woocommerce-info {
    background: #E6F1FB;
    border-left: 4px solid #378ADD;
    color: #042C53;
}
.woocommerce-error {
    background: #FCEBEB;
    border-left: 4px solid #E24B4A;
    color: #501313;
}

/* ════════════════════════════════════════════════════════════════
   CHECKOUT PAGE  — Two-column layout + order review
   body.woocommerce-checkout
   ════════════════════════════════════════════════════════════════ */
body.woocommerce-checkout .bcrumb-row { padding-top:28px; }
body.woocommerce-checkout .checkout-page-title { margin-top:12px; }

body.woocommerce-checkout .checkout-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    align-items: start;
    padding-bottom: 80px;
}
@media (max-width: 900px) {
    body.woocommerce-checkout .checkout-layout {
        grid-template-columns: 1fr;
    }
}

body.woocommerce-checkout .checkout-left {}
body.woocommerce-checkout .checkout-right { position: sticky; top: 100px; }

/* WooCommerce field overrides */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .checkout-section-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
    margin: 28px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
body.woocommerce-checkout .form-row { margin-bottom: 14px; }
body.woocommerce-checkout .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 6px;
}
body.woocommerce-checkout .form-row input,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    transition: border-color .2s;
    outline: none;
}
body.woocommerce-checkout .form-row input:focus,
body.woocommerce-checkout .form-row select:focus {
    border-color: var(--brand);
}
body.woocommerce-checkout .form-row.woocommerce-invalid input,
body.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: #E24B4A;
}

/* Order review (right column) */
body.woocommerce-checkout .checkout-order-review {
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid var(--line);
    padding: 28px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
    padding: 0 0 12px;
    border-bottom: 1.5px solid var(--line);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted-2);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child { text-align: right; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td { padding: 12px 0; border-bottom: 1px solid var(--line); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td:last-child { text-align: right; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th { padding: 10px 0; font-size: 13px; color: var(--muted-2); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td { padding: 10px 0; text-align: right; font-size: 13px; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
    font-size: 16px; font-weight: 700; color: var(--ink);
    padding-top: 14px; border-top: 2px solid var(--ink);
}

/* Payment section */
body.woocommerce-checkout #payment {
    background: none;
    border: none;
    padding: 0;
    margin-top: 24px;
}
body.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
body.woocommerce-checkout #payment ul.payment_methods li {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
body.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
body.woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 500; cursor: pointer;
}
body.woocommerce-checkout #payment .payment_box {
    padding: 12px 16px;
    background: #f9f9f9;
    font-size: 13px;
    color: var(--muted-2);
}
body.woocommerce-checkout #payment .place-order {
    margin-top: 16px;
}
body.woocommerce-checkout #payment #place_order {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s;
}
body.woocommerce-checkout #payment #place_order:hover { background: var(--brand); }

/* ════════════════════════════════════════════════════════════════
   QUICK-ADD BUTTON STATES
   ════════════════════════════════════════════════════════════════ */
.luxe-quick-add.added,
.na-add.added,
.rec-add.added,
.wadd.added {
    background: #1D9E75 !important;
    color: #fff !important;
}
.luxe-quick-add:disabled,
.na-add:disabled,
.rec-add:disabled,
.wadd:disabled {
    opacity: .7;
    cursor: wait;
}
/* ── Wishlist button: wished state via data attribute (SVG preserved) ── */
.luxe-wish-btn[data-wished="1"] svg,
.luxe-wish-btn[aria-pressed="true"] svg {
    fill: var(--brand);
    stroke: var(--brand);
}
.pdp-wish[data-wished="1"],
.pdp-wish[aria-pressed="true"] {
    color: var(--brand);
    border-color: var(--brand);
}
.na-heart[data-wished="1"] svg,
.wheart[data-wished="1"] svg,
.pcard-wish[data-wished="1"] {
    color: var(--brand);
}
/* ── Product card colour dot swatches (shop loop) ─────────────────── */
.pcard-swatches {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 0 6px;
}
.pcard-swatch-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.08);
  display: inline-block;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.pcard-swatch-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--brand);
}
/* pcard-var already has text, add slight muted colour */
.pcard-var {
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.4;
  margin-bottom: 2px;
}
/* ── Quick-add button: ✓ success state (SVG buttons) ─────────────────── */
.luxe-quick-add[data-added="1"] {
    background: #1D9E75 !important;
    color: #fff !important;
    position: relative;
}
.luxe-quick-add[data-added="1"]::after {
    content: '✓ Added';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1D9E75;
    border-radius: inherit;
    font-weight: 600;
    font-size: 14px;
}
.pdp-cart[data-added="1"]::after { border-radius: 100px; }
/* ── Login page extras ──────────────────────────────────────────────── */
.login-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}
.login-msg--error {
    background: #FFF2F2;
    color: #D0201A;
    border: 1px solid #FFCCCC;
}
.login-msg--success {
    background: #F0FFF4;
    color: #1A7A3A;
    border: 1px solid #C3F0D0;
}

/* Password show/hide eye button */
.input-eye {
    position: relative;
}
.input-eye .form-input {
    padding-right: 44px;
}
.eye-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--muted-2);
    display: flex;
    align-items: center;
}
.eye-btn svg { width: 18px; height: 18px; }
.eye-btn:hover { color: var(--ink); }

/* Terms checkbox row */
.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 20px;
    cursor: pointer;
    line-height: 1.5;
}
.terms-check input[type="checkbox"] {
    accent-color: var(--brand);
    margin-top: 2px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}
.terms-check a { color: var(--brand); text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT — complete CSS matching checkout.html prototype exactly
   Scope: body.woocommerce-checkout
   ═══════════════════════════════════════════════════════════════════════ */
body.woocommerce-checkout .checkout-s { padding: 0 0 72px; }

/* Stepper */
body.woocommerce-checkout .stepper { display:flex;align-items:center;margin:28px 0 40px; }
body.woocommerce-checkout .step { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted-2);white-space:nowrap; }
body.woocommerce-checkout .step.on   { color:var(--ink);font-weight:700; }
body.woocommerce-checkout .step.done { color:var(--brand); }
body.woocommerce-checkout .step-num { width:28px;height:28px;border-radius:50%;background:var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0; }
body.woocommerce-checkout .step.on   .step-num { background:var(--ink);color:#fff; }
body.woocommerce-checkout .step.done .step-num { background:var(--brand);color:#fff; }
body.woocommerce-checkout .step-line { flex:1;height:2px;background:var(--line);margin:0 8px; }
body.woocommerce-checkout .step-line.done { background:var(--brand); }

/* Grid */
body.woocommerce-checkout .checkout-grid { display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start; }
@media(max-width:960px){
  body.woocommerce-checkout .checkout-grid { grid-template-columns:1fr; }
  body.woocommerce-checkout .checkout-right { position:static; }
  /* v3.7.32: on mobile/narrow viewports, render Order Summary above the form */
  body.woocommerce-checkout .checkout-left  { order: 2; }
  body.woocommerce-checkout .checkout-right { order: 1; }
}
body.woocommerce-checkout .checkout-right { position:sticky;top:96px; }

/* Form section cards */
body.woocommerce-checkout .form-section { background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:14px; }
body.woocommerce-checkout .form-title { font-size:15px;font-weight:700;letter-spacing:-.1px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line); }

/* WC field override */
body.woocommerce-checkout .form-row { margin-bottom:14px !important; }
body.woocommerce-checkout .form-row label,
body.woocommerce-checkout .form-label { display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px; }
body.woocommerce-checkout .form-row .required { color:var(--brand); }
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row input[type="password"],
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-input,
body.woocommerce-checkout .wc-notes-wrap textarea {
  width:100% !important;padding:12px 14px !important;border:1.5px solid var(--line) !important;
  border-radius:10px !important;font-size:14px !important;font-family:inherit !important;
  color:var(--ink) !important;background:#fff !important;transition:border-color .2s !important;
  outline:none !important;box-sizing:border-box !important;-webkit-appearance:none !important;
}
body.woocommerce-checkout .form-row .input-text:focus,
body.woocommerce-checkout .form-row input:focus,
body.woocommerce-checkout .form-row select:focus { border-color:var(--brand) !important; }
body.woocommerce-checkout .form-row.woocommerce-invalid .input-text { border-color:#E24B4A !important; }
body.woocommerce-checkout .form-row-first { width:calc(50% - 7px) !important;float:left !important; }
body.woocommerce-checkout .form-row-last  { width:calc(50% - 7px) !important;float:right !important; }
body.woocommerce-checkout .form-row-wide  { width:100% !important;float:none !important;clear:both !important; }
body.woocommerce-checkout .woocommerce-billing-fields::after,
body.woocommerce-checkout .woocommerce-shipping-fields::after { content:'';display:table;clear:both; }

/* Shipping methods */
body.woocommerce-checkout .woocommerce-shipping-methods { list-style:none;padding:0;margin:0; }
body.woocommerce-checkout .woocommerce-shipping-methods li { display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .2s; }
body.woocommerce-checkout .woocommerce-shipping-methods li label { display:flex;flex:1;align-items:center;justify-content:space-between;cursor:pointer;margin:0 !important;text-transform:none !important;font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink); }
body.woocommerce-checkout .woocommerce-shipping-methods .amount { color:var(--brand);font-weight:700; }

/* Payment */
body.woocommerce-checkout #payment { background:none;border:none;padding:0; }
body.woocommerce-checkout #payment ul.payment_methods { list-style:none;padding:0;margin:0 0 14px; }
body.woocommerce-checkout #payment ul.payment_methods > li { border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden; }
body.woocommerce-checkout #payment ul.payment_methods > li label { display:block;padding:14px 16px;font-size:14px;font-weight:500;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;color:var(--ink); }
body.woocommerce-checkout #payment .payment_box { padding:12px 16px;background:var(--f8);font-size:13px;color:var(--muted-2);border-top:1px solid var(--line); }
body.woocommerce-checkout #payment .place-order { margin:0;padding:0;background:none; }
body.woocommerce-checkout #payment #place_order { display:block;width:100%;padding:16px;background:var(--ink);color:#fff;border:none;border-radius:100px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s;margin-top:14px; }
body.woocommerce-checkout #payment #place_order:hover { background:var(--brand); }

/* Secure note */
body.woocommerce-checkout .secure-note { display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted-2);margin-top:12px;padding:10px 14px;background:var(--f8);border-radius:10px;line-height:1.5; }
body.woocommerce-checkout .secure-note svg { flex-shrink:0;margin-top:1px; }

/* Right column summary */
body.woocommerce-checkout .checkout-right .summary { background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:24px; }
body.woocommerce-checkout .sum-item { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line); }
body.woocommerce-checkout .sum-item-thumb { position:relative;width:52px;height:52px;flex-shrink:0; }
body.woocommerce-checkout .sum-item-thumb img { width:52px;height:52px;border-radius:10px;object-fit:cover; }
body.woocommerce-checkout .sum-item-qty { font-size:12px;color:var(--muted-2);margin-top:2px;line-height:1.3; }
body.woocommerce-checkout .sum-item-info { flex:1;min-width:0; }
body.woocommerce-checkout .sum-item-name { font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
body.woocommerce-checkout .sum-item-var { font-size:11px;color:var(--muted-2);margin-top:2px; }
body.woocommerce-checkout .sum-item-price { font-size:13px;font-weight:600;white-space:nowrap; }
body.woocommerce-checkout .sum-divider { height:1px;background:var(--line);margin:12px 0; }
body.woocommerce-checkout .sum-rows { display:flex;flex-direction:column;gap:8px;margin-bottom:8px; }
body.woocommerce-checkout .sum-row { display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted); }
body.woocommerce-checkout .sum-row.total { font-size:16px;font-weight:700;color:var(--ink);padding-top:12px;border-top:2px solid var(--ink);margin-top:8px; }
body.woocommerce-checkout .sum-row-discount { color:#1A7A3A; }
body.woocommerce-checkout .co-coupon-form { display:flex;gap:8px;margin-top:14px; }
body.woocommerce-checkout .co-coupon-form .form-input { flex:1;padding:10px 14px !important;border-radius:10px !important;font-size:13px !important; }
body.woocommerce-checkout .co-coupon-form button { padding:10px 16px;background:var(--ink);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s; }
body.woocommerce-checkout .co-coupon-form button:hover { background:var(--brand); }
/* ══ ACCOUNT PAGE — WC content overrides + extra classes ══════════════ */

/* Orders list (order-item design) */
body.page-account .acct-orders { display:flex;flex-direction:column;gap:0; }
body.page-account .order-item {
  display:flex;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
body.page-account .order-item:last-child { border-bottom:none; }
body.page-account .order-info { flex:1;min-width:0; }
body.page-account .order-num { font-size:14px;font-weight:700;color:var(--ink); }
body.page-account .order-date { font-size:12px;color:var(--muted-2);margin-top:2px; }
body.page-account .order-total { font-size:14px;font-weight:600;white-space:nowrap; }
body.page-account .order-view {
  font-size:13px;font-weight:600;color:var(--brand);text-decoration:none;
  white-space:nowrap;
}
body.page-account .order-view:hover { text-decoration:underline; }
/* Order status badges */
body.page-account .order-status {
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;white-space:nowrap;
}
body.page-account .order-status.completed,
body.page-account .order-status.delivered { background:#E8F5E9;color:#2E7D32; }
body.page-account .order-status.processing,
body.page-account .order-status.shipped   { background:#E3F2FD;color:#1565C0; }
body.page-account .order-status.on-hold   { background:#FFF8E1;color:#F57F17; }
body.page-account .order-status.cancelled,
body.page-account .order-status.failed    { background:#FFEBEE;color:#C62828; }
body.page-account .order-status.refunded  { background:#F3E5F5;color:#6A1B9A; }
body.page-account .order-status.pending   { background:var(--f8);color:var(--muted); }

/* WC account content wrapper — override default styles */
body.page-account .woocommerce-MyAccount-content { width:100%; }
body.page-account .woocommerce-notices-wrapper { margin-bottom:16px; }
body.page-account .woocommerce-pagination { margin-top:20px; }
body.page-account .woocommerce-pagination ul { list-style:none;display:flex;gap:6px;padding:0;flex-wrap:wrap; }
body.page-account .woocommerce-pagination ul li a,
body.page-account .woocommerce-pagination ul li span {
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);
  font-size:13px;font-weight:600;text-decoration:none;color:var(--muted);
}
body.page-account .woocommerce-pagination ul li .current { background:var(--ink);color:#fff;border-color:var(--ink); }

/* Addresses WC override */
body.page-account .woocommerce-Addresses { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
@media(max-width:600px){ body.page-account .woocommerce-Addresses{grid-template-columns:1fr;} }
body.page-account .woocommerce-Address {
  border:1.5px solid var(--line);border-radius:16px;padding:20px;
}
body.page-account .woocommerce-Address-title {
  display:flex;align-items:center;justify-content:space-between;
  font-size:14px;font-weight:700;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
body.page-account .woocommerce-Address-title h3 { font-size:14px;font-weight:700;margin:0; }
body.page-account .woocommerce-Address-title .edit { font-size:12px;color:var(--brand);font-weight:600;text-decoration:none; }
body.page-account address { font-style:normal;font-size:13px;color:var(--muted);line-height:1.7; }
body.page-account .woocommerce-Address p { margin:0 0 4px;font-size:13px;color:var(--muted); }

/* Edit account form WC override */
body.page-account .woocommerce-EditAccountForm .form-row { margin-bottom:16px !important; }
body.page-account .woocommerce-EditAccountForm label {
  display:block;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;
}
body.page-account .woocommerce-EditAccountForm .input-text,
body.page-account .woocommerce-EditAccountForm input[type="text"],
body.page-account .woocommerce-EditAccountForm input[type="email"],
body.page-account .woocommerce-EditAccountForm input[type="password"],
body.page-account .woocommerce-EditAccountForm input[type="tel"] {
  width:100% !important;padding:12px 14px !important;
  border:1.5px solid var(--line) !important;border-radius:10px !important;
  font-size:14px !important;font-family:inherit !important;
  color:var(--ink) !important;background:#fff !important;
  outline:none !important;transition:border-color .2s !important;
  box-sizing:border-box !important;
}
body.page-account .woocommerce-EditAccountForm .input-text:focus { border-color:var(--brand) !important; }
body.page-account .woocommerce-EditAccountForm .form-row-first { float:left;width:calc(50% - 8px) !important; }
body.page-account .woocommerce-EditAccountForm .form-row-last  { float:right;width:calc(50% - 8px) !important; }
body.page-account .woocommerce-EditAccountForm .form-row-wide  { clear:both;width:100% !important; }
body.page-account .woocommerce-EditAccountForm::after { content:'';display:table;clear:both; }
body.page-account .woocommerce-EditAccountForm .woocommerce-Button,
body.page-account .woocommerce-EditAccountForm button[type="submit"] {
  display:inline-block;padding:13px 32px;background:var(--ink);color:#fff;
  border:none;border-radius:100px;font-size:14px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:background .2s;margin-top:8px;
}
body.page-account .woocommerce-EditAccountForm .woocommerce-Button:hover { background:var(--brand); }

/* WC dashboard text */
body.page-account .woocommerce-MyAccount-content p {
  font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:12px;
}
body.page-account .woocommerce-MyAccount-content a { color:var(--brand); }
body.page-account .acct-empty { padding:40px 0;text-align:center; }

/* WISHLIST — missing .was class */
body.page-wishlist .was {
  font-size:12px;color:var(--muted-2);text-decoration:line-through;margin-left:6px;
}
/* Also ensure rec-grid uses wcard style */
body.page-wishlist .rec-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:24px; }
/* ══ FAQ SEARCH SECTION ════════════════════════════════════════════════ */
.faq-search-section { padding:48px 0 24px; }
.faq-search-inner { max-width:640px;margin:0 auto;text-align:center; }
.faq-search-inner h2 { font-size:20px;font-weight:700;margin-bottom:16px;color:var(--ink); }
body.page-faq .faq-search-section { padding:48px 0 24px; }
body.page-faq .faq-search-box {
  position:relative;
}
body.page-faq .faq-search-box svg {
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--muted-3);pointer-events:none;
}
body.page-faq .faq-search-box input,
body.page-faq #faqSearch {
  width:100%;padding:16px 20px 16px 52px;
  border-radius:100px;border:2px solid var(--line);
  font-size:15px;outline:none;transition:border-color .2s;
  background:#fff;color:var(--ink);font-family:inherit;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  box-sizing:border-box;
}
body.page-faq #faqSearch:focus { border-color:var(--brand); }
body.page-faq .faq-search-hint { text-align:center;color:var(--muted-2);font-size:13px;margin-top:12px; }
body.page-faq #faqNoResults { text-align:center;color:var(--muted);padding:16px 0; }
body.page-faq #faqNoResults a { color:var(--brand); }
/* na-badge.sale + btn-outline (global button style) */
.na-badge.sale,
body.page-new-arrivals .na-badge.sale { background:var(--brand);color:#fff; }

/* btn-outline — outlined button used in na-hl hero */
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border: 2px solid var(--ink);
  border-radius: 100px;
  font-size: 14px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline svg { transition: transform .2s; }
.btn-outline:hover svg { transform: translateX(3px); }
/* na-badge extra variants */
body.page-new-arrivals .na-badge.hot  { background:#FF6B4A;color:#fff; }
body.page-new-arrivals .na-badge.best { background:var(--ink);color:#fff; }

/* ══ BLOG LIST (body.blog) — scope missing, pgrid/blogrid only had page-index ══ */
body.blog .blogrid,
body.archive .blogrid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px; }
body.blog .blogc,
body.archive .blogc { background:#fff;border-radius:16px;overflow:hidden;border:1.5px solid var(--line);cursor:pointer; }
body.blog .blogc:hover,
body.archive .blogc:hover { box-shadow:0 6px 24px rgba(0,0,0,.08); }
body.blog .bimg,
body.archive .bimg { display:block;aspect-ratio:16/9;overflow:hidden; }
body.blog .bimg img,
body.archive .bimg img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
body.blog .blogc:hover .bimg img { transform:scale(1.04); }
body.blog .bbody2,
body.archive .bbody2 { padding:20px; }
body.blog .bdate,
body.archive .bdate { font-size:12px;color:var(--muted-2);margin-bottom:8px; }
body.blog .btitle2,
body.archive .btitle2 { font-size:17px;font-weight:700;margin-bottom:10px;line-height:1.3; }
body.blog .btitle2 a,
body.archive .btitle2 a { color:var(--ink);text-decoration:none; }
body.blog .bexc,
body.archive .bexc { font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:12px; }
body.blog .bmore,
body.archive .bmore { font-size:13px;font-weight:600;color:var(--brand);text-decoration:none; }
body.blog .bf-wrap,
body.archive .bf-wrap { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px; }
body.blog .bf,
body.archive .bf { padding:8px 16px;border:1.5px solid var(--line);border-radius:100px;font-size:13px;font-weight:500;cursor:pointer;background:#fff;color:var(--muted);transition:all .2s; }
body.blog .bf.on,
body.archive .bf.on { background:var(--ink);color:#fff;border-color:var(--ink); }

/* ══ SHOP (

/* ══ SEARCH ══════════════════════════════════════════════════════════ */
.results-s { padding:0 0 72px; }
.results-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:40px; }
.rcard { background:#fff;border-radius:16px;overflow:hidden;border:1.5px solid var(--line);cursor:pointer;transition:box-shadow .25s; }
.rcard:hover { box-shadow:0 6px 24px rgba(0,0,0,.08); }
.rcard-img img { width:100%;aspect-ratio:1;object-fit:cover; }
.rcard-body { padding:14px; }
.rcard-cat { font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px; }
.rcard-name { font-size:14px;font-weight:700;margin-bottom:6px;line-height:1.3; }
.rcard-price { font-size:13px;color:var(--brand);font-weight:700; }
.rcard-add { display:block;width:calc(100% - 28px);margin:0 14px 14px;padding:10px;background:var(--ink);color:#fff;border:none;border-radius:100px;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s; }
.rcard-add:hover { background:var(--brand); }
.search-empty { text-align:center;padding:80px 0; }
.search-empty-icon { font-size:48px;margin-bottom:16px; }
.search-empty h2 { font-size:22px;font-weight:800;margin-bottom:10px; }
.search-empty p { font-size:14px;color:var(--muted);margin-bottom:24px; }
.search-hero { padding:40px 0; }
.search-hero-title { font-size:clamp(24px,4vw,40px);font-weight:800;letter-spacing:-1px;margin-bottom:6px; }
.search-hero-count { font-size:14px;color:var(--muted-2);margin-bottom:20px; }
.results-section-title { font-size:18px;font-weight:700;margin-bottom:16px; }

/* ══ ORDER CONFIRMATION — confirm-grid layout ══════════════════════════ */
.confirm-left { min-width:0; }
.confirm-right { min-width:0; }
.woocommerce-checkout-review-order-page .confirm-grid { display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start; }
@media(max-width:860px){ .woocommerce-order-received .confirm-grid { grid-template-columns:1fr; } }

/* ══ HOME — categories-s section (was missing) ═══════════════════════ */
body.page-index .categories-s,
.categories-s { padding:56px 0; }

/* PDP swatch override */
.pdp-swatch {
  width:32px; height:32px; border-radius:50%;
  border:2.5px solid transparent;
  outline:2px solid transparent; outline-offset:2px;
  cursor:pointer; transition:outline-color .18s, transform .15s;
  flex-shrink:0; position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.pdp-swatch.on {
  outline-color:var(--brand);
  transform:scale(1.08);
}
.pdp-swatch:hover:not(.on) { outline-color:var(--muted-3); transform:scale(1.06); }
/* Non-color swatches (size, type etc.) */
.pdp-swatch[style*="border-radius:100px"] {
  width:auto; height:auto; border-radius:100px !important;
  border:1.5px solid var(--line); outline:none;
  padding:6px 14px; font-size:12px; font-weight:600; color:var(--ink);
  box-shadow:none;
}
.pdp-swatch[style*="border-radius:100px"].on {
  background:var(--ink) !important; color:#fff; border-color:var(--ink);
}
/* ══ ACCOUNT OUTER — page.php bypasses page-hero/prose, so we manage spacing here ══ */
.acct-outer {
  padding: 48px 0 72px;
  min-height: 60vh;
}
body.page-account .acct-outer { background: var(--f8); }
/* ══ ACCOUNT DASHBOARD ══════════════════════════════════════════════════ */
.acct-dashboard { padding: 4px 0; }
.acct-dash-greeting { font-size:15px;color:var(--muted);margin-bottom:24px;line-height:1.6; }
.acct-dash-greeting strong { color:var(--ink); }
.acct-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media(max-width:480px){ .acct-dash-grid { grid-template-columns: 1fr; } }
.acct-dash-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.acct-dash-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(255,45,85,.10);
  transform: translateY(-2px);
}
.acct-dash-icon { margin-bottom: 4px; }
.acct-dash-icon svg { width:22px;height:22px;color:var(--brand); }
.acct-dash-label { font-size:14px;font-weight:700;color:var(--ink); }
.acct-dash-desc  { font-size:12px;color:var(--muted-2);line-height:1.4; }
.acct-dash-logout { font-size:12px;color:var(--muted-2);margin-top:8px; }
.acct-dash-logout a { color:var(--muted-2);text-decoration:underline; }
.acct-dash-logout a:hover { color:var(--brand); }
/* ══ ACCOUNT — missing CSS additions ══════════════════════════════════════════ */
body.page-account .addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
body.page-account .addr-card{border:1.5px solid var(--line);border-radius:16px;padding:20px;position:relative;}
body.page-account .addr-card.default{border-color:var(--brand);background:#FFF5F7;}
body.page-account .addr-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:100px;background:var(--brand);color:#fff;margin-bottom:10px;}
body.page-account .addr-name{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--ink);}
body.page-account .addr-line{font-size:13px;color:var(--muted);line-height:1.7;}
body.page-account .addr-empty{font-style:italic;color:var(--muted-3);}
body.page-account .addr-actions{margin-top:14px;display:flex;gap:8px;}
body.page-account .addr-edit-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1.5px solid var(--line);border-radius:100px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;transition:border-color .2s,color .2s;}
body.page-account .addr-edit-btn:hover{border-color:var(--ink);color:var(--ink);}
body.page-account .add-addr{border:2px dashed var(--line);border-radius:16px;padding:32px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted-2);text-decoration:none;text-align:center;transition:border-color .2s,color .2s;}
body.page-account .add-addr:hover{border-color:var(--brand);color:var(--brand);}
body.page-account .prof-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
body.page-account .prof-row.full{grid-template-columns:1fr;}
body.page-account .prof-label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;}
body.page-account .prof-label .required{color:var(--brand);margin-left:2px;}
body.page-account .prof-input{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .2s;outline:none;box-sizing:border-box;}
body.page-account .prof-input:focus{border-color:var(--brand);}
body.page-account .prof-divider{height:1px;background:var(--line);margin:20px 0;}
body.page-account .save-btn{display:inline-block;padding:13px 32px;background:var(--ink);color:#fff;border:none;border-radius:100px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s;margin-top:8px;}
body.page-account .save-btn:hover{background:var(--brand);}
body.page-account .email-pref-row{display:flex;align-items:center;gap:10px;padding:11px 0;font-size:14px;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--f8);}
body.page-account .email-pref-row:last-of-type{border-bottom:none;}
body.page-account .sec-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
body.page-account .sec-item:last-child{border-bottom:none;}
body.page-account .sec-label{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px;}
body.page-account .sec-desc{font-size:12px;color:var(--muted-2);}
body.page-account .sec-btn{flex-shrink:0;padding:8px 18px;border:1.5px solid var(--line);border-radius:100px;font-size:13px;font-weight:600;color:var(--muted);background:#fff;cursor:pointer;transition:border-color .2s,color .2s;white-space:nowrap;}
body.page-account .sec-btn:hover{border-color:var(--ink);color:var(--ink);}
body.page-account .woocommerce-EditAccountForm .input-text,
body.page-account .woocommerce-EditAccountForm input[type="text"],
body.page-account .woocommerce-EditAccountForm input[type="email"],
body.page-account .woocommerce-EditAccountForm input[type="tel"],
body.page-account .woocommerce-EditAccountForm input[type="date"],
body.page-account .woocommerce-EditAccountForm input[type="password"]{width:100% !important;padding:11px 14px !important;border:1.5px solid var(--line) !important;border-radius:10px !important;font-size:14px !important;font-family:inherit !important;color:var(--ink) !important;background:#fff !important;outline:none !important;transition:border-color .2s !important;box-sizing:border-box !important;}
body.page-account .woocommerce-EditAccountForm input:focus{border-color:var(--brand) !important;}
body.page-account .woocommerce-EditAccountForm label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;}
/* ═══════════════════════════════════════════════════════════════════════
   PATCH: Missing rules from prototype CSS (exact copy)
   ═══════════════════════════════════════════════════════════════════════ */

/* Mobile drawer scroll-lock — all pages */
body.no-scroll { overflow: hidden; }

/* Shop — sidebar chevron & scrollbar */

/* Shop toolbar */

/* Sort dropdown */

/* Load more */

/* PDP — tabs */

/* PDP — rs-tags */

/* PDP — related section (global .related-s may not be page-scoped) */

/* Qty value span (global) */
.qty-val { min-width: 28px; text-align: center; font-size: 15px; font-weight: 600; user-select: none; }

/* PDP dot / ship-eta */


/* ══ WC CSS COMPAT — critical WooCommerce elements (dequeued woocommerce.css) ═ */
/* WooCommerce notices — covers single-message rendering AND multi-error
   <ul class="woocommerce-error"> with multiple <li> validation errors */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  padding: 14px 18px; border-radius: 12px; margin-bottom: 16px;
  font-size: 14px; line-height: 1.5;
  list-style: none;
  /* Note: do NOT use display:flex here — breaks multi-item <ul> lists
     by collapsing every <li> onto one row (v3.7.30 bug). */
}
.woocommerce-message { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.woocommerce-error   { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.woocommerce-info    { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }

/* Multi-line validation errors */
.woocommerce-error > li,
.woocommerce-message > li,
.woocommerce-info > li {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.woocommerce-error > li + li,
.woocommerce-message > li + li,
.woocommerce-info > li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 4px;
  padding-top: 8px;
}
.woocommerce-error > li > a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.woocommerce-error > li > a:hover { text-decoration: underline; }
.woocommerce-error > li strong { font-weight: 600; }
.woocommerce-notices-wrapper { margin-bottom:16px; }

/* WC form elements */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--line); border-radius:10px;
  font-size:14px; font-family:inherit; color:var(--ink);
  background:#fff; outline:none; transition:border-color .2s;
  box-sizing:border-box;
}
.woocommerce input:focus, .woocommerce textarea:focus, .woocommerce select:focus {
  border-color:var(--brand);
}

/* WC star rating */
.star-rating { display:inline-flex; }
.star-rating span::before { color:#FFCC00; content:'★★★★★'; float:left; top:0; left:0; position:absolute; }
.star-rating { color:#E8E8ED; font-size:11px; height:1.2em; line-height:1; overflow:hidden; position:relative; width:5.5em; }

/* WC price */
.woocommerce-Price-amount { display:inline; }
.woocommerce-Price-currencySymbol { }

/* WC clearfix */
.woocommerce::after, .woocommerce-page::after { content:''; display:table; clear:both; }

/* Quantity input */
.quantity input[type="number"] {
  -moz-appearance:textfield; -webkit-appearance:none;
  border:1.5px solid var(--line); border-radius:8px;
  padding:8px 10px; width:64px; text-align:center;
  font-size:14px; font-family:inherit; color:var(--ink);
}
.quantity input::-webkit-inner-spin-button,
.quantity input::-webkit-outer-spin-button { -webkit-appearance:none; }
/* ════════════════════════════════════════════════════════════════
   UNIFIED HEADER NAVIGATION (v3.7.2)
   ════════════════════════════════════════════════════════════════
   The original prototype HTMLs each had their own per-page <style>
   block scoped under `body.page-{name}`. When concatenated into a
   single stylesheet, those scoped rules disagree on `header nav`
   gap and `.ni > a` padding (compare body.page-index ─ 9px 18px /
   gap:8px ─ vs body.page-pdp ─ 7px 13px / gap:1px). The result is
   a header that visibly shifts size between pages.

   The block below uses `body[class]` to match specificity 0,1,3
   (same as `body.page-X header nav`) but is loaded last, so source
   order wins. Every page now renders the SAME header geometry.

   Single source of truth. Edit values here only.
   ════════════════════════════════════════════════════════════════ */

body[class] header nav {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

body[class] .ni > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s, background .2s;
  white-space: nowrap;
}

body[class] .ni > a:hover,
body[class] .ni:hover > a,
body[class] .ni.active > a {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
}

body[class] .ni.active > a {
  color: var(--brand);
}

body[class] .ni > a .chev {
  width: 10px;
  height: 10px;
  opacity: .5;
  transition: transform .25s ease;
  flex-shrink: 0;
}

body[class] .ni:hover > a .chev,
body[class] .ni:focus-within > a .chev {
  transform: rotate(180deg);
}

/* Header geometry — keep height stable across pages */
body[class] header > .hw {
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (max-width: 1024px) {
  body[class] header nav { display: none; }
}
/* ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   HEADER UNIFICATION — v3.7.2
   ────────────────────────────────────────────────────────────────
   styles.css was generated from 17+ HTML prototypes, each scoped
   under `body.page-{name}`. Three of those prototypes (page-pdp,
   page-faq, page-contact) drifted on header-row spacing — the menu
   items rendered with padding 7px 13px instead of the canonical
   9px 18px. This block enforces ONE canonical header look across
   every page.

   Specificity trick: `body[class] X` has the same specificity as
   `body.page-pdp X` (one element + one attribute/class). Since
   this block lives at the end of the cascade, source-order wins.
   ════════════════════════════════════════════════════════════════ */

/* Top-level menu items — uniform padding & typography */
body[class] .ni > a {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #515154;
  letter-spacing: 0;
  transition: color .2s, background .2s;
}
body[class] .ni > a:hover,
body[class] .ni:hover > a,
body[class] .ni.active > a {
  color: #1D1D1F;
  background: rgba(0, 0, 0, 0.05);
}
body[class] .ni.active > a {
  color: var(--brand);
}
body[class] .ni .chev {
  width: 11px;
  height: 11px;
  opacity: .55;
  transition: transform .25s ease;
  flex-shrink: 0;
}
body[class] .ni:hover .chev,
body[class] .ni:focus-within .chev {
  transform: rotate(180deg);
}

/* Dropdown panel — same on every page */
body[class] .ni .drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line, #E8E8ED);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  z-index: 850;
}
body[class] .ni:hover .drop,
body[class] .ni:focus-within .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s, transform .2s, visibility 0s;
}
body[class] .ni .drop-link {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: #515154;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
body[class] .ni .drop-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1D1D1F;
}

/* Make .ni a positioning context for the .drop */
body[class] .ni { position: relative; }

/* Right-side header pill: unified search-pill styling */
body[class] .search-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s;
}
body[class] .search-pill:hover { background: rgba(0, 0, 0, 0.08); }
body[class] .search-pill svg { width: 13px; height: 13px; opacity: .4; }

/* Logo — keep all pages identical */
body[class] .logo {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--ink, #1D1D1F);
  text-decoration: none;
  flex-shrink: 0;
}
body[class] .logo em { color: var(--brand, #FF2D55); font-style: normal; }
/* ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   WISHLIST PAGE — v3.7.6 redesign
   ────────────────────────────────────────────────────────────────
   The original wishlist styles were 100% scoped to body.page-wishlist
   which only applies when the page uses tpl-wishlist.php as its
   template. The [luxe_wishlist] shortcode renders the same markup
   anywhere — but without that body class, NONE of the styles
   applied, so every wishlist install with the shortcode (which is
   how the demo importer creates the page) rendered as raw HTML.

   This block restyles every wishlist class WITHOUT the body prefix
   so it works regardless of how the page was built. It uses
   `body[class]` (specificity 0,2,1) on the high-stakes layout rules
   to beat the `body.page-wishlist` (specificity 0,2,1) versions
   while still living below them in source order — source order wins
   when specificity ties, so this version takes precedence.
   ════════════════════════════════════════════════════════════════ */

/* Section wrapper */
body[class] .wish-s {
  padding: 24px 0 80px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Header row: title left, action buttons right */
body[class] .wish-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 16px 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line, #E8E8ED);
  flex-wrap: wrap;
}
body[class] .wish-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.1;
  margin-bottom: 6px;
}
body[class] .wish-count {
  font-size: 14px;
  color: var(--muted-2, #86868B);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Action buttons: Share + Add All to Cart */
body[class] .wish-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
body[class] .wish-actions .wish-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1.5px solid var(--line, #E8E8ED);
  background: #fff;
  color: var(--ink, #1D1D1F);
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  white-space: nowrap;
}
body[class] .wish-actions .wish-btn:hover {
  border-color: var(--ink, #1D1D1F);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
body[class] .wish-actions .wish-btn.primary {
  background: var(--ink, #1D1D1F);
  color: #fff;
  border-color: var(--ink, #1D1D1F);
}
body[class] .wish-actions .wish-btn.primary:hover {
  background: var(--brand, #FF2D55);
  border-color: var(--brand, #FF2D55);
}
body[class] .wish-actions .wish-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Product grid: 4 cards desktop / 3 tablet / 2 mobile */
body[class] .wish-grid,
body[class] .luxe-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 18px;
}

/* Card */
body[class] .wcard,
body[class] .luxe-wishlist-item {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-soft, #F0F0F2);
  cursor: pointer;
  transition: transform .3s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow .3s ease, border-color .2s;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: luxe-wcard-in .35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
body[class] .wcard:nth-child(2),
body[class] .luxe-wishlist-item:nth-child(2) { animation-delay: .04s; }
body[class] .wcard:nth-child(3),
body[class] .luxe-wishlist-item:nth-child(3) { animation-delay: .08s; }
body[class] .wcard:nth-child(4),
body[class] .luxe-wishlist-item:nth-child(4) { animation-delay: .12s; }
body[class] .wcard:nth-child(n+5),
body[class] .luxe-wishlist-item:nth-child(n+5) { animation-delay: .16s; }

@keyframes luxe-wcard-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

body[class] .wcard:hover,
body[class] .luxe-wishlist-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.08);
  border-color: transparent;
}

/* Card image area */
body[class] .wcard .wimg,
body[class] .luxe-wishlist-item .wimg {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #FAFAFC;
}
body[class] .wcard .wimg img,
body[class] .luxe-wishlist-item .wimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
body[class] .wcard:hover .wimg img,
body[class] .luxe-wishlist-item:hover .wimg img {
  transform: scale(1.05);
}

/* Sale / Bestseller / etc. badge (top-left) */
body[class] .wcard .wbadge,
body[class] .luxe-wishlist-item .wbadge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--ink, #1D1D1F);
  color: #fff;
  z-index: 2;
}

/* Heart button (top-right) — clean glass-pill instead of busy SVG */
body[class] .wcard .wheart,
body[class] .luxe-wishlist-item .wheart,
body[class] .wcard .luxe-wish-btn,
body[class] .luxe-wishlist-item .luxe-wish-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  color: var(--brand, #FF2D55);
  transition: all .2s ease;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body[class] .wcard .wheart:hover,
body[class] .luxe-wishlist-item .wheart:hover,
body[class] .wcard .luxe-wish-btn:hover,
body[class] .luxe-wishlist-item .luxe-wish-btn:hover {
  background: var(--brand, #FF2D55);
  color: #fff;
  transform: scale(1.08);
}
body[class] .wcard .wheart svg,
body[class] .luxe-wishlist-item .wheart svg {
  width: 16px;
  height: 16px;
}

/* Removing animation */
body[class] .wcard.is-removing,
body[class] .luxe-wishlist-item.is-removing {
  opacity: 0;
  transform: scale(.94);
  transition: opacity .35s ease, transform .35s ease;
}

/* Card body: text + price + button */
body[class] .wcard .wbody,
body[class] .luxe-wishlist-item .wbody {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
body[class] .wcard .wbrand,
body[class] .luxe-wishlist-item .wbrand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand, #FF2D55);
}
body[class] .wcard .wname,
body[class] .luxe-wishlist-item .wname {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, #1D1D1F);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

/* Rating row */
body[class] .wcard .wmeta,
body[class] .luxe-wishlist-item .wmeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
body[class] .wcard .wstars,
body[class] .luxe-wishlist-item .wstars {
  display: inline-flex;
  gap: 1px;
  color: #FFB800;
}
body[class] .wcard .wstars svg,
body[class] .luxe-wishlist-item .wstars svg {
  width: 11px;
  height: 11px;
}
body[class] .wcard .wrev,
body[class] .luxe-wishlist-item .wrev {
  font-size: 11.5px;
  color: var(--muted-2, #86868B);
}

/* Footer: price + add-to-cart */
body[class] .wcard .wfoot,
body[class] .luxe-wishlist-item .wfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
body[class] .wcard .wprice,
body[class] .luxe-wishlist-item .wprice {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #1D1D1F);
  font-variant-numeric: tabular-nums;
}
body[class] .wcard .wprice .was,
body[class] .luxe-wishlist-item .wprice .was {
  font-size: 12.5px;
  color: var(--muted-3, #AEAEB2);
  text-decoration: line-through;
  font-weight: 500;
  margin-left: 5px;
}
body[class] .wcard .wprice del,
body[class] .luxe-wishlist-item .wprice del {
  font-size: 12.5px;
  color: var(--muted-3, #AEAEB2);
  font-weight: 500;
  margin-right: 5px;
}
body[class] .wcard .wprice ins,
body[class] .luxe-wishlist-item .wprice ins {
  text-decoration: none;
  font-weight: 700;
}

/* Add to Cart button — pill, ink → brand on hover, loading state */
body[class] .wcard .wadd,
body[class] .luxe-wishlist-item .wadd,
body[class] .wcard button.luxe-quick-add,
body[class] .luxe-wishlist-item button.luxe-quick-add {
  padding: 9px 18px;
  border-radius: 100px;
  background: var(--ink, #1D1D1F);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  border: none;
  transition: background .2s ease, transform .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
body[class] .wcard .wadd:hover,
body[class] .luxe-wishlist-item .wadd:hover,
body[class] .wcard button.luxe-quick-add:hover,
body[class] .luxe-wishlist-item button.luxe-quick-add:hover {
  background: var(--brand, #FF2D55);
}
body[class] .wcard .wadd:active,
body[class] .luxe-wishlist-item .wadd:active,
body[class] .wcard button.luxe-quick-add:active,
body[class] .luxe-wishlist-item button.luxe-quick-add:active {
  transform: scale(.96);
}
body[class] .wadd:disabled,
body[class] button.luxe-quick-add:disabled,
body[class] button.luxe-quick-add[data-loading="1"] {
  opacity: .65;
  cursor: wait;
}

/* Empty-state */
body[class] .wish-empty {
  text-align: center;
  padding: 80px 24px;
  background: #fff;
  border-radius: 24px;
  border: 1px dashed var(--line, #E8E8ED);
}
body[class] .wish-empty svg {
  width: 56px;
  height: 56px;
  color: var(--muted-3, #AEAEB2);
  margin-bottom: 20px;
}
body[class] .wish-empty h2,
body[class] .wish-empty h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin-bottom: 10px;
  color: var(--ink, #1D1D1F);
}
body[class] .wish-empty p {
  font-size: 14.5px;
  color: var(--muted, #515154);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
body[class] .wish-empty .btn-primary,
body[class] .wish-empty a[href*="shop"] {
  display: inline-block;
  padding: 14px 32px;
  background: var(--ink, #1D1D1F);
  color: #fff;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  transition: all .2s ease;
}
body[class] .wish-empty .btn-primary:hover,
body[class] .wish-empty a[href*="shop"]:hover {
  background: var(--brand, #FF2D55);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255,45,85,0.25);
}

/* Recommended section — uses the existing .pcard, just override the section header */
body[class] .wish-s + .rec-s,
body[class] .rec-s {
  padding: 32px 0 80px;
  max-width: 1280px;
  margin: 0 auto;
}
body[class] .rec-s .sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 24px;
  flex-wrap: wrap;
}
body[class] .rec-s .sl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand, #FF2D55);
  margin-bottom: 6px;
}
body[class] .rec-s .st {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
}
body[class] .rec-s .sh-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1D1D1F);
  text-decoration: none;
  transition: color .2s, gap .2s;
}
body[class] .rec-s .sh-link:hover {
  color: var(--brand, #FF2D55);
  gap: 9px;
}
body[class] .rec-s .sh-link svg {
  width: 14px;
  height: 14px;
}
body[class] .rec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 18px;
}

/* Breadcrumb */
body[class] .bcrumb-row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 0 8px;
}
body[class] .bcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-2, #86868B);
}
body[class] .bcrumb a {
  color: var(--muted-2, #86868B);
  text-decoration: none;
  transition: color .15s;
}
body[class] .bcrumb a:hover { color: var(--ink, #1D1D1F); }
body[class] .bcrumb .sep { color: var(--muted-3, #AEAEB2); }
body[class] .bcrumb .cur { color: var(--ink, #1D1D1F); font-weight: 500; }

/* Responsive */
@media (max-width: 1024px) {
  body[class] .wish-grid,
  body[class] .luxe-wishlist-grid,
  body[class] .rec-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
  body[class] .wish-title { font-size: 30px; }
}
@media (max-width: 768px) {
  body[class] .wish-grid,
  body[class] .luxe-wishlist-grid,
  body[class] .rec-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  body[class] .wish-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  body[class] .wish-actions { width: 100%; }
  body[class] .wish-actions .wish-btn { flex: 1; justify-content: center; }
  body[class] .wish-title { font-size: 26px; }
  body[class] .wcard .wbody,
  body[class] .luxe-wishlist-item .wbody { padding: 14px 14px 16px; gap: 6px; }
  body[class] .wcard .wname,
  body[class] .luxe-wishlist-item .wname { font-size: 14px; min-height: 2.5em; }
  body[class] .wcard .wprice,
  body[class] .luxe-wishlist-item .wprice { font-size: 15px; }
  body[class] .wcard .wadd,
  body[class] .luxe-wishlist-item .wadd { padding: 8px 14px; font-size: 11.5px; }
}
@media (max-width: 420px) {
  body[class] .wish-grid,
  body[class] .luxe-wishlist-grid,
  body[class] .rec-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.23: empty-cart notices wrapper — renders above breadcrumb
 * ────────────────────────────────────────────────────────────────────────── */
body.page-cart .luxe-cart-notices {
  margin: 0 0 16px;
}
body.page-cart .luxe-cart-notices .woocommerce-message,
body.page-cart .luxe-cart-notices .woocommerce-info,
body.page-cart .luxe-cart-notices .woocommerce-error {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--ink);
  list-style: none;
  margin: 0;
}
body.page-cart .luxe-cart-notices .woocommerce-message a,
body.page-cart .luxe-cart-notices .woocommerce-info a,
body.page-cart .luxe-cart-notices .woocommerce-error a {
  color: var(--brand);
  text-decoration: underline;
  margin-left: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.25: search results — Products + Articles sections (split layout)
 * ────────────────────────────────────────────────────────────────────────── */

/* Section wrapper — adds spacing between Products and Articles groups */
body.page-search .results-section {
  margin-top: 28px;
}
body.page-search .results-section:first-of-type {
  margin-top: 0;
}

/* Section title bar — soft section divider style */
body.page-search .results-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.1px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
body.page-search .results-section-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-2);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 9px;
  border-radius: 100px;
  letter-spacing: 0;
}

/* ── Article list card (horizontal) — used in search results ──────────── */
body.page-search .results-articles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-search .acard {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
body.page-search .acard:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
body.page-search .acard-img {
  width: 140px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg, #F5F5F7);
  flex-shrink: 0;
}
body.page-search .acard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-search .acard-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F7;
  color: #AEAEB2;
  font-size: 32px;
  font-weight: 500;
}
body.page-search .acard-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 6px;
}
body.page-search .acard-tag {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}
body.page-search .acard-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.15px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-search .acard:hover .acard-title { color: var(--brand); }
body.page-search .acard-excerpt {
  font-size: 13px;
  color: var(--muted-2);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-search .acard-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  margin-top: 2px;
}
body.page-search .acard-date {
  color: var(--muted-2);
  font-weight: 500;
}
body.page-search .acard-link {
  color: var(--brand);
  font-weight: 500;
  margin-left: auto;
  transition: transform .2s ease;
}
body.page-search .acard:hover .acard-link {
  transform: translateX(2px);
}

/* Mobile: stack image on top */
@media (max-width: 600px) {
  body.page-search .acard {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  body.page-search .acard-img {
    width: 100%;
    height: 180px;
  }
  body.page-search .acard-meta {
    flex-wrap: wrap;
  }
  body.page-search .acard-link {
    margin-left: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.28: Edit Address form — native <select> styling (no more select2)
 *
 * v3.7.27 tried to make WooCommerce's selectWoo (select2 fork) widget look
 * like .prof-input. It half-worked but the dropdown panel rendered without
 * any select2 CSS (raw bullet list, broken positioning). Root cause: WC
 * frontend select2 stylesheet doesn't always enqueue on /my-account/ pages,
 * and even when it does, the cascade against .prof-input is fragile.
 *
 * Pragmatic fix: drop the country_select / state_select classes from the
 * template so selectWoo never wraps these <select> elements. The native
 * browser dropdown renders instead, gets the existing .prof-input styling
 * for free (since it's just a <select class="prof-input">). The country→
 * state JS cascade still works because we kept the `country_to_state` class.
 *
 * The only thing left is to make the native <select> look pixel-consistent
 * with the text inputs — same height (matters because <select> default
 * line-height differs by browser), and a custom chevron arrow.
 * ────────────────────────────────────────────────────────────────────────── */

/* Native select inside the account form — match .prof-input box exactly */
body.page-account select.prof-input {
  /* Reset native select chrome */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Custom chevron (encoded SVG) on the right */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2386868B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: #fff;
  padding-right: 38px;
  cursor: pointer;
}
/* Belt-and-suspenders: if select2 ever DOES wrap something on this page,
   make sure the original <select> stays hidden and the widget stays clean. */
body.page-account select.select2-hidden-accessible {
  border: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.28: Search dropdown — refine the empty state
 *
 * Old markup: <div class="luxe-sd-empty">No matches for <strong>"q"</strong>.<br>
 *               <span style="font-size:12px;">Try "vibrator", "lube"…</span></div>
 * Inline <br> + <span style=""> looked stitched-together. New markup uses
 * proper structured classes (handled in luxe-search.js v3.7.28).
 * ────────────────────────────────────────────────────────────────────────── */

.luxe-sd-empty {
  padding: 32px 20px 28px;
  text-align: center;
  color: #6E6E73;
}
.luxe-sd-empty-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 100px;
  color: #86868B;
}
.luxe-sd-empty-icon svg {
  width: 20px;
  height: 20px;
}
.luxe-sd-empty-text {
  font-size: 14px;
  color: var(--ink, #1D1D1F);
  font-weight: 500;
  margin: 0 0 4px;
  letter-spacing: -0.1px;
}
.luxe-sd-empty-text strong {
  color: var(--ink, #1D1D1F);
  font-weight: 600;
}
.luxe-sd-empty-hint {
  font-size: 12.5px;
  color: #86868B;
  margin: 0;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.29: PDP gallery — thumbs scroll + WC review form star polish
 * ────────────────────────────────────────────────────────────────────────── */

/* v3.7.40: thumbs are now wrapped in .pdp-thumbs-clip (fixed-size, overflow:hidden)
   while .pdp-thumbs is the inner "track" that gets translated via JS to bring the
   active thumb into view. NO manual scrollbar — auto-scroll only. */
/* v3.8.1 NEUTRALIZED — was conflicting with v3.8 layout (92px column,
   602px max-height). The new rule lives at the end of pdp.css and uses
   !important + higher specificity. */
body.page-pdp .pdp-thumbs-clip[data-v37-disabled] {
  overflow: hidden;
  position: relative;
  width: 72px;
  max-height: 410px;
}
body.page-pdp .pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* Subtle gradient hints when there are more thumbs above/below the visible window */
body.page-pdp .pdp-thumbs-clip::before,
body.page-pdp .pdp-thumbs-clip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s;
}
body.page-pdp .pdp-thumbs-clip::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0));
}
body.page-pdp .pdp-thumbs-clip::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0));
}
body.page-pdp .pdp-thumbs-clip.has-overflow-top::before    { opacity: 1; }
body.page-pdp .pdp-thumbs-clip.has-overflow-bottom::after  { opacity: 1; }

/* Hide the on-image "Hover to zoom · Click to expand" hint while actively
   zooming — it's distracting once the user is already engaging with zoom. */
body.page-pdp .pdp-main-img.zooming .pdp-zoom-hint { opacity: 0; }
body.page-pdp .pdp-zoom-hint { transition: opacity .15s ease; }

/* ── WooCommerce review form: LUXE the default `<p class="stars">` ────── */
/* WC's add_review_form_fields outputs:
     <p class="stars">
       <span role="group">
         <a role="radio" class="star-1" href="#">1 of 5 stars</a>
         ...
       </span>
     </p>
   The default WC stylesheet uses a custom font (star webfont). With those
   stylesheets dequeued, we render stars via SVG-style mask or simple
   ASCII glyph. Use the unicode ★ via a pseudo-element — accessible text
   stays in the anchor for screen readers. */

body.page-pdp #commentform .comment-form-rating {
  margin: 0 0 16px;
}
body.page-pdp #commentform .comment-form-rating label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
body.page-pdp #commentform p.stars {
  display: inline-flex;
  margin: 0;
  padding: 0;
  line-height: 1;
}
body.page-pdp #commentform p.stars > span {
  display: inline-flex;
  gap: 2px;
}
body.page-pdp #commentform p.stars a {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  text-indent: -9999px;       /* hide accessible text label */
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}
body.page-pdp #commentform p.stars a::before {
  content: '★';
  position: absolute;
  inset: 0;
  text-indent: 0;
  font-size: 22px;
  line-height: 26px;
  text-align: center;
  color: rgba(0, 0, 0, 0.18);
  transition: color .15s ease, transform .1s ease;
}
body.page-pdp #commentform p.stars a:hover::before,
body.page-pdp #commentform p.stars:hover a.star-1:hover::before,
body.page-pdp #commentform p.stars a.active::before,
body.page-pdp #commentform p.stars a[aria-checked="true"]::before {
  color: var(--brand);
  transform: scale(1.05);
}
/* When hovering: light up all stars up through the hovered one */
body.page-pdp #commentform p.stars > span:hover a::before {
  color: rgba(0, 0, 0, 0.18);
}
body.page-pdp #commentform p.stars > span a:hover::before,
body.page-pdp #commentform p.stars > span a:hover ~ a::before {
  color: var(--brand);
}
/* Active state: stars before/at the active position get filled */
body.page-pdp #commentform p.stars a.active::before {
  color: var(--brand);
}
body.page-pdp #commentform p.stars > span a.star-1.active::before,
body.page-pdp #commentform p.stars > span a.star-2.active::before,
body.page-pdp #commentform p.stars > span a.star-3.active::before,
body.page-pdp #commentform p.stars > span a.star-4.active::before,
body.page-pdp #commentform p.stars > span a.star-5.active::before {
  color: var(--brand);
}

/* Comment textarea + submit button */
body.page-pdp #commentform p.comment-form-comment {
  margin: 16px 0;
}
body.page-pdp #commentform p.comment-form-comment label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
body.page-pdp #commentform p.comment-form-comment textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  min-height: 110px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
body.page-pdp #commentform p.comment-form-comment textarea:focus {
  border-color: var(--brand);
}
body.page-pdp #commentform p.form-submit {
  margin: 14px 0 0;
}
body.page-pdp #commentform p.form-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
body.page-pdp #commentform p.form-submit input[type="submit"]:hover {
  background: var(--brand);
}

/* Mobile: thumbs row goes horizontal — clip becomes wide+short, track flexes row.
   v3.7.40: keeps overflow:hidden on clip (no manual scroll), only auto-scroll. */
@media (max-width: 768px) {
  body.page-pdp .pdp-thumbs-clip {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: 64px;                        /* one row of 60px thumbs + 2px buffer */
  }
  body.page-pdp .pdp-thumbs {
    flex-direction: row;
    gap: 8px;
  }
  body.page-pdp .pdp-thumbs-clip::before,
  body.page-pdp .pdp-thumbs-clip::after {
    width: 24px;
    height: 100%;
    top: 0;
  }
  body.page-pdp .pdp-thumbs-clip::before {
    left: 0; right: auto;
    background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0));
  }
  body.page-pdp .pdp-thumbs-clip::after {
    right: 0; left: auto; bottom: auto;
    background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0));
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.34: Checkout coupon UI — minimalist redesign
 *
 * Earlier versions wrapped both the toggle and the form in heavy cards
 * (gray pill notice + white card with full-width input and oversized black
 * button). The "Apply coupon" button visually competed with the main
 * "Place Order" CTA, and the gray pill bar looked empty/awkward at full
 * page width.
 *
 * New approach:
 *   - Toggle: plain inline text + brand-colored link, no card, no bg
 *   - Form: compact inline row, max-width 480px, input + small pill button
 *
 * Both blocks are still defensively constrained when rendered as direct
 * children of .woocommerce (i.e., outside .wrap when v3.7.31 PHP isn't
 * deployed) so the layout stays centered.
 * ────────────────────────────────────────────────────────────────────────── */

/* (1) Defensive horizontal constraint when rendered OUTSIDE .wrap */
body.woocommerce-checkout .woocommerce > .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce > form.checkout_coupon,
body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce > .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce > form.woocommerce-form-login {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* (2) Toggle bar — strip the "info" bg/border completely; just inline text */
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin: 24px auto 12px;
  padding-top: 0;
  padding-bottom: 0;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px;
  color: var(--muted-2, #86868B);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.5;
  border-radius: 0;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none !important;        /* nuke any ::before alert icon */
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover {
  text-decoration: underline;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon::after {
  content: ' →';
  font-weight: 400;
}

/* (3) Coupon form — compact inline row, max 480px wide */
body.woocommerce-checkout form.checkout_coupon {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto 20px !important;
  max-width: 480px;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* WC's coupon form uses jQuery slideToggle: starts with inline
   `style="display:none"`, ends with inline `style="display:block"` after
   the user clicks "showcoupon". We need:
   - When inline says display:none → keep hidden
   - When inline says display:block (post-toggle) → force flex so input+button
     stay on one row instead of stacking vertically. */
body.woocommerce-checkout form.checkout_coupon[style*="display: none"],
body.woocommerce-checkout form.checkout_coupon[style*="display:none"] {
  display: none !important;
}
body.woocommerce-checkout form.checkout_coupon[style*="display: block"],
body.woocommerce-checkout form.checkout_coupon[style*="display:block"] {
  display: flex !important;
}
/* For the outside-.wrap defensive case, push the form to align with the
   page padding instead of staying centered (the toggle is left-aligned). */
body.woocommerce-checkout .woocommerce > form.checkout_coupon {
  margin-left: 40px !important;
  margin-right: auto !important;
}

body.woocommerce-checkout form.checkout_coupon p.form-row {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  display: block !important;
}
body.woocommerce-checkout form.checkout_coupon p.form-row-first {
  flex: 1 1 auto;
  min-width: 0;
}
body.woocommerce-checkout form.checkout_coupon p.form-row-last {
  flex: 0 0 auto;
}

/* The input field — same 10px rounded look as .form-input but compact */
body.woocommerce-checkout form.checkout_coupon input.input-text,
body.woocommerce-checkout form.checkout_coupon input[name="coupon_code"] {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
  margin: 0;
}
body.woocommerce-checkout form.checkout_coupon input.input-text:focus,
body.woocommerce-checkout form.checkout_coupon input[name="coupon_code"]:focus {
  border-color: var(--ink);
}

/* Apply button — small black pill, NOT a CTA-sized button.
   Lower visual weight than place-order so it doesn't compete. */
body.woocommerce-checkout form.checkout_coupon button.button,
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
  height: 40px;
  padding: 0 18px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
  width: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.woocommerce-checkout form.checkout_coupon button.button:hover,
body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
  background: var(--brand);
}

/* Hide the float-clear hack WC inserts after the coupon fields */
body.woocommerce-checkout form.checkout_coupon .clear { display: none; }

/* Login form (rendered when guest checkout disabled / by some plugins) */
body.woocommerce-checkout form.woocommerce-form-login {
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  max-width: 480px;
}

/* Mobile: stack input + apply button */
@media (max-width: 600px) {
  body.woocommerce-checkout form.checkout_coupon {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  body.woocommerce-checkout form.checkout_coupon button.button[name="apply_coupon"] {
    width: 100%;
  }
  body.woocommerce-checkout .woocommerce > form.checkout_coupon {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.35: Coupon row — wrap toggle + form on a single flex line (desktop)
 *
 * The .luxe-coupon-row wrapper is created at runtime by inline JS in
 * form-checkout.php — it groups .woocommerce-form-coupon-toggle and
 * form.checkout_coupon into a single flex container so they render
 * side-by-side on desktop instead of stacking on two separate lines.
 * ────────────────────────────────────────────────────────────────────────── */

body.woocommerce-checkout .luxe-coupon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 24px 0 16px;
}

/* Reset the toggle's individual margin (set on the bare element in v3.7.34) */
body.woocommerce-checkout .luxe-coupon-row .woocommerce-form-coupon-toggle {
  margin: 0;
  flex: 0 0 auto;
}

/* The form: pushed to the right side of the row via margin-left: auto.
   When form is hidden (display:none from WC), it has no width contribution
   and the toggle sits alone at left. When form is shown, it occupies the
   right side of the flex row with all available space pushing it right. */
body.woocommerce-checkout .luxe-coupon-row form.checkout_coupon {
  margin: 0 0 0 auto !important;
  flex: 0 1 auto;
  max-width: 480px;
}

/* Mobile: stack toggle above form */
@media (max-width: 768px) {
  body.woocommerce-checkout .luxe-coupon-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  body.woocommerce-checkout .luxe-coupon-row form.checkout_coupon {
    width: 100%;
    max-width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.41: Mini-Cart Drawer — final design (matches luxe-mini-cart-* markup)
 *
 * The mini-cart.php template emits these classes (kept as primary targets,
 * with .woocommerce-mini-cart-* as defensive fallback):
 *
 *   <aside class="luxe-minicart">
 *     <div class="lmc-head">                ← title bar + × close
 *     <div class="widget_shopping_cart_content">  ← WC fragment target
 *       <ul class="luxe-mini-cart">
 *         <li class="luxe-mini-cart-item">
 *           <a class="remove">×</a>           ← absolute top-right
 *           <a class="luxe-mini-cart-img">    ← grid col 1: image
 *             <img>
 *           </a>
 *           <div class="luxe-mini-cart-info"> ← grid col 2: name + qty/price
 *             <a class="luxe-mini-cart-name">Name</a>
 *             <dl class="variation">…</dl>
 *             <span class="luxe-mini-cart-price">3 × £149.00</span>
 *           </div>
 *         </li>
 *       </ul>
 *       <p class="luxe-mini-cart-total">Subtotal £596.00</p>
 *       <p class="luxe-mini-cart-buttons">
 *         <a class="luxe-mini-cart-view-btn">View Cart</a>
 *         <a class="luxe-mini-cart-checkout-btn">Checkout</a>
 *       </p>
 *     </div>
 *   </aside>
 *
 * Animation: opacity + transform double transition (cubic-bezier ease-out).
 * Mobile: capped at min(400px, 88vw) — never full-screen.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Overlay ──────────────────────────────────────────────────────────── */
.luxe-minicart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.42);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
  cursor: pointer;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.luxe-minicart-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ── Drawer container ─────────────────────────────────────────────────── */
.luxe-minicart {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 92vw);
  background: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .42s cubic-bezier(.32, .72, 0, 1),
    opacity .25s ease;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: inherit;
}
.luxe-minicart.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Header bar ───────────────────────────────────────────────────────── */
.luxe-minicart .lmc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 18px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: #fff;
  flex-shrink: 0;
  gap: 12px;
}
.luxe-minicart .lmc-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.luxe-minicart .lmc-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.2px;
  color: #1D1D1F;
  font-family: inherit;
  line-height: 1.2;
}
.luxe-minicart .lmc-count {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: -0.1px;
}
.luxe-minicart .lmc-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1D1D1F;
  transition: background .15s ease;
  flex-shrink: 0;
  padding: 0;
}
.luxe-minicart .lmc-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ── Content wrapper (WC fragment target — auto-refreshed on add/remove) ─ */
.luxe-minicart .widget_shopping_cart_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ── Items list (scrollable area inside drawer) ───────────────────────── */
.luxe-minicart ul.luxe-mini-cart,
.luxe-minicart ul.woocommerce-mini-cart {
  flex: 1;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  -webkit-overflow-scrolling: touch;
}
.luxe-minicart ul.luxe-mini-cart::-webkit-scrollbar { width: 4px; }
.luxe-minicart ul.luxe-mini-cart::-webkit-scrollbar-track { background: transparent; }
.luxe-minicart ul.luxe-mini-cart::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 2px;
}

/* ── Each cart item — 2-col grid + absolute remove × ──────────────────── */
.luxe-minicart li.luxe-mini-cart-item,
.luxe-minicart li.woocommerce-mini-cart-item,
.luxe-minicart li.mini_cart_item {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 14px;
  padding: 14px 24px;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  align-items: start;
}
.luxe-minicart li.luxe-mini-cart-item:last-child {
  border-bottom: none;
}

/* Image cell — wrapping anchor */
.luxe-minicart .luxe-mini-cart-img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #F5F5F7;
  flex-shrink: 0;
  text-decoration: none;
}
.luxe-minicart .luxe-mini-cart-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Info cell — name + variation + price stacked */
.luxe-minicart .luxe-mini-cart-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-right: 32px;             /* room for the absolute × button */
}
.luxe-minicart .luxe-mini-cart-name {
  font-size: 14px;
  font-weight: 500;
  color: #1D1D1F;
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: -0.05px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.luxe-minicart .luxe-mini-cart-name:hover {
  color: var(--brand);
}

/* Variation list (size, color, etc.) */
.luxe-minicart .luxe-mini-cart-info .variation,
.luxe-minicart .luxe-mini-cart-info dl.variation {
  margin: 0;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}
.luxe-minicart .luxe-mini-cart-info .variation dt,
.luxe-minicart .luxe-mini-cart-info .variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}
.luxe-minicart .luxe-mini-cart-info .variation dt::after { content: ': '; }
.luxe-minicart .luxe-mini-cart-info .variation dd p { margin: 0; display: inline; }
.luxe-minicart .luxe-mini-cart-info .variation dd::after { content: ' · '; }
.luxe-minicart .luxe-mini-cart-info .variation dd:last-child::after { content: ''; }

/* Quantity × price line */
.luxe-minicart .luxe-mini-cart-price {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}
.luxe-minicart .luxe-mini-cart-price .luxe-mini-cart-times {
  margin: 0 4px;
  color: rgba(0, 0, 0, 0.35);
}
.luxe-minicart .luxe-mini-cart-price .amount,
.luxe-minicart .luxe-mini-cart-price .woocommerce-Price-amount {
  color: #1D1D1F;
  font-weight: 600;
}

/* × Remove button — absolute top-right corner of each item */
.luxe-minicart li .remove,
.luxe-minicart li .remove_from_cart_button {
  position: absolute;
  top: 14px;
  right: 22px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .15s, color .15s, transform .1s;
  cursor: pointer;
  border: none;
  padding: 0;
  z-index: 2;
}
.luxe-minicart li .remove:hover,
.luxe-minicart li .remove_from_cart_button:hover {
  background: var(--brand);
  color: #fff;
}
.luxe-minicart li .remove:active {
  transform: scale(0.92);
}

/* ── Total bar ────────────────────────────────────────────────────────── */
.luxe-minicart p.luxe-mini-cart-total,
.luxe-minicart p.woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 24px 14px;
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
  background: #fff;
  font-size: 14px;
  color: #1D1D1F;
}
.luxe-minicart p.luxe-mini-cart-total > strong {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.05px;
}
.luxe-minicart p.luxe-mini-cart-total .amount,
.luxe-minicart p.luxe-mini-cart-total .woocommerce-Price-amount {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #1D1D1F;
}

/* ── Buttons row ──────────────────────────────────────────────────────── */
.luxe-minicart p.luxe-mini-cart-buttons,
.luxe-minicart p.woocommerce-mini-cart__buttons {
  display: flex;
  gap: 10px;
  padding: 0 24px 24px;
  margin: 0;
  flex-shrink: 0;
  background: #fff;
}
.luxe-minicart .luxe-mini-cart-view-btn,
.luxe-minicart .luxe-mini-cart-checkout-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .1s;
  font-family: inherit;
  letter-spacing: 0.1px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 0 16px;
  box-sizing: border-box;
}
.luxe-minicart .luxe-mini-cart-view-btn {
  background: rgba(0, 0, 0, 0.06);
  color: #1D1D1F;
}
.luxe-minicart .luxe-mini-cart-view-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
.luxe-minicart .luxe-mini-cart-checkout-btn {
  background: var(--brand);
  color: #fff;
}
.luxe-minicart .luxe-mini-cart-checkout-btn:hover {
  background: #1D1D1F;
}
.luxe-minicart .luxe-mini-cart-view-btn:active,
.luxe-minicart .luxe-mini-cart-checkout-btn:active {
  transform: scale(0.98);
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.luxe-minicart .luxe-mini-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 32px;
  gap: 4px;
}
.luxe-minicart .luxe-mini-cart-empty-icon {
  width: 64px;
  height: 64px;
  color: rgba(0, 0, 0, 0.18);
  margin-bottom: 12px;
}
.luxe-minicart .luxe-mini-cart-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0;
  letter-spacing: -0.1px;
}
.luxe-minicart .luxe-mini-cart-empty-sub {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 16px;
}
.luxe-minicart .luxe-mini-cart-empty-cta {
  margin-top: 8px;
  padding: 0 28px;
  height: 44px;
  font-size: 13.5px;
  /* v3.8.3: defeat the inherited flex:1 from .luxe-mini-cart-checkout-btn.
     The empty-state CTA is the only child of a flex *column* container,
     so flex:1 stretches it to fill the panel vertically (~1000px tall).
     Force it back to its natural size. */
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content !important;
  align-self: center !important;
}

/* ── Mobile (≤480px) — keep narrow, NOT full-screen ───────────────────── */
@media (max-width: 480px) {
  .luxe-minicart {
    width: min(400px, 88vw);
  }
  .luxe-minicart .lmc-head {
    padding: 16px 12px 16px 20px;
  }
  .luxe-minicart .lmc-title { font-size: 16px; }
  .luxe-minicart li.luxe-mini-cart-item { padding: 12px 20px; }
  .luxe-minicart li .remove { right: 18px; }
  .luxe-minicart p.luxe-mini-cart-total { padding: 14px 20px 12px; }
  .luxe-minicart p.luxe-mini-cart-buttons { padding: 0 20px 20px; }
}

 * v3.7.40: PDP Gallery — prev/next arrows + main image loading state
 *
 * Arrow buttons overlaid on .pdp-main-img for navigating between gallery
 * images. Hidden by default on desktop (fade in on hover); always visible
 * on touch devices (no hover concept).
 *
 * .loading state: subtle opacity dim while a new image is fetched after
 * thumb click — prevents the "blank gap" feel during the swap.
 * ────────────────────────────────────────────────────────────────────────── */

body.page-pdp .pdp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  color: #1D1D1F;
  /* v3.7.51: always visible at 0.7 opacity (was 0 with hover-only) */
  opacity: 0.72;
  transition: opacity .25s ease, background .15s, transform .15s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0;
  font-family: inherit;
}
body.page-pdp .pdp-main-img:hover .pdp-arrow,
body.page-pdp .pdp-arrow:focus-visible,
body.page-pdp .pdp-arrow:hover {
  opacity: 1;
}
body.page-pdp .pdp-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
body.page-pdp .pdp-arrow:active {
  transform: translateY(-50%) scale(0.94);
}
body.page-pdp .pdp-arrow-prev { left: 14px; }
body.page-pdp .pdp-arrow-next { right: 14px; }
body.page-pdp .pdp-arrow svg { display: block; }

/* Mobile: arrows always visible (no hover concept), slightly smaller */
@media (max-width: 768px), (hover: none) {
  body.page-pdp .pdp-arrow {
    opacity: 1;
    visibility: visible;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.85);
  }
  body.page-pdp .pdp-arrow svg { width: 18px; height: 18px; }
  body.page-pdp .pdp-arrow-prev { left: 10px; }
  body.page-pdp .pdp-arrow-next { right: 10px; }
}

/* v3.7.41: main image swap uses JS-controlled inline opacity transition
   (preload-then-fade pattern) — no .loading class needed anymore. */

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.41: Lightbox zoom — wheel / double-click / drag-pan
 *
 * The .lb-img gets transform: translate() scale() applied by JS based on
 * user input. CSS just provides cursor + transition states.
 * ────────────────────────────────────────────────────────────────────────── */
.lightbox .lb-img {
  cursor: zoom-in;
  transform-origin: center center;
}
.lightbox.lb-zoomed .lb-img {
  cursor: grab;
  cursor: -webkit-grab;
}
.lightbox.lb-zoomed.lb-dragging .lb-img {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transition: none !important;          /* instant follow during drag */
}
.lightbox.lb-zoomed .lb-stage {
  cursor: grab;
}
/* Hide the prev/next nav while user is actively zoomed in to avoid
   accidental misclicks while panning. */
.lightbox.lb-zoomed .lb-nav {
  opacity: 0.35;
  transition: opacity .2s;
}
.lightbox.lb-zoomed .lb-nav:hover {
  opacity: 1;
}

/* Optional: zoom hint that briefly appears when lightbox opens */
.lightbox .lb-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(transparent 0%, transparent 100%);
}


/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.44: UNIVERSAL HEADER / ANN BAR / AGE GATE — boosted specificity
 *
 * v3.7.43 used unprefixed selectors (`header`, `#age-gate`, `.ann-bar`).
 * BUT per-page rules like `body.page-shop header nav { gap: 1px }` have
 * specificity (0,1,3), beating bare `header nav` (0,0,2). So v3.7.43
 * never won → shop/pdp/contact still rendered with their per-page deviations.
 *
 * Fix: prefix every selector with `body[class]` (every page has a body
 * class, so the attribute selector always matches). Specificity of
 * `body[class] header nav` is (0,1,3) — TIES per-page rules. Since this
 * block is at end of file, source order tiebreaker wins on every page.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Age gate (must work site-wide regardless of body class) ────────────── */
body[class] #age-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s, visibility .5s;
}
body[class] #age-gate.gone { opacity: 0; visibility: hidden; pointer-events: none; }
body[class] #age-gate .gate-box {
  background: #fff; border-radius: 24px; padding: 52px 44px;
  max-width: 400px; width: calc(100% - 40px);
  text-align: center; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
}
body[class] #age-gate .gate-logo { font-size: 22px; font-weight: 800; margin-bottom: 24px; display: block; }
body[class] #age-gate .gate-logo em { color: var(--brand, #FF2D55); font-style: normal; }
body[class] #age-gate .gate-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
body[class] #age-gate .gate-sub   { font-size: 13px; color: var(--muted-2, #86868B); line-height: 1.65; margin-bottom: 28px; }
body[class] #age-gate .gate-btns  { display: flex; gap: 10px; }
body[class] #age-gate .gate-yes   {
  flex: 1; padding: 13px; border-radius: 14px; border: none;
  background: var(--ink, #1D1D1F); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .2s;
}
body[class] #age-gate .gate-yes:hover { background: var(--ink-2, #3a3a3c); }
body[class] #age-gate .gate-no {
  flex: 1; padding: 13px; border-radius: 14px; border: none;
  background: var(--bg, #F5F5F7); color: var(--muted-2, #86868B);
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
}
body[class] #age-gate .gate-note { font-size: 11px; color: var(--muted-3, #AEAEB2); margin-top: 18px; line-height: 1.6; }

/* ── Announcement bar (marquee) — must scroll on every page ─────────────── */
body[class] .ann-bar {
  background: var(--ink, #1D1D1F);
  padding: 9px 0;
  overflow: hidden;
}
body[class] .ann-track {
  display: flex; gap: 56px;
  width: max-content;
  animation: ann 30s linear infinite;
  white-space: nowrap;
}
body[class] .ann-track span      { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
body[class] .ann-track .sep      { color: rgba(255, 255, 255, 0.18); }
@keyframes ann {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  body[class] .ann-bar { padding: 8px 0; }
  body[class] .ann-track { gap: 36px; }
  body[class] .ann-track span { font-size: 11px; }
}

/* ── Sticky pill header — canonical homepage design, applied site-wide ─── */
body[class] header {
  position: sticky;
  overflow: visible; top: 16px;
  margin: 10px auto 0;
  width: calc(100% - 64px); max-width: 1360px;
  z-index: 800;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition: box-shadow .3s;
}
body[class] header:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
body[class] header .hw {
  padding: 0 28px 0 32px; height: 64px;
  display: flex; align-items: center; gap: 20px;
}
body[class] header .logo {
  font-size: 19px; font-weight: 800; flex-shrink: 0; letter-spacing: .2px;
  color: var(--ink, #1D1D1F); text-decoration: none;
}
body[class] header .logo em { color: var(--brand, #FF2D55); font-style: normal; }
body[class] header nav {
  display: flex; gap: 8px; flex: 1; justify-content: center;
}
body[class] header .ni > a {
  display: flex; align-items: center; gap: 3px;
  padding: 9px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 500;
  color: var(--muted, #515154);
  text-decoration: none;
  transition: color .2s, background .2s;
}
body[class] header .ni > a:hover, body[class] header .ni:hover > a {
  color: var(--ink, #1D1D1F); background: rgba(0, 0, 0, 0.05);
}
body[class] header .chev {
  width: 11px; height: 11px; opacity: .4;
  transition: transform .2s;
}
body[class] header .ni:hover .chev { transform: rotate(180deg); }

/* Right-side icon row */
body[class] header .hr { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* Search pill */
body[class] header .search-pill {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100px; padding: 6px 14px;
  cursor: pointer; transition: background .2s;
  position: relative;
}
body[class] header .search-pill:hover { background: rgba(0, 0, 0, 0.08); }
body[class] header .search-pill > svg { width: 13px; height: 13px; opacity: .4; flex-shrink: 0; }
body[class] header .search-pill span { font-size: 13px; color: var(--muted-2, #86868B); }

/* Icon buttons (search/wishlist/account/cart/hamburger) */
body[class] header .ib {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s;
  position: relative;
  color: var(--ink, #1D1D1F);
  text-decoration: none;
  background: none; border: none;
  cursor: pointer; padding: 0;
}
body[class] header .ib:hover { background: rgba(0, 0, 0, 0.05); }
body[class] header .ib svg { width: 17px; height: 17px; }

/* Cart count badge */
body[class] header .cdot {
  position: absolute; top: 5px; right: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand, #FF2D55); color: #fff;
  font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Hamburger only on mobile */
body[class] header .hamburger { display: none; }

/* ── Mobile responsive — applies to every page ──────────────────────────── */
@media (max-width: 768px) {
  body[class] header { top: 8px; width: calc(100% - 16px); border-radius: 18px; }
  body[class] header .hw { padding: 0 8px 0 16px; height: 56px; gap: 6px; }
  body[class] header .logo { font-size: 17px; }
  body[class] header nav { display: none; }
  body[class] header .search-pill { display: none; }
  body[class] header .hamburger { display: inline-flex; }
  body[class] header .ib { width: 32px; height: 32px; }
  body[class] header .ib svg { width: 16px; height: 16px; }
  body[class] header .cdot { top: 2px; right: 2px; width: 13px; height: 13px; font-size: 8px; }
}

@media (max-width: 380px) {
  body[class] header { width: calc(100% - 8px); }
  body[class] header .hw { padding: 0 4px 0 12px; gap: 2px; }
  body[class] header .ib { width: 30px; height: 30px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.47 — Phase 1: Reveal-on-scroll (3-axis upgrade)
 *
 * Per-page .rv rules use a basic `opacity + translateY 22px + .65s ease`
 * fade-up. We override with a 3-axis reveal: opacity + translateY +
 * filter:blur — elements emerge from a soft blur rather than just fading
 * up. Combined with the slower "silk" easing, this gives the brand its
 * signature "rising from mist" feel without being heavy or showy.
 *
 * Specificity: `body[class] .rv` = (0,2,1), tying with `body.page-X .rv`
 * (also (0,2,1)). Source order tiebreaker → this block at file end wins.
 * ────────────────────────────────────────────────────────────────────────── */

body[class] .rv,
body[class] .rv2 {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
  transition:
    opacity   var(--t-xl) var(--e-silk),
    transform var(--t-xl) var(--e-silk),
    filter   var(--t-xl) var(--e-silk);
}

body[class] .rv.show,
body[class] .rv2.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger delay — second-tier reveal (.rv2) trails .rv by 120ms when both
   are inside the same parent section, creating natural cascade. */
body[class] .rv2 {
  transition-delay: 120ms;
}

/* On mobile, scale down magnitudes — small screens make 28px feel huge. */
@media (max-width: 768px) {
  body[class] .rv,
  body[class] .rv2 {
    transform: translateY(20px);
    filter: blur(6px);
  }
}

/* Honour reduced motion — instant cross-fade only, no blur (some users
   get nausea from animated blur even without the translate). */
@media (prefers-reduced-motion: reduce) {
  body[class] .rv,
  body[class] .rv2 {
    transform: none;
    filter: none;
    transition: opacity 200ms linear;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.48 — Phase 2: Hero word-reveal + reverse Ken Burns + card 3D tilt
 *
 * Three signature animations that define the brand's first impression:
 *   1. Hero h1 word-by-word reveal (clip-path "curtain rising" from below)
 *   2. Hero bg reverse Ken Burns ("opening eyes" — blur + scale 1.08 → 0 + 1)
 *   3. Product/bundle/category cards 3D tilt + image scale + warm shadow
 *
 * All use the v3.7.47 motion tokens; specificity boosted via body[class].
 * ────────────────────────────────────────────────────────────────────────── */

/* ── A. Hero word-by-word reveal ──────────────────────────────────────── */

body[class] .hero-title {
  /* Inherits font-size/weight from existing .hc h1 rules — those have
     higher specificity (body.page-X .hc h1 = (0,2,2)) than us so we
     don't fight them; instead we tweak line-height on the inner .hl
     wrapper which has no existing rule. */
}
body[class] .hero-title .hl {
  display: block;
  /* Slightly looser line-height needed so descender padding doesn't
     overlap with the next line. Original h1 line-height:1.0 was too tight. */
  line-height: 1.08;
}
body[class] .hero-title .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Bottom padding + negative margin keeps descenders (g, p, y) visible
     while still clipping the rising word's bottom half during animation */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
body[class] .hero-title .hwi {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  /* GPU hint — only during initial run, dropped after animation ends */
  will-change: transform, opacity;
}

/* Trigger: animation runs whenever a slide gains .on class.
   Slide auto-advance every 5.5s removes .on from old / adds to new →
   new slide's words reset to translateY(110%) and play again. */
body[class] .hs.on .hero-title .hwi {
  animation: hero-word-rise var(--t-xl) var(--e-silk) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 200ms);
}

@keyframes hero-word-rise {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  /* Smaller stagger for mobile — fewer pixels of word travel, less time */
  body[class] .hs.on .hero-title .hwi {
    animation-delay: calc(var(--i, 0) * 70ms + 100ms);
    animation-duration: var(--t-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[class] .hero-title .hwi {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ── B. Hero reverse Ken Burns ("opening eyes") ────────────────────────── */

/* Each slide's bg photo starts blurred + slightly enlarged, then over 14s
   gently resolves to clear and original scale. Like waking up / focusing.
   Animation re-runs every time .on is toggled to that slide. */
body[class] .hs.on .h-photo img {
  animation: hero-bg-reveal 14s var(--e-whisper) forwards;
}

@keyframes hero-bg-reveal {
  from {
    transform: scale(1.08);
    filter: blur(8px) brightness(0.88) saturate(0.95);
  }
  to {
    transform: scale(1);
    filter: blur(0) brightness(1) saturate(1);
  }
}

/* Mobile: reduce blur to lighten GPU load on smaller chips */
@media (max-width: 768px) {
  @keyframes hero-bg-reveal {
    from {
      transform: scale(1.06);
      filter: blur(4px) brightness(0.9);
    }
    to {
      transform: scale(1);
      filter: blur(0) brightness(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body[class] .hs.on .h-photo img {
    animation: none;
  }
}

/* ── C. Product card 3D tilt + image scale + warm shadow ──────────────── */

/* 3D tilt — subtle 1.5deg rotation on hover, image inside slow-zooms with
   a slight saturation lift. Shadow tinted with warm dark plum (matches
   "intimate, dim-lit" aesthetic — never pure black). */

/* Product cards (.pc — used in product-tabs and search results) */
body[class] .pc {
  perspective: 1200px;
  transition:
    transform var(--t-sm) var(--e-silk),
    box-shadow var(--t-sm) var(--e-silk);
  transform-origin: center bottom;
}
body[class] .pc:hover {
  transform: translateY(-6px) rotateX(2deg);
}
body[class] .pc .pcimg {
  transition:
    transform var(--t-sm) var(--e-silk),
    box-shadow var(--t-sm) var(--e-silk);
}
body[class] .pc:hover .pcimg {
  /* Override the existing 0.015 scale with a richer shadow + slight scale */
  transform: scale(1.02);
  box-shadow: 0 16px 36px rgba(60, 20, 40, 0.16),
              0 4px 12px rgba(60, 20, 40, 0.08);
}
body[class] .pc .pcimg img {
  transition:
    transform var(--t-md) var(--e-silk),
    filter var(--t-md) var(--e-silk);
}
body[class] .pc:hover .pcimg img {
  transform: scale(1.07);
  filter: brightness(1.04) saturate(1.08);
}

/* Bundle cards (.bc) — same treatment, slightly bigger lift */
body[class] .bc {
  perspective: 1200px;
  transition:
    transform var(--t-sm) var(--e-silk),
    box-shadow var(--t-sm) var(--e-silk);
  transform-origin: center bottom;
}
body[class] .bc:hover {
  transform: translateY(-8px) rotateX(1.5deg);
  box-shadow: 0 20px 44px rgba(60, 20, 40, 0.16),
              0 6px 16px rgba(60, 20, 40, 0.08);
}
body[class] .bc .bcimg img {
  transition:
    transform var(--t-md) var(--e-silk),
    filter var(--t-md) var(--e-silk);
}
body[class] .bc:hover .bcimg img {
  transform: scale(1.07);
  filter: brightness(1.04) saturate(1.06);
}

/* Category cards (.cc) — uses background-image not <img>, so we tilt the
   whole card and animate brightness via the bg layer (.cc-bg). */
body[class] .cc {
  perspective: 1200px;
  transition:
    transform var(--t-sm) var(--e-silk),
    box-shadow var(--t-sm) var(--e-silk);
  transform-origin: center bottom;
}
body[class] .cc:hover {
  transform: translateY(-6px) rotateX(1.5deg);
  box-shadow: 0 18px 40px rgba(60, 20, 40, 0.18),
              0 5px 14px rgba(60, 20, 40, 0.08);
}
body[class] .cc .cc-bg {
  transition:
    transform var(--t-md) var(--e-silk),
    filter var(--t-md) var(--e-silk);
}
body[class] .cc:hover .cc-bg {
  transform: scale(1.06);
  filter: brightness(1.05) saturate(1.06);
}

/* Disable tilt on touch devices — rotateX feels off without precise pointer */
@media (hover: none) {
  body[class] .pc:hover,
  body[class] .bc:hover,
  body[class] .cc:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[class] .pc,
  body[class] .bc,
  body[class] .cc {
    transition: box-shadow 200ms linear;
  }
  body[class] .pc:hover,
  body[class] .bc:hover,
  body[class] .cc:hover {
    transform: none;
  }
  body[class] .pc:hover .pcimg img,
  body[class] .bc:hover .bcimg img,
  body[class] .cc:hover .cc-bg {
    transform: none;
    filter: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.49 — Phase 3: Reaction animations (the "被认真对待" feedback layer)
 *
 * Three signature feedback animations for cart/wishlist/swatch interactions:
 *   1. Add-to-cart 3-stage (press → loading pulse → heartbeat success + flash)
 *   2. Wishlist heartbeat + ripple ring (heart fills + scales + ring radiates)
 *   3. Color swatch ring pop-in (selected swatch ring scales 0 → 1.18 → 1)
 *
 * Plus mini-cart drawer warming: overlay gets plum tint + stronger blur,
 * drawer uses velvet easing instead of generic ease, shadow gets warm.
 *
 * All driven by classes the existing JS already toggles
 * (`.added`, `[data-loading]`, `.on`) — zero JS changes needed.
 * ────────────────────────────────────────────────────────────────────────── */


/* ── A. Add-to-cart — 3-stage feedback (press / loading / success) ──────── */

body[class] .luxe-quick-add,
body[class] .pdp-cart,
body[class] .pdp-sticky-cart {
  position: relative;
  /* Layered transitions — preserve existing bg/color flow + add transform */
  transition:
    background-color var(--t-xs) var(--e-silk),
    color            var(--t-xs) var(--e-silk),
    transform        var(--t-xxs) var(--e-velvet),
    box-shadow       var(--t-xs) var(--e-silk);
}

/* Stage 1: press — scale(0.97) for tactile feedback. Skip when disabled
   or already in success state (to not interrupt the heartbeat). */
body[class] .luxe-quick-add:active:not([disabled]):not(.added),
body[class] .pdp-cart:active:not([disabled]):not(.added),
body[class] .pdp-sticky-cart:active:not([disabled]):not(.added) {
  transform: scale(0.97);
}

/* Stage 2: loading — SVG icon does a soft breathing pulse instead of
   the existing flat opacity dim. JS still sets opacity:0.6 on the button
   text; the SVG pulse adds life on top. */
body[class] .luxe-quick-add[data-loading] svg {
  animation: cart-pulse 1.1s ease-in-out infinite;
  transform-origin: center;
}
@keyframes cart-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.14); }
}

/* Stage 3a: success — heartbeat scale on the button itself */
body[class] .luxe-quick-add.added {
  animation: cart-success var(--t-md) var(--e-heartbeat);
}
@keyframes cart-success {
  0%   { transform: scale(1);     }
  35%  { transform: scale(1.04);  }
  70%  { transform: scale(0.985); }
  100% { transform: scale(1);     }
}

/* Stage 3b: success — radial flash overlay (warm white sweep, like a
   camera flash but soft). ::before sits behind text/svg, just above bg. */
body[class] .luxe-quick-add.added::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(255, 220, 230, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 35%,
    transparent 70%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  animation: cart-flash 720ms var(--e-silk) forwards;
}
@keyframes cart-flash {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.25); }
}
/* Ensure SVG + text stay above the flash overlay */
body[class] .luxe-quick-add.added > * {
  position: relative;
  z-index: 1;
}


/* ── B. Wishlist — heartbeat fill + radiating ripple ring ──────────────── */

body[class] .pdp-wish,
body[class] .pcwish,
body[class] .luxe-wish-btn {
  position: relative;
  /* Ensure descendant svg gets transition baseline */
}
body[class] .pdp-wish svg,
body[class] .pcwish svg,
body[class] .luxe-wish-btn svg {
  transition:
    fill   var(--t-xs) var(--e-silk),
    stroke var(--t-xs) var(--e-silk);
  transform-origin: center;
}

/* When .on is added (heart filled), scale heartbeat + fill brand red */
body[class] .pdp-wish.on svg,
body[class] .pcwish.on svg,
body[class] .luxe-wish-btn.on svg {
  fill: var(--brand);
  stroke: var(--brand);
  animation: wish-heartbeat 820ms var(--e-heartbeat);
}
@keyframes wish-heartbeat {
  0%   { transform: scale(1);    }
  20%  { transform: scale(1.42); }
  40%  { transform: scale(0.92); }
  60%  { transform: scale(1.20); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1);    }
}

/* Ripple ring radiating outward from the heart center on .on toggle.
   Width/height fixed at 32px so it works on buttons of any size. */
body[class] .pdp-wish.on::before,
body[class] .pcwish.on::before,
body[class] .luxe-wish-btn.on::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
  animation: wish-ripple 820ms var(--e-silk) forwards;
}
@keyframes wish-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0;   }
  20%  { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0;   }
}


/* ── C. Color swatch — ring pop-in animation ───────────────────────────── */

body[class] .pdp-swatch {
  transition:
    transform var(--t-xs) var(--e-silk),
    box-shadow var(--t-xs) var(--e-silk);
  transform-origin: center;
}
body[class] .pdp-swatch:hover {
  transform: scale(1.08);
}
body[class] .pdp-swatch:active {
  transform: scale(0.96);
}
body[class] .pdp-swatch.on {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(60, 20, 40, 0.18);
}

/* The selection ring (existing ::after) — animate its appearance */
body[class] .pdp-swatch.on::after {
  /* Existing inset:-5px + border are preserved by the existing rule.
     We add the animation on top. */
  animation: swatch-ring-pop 520ms var(--e-heartbeat) forwards;
  transform-origin: center;
}
@keyframes swatch-ring-pop {
  0%   { transform: scale(0);    opacity: 0; }
  55%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}


/* ── D. Mini-cart drawer — warm intimate atmosphere ─────────────────────── */

/* Overlay: replace plain rgba black with multi-layer plum-tinted warm dim,
   stronger blur (8px vs existing 2px), silk easing for fade. */
body[class] .luxe-minicart-overlay {
  background:
    radial-gradient(ellipse at right,
      rgba(60, 20, 30, 0.35) 0%,
      rgba(0, 0, 0, 0.20) 60%,
      rgba(0, 0, 0, 0.42) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(0.92);
  backdrop-filter: blur(8px) saturate(0.92);
  transition:
    opacity var(--t-md) var(--e-silk),
    visibility var(--t-md);
}

/* Drawer: velvet easing instead of generic cubic, warmer multi-layer shadow */
body[class] .luxe-minicart {
  transition:
    transform var(--t-md) var(--e-velvet),
    opacity   var(--t-sm) var(--e-silk);
  box-shadow:
    -24px 0 60px rgba(60, 20, 40, 0.16),
    -8px  0 20px rgba(60, 20, 40, 0.10);
}


/* ── Reduced-motion fallback for all Phase 3 animations ────────────────── */

@media (prefers-reduced-motion: reduce) {
  body[class] .luxe-quick-add.added,
  body[class] .luxe-quick-add[data-loading] svg,
  body[class] .luxe-quick-add.added::before,
  body[class] .pdp-wish.on svg, body[class] .pcwish.on svg, body[class] .luxe-wish-btn.on svg,
  body[class] .pdp-wish.on::before, body[class] .pcwish.on::before, body[class] .luxe-wish-btn.on::before,
  body[class] .pdp-swatch.on::after {
    animation: none !important;
  }
  body[class] .luxe-quick-add:active,
  body[class] .pdp-cart:active,
  body[class] .pdp-sticky-cart:active,
  body[class] .pdp-swatch:active,
  body[class] .pdp-swatch:hover,
  body[class] .pdp-swatch.on {
    transform: none !important;
  }
  body[class] .pdp-wish.on svg,
  body[class] .pcwish.on svg,
  body[class] .luxe-wish-btn.on svg {
    /* Still color-fill, just don't scale-pump */
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.50 — Phase 4: Decorative & micro-interaction layer
 *
 * Five small but high-impact animations that polish the long tail:
 *   A. Toast notification — bottom-right diagonal slide-in
 *   B. Cart count badge (.cdot) — heartbeat bump + radiating ring on +1
 *   C. Image fade-in on load — opacity 0 + blur 8px → clean (skips hero/PDP)
 *   D. Form input focus — warm-red inner line + outer 4px translucent ring
 *   E. CTA button hover — gradient light sweep across button face
 * ────────────────────────────────────────────────────────────────────────── */


/* ── A. Toast — bottom-right slide-in ────────────────────────────────── */

.luxe-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1D1D1F;
  color: #fff;
  padding: 14px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  box-shadow:
    0 12px 32px rgba(60, 20, 40, 0.22),
    0 4px 12px rgba(60, 20, 40, 0.10);
  /* Initial state: tucked off to bottom-right corner, slightly small */
  opacity: 0;
  transform: translate(40px, 16px) scale(0.96);
  transition:
    transform var(--t-md) var(--e-silk),
    opacity var(--t-md) var(--e-silk);
}
.luxe-toast--show {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.luxe-toast--error {
  background: linear-gradient(135deg, #c0392b 0%, #d74638 100%);
  box-shadow:
    0 12px 32px rgba(192, 57, 43, 0.30),
    0 4px 12px rgba(192, 57, 43, 0.16);
}

/* On mobile, anchor with a bit of safe inset and shrink padding */
@media (max-width: 480px) {
  .luxe-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    text-align: center;
    padding: 12px 18px;
    max-width: calc(100vw - 32px);
    transform: translateY(20px) scale(0.96);
  }
  .luxe-toast--show {
    transform: translateY(0) scale(1);
  }
}


/* ── B. Cart badge (.cdot) — heartbeat bump on +1 ───────────────────── */

body[class] .cdot {
  /* Ensure pseudo-element ring can anchor */
  transform-origin: center;
}

body[class] .cdot.cdot-bump {
  animation: cdot-bump 600ms var(--e-heartbeat);
}
@keyframes cdot-bump {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(0.88); }
  85%  { transform: scale(1.10); }
  100% { transform: scale(1);    }
}

/* Radiating ring pulse — pseudo-element scaling outward from badge center */
body[class] .cdot.cdot-bump::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand);
  pointer-events: none;
  animation: cdot-ring 700ms var(--e-silk) forwards;
}
@keyframes cdot-ring {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(2.6); opacity: 0;    }
}


/* ── C. Image fade-in on load ───────────────────────────────────────── */

body[class] .pcimg img,
body[class] .bcimg img,
body[class] .tcard-img img,
body[class] .sr2-img,
body[class] .bp-img img,
body[class] .rav img,
body[class] .pdp-thumb img {
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 600ms var(--e-silk),
    filter 600ms var(--e-silk);
}
body[class] .pcimg img.luxe-loaded,
body[class] .bcimg img.luxe-loaded,
body[class] .tcard-img img.luxe-loaded,
body[class] .sr2-img.luxe-loaded,
body[class] .bp-img img.luxe-loaded,
body[class] .rav img.luxe-loaded,
body[class] .pdp-thumb img.luxe-loaded {
  opacity: 1;
  filter: blur(0);
}


/* ── D. Form input — warm-red focus ring ────────────────────────────── */

body[class] input[type="text"],
body[class] input[type="email"],
body[class] input[type="password"],
body[class] input[type="tel"],
body[class] input[type="search"],
body[class] input[type="number"],
body[class] input[type="url"],
body[class] textarea,
body[class] select,
body[class] .form-input,
body[class] .form-textarea,
body[class] .form-select {
  transition:
    border-color var(--t-xs) var(--e-silk),
    background-color var(--t-xs) var(--e-silk),
    box-shadow var(--t-xs) var(--e-silk);
}

body[class] input[type="text"]:focus,
body[class] input[type="email"]:focus,
body[class] input[type="password"]:focus,
body[class] input[type="tel"]:focus,
body[class] input[type="search"]:focus,
body[class] input[type="number"]:focus,
body[class] input[type="url"]:focus,
body[class] textarea:focus,
body[class] select:focus,
body[class] .form-input:focus,
body[class] .form-textarea:focus,
body[class] .form-select:focus {
  outline: none;
  border-color: var(--brand);
  /* Double layer: 1px inner accent + 4px outer translucent ring */
  box-shadow:
    0 0 0 1px var(--brand),
    0 0 0 4px rgba(255, 45, 85, 0.15);
}


/* ── E. CTA button — gradient hover sweep ───────────────────────────── */

/* Target hero CTAs + PDP cart + sticky cart. Use ::after sweep so it
   doesn't conflict with Phase 3's ::before flash overlay. */
body[class] .btn-d,
body[class] .pdp-cart,
body[class] .pdp-sticky-cart {
  position: relative;
  overflow: hidden;
}
body[class] .btn-d::after,
body[class] .pdp-cart::after,
body[class] .pdp-sticky-cart::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 80%
  );
  pointer-events: none;
  transition: left 900ms var(--e-velvet);
  z-index: 1;
}
body[class] .btn-d:hover::after,
body[class] .pdp-cart:hover::after,
body[class] .pdp-sticky-cart:hover::after {
  left: 130%;
}
/* Ensure SVG/text in cart buttons still visible above the sweep layer */
body[class] .btn-d > *,
body[class] .pdp-cart > *,
body[class] .pdp-sticky-cart > * {
  position: relative;
  z-index: 2;
}


/* ── Reduced-motion fallback for all Phase 4 animations ─────────────── */

@media (prefers-reduced-motion: reduce) {
  body[class] .cdot.cdot-bump,
  body[class] .cdot.cdot-bump::before {
    animation: none !important;
  }
  body[class] .pcimg img,
  body[class] .bcimg img,
  body[class] .tcard-img img,
  body[class] .sr2-img,
  body[class] .bp-img img,
  body[class] .rav img,
  body[class] .pdp-thumb img {
    /* Skip blur for users sensitive to it; keep opacity transition only */
    filter: none !important;
    transition: opacity 200ms linear;
  }
  body[class] .btn-d::after,
  body[class] .pdp-cart::after,
  body[class] .pdp-sticky-cart::after {
    display: none;
  }
  .luxe-toast {
    transition: opacity 200ms linear !important;
    transform: none !important;
  }
  .luxe-toast--show {
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.51 — Page-level fixes (hero rebuild, bento overlay, cards refresh)
 *
 * 1. Hero: prev/next arrows + swipe-friendly cursor + dark gradient overlay
 *    so text is always readable on busy bg images
 * 2. Bento: gradient overlay so text doesn't disappear into the photo
 * 3. Wishlist card: 1:1 aspect image, category line, mobile-shorter Add btn
 * 4. New-arrivals (.na-card): match shop card aesthetic (1:1 img, shadow lift)
 * 5. Stats bar: mobile responsive — 2-row 2x3 grid below 768
 * ────────────────────────────────────────────────────────────────────────── */

/* ── 1. HERO REBUILD ──────────────────────────────────────────────────── */

/* Make hslides positioning-context for nav arrows + cursor for drag */
body[class] .hero .hslides {
  position: relative;
  cursor: grab;
  /* Disable browser pinch-zoom touch behaviors that conflict with swipe */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
body[class] .hero .hslides:active { cursor: grabbing; }

/* Dark gradient overlay across the slide bg — left side darker for text */
body[class] .hs.on::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.32) 35%,
    rgba(0, 0, 0, 0.08) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Hide the right .h-photo split — it conflicts with the new full-bleed look */
body[class] .h-photo { display: none; }

/* Make slide bg image cover the whole slide (was already set inline) */
body[class] .hs {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
}

/* Text content: white text + subtle shadow for legibility on any photo */
body[class] .hs .hc {
  z-index: 3;
  position: relative;
  max-width: 580px;
}
body[class] .hs .hbadge {
  background: rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
body[class] .hs .hc h1,
body[class] .hs .hero-title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
body[class] .hs .hc p {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
}
body[class] .hs .btn-d {
  background: #fff !important;
  color: #1D1D1F !important;
}
body[class] .hs .btn-d:hover {
  background: #fff !important;
  transform: scale(1.02);
}
body[class] .hs .btn-t {
  color: rgba(255, 255, 255, 0.85) !important;
}
body[class] .hs .btn-t:hover {
  color: #fff !important;
}

/* hcount: glassy white card, top-right (kept) but more transparent */
body[class] .hs .hcount {
  background: rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  z-index: 4;
}
body[class] .hs .count-label {
  color: rgba(255, 255, 255, 0.78) !important;
}
body[class] .hs .cn { color: #fff !important; }
body[class] .hs .cul { color: rgba(255, 255, 255, 0.6) !important; }
body[class] .hs .csep { color: rgba(255, 255, 255, 0.4) !important; }

/* Prev/next nav arrows */
body[class] .hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0.85;
  transition: opacity .25s var(--e-silk), background .2s, transform .2s;
  padding: 0;
  font-family: inherit;
}
body[class] .hero-nav:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-50%) scale(1.06);
}
body[class] .hero-nav:active {
  transform: translateY(-50%) scale(0.94);
}
body[class] .hero-nav-prev { left: 24px; }
body[class] .hero-nav-next { right: 24px; }

/* Dots: make white & more visible against any bg */
body[class] .hero .sdots .sd {
  background: rgba(255, 255, 255, 0.45);
}
body[class] .hero .sdots .sd.on {
  background: #fff;
}

/* Hero mobile */
@media (max-width: 768px) {
  body[class] .hs {
    height: 60vh;
    min-height: 440px;
  }
  body[class] .hs::after {
    /* On mobile (vertical layout) make overlay top-to-bottom */
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.55) 60%,
      rgba(0, 0, 0, 0.70) 100%
    );
  }
  body[class] .hs .hc {
    padding: 0 24px 80px !important;
    max-width: 100%;
  }
  body[class] .hero-nav {
    width: 40px;
    height: 40px;
  }
  body[class] .hero-nav-prev { left: 12px; }
  body[class] .hero-nav-next { right: 12px; }
  /* hcount: hide on small mobile to save space */
  body[class] .hs .hcount {
    top: auto !important;
    bottom: 80px !important;
    right: 16px !important;
    padding: 10px 14px !important;
  }
}

@media (max-width: 480px) {
  body[class] .hs .hcount { display: none !important; }
}


/* ── 2. BENTO — gradient overlay so text isn't absorbed by photo ─────── */

body[class] .b {
  position: relative;
  isolation: isolate;
}
body[class] .b::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.50) 60%,
    rgba(0, 0, 0, 0.78) 100%
  );
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
body[class] .b > * { position: relative; z-index: 1; }
/* Text colours over the dark overlay */
body[class] .b .btit,
body[class] .b .bbody,
body[class] .b .bey,
body[class] .b .bstat,
body[class] .b .bstat-sub,
body[class] .b .bchip {
  color: #fff !important;
}
body[class] .b .bbody {
  color: rgba(255, 255, 255, 0.85) !important;
}
body[class] .b .bey {
  background: rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
body[class] .b .bchip {
  background: rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}


/* ── 3. WISHLIST CARD upgrade ─────────────────────────────────────────── */

/* 1:1 product image */
body[class] .wcard .wimg {
  aspect-ratio: 1 / 1;
  height: auto !important;
}
body[class] .wcard .wimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Category line under product name */
body[class] .wcard .wcat {
  font-size: 11px;
  color: var(--muted-2, #86868B);
  letter-spacing: .3px;
  margin-top: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* Mobile: shorter Add button text */
body[class] .wcard .wadd .wadd-long { display: inline; }
@media (max-width: 480px) {
  body[class] .wcard .wadd .wadd-long { display: none; }
  body[class] .wcard .wadd { padding: 8px 14px; }
}


/* ── 4. NEW ARRIVALS card → match shop .pc aesthetic ──────────────────── */

/* 1:1 product image (was 260px height — too tall + cropped weirdly) */
body[class] .na-card .na-img {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 18px;
  margin: 8px 8px 0;
  overflow: hidden;
}
body[class] .na-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(60, 20, 40, 0.04);
  transition: transform var(--t-sm) var(--e-silk), box-shadow var(--t-sm) var(--e-silk);
}
body[class] .na-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(60, 20, 40, 0.14),
              0 4px 12px rgba(60, 20, 40, 0.08);
}
body[class] .na-card .na-img img {
  transition: transform var(--t-md) var(--e-silk), filter var(--t-md) var(--e-silk);
}
body[class] .na-card:hover .na-img img {
  transform: scale(1.06);
  filter: brightness(1.04) saturate(1.06);
}
body[class] .na-card .na-body {
  padding: 14px 18px 18px !important;
}
body[class] .na-card .na-brand {
  font-size: 10px !important;
  letter-spacing: 1.5px;
  color: var(--muted-2, #86868B);
  text-transform: uppercase;
  margin-bottom: 4px !important;
}
body[class] .na-card .na-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  line-height: 1.3;
}
body[class] .na-card .na-desc {
  font-size: 12px !important;
  color: var(--muted-2, #86868B) !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
  /* Truncate to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body[class] .na-card .na-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
body[class] .na-card .na-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink, #1D1D1F);
}
body[class] .na-card .na-add {
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
}

/* Mobile: shorter "Add" button */
@media (max-width: 480px) {
  body[class] .na-card .na-add { padding: 7px 14px !important; font-size: 11px !important; }
  body[class] .na-card .na-body { padding: 12px 14px 14px !important; }
}


/* ── 5. STATS BAR — mobile responsive ─────────────────────────────────── */

@media (max-width: 768px) {
  body[class] .stats-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 8px !important;
    padding: 24px 16px !important;
  }
  body[class] .stats-bar .stat-item {
    flex: none;
    min-width: 0;
    padding: 0 !important;
    border-right: none !important;
    border-left: none !important;
    text-align: center;
  }
  body[class] .stats-bar .stat-num {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  body[class] .stats-bar .stat-label {
    font-size: 10px !important;
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  body[class] .stats-bar {
    grid-template-columns: repeat(2, 1fr);  /* 2-column on tiny phones (5 items → 2x3 with last centered) */
  }
  /* 5th item spans full width (it's "Avg Response") for visual balance */
  body[class] .stats-bar .stat-item:nth-child(5) {
    grid-column: 1 / -1;
  }
}


/* Reduced motion fallback for new hero/card transforms */
@media (prefers-reduced-motion: reduce) {
  body[class] .hero-nav:hover { transform: translateY(-50%); }
  body[class] .na-card:hover { transform: none; }
  body[class] .na-card:hover .na-img img { transform: none; filter: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.52 — Page polish: search-pill focus / PDP gallery / bento redo /
 *           sstats colorful / bundle 1:1 / Instagram preview-on-tap setup
 * ────────────────────────────────────────────────────────────────────────── */


/* ── A. Search wrappers: focus ring on outer pill, NOT inner input ─────── */

/* Strip the warm ring from inputs INSIDE search wrappers — the wrapper
   itself takes the ring instead so the visual is cohesive. */
body[class] .search-pill input[type="search"]:focus,
body[class] .luxe-search-input:focus,
body[class] .mdrawer-search input[type="search"]:focus,
body[class] .mdrawer-search input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Apply the focus ring to the OUTER wrapper via :focus-within */
body[class] .search-pill,
body[class] .mdrawer-search {
  transition: background-color var(--t-xs) var(--e-silk),
              box-shadow var(--t-xs) var(--e-silk);
}
body[class] .search-pill:focus-within,
body[class] .mdrawer-search:focus-within {
  background: rgba(255, 45, 85, 0.06) !important;
  box-shadow:
    0 0 0 1px var(--brand),
    0 0 0 4px rgba(255, 45, 85, 0.15);
}


/* ── B. PDP main image arrows — fully visible, larger ─────────────────── */

body.page-pdp .pdp-arrow,
:is(body.page-pdp, body.single-product) .pdp-arrow {
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
body.page-pdp .pdp-arrow:hover,
:is(body.page-pdp, body.single-product) .pdp-arrow:hover {
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16) !important;
}
body.page-pdp .pdp-arrow svg,
:is(body.page-pdp, body.single-product) .pdp-arrow svg {
  width: 22px;
  height: 22px;
}
body.page-pdp .pdp-arrow-prev { left: 16px !important; }
body.page-pdp .pdp-arrow-next { right: 16px !important; }


/* ── C. PDP thumbs — desktop height align + brand-red active border ───── */

/* Thumbs container fills full grid row height matching main image */
body.page-pdp .pdp-gallery,
:is(body.page-pdp, body.single-product) .pdp-gallery {
  align-items: stretch !important;
}
body.page-pdp .pdp-thumbs-clip,
:is(body.page-pdp, body.single-product) .pdp-thumbs-clip {
  max-height: none !important;
  height: 100%;
}

/* Active thumb: brand red 1.5px (was black 2px) */
body.page-pdp .pdp-thumb,
:is(body.page-pdp, body.single-product) .pdp-thumb {
  border-width: 1.5px !important;
}
body.page-pdp .pdp-thumb.on,
:is(body.page-pdp, body.single-product) .pdp-thumb.on {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 1px var(--brand);
}

/* Mobile: thumbs as horizontal scroll (manual swipe) */
@media (max-width: 768px) {
  body.page-pdp .pdp-gallery,
  :is(body.page-pdp, body.single-product) .pdp-gallery {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  body.page-pdp .pdp-thumbs-clip,
  :is(body.page-pdp, body.single-product) .pdp-thumbs-clip {
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  body.page-pdp .pdp-thumbs,
  :is(body.page-pdp, body.single-product) .pdp-thumbs {
    flex-direction: row !important;
    transform: none !important;  /* disable JS-driven translate */
    padding-bottom: 4px;
  }
  body.page-pdp .pdp-thumb,
  :is(body.page-pdp, body.single-product) .pdp-thumb {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
  /* Hide gradient hints on mobile (they were for vertical) */
  body.page-pdp .pdp-thumbs-clip::before,
  body.page-pdp .pdp-thumbs-clip::after {
    display: none;
  }
}


/* ── D. Bundle .bcimg — 1:1 square aspect ratio ───────────────────────── */

body[class] .bc .bcimg {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}
body[class] .bc .bcimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── E. About sstats — colorful gradient cards ────────────────────────── */

body[class] .sstats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px !important;
  flex-wrap: nowrap !important;
}
body[class] .sstats > div {
  position: relative;
  padding: 28px 24px !important;
  border-radius: 22px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-sm) var(--e-silk), box-shadow var(--t-sm) var(--e-silk);
}
body[class] .sstats > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(60, 20, 40, 0.10);
}
/* Three distinct color schemes — brand pink / cream / purple — that read
   as "warm, inviting, premium" for an intimate brand. */
body[class] .sstats > div:nth-child(1) {
  background: linear-gradient(135deg, #FFEEF2 0%, #FFD6E0 100%);
  color: #C2185B;
}
body[class] .sstats > div:nth-child(2) {
  background: linear-gradient(135deg, #FFF6E5 0%, #FFE4BB 100%);
  color: #B8651D;
}
body[class] .sstats > div:nth-child(3) {
  background: linear-gradient(135deg, #F5E9FF 0%, #E1CCFF 100%);
  color: #6A2BB8;
}
body[class] .sstats .ssn {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: inherit !important;
  background: linear-gradient(180deg, currentColor 50%, rgba(0,0,0,0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
body[class] .sstats .ssl {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: inherit !important;
  opacity: 0.72;
  margin-top: 4px !important;
}
/* Decorative oversized initial via ::before — adds visual interest */
body[class] .sstats > div::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: -1;
}

@media (max-width: 768px) {
  body[class] .sstats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body[class] .sstats > div {
    padding: 22px 20px !important;
  }
}


/* ── F. Bento — full visual rebuild (lighter, more editorial) ─────────── */

/* Reset the v3.7.51 dark gradient — too heavy and made all tiles look gloomy */
body[class] .b::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(20, 5, 15, 0.20) 50%,
    rgba(20, 5, 15, 0.65) 100%
  ) !important;
}

/* Per-tile colored tints — each tile gets its own brand-aligned mood overlay
   on top of the photo, giving cohesion without dark heavy black. */
body[class] .b1::before {
  background: linear-gradient(180deg,
    rgba(40, 8, 28, 0.10) 0%,
    rgba(40, 8, 28, 0.45) 55%,
    rgba(40, 8, 28, 0.78) 100%) !important;
}
body[class] .b2::before {
  background: linear-gradient(180deg,
    rgba(20, 30, 40, 0.10) 0%,
    rgba(20, 30, 40, 0.50) 60%,
    rgba(20, 30, 40, 0.82) 100%) !important;
}
body[class] .b3::before {
  background: linear-gradient(180deg,
    rgba(8, 30, 45, 0.08) 0%,
    rgba(8, 30, 45, 0.45) 55%,
    rgba(8, 30, 45, 0.78) 100%) !important;
}
body[class] .b4::before {
  background: linear-gradient(180deg,
    rgba(35, 18, 8, 0.10) 0%,
    rgba(35, 18, 8, 0.50) 60%,
    rgba(35, 18, 8, 0.85) 100%) !important;
}
body[class] .b5::before {
  background: linear-gradient(180deg,
    rgba(35, 8, 28, 0.10) 0%,
    rgba(35, 8, 28, 0.45) 55%,
    rgba(35, 8, 28, 0.78) 100%) !important;
}

/* Tighten typography + hierarchy. min-height intentionally NOT set here —
   per-tile sizing (b1 spans 2 rows at 420px hero, others auto) is handled
   by the existing per-tile rules and we don't want to flatten that. */
body[class] .b {
  border-radius: 22px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform var(--t-sm) var(--e-silk), box-shadow var(--t-sm) var(--e-silk);
}
body[class] .b:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(60, 20, 40, 0.18);
}

/* Eyebrow chip: smaller, more refined */
body[class] .b .bey {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  display: inline-block !important;
  border-radius: 100px !important;
  align-self: flex-start;
}
body[class] .b .bey.r {
  align-self: flex-end;
}

/* Title: bigger, cleaner */
body[class] .b .btit {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.1 !important;
  margin-top: 16px;
  margin-bottom: 12px;
}

/* Body text: lighter weight, better spacing */
body[class] .b .bbody {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  font-weight: 400;
  margin-top: 8px;
  max-width: 420px;
}

/* Closer chip: refined glass pill at bottom-left */
body[class] .b .bchip {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  align-self: flex-start;
  margin-top: 16px;
}

/* Stats tile (b4): cleaner number layout */
body[class] .b .bento-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
body[class] .b .bstat-item {
  text-align: left;
}
body[class] .b .bstat {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: #fff !important;
  line-height: 1 !important;
  margin-bottom: 4px;
}
body[class] .b .bstat-sub {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  body[class] .b {
    padding: 22px !important;
  }
  body[class] .b .btit {
    font-size: 22px !important;
  }
  body[class] .b .bstat {
    font-size: 26px !important;
  }
}


/* ── G. Instagram preview-on-tap (CSS for state) ──────────────────────── */

/* When .ig-preview class added by JS, show a stronger overlay + scaled image.
   This is the "first tap reveals" state — second tap follows the link. */
body[class] .ig {
  position: relative;
  overflow: hidden;
}
body[class] .ig.ig-preview img {
  transform: scale(1.06);
  filter: brightness(0.92);
  transition: transform var(--t-md) var(--e-silk), filter var(--t-md) var(--e-silk);
}
body[class] .ig.ig-preview .igov {
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.20) 0%,
    rgba(0, 0, 0, 0.78) 100%
  );
}
body[class] .ig.ig-preview::after {
  content: 'Tap again to open';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #1D1D1F;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Subtle entry */
  animation: ig-hint-in 280ms var(--e-silk);
}
@keyframes ig-hint-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.54 — Logo image sizing across 5 locations
 *
 * The `.logo-img` class is added by luxe_logo_html() helper. Each location
 * needs its own sizing because they appear in different containers:
 *
 *   - Header desktop (.logo): 36px tall pill-shaped capsule
 *   - Mobile drawer (.mdrawer-head .logo): 32px
 *   - Age gate (.gate-logo): centered, 28-40px tall
 *   - Footer (.flogo): 32px tall on dark bg
 *   - Login page (.login-visual .logo): 44px tall on dark gradient
 * ────────────────────────────────────────────────────────────────────────── */

/* Header desktop logo — fits in the 64px tall sticky pill (32-36px max) */
body[class] header .logo .logo-img {
  height: 32px;
  width: auto;
  max-width: 160px;
  display: block;
  object-fit: contain;
}

/* Mobile drawer logo */
body[class] .mdrawer-head .logo .logo-img {
  height: 28px;
  width: auto;
  max-width: 140px;
  display: block;
  object-fit: contain;
}

/* Age gate logo — centered in white card */
body[class] #age-gate .gate-logo .logo-img {
  height: 40px;
  width: auto;
  max-width: 200px;
  display: inline-block;
  margin: 0 auto;
  object-fit: contain;
}
/* When using img logo, the surrounding .gate-logo doesn't need text styling */
body[class] #age-gate .gate-logo:has(.logo-img) {
  font-size: 0;          /* removes any inherited text spacing */
  line-height: 0;
}

/* Footer (.flogo) — dark bg context */
body[class] .flogo .logo-img {
  height: 32px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}

/* Login page logo — sits on dark gradient panel */
body[class] .login-visual .logo .logo-img {
  height: 44px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
}

/* When logo IS an image, hide the trailing <em>.</em> dot since the image
   already conveys branding (no risk of double-dot). luxe_logo_html() doesn't
   emit <em> when it returns <img>, so this is just defensive. */
body[class] .logo .logo-img + em,
body[class] .flogo .logo-img + em,
body[class] .gate-logo .logo-img + em {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.55 — Logo 80% / hero rebuild + light-dark / cart sticky / drawer
 *           form + footer icons / review avatar fallback / PDP counter
 * ────────────────────────────────────────────────────────────────────────── */


/* ── 1. Logo sizing — 80% of v3.7.54 base sizes ───────────────────────── */

body[class] header .logo .logo-img {
  height: 26px !important;          /* was 32 */
  max-width: 130px !important;
}
body[class] .mdrawer-head .logo .logo-img {
  height: 22px !important;          /* was 28 */
  max-width: 110px !important;
}
body[class] .flogo .logo-img {
  height: 26px !important;          /* was 32 */
  max-width: 145px !important;
}


/* ── 2. Mobile drawer search FORM (was a div, now a real <form>) ──────── */

body[class] .mdrawer-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 100px;
  padding: 10px 16px;
  margin: 16px 24px;
  transition: background-color var(--t-xs) var(--e-silk),
              box-shadow var(--t-xs) var(--e-silk);
}
body[class] .mdrawer-search svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--muted, #515154);
}
body[class] .mdrawer-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--ink, #1D1D1F);
  /* Override webkit appearance so iOS doesn't show the X clear button */
  -webkit-appearance: none;
  appearance: none;
}
body[class] .mdrawer-search input[type="search"]::placeholder {
  color: var(--muted-2, #86868B);
}
body[class] .mdrawer-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
body[class] .mdrawer-search-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand, #FF2D55);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-xs) var(--e-silk),
              background-color var(--t-xs) var(--e-silk);
}
body[class] .mdrawer-search-submit:hover {
  transform: scale(1.06);
}
body[class] .mdrawer-search-submit:active {
  transform: scale(0.94);
}
body[class] .mdrawer-search-submit svg {
  width: 16px;
  height: 16px;
  color: #fff;
}


/* ── 3. Mobile drawer footer — SVG icons + flex layout ────────────────── */

body[class] .mdrawer-foot {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 8px;
  padding: 16px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: auto;  /* push to bottom of drawer */
}
body[class] .mdrawer-ftlink {
  flex: 1 1 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink, #1D1D1F);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: background-color var(--t-xs) var(--e-silk),
              color var(--t-xs) var(--e-silk);
}
body[class] .mdrawer-ftlink svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--muted, #515154);
  transition: color var(--t-xs) var(--e-silk);
}
@media (hover: hover) {
  body[class] .mdrawer-ftlink:hover {
    background: rgba(255, 45, 85, 0.06);
    color: var(--brand, #FF2D55);
  }
  body[class] .mdrawer-ftlink:hover svg { color: var(--brand, #FF2D55); }
}
body[class] .mdrawer-ftlink:active {
  background: rgba(255, 45, 85, 0.12);
}


/* ── 4. Cart icon (.ib) sticky-state fix ──────────────────────────────── */

/* Mobile touch devices fire :hover on tap and never clear it without a
   click elsewhere → "sticky" highlight after returning from cart page.
   Solution: only apply the hover background on TRUE hover devices. */
@media (hover: hover) and (pointer: fine) {
  body[class] header .ib:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}
@media (hover: none), (pointer: coarse) {
  /* Touch — no persistent hover state. Use :active for press feedback only. */
  body[class] header .ib:hover {
    background: transparent !important;
  }
  body[class] header .ib:active {
    background: rgba(0, 0, 0, 0.08);
  }
}
/* Replace bare :focus with :focus-visible so click-induced focus doesn't
   leave a permanent ring after navigating */
body[class] header .ib:focus { outline: none; }
body[class] header .ib:focus-visible {
  outline: 2px solid var(--brand, #FF2D55);
  outline-offset: 2px;
}


/* ── 5. Review avatar — SVG fallback for missing/broken images ────────── */

body[class] .rav {
  position: relative;
}
body[class] .rav .rav-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  color: rgba(0, 0, 0, 0.18);
  z-index: 0;
}
body[class] .rav img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── 6. PDP image counter overlay (woomart style) ─────────────────────── */

body[class] .pdp-counter {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  padding: 6px 12px;
  background: rgba(29, 29, 31, 0.78);
  color: #fff;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  user-select: none;
}
body[class] .pdp-counter-sep { opacity: 0.55; }
@media (max-width: 768px) {
  body[class] .pdp-counter {
    bottom: 12px;
    left: 12px;
    font-size: 11px;
    padding: 5px 10px;
  }
}


/* ── 7. HERO — full rebuild + light/dark theme support ────────────────── */

/* Layout overhaul: vertically centered content, tighter max-width,
   better mobile padding, hcount repositioned. */
body[class] .hs.on {
  align-items: center !important;
}
body[class] .hs .hc {
  padding: 0 80px !important;
  max-width: 540px !important;
  position: relative;
  z-index: 3;
}
body[class] .hs .hbadge {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  border-radius: 100px;
  border: 1px solid transparent;
}
body[class] .hs .hc h1,
body[class] .hs .hero-title {
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
body[class] .hs .hc p {
  font-size: 16px !important;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 460px;
}
body[class] .hs .hbtns {
  display: flex;
  gap: 14px;
  align-items: center;
}
body[class] .hs .btn-d {
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  transition: transform var(--t-xs) var(--e-silk),
              box-shadow var(--t-xs) var(--e-silk);
}
body[class] .hs .btn-d:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
body[class] .hs .btn-t {
  font-size: 13px;
  font-weight: 500;
  transition: transform var(--t-xs) var(--e-silk);
}
body[class] .hs .btn-t:hover { transform: translateX(2px); }

/* hcount: smaller, more refined, top-right */
body[class] .hs .hcount {
  position: absolute !important;
  top: 36px !important;
  right: 36px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-size: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[class] .hs .count-label {
  font-size: 10px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body[class] .hs .ctag {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 100px;
  letter-spacing: 0.3px;
  background: var(--brand, #FF2D55);
  color: #fff;
}

/* === DARK theme (default — for light/medium/dark photos) === */
body[class] .hs[data-theme="dark"]::after,
body[class] .hs:not([data-theme="light"])::after {
  /* Existing v3.7.51 dark gradient is fine */
}

/* === LIGHT theme — for inherently light/bright photos === */
body[class] .hs[data-theme="light"]::after {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.42) 35%,
    rgba(255, 255, 255, 0.15) 65%,
    transparent 100%
  ) !important;
}
body[class] .hs[data-theme="light"] .hbadge {
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--ink, #1D1D1F) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body[class] .hs[data-theme="light"] .hc h1,
body[class] .hs[data-theme="light"] .hero-title {
  color: var(--ink, #1D1D1F) !important;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.55) !important;
}
body[class] .hs[data-theme="light"] .hc p {
  color: rgba(29, 29, 31, 0.78) !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.45) !important;
}
body[class] .hs[data-theme="light"] .btn-d {
  background: var(--ink, #1D1D1F) !important;
  color: #fff !important;
}
body[class] .hs[data-theme="light"] .btn-d:hover {
  background: #000 !important;
}
body[class] .hs[data-theme="light"] .btn-t {
  color: var(--ink, #1D1D1F) !important;
}
body[class] .hs[data-theme="light"] .btn-t:hover {
  color: var(--brand, #FF2D55) !important;
}
body[class] .hs[data-theme="light"] .hcount {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}
body[class] .hs[data-theme="light"] .count-label {
  color: rgba(29, 29, 31, 0.65) !important;
}
body[class] .hs[data-theme="light"] .cn,
body[class] .hs[data-theme="light"] .cul {
  color: var(--ink, #1D1D1F) !important;
}
body[class] .hs[data-theme="light"] .csep {
  color: rgba(29, 29, 31, 0.30) !important;
}
body[class] .hs[data-theme="light"] .hero-nav {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  color: var(--ink, #1D1D1F) !important;
}
body[class] .hs[data-theme="light"] .hero-nav:hover {
  background: rgba(255, 255, 255, 0.85) !important;
}
body[class] .hs[data-theme="light"] ~ .sdots .sd,
body[class] .hs[data-theme="light"].on ~ .sdots .sd {
  background: rgba(0, 0, 0, 0.20);
}
/* Dot color follows the active slide's theme */
body[class] .hero .sdots .sd[data-active-theme="light"] {
  background: rgba(0, 0, 0, 0.20);
}

/* Hero mobile rebuild */
@media (max-width: 768px) {
  body[class] .hs {
    height: 64vh !important;
    min-height: 480px !important;
  }
  body[class] .hs .hc {
    padding: 0 28px !important;
    max-width: 100% !important;
  }
  body[class] .hs .hc h1,
  body[class] .hs .hero-title {
    font-size: 38px !important;
    letter-spacing: -1px;
  }
  body[class] .hs .hc p {
    font-size: 14.5px !important;
    margin-bottom: 22px;
  }
  body[class] .hs .hbadge {
    font-size: 10px;
    margin-bottom: 16px;
    padding: 5px 12px;
  }
  body[class] .hs .hbtns {
    flex-wrap: wrap;
    gap: 10px;
  }
  body[class] .hs .btn-d {
    padding: 13px 24px;
    font-size: 13px;
  }
  body[class] .hs .hcount {
    top: auto !important;
    bottom: 92px !important;
    right: 16px !important;
    padding: 9px 14px !important;
  }
  body[class] .hs[data-theme="light"]::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.55) 60%,
      rgba(255, 255, 255, 0.78) 100%
    ) !important;
  }
}
@media (max-width: 480px) {
  body[class] .hs {
    height: 60vh !important;
    min-height: 440px !important;
  }
  body[class] .hs .hc h1,
  body[class] .hs .hero-title {
    font-size: 32px !important;
  }
  body[class] .hs .hcount { display: none !important; }
}


/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.56 — 9 项实测修复 (2026-05-08)
 *
 *   1. Reviews toolbar — sort dropdown took half the row, "Most helpful"
 *      label crowded out
 *   2. PDP review form — fallback styling for stars/textarea when WC hook
 *      didn't render the markup
 *   3. FAQ categories — drawer/dropdown style (mobile-friendly)
 *   4. Cart item image — fully fill 1:1 container at every breakpoint
 *      (was 80px image inside 84px container at <=480px)
 *   5. Wishlist card — title smaller, padding tighter, "Add to Cart"
 *      truncates to "Add" on mobile
 *   6. Empty mini-cart icon — was 64px, way too big in the slim drawer
 *   7. WooCommerce blockUI — kill the gray overlay inside mini-cart when
 *      removing items (user complaint: "出现一层灰色蒙版")
 *   8. Mobile header icons — gap tightened, icon size reduced for ≤600px
 *   9. Drawer-search submit — defensive z-index in case any drawer overlay
 *      sits above the form
 *
 * Each block is body[class] prefixed so specificity ties per-page rules and
 * source-order tiebreaker keeps these wins on every page.
 * ────────────────────────────────────────────────────────────────────────── */


/* ── 1. Reviews toolbar — let left text breathe ───────────────────────── */

body[class] .reviews-toolbar {
  gap: 8px !important;
  flex-wrap: wrap;
}
body[class] .reviews-toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px !important;
  line-height: 1.4;
}
body[class] .reviews-toolbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px !important;
  font-size: 12px !important;
}
body[class] .reviews-toolbar-right label {
  white-space: nowrap;
}
body[class] .reviews-toolbar-right select {
  padding: 6px 28px 6px 10px !important;
  font-size: 12.5px !important;
  max-width: 150px;
  background-position: right 10px center !important;
}

/* On narrow screens stack right-side vertically instead of squeezing the row */
@media (max-width: 540px) {
  body[class] .reviews-toolbar {
    flex-direction: row !important;   /* keep horizontal even when narrow */
    align-items: center !important;
  }
  body[class] .reviews-toolbar-left {
    font-size: 12px !important;
  }
  body[class] .reviews-toolbar-right select {
    max-width: 130px;
    padding: 6px 24px 6px 8px !important;
  }
}


/* ── 2. PDP review form — style the fallback markup ───────────────────── */

body[class] .luxe-review-form-wrap .comment-form-rating {
  margin: 14px 0 18px;
}
body[class] .luxe-review-form-wrap .comment-form-rating label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1D1D1F);
  margin-bottom: 8px;
}
body[class] .luxe-review-form-wrap .comment-form-rating .required {
  color: var(--brand, #FF2D55);
}

/* Click-to-rate stars (5 anchors, default WC markup) */
body[class] .luxe-review-form-wrap p.stars {
  display: inline-flex;
  gap: 2px;
  margin: 0;
}
body[class] .luxe-review-form-wrap p.stars a {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
body[class] .luxe-review-form-wrap p.stars a::before {
  content: '★';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.18);
  text-indent: 0;
  transition: color .15s;
}
body[class] .luxe-review-form-wrap p.stars a:hover::before,
body[class] .luxe-review-form-wrap p.stars a.active::before,
body[class] .luxe-review-form-wrap p.stars:hover a::before {
  color: #FFB800;
}
/* Hover cascade: when hovering a star, all FOLLOWING stars un-fill back */
body[class] .luxe-review-form-wrap p.stars a:hover ~ a::before {
  color: rgba(0, 0, 0, 0.18);
}

/* Comment textarea + author/email inputs */
body[class] .luxe-review-form-wrap .comment-form-comment label,
body[class] .luxe-review-form-wrap .comment-form-author label,
body[class] .luxe-review-form-wrap .comment-form-email label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1D1D1F);
  margin-bottom: 6px;
}
body[class] .luxe-review-form-wrap textarea#comment {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink, #1D1D1F);
  background: #fff;
  resize: vertical;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
body[class] .luxe-review-form-wrap textarea#comment:focus {
  border-color: var(--brand, #FF2D55);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.12);
}
body[class] .luxe-review-form-wrap input#author,
body[class] .luxe-review-form-wrap input#email {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
body[class] .luxe-review-form-wrap input#author:focus,
body[class] .luxe-review-form-wrap input#email:focus {
  border-color: var(--brand, #FF2D55);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.12);
}
body[class] .luxe-review-form-wrap p.form-submit {
  margin-top: 18px;
}
body[class] .luxe-review-form-wrap input#submit {
  background: var(--ink, #1D1D1F);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
body[class] .luxe-review-form-wrap input#submit:hover {
  background: var(--brand, #FF2D55);
}
body[class] .luxe-review-form-wrap input#submit:active {
  transform: scale(0.97);
}


/* ── 3. FAQ categories drawer / dropdown ──────────────────────────────── */
/* Replaces the old horizontal pill row that overflowed on narrow screens. */

body[class] .faq-cats.faq-cats-drawer {
  position: relative;
  display: block;
  margin-top: 18px;
}
body[class] .faq-cats-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1D1D1F);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: left;
}
body[class] .faq-cats-trigger:hover {
  border-color: rgba(0, 0, 0, 0.25);
}
body[class] .faq-cats-current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[class] .faq-cats-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 12px;
  color: var(--muted, #515154);
  transition: transform .2s;
}
body[class] .faq-cats-drawer[data-open="1"] .faq-cats-chevron {
  transform: rotate(180deg);
}
body[class] .faq-cats-drawer[data-open="1"] .faq-cats-trigger {
  border-color: var(--ink, #1D1D1F);
}

body[class] .faq-cats-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
}
body[class] .faq-cats-drawer[data-open="1"] .faq-cats-list {
  display: flex;
}
body[class] .faq-cats-list .faq-cat {
  width: 100%;
  display: block;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1D1D1F);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
body[class] .faq-cats-list .faq-cat:hover {
  background: rgba(0, 0, 0, 0.04);
}
body[class] .faq-cats-list .faq-cat.on {
  background: rgba(255, 45, 85, 0.08);
  color: var(--brand, #FF2D55);
  font-weight: 600;
}
body[class] .faq-cats-list .faq-cat.on::after {
  content: '✓';
  float: right;
  margin-left: 8px;
}


/* ── 4. Cart item image — fill container at every breakpoint ──────────── */
/* Original: at <=480px, .ci-img-link is 84px but .ci-img is set to 80px → */
/* gap shows as unfilled background. Force img to always be 100% of link.  */

body[class] body.page-cart .ci-img,
body[class] .cart-item .ci-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}


/* ── 5. Wishlist card refinements ─────────────────────────────────────── */
/* Title smaller; padding tighter (top/bottom); "Add to Cart" → "Add" on   */
/* mobile via CSS-only text replacement (works without changing markup).   */

body[class] .wcard .wname,
body[class] body.page-wishlist .wname {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}
body[class] .wcard .wbody,
body[class] body.page-wishlist .wbody {
  padding: 12px 14px 14px !important;
}
body[class] .wcard .wbrand,
body[class] body.page-wishlist .wbrand {
  font-size: 10px !important;
  margin-bottom: 2px !important;
  letter-spacing: .5px;
}
body[class] .wcard .wfoot,
body[class] body.page-wishlist .wfoot {
  margin-top: 8px;
}
body[class] .wcard .wprice,
body[class] body.page-wishlist .wprice {
  font-size: 15px !important;
}
body[class] .wcard .wadd,
body[class] body.page-wishlist .wadd {
  padding: 7px 14px !important;
  font-size: 12px !important;
}

/* Mobile: collapse "Add to Cart" → "Add" via CSS-only replacement.        */
/* Trick: hide the original text with font-size:0, then ::before injects   */
/* the short label at the visual font-size. Avoids needing JS / template   */
/* changes.                                                                */
@media (max-width: 600px) {
  body[class] .wcard .wadd,
  body[class] body.page-wishlist .wadd {
    font-size: 0 !important;
    padding: 7px 12px !important;
    line-height: 1;
    min-width: 50px;
  }
  body[class] .wcard .wadd::before,
  body[class] body.page-wishlist .wadd::before {
    content: 'Add';
    font-size: 12px;
    font-weight: 600;
  }
  body[class] .wcard .wbody,
  body[class] body.page-wishlist .wbody {
    padding: 10px 12px 12px !important;
  }
}


/* ── 6. Empty mini-cart icon — 64 → 44 ───────────────────────────────── */

body[class] .luxe-minicart .luxe-mini-cart-empty-icon {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 10px !important;
}
body[class] .luxe-minicart .luxe-mini-cart-empty {
  padding: 32px 28px !important;
}
body[class] .luxe-minicart .luxe-mini-cart-empty-title {
  font-size: 15px !important;
}
body[class] .luxe-minicart .luxe-mini-cart-empty-sub {
  font-size: 13px !important;
  margin-bottom: 12px !important;
}


/* ── 7. WooCommerce blockUI — kill the gray overlay inside mini-cart ──── */
/* When user clicks the × on a mini-cart item, WC's AJAX wraps a .blockUI  */
/* gray overlay over the row. Hide it — the item disappearing is enough.   */
/* Limited to mini-cart so other WC AJAX loading states stay intact.       */

body[class] .luxe-minicart .blockUI.blockOverlay,
body[class] .luxe-minicart .blockUI.blockMsg,
body[class] .luxe-minicart li .blockUI {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* When item is removing, dim it slightly instead of full overlay */
body[class] .luxe-minicart li.removing,
body[class] .luxe-minicart li[style*="opacity"] {
  transition: opacity .25s, transform .25s;
}


/* ── 8. Mobile header icons — tighter spacing ────────────────────────── */
/* User: "这几个图标间距小一点，手机端"                                      */
/* On ≤600px there are 5 icons in .hr (search-pill or its absent space,    */
/* wishlist, account, cart, hamburger). 36×5 + gaps overflows.             */

@media (max-width: 600px) {
  body[class] header .hr {
    gap: 0 !important;
    margin-left: auto;
  }
  body[class] header .hr .ib {
    width: 34px !important;
    height: 34px !important;
  }
  body[class] header .hr .ib svg {
    width: 18px;
    height: 18px;
  }
  /* The cart count badge keeps its size — looks cramped if it shrinks too. */
  body[class] header .hr .ib .cdot {
    transform: scale(0.92);
    transform-origin: center;
  }
}

@media (max-width: 380px) {
  body[class] header .hr .ib {
    width: 30px !important;
    height: 30px !important;
  }
  body[class] header .hr .ib svg {
    width: 16px;
    height: 16px;
  }
}

/* End of v3.7.56 */


/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.56 — additions for previously incomplete items
 *
 * A. Cart coupon — collapsed by default, click "Have a code?" to reveal
 * B. Instagram tiles — armed state (first tap) glow before second tap
 * ────────────────────────────────────────────────────────────────────────── */


/* ── A. Cart coupon collapsible ───────────────────────────────────────── */

body[class] .sum-coupon-toggle {
  display: block;
  margin-top: 12px;
  background: transparent;
  padding: 0;
  border: none;
  grid-template-columns: unset;
}
body[class] .sum-coupon-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #515154);
  cursor: pointer;
  text-align: left;
  transition: color .15s;
}
body[class] .sum-coupon-trigger:hover {
  color: var(--ink, #1D1D1F);
}
body[class] .sum-coupon-trigger > span {
  flex: 1;
}
body[class] .sum-coupon-trigger svg {
  flex-shrink: 0;
  color: var(--muted-2, #86868B);
}
body[class] .sum-coupon-chevron {
  transition: transform .2s;
}
body[class] .sum-coupon-toggle[data-open="1"] .sum-coupon-chevron {
  transform: rotate(180deg);
}
body[class] .sum-coupon-toggle[data-open="1"] .sum-coupon-trigger {
  color: var(--ink, #1D1D1F);
}

body[class] .sum-coupon-input-row {
  display: none;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}
body[class] .sum-coupon-toggle[data-open="1"] .sum-coupon-input-row {
  display: grid;
  animation: luxe-coupon-slide .25s ease both;
}
body[class] .sum-coupon-input-row input[type="text"] {
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
body[class] .sum-coupon-input-row input[type="text"]:focus {
  border-color: var(--brand, #FF2D55);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.12);
}
body[class] .sum-coupon-input-row button {
  padding: 10px 18px;
  background: var(--ink, #1D1D1F);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
body[class] .sum-coupon-input-row button:hover {
  background: var(--brand, #FF2D55);
}

@keyframes luxe-coupon-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── B. Instagram first-tap armed state ───────────────────────────────── */
/* First tap on a tile shows .armed: subtle pink border + ♡ pulse +        */
/* "Tap again to open" hint. Second tap navigates normally.                */

body[class] .ig {
  position: relative;
  transition: transform .18s, box-shadow .18s;
}
body[class] .ig.armed {
  transform: scale(0.98);
  box-shadow: 0 0 0 2px var(--brand, #FF2D55), 0 8px 24px rgba(255, 45, 85, 0.18);
  z-index: 2;
}
body[class] .ig.armed::after {
  content: 'Tap again to open';
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 8px 10px;
  background: rgba(255, 45, 85, 0.92);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  pointer-events: none;
  animation: luxe-ig-armed .25s ease both;
  border-radius: 0 0 inherit inherit;
}
@keyframes luxe-ig-armed {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.57 — HERO complete redesign (2026-05-08)
 *
 * The third (and hopefully final) iteration of the homepage hero. v3.7.51
 * tried full-bleed, v3.7.55 added light/dark themes — but layout still felt
 * cramped on desktop and oversized on mobile. User feedback: "电脑和手机端
 * 都有问题，不好看".
 *
 * Design language for v3.7.57:
 *
 *   - Single full-bleed background image per slide (no .h-photo split)
 *   - Two-axis gradient overlay: left→right + bottom→top, depth + readability
 *   - Content card sits left-aligned on desktop (max-width 580px, padding
 *     left scales with viewport: max(80px, 6vw)), centered on mobile
 *   - Fluid typography via clamp() — no breakpoint jumps
 *   - hcount moved to top-right with refined glass capsule
 *   - Slide transitions changed from display:none/flex (instant flash) to
 *     opacity 0.7s crossfade with absolute stacking
 *   - Indicator dots redesigned as 4×24 line bars (active expands to 4×36)
 *   - Light/dark theme system from v3.7.55 retained
 *   - Word-reveal animation from v3.7.48 retained
 *
 * All selectors prefixed with `body[class]` so specificity ties / wins
 * over the per-page `body.page-index .hs` rules (≈ 30 of them) earlier
 * in the file. Source order tiebreaker keeps these final.
 *
 * IMPORTANT: this block intentionally re-declares almost every .hs / .hc
 * / .hbadge / .hbtns rule. Don't try to "merge with v3.7.55 block above" —
 * that block has light/dark theme overrides that we need to keep separate.
 * ────────────────────────────────────────────────────────────────────────── */


/* ── A. Hero shell + slide stacking system ────────────────────────────── */

body[class] .hero {
  padding: 24px 0 64px !important;
}
body[class] .hero .hslides {
  position: relative;
  width: 100%;
  /* Fluid hero height: 70vh on desktop, capped 760px max, 540px min */
  height: clamp(540px, 78vh, 760px) !important;
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  background: #1D1D1F;  /* fallback while images load */
  /* Reset cursor — was set to grab in v3.7.50 */
  cursor: default !important;
}

/* Slide stack: every slide absolute-positioned, opacity-faded                */
/* This replaces the v3.7.x 'display: none/flex' switching that caused the   */
/* visible flash users complained about.                                     */
body[class] .hero .hs {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* desktop: left-aligned content */
  flex-direction: row !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity .8s var(--e-silk, cubic-bezier(.22,1,.36,1)),
              visibility .8s linear,
              transform 1.4s var(--e-silk, cubic-bezier(.22,1,.36,1));
  pointer-events: none;
  z-index: 1;
}
body[class] .hero .hs.on {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  z-index: 2;
}

/* Drop the gradient placeholder backgrounds from v3.7.x layout era —
   they were per-slide pastel washes for the now-removed split layout. */
body[class] .hero .hs.hs1,
body[class] .hero .hs.hs2,
body[class] .hero .hs.hs3 {
  background-color: #1D1D1F;
}

/* Make sure the deprecated .h-photo (if any leftover instances ship in
   the template again) stays invisible. */
body[class] .hero .h-photo { display: none !important; }


/* ── B. Two-axis gradient overlay (readability + depth) ───────────────── */

/* The dark variant: heavier bottom-to-top + left-to-right                  */
/* These are pseudo-elements, NOT background filters, so the bg image      */
/* still renders cleanly in image-search results / og:image previews.      */
body[class] .hero .hs[data-theme="dark"]::before,
body[class] .hero .hs:not([data-theme])::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.05) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

body[class] .hero .hs[data-theme="light"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.05) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Disable the old v3.7.x ::after dark layer (was used as scrim in dark mode) */
body[class] .hero .hs::after { display: none !important; }


/* ── C. Content container .hc — left-aligned card on desktop ─────────── */

body[class] .hero .hs .hc {
  position: relative;
  z-index: 3;
  padding: 0 max(80px, 6vw) !important;
  max-width: 600px !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left !important;
}


/* ── D. Eyebrow badge — refined glass capsule ─────────────────────────── */

body[class] .hero .hs .hbadge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  margin: 0 0 24px !important;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Subtle entrance from below */
  opacity: 0;
  transform: translateY(8px);
  animation: luxe-hero-badge-in .7s var(--e-silk, cubic-bezier(.22,1,.36,1)) .15s forwards;
}
body[class] .hero .hs[data-theme="light"] .hbadge {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ink, #1D1D1F);
}
@keyframes luxe-hero-badge-in {
  to { opacity: 1; transform: translateY(0); }
}


/* ── E. Hero title — fluid display type ───────────────────────────────── */

body[class] .hero .hs .hero-title,
body[class] .hero .hs .hc h1 {
  /* Min 36, max 68, fluid 5.4vw between */
  font-size: clamp(34px, 5.4vw, 64px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.04 !important;
  margin: 0 0 18px !important;
  color: #fff;
  /* Soft drop shadow for readability over varied photos */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
body[class] .hero .hs[data-theme="light"] .hero-title,
body[class] .hero .hs[data-theme="light"] .hc h1 {
  color: var(--ink, #1D1D1F);
  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.6);
}

/* Word-reveal masks (preserve v3.7.48 animation system) */
body[class] .hero .hs .hl { display: block; }
body[class] .hero .hs .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
}
body[class] .hero .hs .hwi {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
/* When slide is active, animate words with stagger via --i */
body[class] .hero .hs.on .hwi {
  animation: luxe-hero-word-in .9s var(--e-silk, cubic-bezier(.22,1,.36,1)) both;
  animation-delay: calc(0.32s + var(--i, 0) * 0.08s);
}
@keyframes luxe-hero-word-in {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


/* ── F. Description text ──────────────────────────────────────────────── */

body[class] .hero .hs .hc p {
  font-size: clamp(14.5px, 1.3vw, 17px) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  max-width: 460px;
  margin: 0 0 28px !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(8px);
  animation: luxe-hero-fade-in .8s var(--e-silk, cubic-bezier(.22,1,.36,1)) .65s forwards;
}
body[class] .hero .hs[data-theme="light"] .hc p {
  color: rgba(29, 29, 31, 0.78) !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6);
}
@keyframes luxe-hero-fade-in {
  to { opacity: 1; transform: translateY(0); }
}


/* ── G. Buttons row ───────────────────────────────────────────────────── */

body[class] .hero .hs .hbtns {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px !important;
  margin: 0 !important;
  opacity: 0;
  transform: translateY(8px);
  animation: luxe-hero-fade-in .8s var(--e-silk, cubic-bezier(.22,1,.36,1)) .85s forwards;
}

body[class] .hero .hs .btn-d {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 30px !important;
  background: #fff !important;
  color: var(--ink, #1D1D1F) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  border: 1.5px solid #fff !important;
  letter-spacing: 0.01em;
  transition: transform var(--t-sm, .25s) var(--e-silk, cubic-bezier(.22,1,.36,1)),
              box-shadow var(--t-sm, .25s) var(--e-silk, cubic-bezier(.22,1,.36,1)),
              background-color var(--t-sm, .25s) var(--e-silk, cubic-bezier(.22,1,.36,1));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
body[class] .hero .hs .btn-d:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
body[class] .hero .hs[data-theme="light"] .btn-d {
  background: var(--ink, #1D1D1F) !important;
  color: #fff !important;
  border-color: var(--ink, #1D1D1F) !important;
}

body[class] .hero .hs .btn-t {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 13px 24px !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.42) !important;
  text-decoration: none !important;
  transition: all var(--t-sm, .25s) var(--e-silk, cubic-bezier(.22,1,.36,1));
}
body[class] .hero .hs .btn-t:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
}
body[class] .hero .hs[data-theme="light"] .btn-t {
  color: var(--ink, #1D1D1F) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}
body[class] .hero .hs[data-theme="light"] .btn-t:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: var(--ink, #1D1D1F) !important;
}


/* ── H. Floating count card (top-right) ───────────────────────────────── */

body[class] .hero .hs .hcount {
  position: absolute !important;
  top: clamp(24px, 3.4vw, 40px) !important;
  right: clamp(24px, 3.4vw, 40px) !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 4;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(-6px);
  animation: luxe-hero-fade-in .7s var(--e-silk, cubic-bezier(.22,1,.36,1)) 1.1s forwards;
}
body[class] .hero .hs[data-theme="light"] .hcount {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.06);
}
body[class] .hero .hs .hcount .count-label {
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  white-space: nowrap;
}
body[class] .hero .hs[data-theme="light"] .hcount .count-label {
  color: rgba(29, 29, 31, 0.72);
}
body[class] .hero .hs .hcount .count-nums {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: #fff;
}
body[class] .hero .hs[data-theme="light"] .hcount .count-nums {
  color: var(--ink, #1D1D1F);
}
body[class] .hero .hs .hcount .cu { display: flex; flex-direction: column; align-items: center; }
body[class] .hero .hs .hcount .cn {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
body[class] .hero .hs .hcount .cul {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 2px;
  opacity: 0.7;
}
body[class] .hero .hs .hcount .csep {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.5;
}
body[class] .hero .hs .hcount .ctag {
  font-size: 12px !important;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
body[class] .hero .hs[data-theme="light"] .hcount .ctag {
  color: var(--ink, #1D1D1F);
}


/* ── I. Slide navigation arrows — refined glass ───────────────────────── */

body[class] .hero .hero-nav {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background-color var(--t-sm, .25s) var(--e-silk),
              transform var(--t-sm, .25s) var(--e-silk);
  opacity: 0.85;
}
body[class] .hero .hero-nav:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  opacity: 1;
}
body[class] .hero .hero-nav-prev { left: clamp(16px, 2vw, 28px); }
body[class] .hero .hero-nav-next { right: clamp(16px, 2vw, 28px); }
body[class] .hero .hero-nav-prev:hover { transform: translateY(-50%) translateX(-2px); }
body[class] .hero .hero-nav-next:hover { transform: translateY(-50%) translateX(2px); }


/* ── J. Indicator dots — line-style bars ──────────────────────────────── */

body[class] .hero .sdots {
  position: absolute !important;
  bottom: clamp(20px, 2.4vw, 32px) !important;
  left: 50% !important;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
  margin: 0 !important;
}
body[class] .hero .sdots .sd {
  width: 24px !important;
  height: 4px !important;
  border: none !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer;
  padding: 0 !important;
  transition: width var(--t-sm, .25s) var(--e-silk),
              background-color var(--t-sm, .25s) var(--e-silk);
}
body[class] .hero .sdots .sd:hover {
  background: rgba(255, 255, 255, 0.65) !important;
}
body[class] .hero .sdots .sd.on {
  width: 36px !important;
  background: #fff !important;
}


/* ── K. Tablet (≤900px) ───────────────────────────────────────────────── */

@media (max-width: 900px) {
  body[class] .hero .hslides {
    height: clamp(480px, 70vh, 640px) !important;
    border-radius: 14px;
  }
  body[class] .hero .hs .hc {
    padding: 0 max(40px, 5vw) !important;
    max-width: 540px !important;
  }
  body[class] .hero .hs .hbtns {
    gap: 8px !important;
  }
}


/* ── L. Mobile (≤640px) — center alignment, stacked CTAs ─────────────── */

@media (max-width: 640px) {
  body[class] .hero {
    padding: 16px 0 48px !important;
  }
  body[class] .hero .hslides {
    height: clamp(540px, 78vh, 640px) !important;
    border-radius: 12px;
  }

  /* Stronger gradient on mobile — image often less framed for close text */
  body[class] .hero .hs[data-theme="dark"]::before,
  body[class] .hero .hs:not([data-theme])::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.10) 30%, rgba(0,0,0,0.65) 100%);
  }
  body[class] .hero .hs[data-theme="light"]::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.30) 100%);
  }

  /* Center content vertically + horizontally on mobile */
  body[class] .hero .hs {
    align-items: flex-end !important;     /* anchor content near bottom */
    justify-content: center !important;
    padding-bottom: 56px;                 /* leave room for dots */
  }
  body[class] .hero .hs .hc {
    padding: 0 24px !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  body[class] .hero .hs .hero-title,
  body[class] .hero .hs .hc h1 {
    font-size: clamp(28px, 8.5vw, 38px) !important;
    margin-bottom: 14px !important;
  }
  body[class] .hero .hs .hc p {
    font-size: 14px !important;
    margin-bottom: 22px !important;
    max-width: 90%;
  }
  body[class] .hero .hs .hbadge {
    font-size: 10px !important;
    padding: 5px 12px !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.14em;
  }
  body[class] .hero .hs .hbtns {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    gap: 8px !important;
  }
  body[class] .hero .hs .btn-d,
  body[class] .hero .hs .btn-t {
    width: 100%;
    padding: 13px 20px !important;
    font-size: 14px !important;
  }

  /* hcount: keep in top-right but smaller, drop the count-nums on phone */
  body[class] .hero .hs .hcount {
    top: 16px !important;
    right: 16px !important;
    padding: 8px 12px !important;
    border-radius: 10px;
    gap: 3px;
  }
  body[class] .hero .hs .hcount .count-label {
    font-size: 9px !important;
    letter-spacing: 0.12em;
  }
  body[class] .hero .hs .hcount .count-nums { display: none; }
  body[class] .hero .hs .hcount .ctag {
    font-size: 11px !important;
  }

  /* Smaller arrows on phone */
  body[class] .hero .hero-nav {
    width: 40px !important;
    height: 40px !important;
  }
  body[class] .hero .hero-nav svg {
    width: 18px;
    height: 18px;
  }

  /* Dots smaller too */
  body[class] .hero .sdots {
    bottom: 18px !important;
    gap: 6px;
  }
  body[class] .hero .sdots .sd { width: 18px !important; }
  body[class] .hero .sdots .sd.on { width: 28px !important; }
}


/* ── M. Tiny mobile (≤400px) ─────────────────────────────────────────── */

@media (max-width: 400px) {
  body[class] .hero .hslides {
    height: clamp(500px, 76vh, 580px) !important;
  }
  body[class] .hero .hs .hero-title {
    font-size: 28px !important;
  }
  /* Hide hcount entirely — it crowds the hero on tiny screens */
  body[class] .hero .hs .hcount { display: none !important; }
}


/* ── N. Reduced-motion override ───────────────────────────────────────── */
/* Skip the word-reveal stagger, just fade the slide. */

@media (prefers-reduced-motion: reduce) {
  body[class] .hero .hs.on .hwi,
  body[class] .hero .hs .hbadge,
  body[class] .hero .hs .hc p,
  body[class] .hero .hs .hbtns,
  body[class] .hero .hs .hcount {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body[class] .hero .hs {
    transition: opacity .25s linear, visibility .25s linear !important;
    transform: none !important;
  }
}

/* End of v3.7.57 hero */


/* ──────────────────────────────────────────────────────────────────────────
 * v3.7.58 — PDP Gallery complete redesign (2026-05-08)
 *
 * User feedback: "商品主图区域需要重做，现在样式有问题，特别是缩略图，
 *                 思考一下商业主题做法"
 *
 * Problem inventory before this version:
 *
 *   • 111 CSS rules for .pdp-* across the file (early + v3.7.40 + v3.7.41
 *     + v3.7.52 + v3.7.55 patches stacked) — impossible to predict which
 *     rule wins for any given selector
 *   • Main image height jumps as user clicks thumbs (different aspect
 *     ratios per source image)
 *   • 4 floating overlays in the four corners (badge, counter, zoom-hint,
 *     arrows) — visually crowded
 *   • Hover-zoom scaled image to 200% — conflicts with lightbox, unrefined
 *     on lifestyle photography
 *   • Thumbnail strip three transform systems compete (auto-scroll JS +
 *     hover scale + active-state border) — flashes during state changes
 *   • Thumbs scroll-fade gradients (.has-overflow-top/-bottom) — class is
 *     toggled by JS but no CSS rule paints the gradient
 *
 * Design language for v3.7.58 (reference: SSENSE / Mr Porter / Aesop):
 *
 *   1. Ratio-locked container — main image is 4:5 portrait on desktop,
 *      square on mobile. Thumbnails are 1:1. No more height jumps when
 *      user clicks between landscape and portrait source images.
 *
 *   2. Two-column layout flipped — thumbnails moved to RIGHT of main
 *      image (was: left). Eye scans main → thumbs → product info, which
 *      matches Western reading order. Mobile: stacks main on top, thumbs
 *      below as horizontal carousel.
 *
 *   3. No hover-zoom. The image just sits there. cursor: zoom-in is the
 *      single, quiet affordance for "click to expand". Lightbox handles
 *      actual zoom.
 *
 *   4. Counter moved top-right (was bottom-right). Pairs visually with
 *      the badge in top-left → corner-symmetric composition.
 *
 *   5. zoom-hint text strip removed entirely. The cursor change + counter
 *      are sufficient. Less = more for high-end positioning.
 *
 *   6. Thumbnails redesigned: 5 visible at a time on desktop (each 1:1,
 *      ~76px tall in the column), dimmed at 0.55 opacity except .on which
 *      is full opacity + 1.5px solid black border. Hover only nudges
 *      opacity to 0.8 — no scale, no shadow.
 *
 *   7. Scroll-fade gradients now actually paint (the JS already toggles
 *      classes, the CSS just had to add the rules — pseudo-elements on
 *      .pdp-thumbs-clip).
 *
 *   8. Arrows always visible at 0.5 opacity (not just on hover) so users
 *      know they exist on first paint. Hover/focus → 1.0.
 *
 *   9. Mobile: arrows hidden (swipe is the gesture); thumbs become a 60px
 *      tall horizontal strip beneath main image, with 4-5 visible.
 *
 * All rules use `body[class] body.page-pdp` (or :is variant) — that's
 * (0,1,2,1) specificity — strong enough to win against the early per-page
 * rules (0,1,1,1) that still live in the file. Source-order tiebreaker
 * also keeps these final.
 *
 * IMPORTANT: this block intentionally re-declares almost every .pdp-thumbs/
 * .pdp-thumb/.pdp-main-img rule. Earlier versions are not removed — that
 * would risk breaking some edge case I haven't tested. They get overridden.
 * ────────────────────────────────────────────────────────────────────────── */


/* ── A. Gallery shell — flip column order, ratio-locked main ──────────── */

body[class] body.page-pdp .pdp-gallery,
body[class] body.single-product .pdp-gallery {
  display: grid !important;
  /* Main image = 1fr (fills available space)
     Thumbs    = fixed 92px column on the RIGHT */
  grid-template-columns: 1fr 92px !important;
  gap: 16px !important;
  align-items: start !important;
  position: relative;
}


/* ── B. Main image — ratio-locked container ───────────────────────────── */

body[class] body.page-pdp .pdp-main-img,
body[class] body.single-product .pdp-main-img {
  position: relative !important;
  /* 4:5 portrait — most flattering for product photography of small,
     desk-photographed objects (the typical PDP image). */
  aspect-ratio: 4 / 5 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: linear-gradient(135deg, #FAFAFA 0%, #F2F2F4 100%) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  cursor: zoom-in !important;
  /* Fade-in once images loaded (set by JS via .luxe-loaded) */
  transition: box-shadow .3s ease;
}
body[class] body.page-pdp .pdp-main-img:hover,
body[class] body.single-product .pdp-main-img:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

body[class] body.page-pdp .pdp-main-img > #main-img,
body[class] body.single-product .pdp-main-img > #main-img,
body[class] body.page-pdp .pdp-main-img > img,
body[class] body.single-product .pdp-main-img > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  /* v3.7.58: explicit no-transform to ensure the swap-animation JS still
     works (it sets inline transform during transitions then clears it). */
  transform: none;
  transition: opacity .25s ease;
}

/* Placeholder when product has no images */
body[class] .pdp-main-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFE5EC 0%, #FFB3C8 50%, #FF8FAA 100%);
  color: var(--ink, #1D1D1F);
}
body[class] .pdp-main-placeholder-brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  margin-top: 16px;
  opacity: 0.4;
}
body[class] .pdp-main-placeholder-name {
  font-size: 11px;
  opacity: 0.3;
  margin-top: 4px;
  letter-spacing: 1px;
}


/* ── C. Badge (top-left) — refined dot capsule ────────────────────────── */

body[class] body.page-pdp .pdp-badge,
body[class] body.single-product .pdp-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px !important;
  background: var(--ink, #1D1D1F) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  border-radius: 100px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
body[class] body.page-pdp .pdp-badge::before,
body[class] body.single-product .pdp-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand, #FF2D55);
  flex-shrink: 0;
}


/* ── D. Counter (top-right) — quiet glass pill ────────────────────────── */
/* Moved from bottom-right (v3.7.55) to top-right so badge + counter form
   a balanced top-edge composition. */

body[class] body.page-pdp .pdp-counter,
body[class] body.single-product .pdp-counter {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3;
  display: inline-flex !important;
  align-items: baseline;
  gap: 2px;
  padding: 5px 12px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  border-radius: 100px !important;
  border: none !important;
  letter-spacing: 0.02em;
}
body[class] body.page-pdp .pdp-counter-sep,
body[class] body.single-product .pdp-counter-sep {
  opacity: 0.55 !important;
  margin: 0 1px;
}


/* ── E. Arrows — always visible, quiet by default, vivid on hover ─────── */
/* Was: hidden until parent hover. New: always 0.5 opacity, 1.0 on hover.  */
/* Empirically users on lifestyle PDPs miss arrows that aren't visible on  */
/* first paint — they think it's a single image and never see other shots. */

body[class] body.page-pdp .pdp-arrow,
body[class] body.single-product .pdp-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--ink, #1D1D1F) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4;
  /* v3.7.58: visible at 50% opacity by default (was: 0). Pre-hover state
     tells users arrows exist; hover commits the affordance. */
  opacity: 0.5 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
body[class] body.page-pdp .pdp-main-img:hover .pdp-arrow,
body[class] body.single-product .pdp-main-img:hover .pdp-arrow,
body[class] body.page-pdp .pdp-arrow:focus-visible,
body[class] body.single-product .pdp-arrow:focus-visible {
  opacity: 1 !important;
}
body[class] body.page-pdp .pdp-arrow:hover,
body[class] body.single-product .pdp-arrow:hover {
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
body[class] body.page-pdp .pdp-arrow-prev,
body[class] body.single-product .pdp-arrow-prev { left: 14px !important; right: auto !important; }
body[class] body.page-pdp .pdp-arrow-next,
body[class] body.single-product .pdp-arrow-next { right: 14px !important; left: auto !important; }
body[class] body.page-pdp .pdp-arrow:hover,
body[class] body.single-product .pdp-arrow:hover {
  /* keep vertically-centred translateY in addition to optional X offset */
  transform: translateY(-50%) scale(1.05) !important;
}
body[class] body.page-pdp .pdp-arrow:active,
body[class] body.single-product .pdp-arrow:active {
  transform: translateY(-50%) scale(0.95) !important;
}
body[class] body.page-pdp .pdp-arrow svg,
body[class] body.single-product .pdp-arrow svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}


/* ── F. Zoom-hint text — kill it (v3.7.58 removes from PHP, but defensive */
/*       rule in case any cached/older include still renders it).         */

body[class] body.page-pdp .pdp-zoom-hint,
body[class] body.single-product .pdp-zoom-hint {
  display: none !important;
}

/* Also kill the old hover-zoom .zooming class behavior — JS removed but */
/* defensive against any third party that might add the class. */
body[class] body.page-pdp .pdp-main-img.zooming img,
body[class] body.single-product .pdp-main-img.zooming img {
  transform: none !important;
}


/* ── G. Thumbnails column ─────────────────────────────────────────────── */

body[class] body.page-pdp .pdp-thumbs-wrap,
body[class] body.single-product .pdp-thumbs-wrap {
  position: relative;
  width: 92px;
  /* Don't try to match main image height pixel-for-pixel — grid alignment
     handles vertical alignment naturally. Just cap max-height to ~5 thumbs
     so the column never exceeds the image area visually. */
}

body[class] body.page-pdp .pdp-thumbs-clip,
body[class] body.single-product .pdp-thumbs-clip {
  position: relative !important;
  width: 92px !important;
  /* Show ~5 thumbs (5 × 92 + 4 × 8 = 492). JS auto-scrolls when more. */
  max-height: 492px !important;
  overflow: hidden !important;
}
body[class] body.page-pdp .pdp-thumbs,
body[class] body.single-product .pdp-thumbs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  /* Auto-scroll system from v3.7.40 keeps using inline transform — we
     just need to NOT set our own transform here so it can take effect. */
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}


/* ── H. Individual thumb — quiet, opacity-state only ──────────────────── */

body[class] body.page-pdp .pdp-thumb,
body[class] body.single-product .pdp-thumb {
  position: relative !important;
  width: 92px !important;
  height: 92px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  background: #FAFAFA !important;
  overflow: hidden !important;
  cursor: pointer !important;
  opacity: 0.55 !important;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
  display: block !important;
  outline: none;
}
body[class] body.page-pdp .pdp-thumb:hover,
body[class] body.single-product .pdp-thumb:hover {
  opacity: 0.85 !important;
}
body[class] body.page-pdp .pdp-thumb.on,
body[class] body.single-product .pdp-thumb.on {
  opacity: 1 !important;
  border-color: var(--ink, #1D1D1F) !important;
}
body[class] body.page-pdp .pdp-thumb:focus-visible,
body[class] body.single-product .pdp-thumb:focus-visible {
  border-color: var(--brand, #FF2D55) !important;
  outline: none;
}

body[class] body.page-pdp .pdp-thumb img,
body[class] body.single-product .pdp-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  /* v3.7.58: cancel any earlier transform: scale that was used as a
     hover effect — too noisy in a quiet column. */
  transform: none !important;
}


/* ── I. Scroll-fade gradients — paint when JS adds the classes ────────── */
/* JS already toggles .has-overflow-top / .has-overflow-bottom on the      */
/* clip. Earlier CSS never painted the gradient — fix that here.           */

body[class] body.page-pdp .pdp-thumbs-clip::before,
body[class] body.page-pdp .pdp-thumbs-clip::after,
body[class] body.single-product .pdp-thumbs-clip::before,
body[class] body.single-product .pdp-thumbs-clip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}
body[class] body.page-pdp .pdp-thumbs-clip::before,
body[class] body.single-product .pdp-thumbs-clip::before {
  top: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
}
body[class] body.page-pdp .pdp-thumbs-clip::after,
body[class] body.single-product .pdp-thumbs-clip::after {
  bottom: 0;
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);
}
body[class] body.page-pdp .pdp-thumbs-clip.has-overflow-top::before,
body[class] body.single-product .pdp-thumbs-clip.has-overflow-top::before {
  opacity: 1;
}
body[class] body.page-pdp .pdp-thumbs-clip.has-overflow-bottom::after,
body[class] body.single-product .pdp-thumbs-clip.has-overflow-bottom::after {
  opacity: 1;
}


/* ── J. Tablet (≤900px) — slightly tighter ────────────────────────────── */

@media (max-width: 900px) {
  body[class] body.page-pdp .pdp-gallery,
  body[class] body.single-product .pdp-gallery {
    grid-template-columns: 1fr 78px !important;
    gap: 12px !important;
  }
  body[class] body.page-pdp .pdp-thumbs-clip,
  body[class] body.single-product .pdp-thumbs-clip {
    width: 78px !important;
  }
  body[class] body.page-pdp .pdp-thumb,
  body[class] body.single-product .pdp-thumb {
    width: 78px !important;
    height: 78px !important;
  }
  body[class] body.page-pdp .pdp-main-img,
  body[class] body.single-product .pdp-main-img {
    border-radius: 16px !important;
  }
}


/* ── K. Mobile (≤640px) — stack, square main, horizontal thumbs ──────── */

@media (max-width: 640px) {
  body[class] body.page-pdp .pdp-gallery,
  body[class] body.single-product .pdp-gallery {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[class] body.page-pdp .pdp-main-img,
  body[class] body.single-product .pdp-main-img {
    /* Square instead of 4:5 on mobile — fits viewport better, keeps
       vertical scrolling reasonable. */
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
    cursor: pointer !important;  /* phones: tap to lightbox */
  }

  /* Hide arrows — swipe is the gesture on phones. */
  body[class] body.page-pdp .pdp-arrow,
  body[class] body.single-product .pdp-arrow {
    display: none !important;
  }

  /* Counter slightly smaller, top-right unchanged */
  body[class] body.page-pdp .pdp-counter,
  body[class] body.single-product .pdp-counter {
    top: 10px !important;
    right: 10px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
  body[class] body.page-pdp .pdp-badge,
  body[class] body.single-product .pdp-badge {
    top: 10px !important;
    left: 10px !important;
    font-size: 9.5px !important;
    padding: 4px 9px 4px 7px !important;
  }

  /* Thumbs become a horizontal row beneath main image */
  body[class] body.page-pdp .pdp-thumbs-wrap,
  body[class] body.single-product .pdp-thumbs-wrap {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  body[class] body.page-pdp .pdp-thumbs-clip,
  body[class] body.single-product .pdp-thumbs-clip {
    width: 100% !important;
    height: 64px !important;
    max-height: 64px !important;
    overflow: hidden !important;
  }
  body[class] body.page-pdp .pdp-thumbs,
  body[class] body.single-product .pdp-thumbs {
    flex-direction: row !important;
    gap: 6px !important;
    width: max-content !important;
    /* JS auto-scroll uses translateX on mobile (viewport width detection);
       we just need the row layout to allow horizontal travel. */
  }
  body[class] body.page-pdp .pdp-thumb,
  body[class] body.single-product .pdp-thumb {
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
    border-width: 1.5px !important;
  }

  /* Scroll-fade gradients — switch from top/bottom to left/right on mobile */
  body[class] body.page-pdp .pdp-thumbs-clip::before,
  body[class] body.single-product .pdp-thumbs-clip::before {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    width: 24px !important;
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%) !important;
  }
  body[class] body.page-pdp .pdp-thumbs-clip::after,
  body[class] body.single-product .pdp-thumbs-clip::after {
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: 0 !important;
    height: auto !important;
    width: 24px !important;
    background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%) !important;
  }
}


/* ── L. Tiny mobile (≤380px) — even smaller thumbs ───────────────────── */

@media (max-width: 380px) {
  body[class] body.page-pdp .pdp-thumbs-clip,
  body[class] body.single-product .pdp-thumbs-clip {
    height: 56px !important;
    max-height: 56px !important;
  }
  body[class] body.page-pdp .pdp-thumb,
  body[class] body.single-product .pdp-thumb {
    width: 56px !important;
    height: 56px !important;
  }
}


/* ── M. Reduced motion — kill thumb auto-scroll transition ────────────── */

@media (prefers-reduced-motion: reduce) {
  body[class] body.page-pdp .pdp-thumbs,
  body[class] body.single-product .pdp-thumbs {
    transition: none !important;
  }
  body[class] body.page-pdp .pdp-main-img > img,
  body[class] body.single-product .pdp-main-img > img {
    transition: none !important;
  }
  body[class] body.page-pdp .pdp-arrow,
  body[class] body.single-product .pdp-arrow {
    transition: none !important;
  }
}

/* End of v3.7.58 PDP gallery */

/* ──────────────────────────────────────────────────────────────────────
 * LUXE v3.9.0 — Mobile search modal + suggestions polish
 *
 * Appended to assets/css/shop.css (loaded on shop pages) and styles.css
 * (loaded everywhere) — see orchestration script. The modal itself can
 * appear on any page so its CSS lives in styles.css.
 *
 * Token reuse:
 *   --brand          = #FF2D55       primary accent
 *   --brand-soft     = #FFF0F3       subtle pink tint
 *   --line, --ink, --muted-2, etc — already defined in :root
 * ────────────────────────────────────────────────────────────────────── */

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   1. Mobile search modal                                              ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

#luxeSearchModal {
  /* v3.9.1: position fixed + flex centring (display rule overridden below). */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 20, 24, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}
#luxeSearchModal.open {
  /* display:flex set in centring block below */
  opacity: 1;
}

/* v3.9.1: modal is the flex container; shell sits centred. */
#luxeSearchModal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#luxeSearchModal.open {
  display: flex;
}
#luxeSearchModal .luxe-sm-shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.24),
              0 4px 16px rgba(0, 0, 0, 0.08);
  transform: scale(.96);
  opacity: 0;
  transition: transform .26s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  overflow: hidden;
}
#luxeSearchModal.open .luxe-sm-shell {
  transform: scale(1);
  opacity: 1;
}

#luxeSearchModal .luxe-sm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line, #E8E8ED);
}
#luxeSearchModal .luxe-sm-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg, #F5F5F7);
  border-radius: 100px;
  padding: 10px 16px;
  position: relative;
  /* v3.9.1: focus ring on the OUTER wrapper, not the input. */
  transition: background .18s ease, box-shadow .18s ease;
}
#luxeSearchModal .luxe-sm-search-wrap:focus-within {
  background: #fff;
  box-shadow: 0 0 0 2.5px var(--brand, #FF2D55);
}
#luxeSearchModal .luxe-sm-search-wrap > svg {
  width: 16px;
  height: 16px;
  color: var(--muted-2, #86868B);
  flex: 0 0 16px;
}
#luxeSearchModal .luxe-sm-input {
  flex: 1;
  border: none;
  outline: none !important;       /* v3.9.1: defeat global focus-visible rules */
  box-shadow: none !important;
  background: transparent;
  font-size: 15px;
  color: var(--ink, #1D1D1F);
  font-family: inherit;
  min-width: 0;
}
#luxeSearchModal .luxe-sm-input:focus,
#luxeSearchModal .luxe-sm-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#luxeSearchModal .luxe-sm-input::placeholder {
  color: var(--muted-2, #86868B);
}
#luxeSearchModal .luxe-sm-clear {
  display: none;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 20px;
}
#luxeSearchModal .luxe-sm-input:not(:placeholder-shown) ~ .luxe-sm-clear {
  display: inline-flex;
}
#luxeSearchModal .luxe-sm-clear svg {
  width: 10px;
  height: 10px;
  color: #fff;
}
#luxeSearchModal .luxe-sm-close {
  /* v3.9.1: now an icon button, 36×36 round. */
  background: var(--bg, #F5F5F7);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  color: var(--ink, #1D1D1F);
  cursor: pointer;
  padding: 0;
  transition: background .14s ease, color .14s ease;
}
#luxeSearchModal .luxe-sm-close:hover {
  background: var(--brand-soft, #FFF0F3);
  color: var(--brand, #FF2D55);
}
#luxeSearchModal .luxe-sm-close:active {
  transform: scale(.94);
}
#luxeSearchModal .luxe-sm-close svg {
  width: 18px;
  height: 18px;
}
/* IGNORED — see hover+active rules above */
#luxeSearchModal .luxe-sm-close:active {
  opacity: .55;
}

#luxeSearchModal .luxe-sm-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 16px;
  -webkit-overflow-scrolling: touch;
}

/* Within the modal, override some default dropdown styles for a fuller
   list-look (taller items, no rounded card). */
#luxeSearchModal .luxe-sd-section {
  padding: 14px 16px 8px;
}
#luxeSearchModal .luxe-sd-item {
  padding: 12px 4px;
  margin: 0;
  border-radius: 10px;
  gap: 14px;
}
#luxeSearchModal .luxe-sd-item:hover,
#luxeSearchModal .luxe-sd-item.active {
  background: var(--bg, #F5F5F7);
}
#luxeSearchModal .luxe-sd-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex: 0 0 56px;
}
#luxeSearchModal .luxe-sd-name {
  font-size: 14.5px;
  margin-bottom: 2px;
}
#luxeSearchModal .luxe-sd-meta {
  font-size: 12px;
}
#luxeSearchModal .luxe-sd-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand, #FF2D55);
}
#luxeSearchModal .luxe-sd-empty {
  padding: 40px 20px;
  text-align: center;
}
#luxeSearchModal .luxe-sd-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  color: var(--muted-3, #AEAEB2);
}
#luxeSearchModal .luxe-sd-empty-icon svg {
  width: 100%;
  height: 100%;
}

/* Desktop: hide modal even if accidentally inserted */
@media (min-width: 768px) {
  #luxeSearchModal { display: none !important; }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   2. Suggestion / recent-search polish (used by both pill + modal)    ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.luxe-sd-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.luxe-sd-clear-recent {
  background: none;
  border: none;
  color: var(--muted-2, #86868B);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  font-family: inherit;
  transition: color .15s ease;
}
.luxe-sd-clear-recent:hover {
  color: var(--brand, #FF2D55);
}

/* Modal-mode suggest chips (shape pills, more visual) */
#luxeSearchModal .luxe-sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#luxeSearchModal .luxe-sd-suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg, #F5F5F7);
  border: 1px solid var(--line, #E8E8ED);
  border-radius: 100px;
  font-size: 13px;
  color: var(--ink, #1D1D1F);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
}
#luxeSearchModal .luxe-sd-suggest:hover,
#luxeSearchModal .luxe-sd-suggest:active {
  background: var(--brand-soft, #FFF0F3);
  border-color: var(--brand, #FF2D55);
  color: var(--brand, #FF2D55);
}
#luxeSearchModal .luxe-sd-suggest svg {
  color: var(--muted-2, #86868B);
}

/* Loading dots (shared, both surfaces) */
.luxe-sd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 28px 16px;
  min-height: 60px;
}
.luxe-sd-loading-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand, #FF2D55);
  opacity: .35;
  animation: luxeSdDot 1.05s infinite ease-in-out;
}
.luxe-sd-loading-dot:nth-child(1) { animation-delay: 0s; }
.luxe-sd-loading-dot:nth-child(2) { animation-delay: .18s; }
.luxe-sd-loading-dot:nth-child(3) { animation-delay: .36s; }
@keyframes luxeSdDot {
  0%, 100% { opacity: .35; transform: scale(.8); }
  40%      { opacity: 1;   transform: scale(1.1); }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   3. Mobile search trigger button (in header)                         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.luxe-mobile-search-btn {
  display: none;
  background: none;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink, #1D1D1F);
  padding: 0;
  transition: background .15s ease;
}
.luxe-mobile-search-btn:hover { background: rgba(0, 0, 0, 0.04); }
.luxe-mobile-search-btn:active { background: rgba(0, 0, 0, 0.08); }
.luxe-mobile-search-btn svg { width: 19px; height: 19px; }
@media (max-width: 1024px) {
  .luxe-mobile-search-btn { display: inline-flex; }
}
@media (min-width: 1025px) {
  .luxe-mobile-search-btn { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
 * LUXE v3.9.0 — Price filter restyle + Shop AJAX loading states
 * Appended to assets/css/shop.css.
 * ────────────────────────────────────────────────────────────────────── */

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   Price filter — brand-color restyle                                  ║
   ║   Selectors are bumped with body[class] to outrank the v3.8 base.     ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

body[class] .price-readout > span:not(.dash) {
  background: var(--brand-soft, #FFF0F3) !important;
  color: var(--brand, #FF2D55) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 45, 85, 0.18);
  font-size: 12.5px;
}

body[class] .price-track {
  height: 4px !important;
  background: rgba(255, 45, 85, 0.12) !important;
  border-radius: 2px !important;
}

body[class] .price-fill {
  height: 4px !important;
  background: linear-gradient(90deg,
    var(--brand, #FF2D55) 0%,
    var(--brand-hover, #FF4D6A) 100%) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.08);
}

/* Thumbs — pure brand color with white inner dot */
body[class] .price-slider input[type=range]::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  background: var(--brand, #FF2D55) !important;
  border: 3px solid #fff !important;
  margin-top: -7px !important;
  box-shadow:
    0 0 0 1px rgba(255, 45, 85, 0.25),
    0 2px 8px rgba(255, 45, 85, 0.30),
    0 4px 14px rgba(255, 45, 85, 0.18) !important;
}
body[class] .price-slider input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.18) !important;
  box-shadow:
    0 0 0 2px rgba(255, 45, 85, 0.30),
    0 3px 10px rgba(255, 45, 85, 0.36),
    0 6px 18px rgba(255, 45, 85, 0.22) !important;
}
body[class] .price-slider input[type=range]::-webkit-slider-thumb:active {
  transform: scale(1.05) !important;
  box-shadow:
    0 0 0 3px rgba(255, 45, 85, 0.28),
    0 1px 4px rgba(255, 45, 85, 0.45) !important;
}

/* Firefox */
body[class] .price-slider input[type=range]::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  background: var(--brand, #FF2D55) !important;
  border: 3px solid #fff !important;
  border-radius: 50%;
  cursor: grab;
  box-shadow:
    0 0 0 1px rgba(255, 45, 85, 0.25),
    0 2px 8px rgba(255, 45, 85, 0.30) !important;
}
body[class] .price-slider input[type=range]::-moz-range-track {
  background: transparent !important;
  height: 4px;
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   Active filter chips — match brand color                             ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */
body[class] .fchip {
  background: var(--brand-soft, #FFF0F3);
  color: var(--brand, #FF2D55);
  border: 1px solid rgba(255, 45, 85, 0.20);
}
body[class] .fchip:hover {
  background: rgba(255, 45, 85, 0.12);
}
body[class] .fchip-x {
  color: var(--brand, #FF2D55);
}
body[class] .fchip-clear:hover {
  color: var(--brand, #FF2D55);
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║   AJAX shop — loading states                                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

#pgrid {
  position: relative;
  transition: opacity .15s ease;
  min-height: 240px;
}

#pgrid.luxe-shop-loading {
  opacity: .55;
  pointer-events: none;
}

#pgrid.luxe-shop-loading::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 45, 85, 0.18);
  border-top-color: var(--brand, #FF2D55);
  border-radius: 50%;
  animation: luxeShopSpin .8s linear infinite;
  z-index: 5;
}
@keyframes luxeShopSpin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Empty state */
.luxe-shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  color: var(--muted, #515154);
}
.luxe-shop-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--muted-3, #AEAEB2);
}
.luxe-shop-empty-icon svg {
  width: 100%;
  height: 100%;
}
.luxe-shop-empty h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #1D1D1F);
  margin: 0 0 6px;
}
.luxe-shop-empty p {
  font-size: 13.5px;
  color: var(--muted-2, #86868B);
  margin: 0;
}

/* Network error toast */
.luxe-shop-error {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 24, 0.92);
  color: #fff;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 13.5px;
  z-index: 99999;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  animation: luxeShopToast .25s ease both;
}
@keyframes luxeShopToast {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}