/* ==========================================================================
   SWITZERLAND PEPTIDES — conversion design system  (assets/css/app.css)
   Bolder "premium pharma" build · light paper + cobalt + crypto-green + gold
   Shared by every funnel page (home, quiz, product, checkout) and the WP theme.
   ========================================================================== */

:root{
  /* surfaces */
  --paper:   oklch(0.985 0.005 95);
  --paper-2: oklch(0.967 0.008 95);
  --panel:   oklch(0.945 0.010 95);
  --card:    oklch(1 0 0);
  --ink:     oklch(0.22 0.018 264);
  --ink-2:   oklch(0.17 0.02 264);

  /* text */
  --tx:      oklch(0.25 0.015 264);
  --tx-soft: oklch(0.38 0.016 264);
  --tx-mut:  oklch(0.52 0.016 264);
  --tx-faint:oklch(0.64 0.014 264);
  --on-ink:  oklch(0.96 0.006 95);
  --on-ink-mut: oklch(0.74 0.012 264);

  /* lines */
  --line:    oklch(0.91 0.008 95);
  --line-2:  oklch(0.86 0.010 95);
  --line-ink: oklch(0.32 0.02 264);

  /* cobalt (primary action) */
  --co:      oklch(0.52 0.18 262);
  --co-deep: oklch(0.43 0.17 264);
  --co-soft: oklch(0.63 0.15 260);
  --co-wash: oklch(0.955 0.03 260);
  --co-line: oklch(0.85 0.07 260);
  --co-on:   oklch(0.99 0.01 260);

  /* crypto green (savings / pay-with-crypto) */
  --cr:      oklch(0.58 0.14 158);
  --cr-deep: oklch(0.48 0.12 160);
  --cr-wash: oklch(0.95 0.05 158);
  --cr-line: oklch(0.83 0.10 158);

  /* gold / urgency */
  --au:      oklch(0.76 0.15 75);
  --au-deep: oklch(0.55 0.13 62);
  --au-wash: oklch(0.95 0.06 80);

  /* danger / scarcity */
  --rd:      oklch(0.58 0.20 25);
  --rd-wash: oklch(0.95 0.05 25);

  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 26px; --r-2xl: 34px;
  --maxw: 1200px; --gut: 30px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --pop: cubic-bezier(.34,1.56,.64,1);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --sh-sm: 0 1px 2px oklch(0.4 0.04 264 / .08);
  --sh:    0 8px 24px -12px oklch(0.4 0.06 264 / .28);
  --sh-lg: 0 26px 60px -30px oklch(0.4 0.08 264 / .45);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%; }
body{
  font-family:var(--sans); background:var(--paper); color:var(--tx);
  line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden; max-width:100%; position:relative;
}
.hexi{ display:inline-flex; width:1em; height:1em; flex:0 0 auto; vertical-align:-0.12em; }
::selection{ background:var(--co); color:var(--co-on); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }
input,textarea,select{ font-family:inherit; }
svg{ display:block; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:440; line-height:1.04; letter-spacing:-0.015em; color:var(--ink); }
h1{ font-size:clamp(40px, 6.4vw, 78px); }
h2{ font-size:clamp(30px, 4.2vw, 52px); }
h3{ font-size:clamp(22px, 2.4vw, 30px); }
em.hl{ font-style:italic; color:var(--co); }
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
.wrap-tight{ max-width:920px; margin:0 auto; padding:0 var(--gut); }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--co); font-weight:500; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--co-line); display:inline-block; }
.eyebrow.center::after{ content:""; width:22px; height:1px; background:var(--co-line); display:inline-block; }
.eyebrow.gold{ color:var(--au-deep); } .eyebrow.gold::before{ background:var(--au); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:650; font-size:15px; letter-spacing:-0.005em;
  padding:14px 24px; border-radius:var(--r-sm); white-space:nowrap; position:relative;
  transition:transform .18s var(--ease), background .2s, box-shadow .25s, color .2s, border-color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-co{ background:var(--co); color:var(--co-on); box-shadow:0 1px 2px oklch(0.43 0.17 264 / .3); }
.btn-co:hover{ background:var(--co-deep); box-shadow:0 12px 30px -12px var(--co); }
.btn-cr{ background:var(--cr); color:oklch(0.99 0.01 158); box-shadow:0 1px 2px oklch(0.48 0.12 160 / .3); }
.btn-cr:hover{ background:var(--cr-deep); box-shadow:0 12px 30px -12px var(--cr); }
.btn-ink{ background:var(--ink); color:var(--on-ink); }
.btn-ink:hover{ background:var(--ink-2); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--tx); background:var(--card); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost-on{ border:1px solid var(--line-ink); color:var(--on-ink); background:transparent; }
.btn-ghost-on:hover{ border-color:var(--on-ink); }
.btn-lg{ padding:17px 30px; font-size:16px; }
.btn-xl{ padding:20px 36px; font-size:17px; border-radius:var(--r); }
.btn-block{ width:100%; }
.btn:disabled{ background:var(--line-2); color:var(--tx-faint); box-shadow:none; cursor:not-allowed; }
.btn .sub{ font-weight:500; opacity:.85; font-size:.82em; }

/* shimmer on hero CTA */
.btn-shine{ overflow:hidden; }
.btn-shine::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 30%, oklch(1 0 0 / .35) 50%, transparent 70%);
}
.btn-shine:hover::after{ transform:translateX(120%); transition:transform .8s var(--ease); }

/* ---------- badges / pills ---------- */
.badge{ font-family:var(--sans); font-size:11.5px; font-weight:650; letter-spacing:0.01em; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.badge-co{ color:var(--co-deep); background:var(--co-wash); border:1px solid var(--co-line); }
.badge-cr{ color:var(--cr-deep); background:var(--cr-wash); border:1px solid var(--cr-line); }
.badge-au{ color:var(--au-deep); background:var(--au-wash); border:1px solid oklch(0.86 0.09 80); }
.badge-rd{ color:var(--rd); background:var(--rd-wash); border:1px solid oklch(0.86 0.1 25); }
.badge-solid{ color:var(--co-on); background:var(--co); }
.badge-best{ color:var(--ink); background:var(--au); }

.pill{ font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--tx-soft); background:var(--paper-2); border:1px solid var(--line); padding:5px 12px; border-radius:999px; }

/* stock dot */
.stock{ font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; font-weight:500; color:var(--cr); }
.stock::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cr); box-shadow:0 0 0 0 var(--cr); animation:pulse 2.4s infinite; }
.stock.out{ color:var(--tx-faint); } .stock.out::before{ background:var(--tx-faint); animation:none; }
.stock.low{ color:var(--au-deep); } .stock.low::before{ background:var(--au); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab,currentColor 50%,transparent);} 70%{ box-shadow:0 0 0 6px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

/* stars */
.stars{ display:inline-flex; align-items:center; gap:1px; line-height:0; }
.stars .on{ color:var(--au); } .stars .off{ color:var(--line-2); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ==========================================================================
   announcement + header
   ========================================================================== */
.anno{ background:var(--ink); color:var(--on-ink); overflow:hidden; }
.anno-track{ display:flex; align-items:center; gap:46px; white-space:nowrap; padding:9px 0; font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; width:max-content; animation:marq 32s linear infinite; }
.anno-track span{ display:inline-flex; align-items:center; gap:11px; }
.anno b{ color:var(--co-soft); font-weight:600; }
.anno .cr{ color:oklch(0.78 0.13 158); font-weight:600; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .anno-track{ animation:none; } }

.nav{ position:sticky; top:0; z-index:70; background:color-mix(in oklab, var(--paper) 84%, transparent); backdrop-filter:blur(16px) saturate(1.5); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
.nav.scrolled{ border-bottom-color:var(--line); background:color-mix(in oklab, var(--paper) 95%, transparent); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:22px; }
.logo{ display:flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:520; font-size:21px; letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; }
.logo b{ font-weight:640; }
.logo .mk{ width:27px; height:27px; flex:0 0 auto; border-radius:8px; background:var(--co); position:relative; box-shadow:0 5px 16px -5px var(--co); }
.logo .mk::before{ content:""; position:absolute; inset:6px; border:2px solid var(--co-on); border-radius:50%; opacity:.92; }
.logo .mk::after{ content:""; position:absolute; left:50%; top:3px; bottom:3px; width:2px; background:var(--co-on); transform:translateX(-50%) rotate(32deg); border-radius:2px; opacity:.92; }
.nav-links{ display:flex; gap:28px; margin-right:auto; margin-left:10px; }
.nav-links a{ font-size:14.5px; font-weight:550; color:var(--tx-soft); white-space:nowrap; transition:color .2s; }
.nav-links a:hover{ color:var(--co); }
.nav-cta{ display:flex; align-items:center; gap:11px; }
.cartbtn{ position:relative; display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--card); font-size:14px; font-weight:600; transition:border-color .2s; }
.cartbtn:hover{ border-color:var(--ink); }
.cartbtn .ct{ background:var(--co); color:var(--co-on); font-family:var(--mono); font-size:10.5px; font-weight:600; min-width:19px; height:19px; border-radius:999px; display:grid; place-items:center; padding:0 5px; }
.cartbtn .ct:empty, .cartbtn .ct[hidden]{ display:none; }
.nav-tp .tp-widget{ padding:7px 11px; gap:7px; }
.nav-tp .tp-widget .tp-meta{ font-size:11.5px; }
@media(max-width:1180px){ .nav-tp{ display:none; } }
@media(max-width:900px){ .nav-links{ display:none; } }
@media(max-width:600px){
  .nav-in{ height:60px; gap:10px; }
  .logo{ font-size:18px; gap:9px; } .logo .mk{ width:24px; height:24px; }
  .nav-cta{ gap:8px; }
  .nav-cta .btn-cr{ padding:9px 13px; font-size:13px; }
  .cartbtn{ padding:9px 12px; font-size:13px; }
}
@media(max-width:380px){
  .nav-cta .btn-cr{ display:none; }
}

/* ==========================================================================
   trust bar / seals
   ========================================================================== */
.trustbar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); }
.trustbar-in{ display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; padding:16px var(--gut); max-width:var(--maxw); margin:0 auto; }
.trust-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:550; color:var(--tx-soft); }
.trust-item svg{ color:var(--co); flex:0 0 auto; }
.trust-item.cr svg{ color:var(--cr); }
.trust-sep{ width:1px; height:20px; background:var(--line-2); }
@media(max-width:760px){ .trustbar-in{ gap:18px; } .trust-sep{ display:none; } }

.seals{ display:flex; gap:10px; flex-wrap:wrap; }
.seal{ display:flex; align-items:center; gap:10px; padding:12px 15px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
.seal .ic{ width:34px; height:34px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; color:var(--co); background:var(--co-wash); }
.seal .ic.cr{ color:var(--cr); background:var(--cr-wash); }
.seal b{ font-size:13.5px; font-weight:650; display:block; line-height:1.15; color:var(--ink); }
.seal span{ font-size:11.5px; color:var(--tx-mut); }

/* ==========================================================================
   vial render (placeholder product art)
   ========================================================================== */
.vial{ position:relative; z-index:2; filter:drop-shadow(0 22px 38px oklch(0.43 0.17 264 / .26)); --vw:96px; --vh:250px; width:var(--vw); height:var(--vh); }
.vial .cap{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:calc(var(--vw)*.5); height:calc(var(--vh)*.13); border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--tx-soft),var(--ink)); }
.vial .neck{ position:absolute; top:calc(var(--vh)*.11); left:50%; transform:translateX(-50%); width:calc(var(--vw)*.42); height:calc(var(--vh)*.06); background:oklch(0.92 0.01 95); border-left:1px solid var(--line-2); border-right:1px solid var(--line-2); }
.vial .body{ position:absolute; top:calc(var(--vh)*.16); bottom:0; left:0; right:0; border-radius:10px 10px 16px 16px; overflow:hidden; background:linear-gradient(100deg, oklch(0.99 0.005 240 / .82), oklch(0.93 0.01 240 / .5)); border:1px solid oklch(0.86 0.02 240); box-shadow:inset 2px 0 6px oklch(1 0 0 / .7), inset -7px 0 16px oklch(0.7 0.04 240 / .22); }
.vial .liq{ position:absolute; left:0; right:0; bottom:0; height:56%; background:linear-gradient(180deg, var(--co-soft), var(--co-deep)); }
.vial .liq::before{ content:""; position:absolute; top:0; left:0; right:0; height:8px; background:color-mix(in oklab,var(--co-soft) 70%, white); opacity:.5; }
.vial .lab{ position:absolute; left:9%; right:9%; top:42%; height:30%; background:color-mix(in oklab,var(--card) 90%, transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; place-content:center; gap:4px; padding-left:9%; }
.vial .lab i{ display:block; height:3px; border-radius:2px; background:var(--line-2); }
.vial .lab i:nth-child(1){ width:60%; } .vial .lab i:nth-child(2){ width:40%; background:var(--co-line); }
.vial.sm{ --vw:48px; --vh:128px; filter:none; }
.vial.xs{ --vw:30px; --vh:80px; filter:none; }

.media{ position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(115% 90% at 50% 16%, var(--co-wash), var(--paper-2)); }
.media .dots{ position:absolute; inset:0; opacity:.45; background-image:radial-gradient(var(--co-line) 1px, transparent 1.4px); background-size:20px 20px; -webkit-mask-image:radial-gradient(80% 80% at 50% 42%, #000 30%, transparent 80%); mask-image:radial-gradient(80% 80% at 50% 42%, #000 30%, transparent 80%); }

/* real product photos (fall back to CSS vial when absent) */
.pmedia{ position:relative; z-index:2; width:100%; height:100%; object-fit:contain; }
.card-media .pmedia{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pp-stage .pmedia{ width:90%; height:90%; object-fit:contain; }
.result-media .pmedia{ width:94%; height:94%; object-fit:contain; }
.pp-fbt-card .fv .pmedia{ width:100%; height:100%; object-fit:contain; }
.pp-thumb .pmedia{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.li-v .pmedia, .co-li .lv .pmedia, .co-bump-row .bv .pmedia{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   product card
   ========================================================================== */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(258px,1fr)); gap:18px; }
.card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--line-2); }
.card.out{ opacity:.72; }
.card-media{ aspect-ratio:1/1; border-bottom:1px solid var(--line); }
.card-media .vial{ --vw:50px; --vh:132px; }
.card-flags{ position:absolute; top:11px; left:11px; right:11px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; pointer-events:none; }
.card-flags .badge{ pointer-events:auto; }
.flag-save{ position:absolute; bottom:11px; left:11px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.03em; color:oklch(0.99 0.01 158); background:var(--cr); padding:4px 9px; border-radius:999px; }
.flag-out{ position:absolute; inset:0; display:grid; place-items:center; background:color-mix(in oklab,var(--paper) 55%, transparent); font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--tx-mut); backdrop-filter:blur(1.5px); }
.card-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-rate{ display:flex; align-items:center; gap:7px; }
.card-rate .rc{ font-family:var(--mono); font-size:11px; color:var(--tx-faint); }
.card h3{ font-size:20px; font-weight:520; letter-spacing:-0.015em; line-height:1.1; }
.card .blurb{ font-size:13px; color:var(--tx-mut); line-height:1.5; flex:1; }
.card-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:2px; }
.price{ display:flex; flex-direction:column; gap:1px; }
.price .crow{ display:flex; align-items:baseline; gap:7px; }
.price .now{ font-size:21px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.price .was{ font-size:13px; font-weight:500; color:var(--tx-faint); text-decoration:line-through; }
.price .cr-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--cr-deep); font-weight:600; }
.add{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 16px; border-radius:var(--r-sm); background:var(--ink); color:var(--on-ink); font-size:13.5px; font-weight:650; transition:background .2s, transform .15s; flex:0 0 auto; }
.add:hover{ background:var(--co); }
.add.added{ background:var(--cr); }
.add:disabled{ background:var(--line-2); color:var(--tx-faint); cursor:not-allowed; }

/* ==========================================================================
   accordion (FAQ / details)
   ========================================================================== */
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa > button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding:24px 4px; font-family:var(--serif); font-size:19px; font-weight:520; color:var(--ink); transition:color .2s; }
.qa > button:hover{ color:var(--co); }
.qa .pl{ flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .35s var(--ease); }
.qa .pl::before,.qa .pl::after{ content:""; position:absolute; background:var(--co); border-radius:2px; }
.qa .pl::before{ top:10px; left:2px; right:2px; height:2px; }
.qa .pl::after{ left:10px; top:2px; bottom:2px; width:2px; transition:opacity .3s; }
.qa.open .pl{ transform:rotate(180deg); } .qa.open .pl::after{ opacity:0; }
.qa .ans{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.qa .ans p{ padding:0 4px 24px; color:var(--tx-mut); max-width:64ch; font-size:15px; }

/* ==========================================================================
   sections + footer
   ========================================================================== */
.sec{ padding:92px 0; position:relative; }
.sec.tight{ padding:64px 0; }
.sec.alt{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec.dark{ background:var(--ink); color:var(--on-ink); }
.sec.dark h1,.sec.dark h2,.sec.dark h3{ color:var(--on-ink); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:34px; margin-bottom:42px; flex-wrap:wrap; }
.sec-head .ht h2{ margin-top:16px; max-width:18ch; }
.sec-head p{ color:var(--tx-mut); max-width:42ch; font-size:15.5px; }
.sec-head.center{ flex-direction:column; align-items:center; text-align:center; }
.sec-head.center p{ max-width:54ch; }

footer.site{ background:var(--ink); color:var(--on-ink-mut); padding:64px 0 36px; }
.foot-grid{ display:grid; grid-template-columns:2.1fr 1fr 1fr 1.5fr; gap:40px; margin-bottom:44px; }
.foot-grid h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-ink-mut); margin-bottom:15px; }
.foot-grid a{ display:block; color:oklch(0.82 0.01 264); font-size:14.5px; padding:5px 0; transition:color .2s; }
.foot-grid a:hover{ color:var(--co-soft); }
.foot .logo{ color:var(--on-ink); }
.foot-blurb{ color:var(--on-ink-mut); font-size:14.5px; max-width:34ch; margin-top:14px; }
.foot-disc{ font-family:var(--mono); font-size:11px; line-height:1.85; color:oklch(0.66 0.012 264); letter-spacing:0.01em; border:1px solid var(--line-ink); border-radius:var(--r); padding:20px; }
.foot-disc b{ color:var(--on-ink); font-weight:600; }
.foot-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line-ink); margin-top:30px; color:oklch(0.6 0.012 264); font-size:12.5px; font-family:var(--mono); letter-spacing:0.03em; }
.pay-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.pay-chip{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--on-ink); border:1px solid var(--line-ink); border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:7px; }
.pay-chip svg{ color:oklch(0.78 0.13 158); }

@media(max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:560px){ .foot-grid{ grid-template-columns:1fr; } .foot-bot{ flex-direction:column; gap:8px; } }

/* ==========================================================================
   cart drawer
   ========================================================================== */
.scrim{ position:fixed; inset:0; background:oklch(0.2 0.02 264 / .44); backdrop-filter:blur(3px); z-index:90; opacity:0; pointer-events:none; transition:opacity .35s; }
.scrim.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(430px,100%); background:var(--paper); border-left:1px solid var(--line); z-index:91; transform:translateX(100%); transition:transform .42s var(--ease); display:flex; flex-direction:column; }
.drawer.open{ transform:none; }
.drawer-head{ padding:20px 22px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawer-head h3{ font-size:21px; font-weight:540; }
.drawer-x{ width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--tx-soft); transition:all .2s; }
.drawer-x:hover{ border-color:var(--ink); color:var(--ink); }
.freeship{ padding:14px 22px 10px; }
.freeship-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.freeship-msg{ font-size:13px; color:var(--tx-soft); }
.freeship-msg b{ color:var(--co); font-weight:650; } .freeship-msg .fs-amt{ font-family:var(--mono); }
.freeship-msg .fs-near{ color:var(--au-deep); }
.freeship.done .freeship-msg b{ color:var(--cr); }
.freeship-reward{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:var(--tx-faint); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; transition:all .3s var(--pop); }
.freeship-reward .fr-ic{ display:inline-flex; } .freeship-reward .fr-ic svg{ width:12px; height:12px; }
.freeship-reward .fr-check{ display:none; }
.freeship.done .freeship-reward{ color:var(--cr-deep); background:var(--cr-wash); border-color:color-mix(in oklab, var(--cr) 40%, transparent); }
.freeship.done .freeship-reward .fr-lock{ display:none; } .freeship.done .freeship-reward .fr-check{ display:inline-flex; }
.freeship-track{ position:relative; height:10px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line); }
.freeship-fill{ position:relative; height:100%; border-radius:999px; width:0; background:linear-gradient(90deg, var(--co-soft), var(--co)); transition:width .6s var(--pop); overflow:visible; }
.freeship-fill::after{ content:""; position:absolute; inset:0; border-radius:999px; overflow:hidden; background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); background-size:200% 100%; animation:shimmer 1.9s linear infinite; }
.freeship-truck{ position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--co); box-shadow:0 3px 8px -2px var(--co); z-index:2; }
.freeship-truck svg{ width:12px; height:12px; color:var(--co); }
.freeship-goal{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--line-2); z-index:1; }
.freeship.done .freeship-fill{ background:linear-gradient(90deg, var(--cr), oklch(0.66 0.13 158)); }
.freeship.done .freeship-truck{ border-color:var(--cr); box-shadow:0 3px 10px -2px var(--cr); } .freeship.done .freeship-truck svg{ color:var(--cr); }
.freeship.done .freeship-goal{ background:var(--cr); }
.freeship.pop .freeship-fill{ animation:fsPop .55s var(--pop); }
.freeship.pop .freeship-reward{ animation:streakpop .55s var(--pop); }
@keyframes fsPop{ 0%{ transform:scaleY(1); } 45%{ transform:scaleY(1.7); } 100%{ transform:scaleY(1); } }
@keyframes shimmer{ to{ background-position:-200% 0; } }
@keyframes streakpop{ 0%{ transform:scale(.85); } 55%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
.drawer-body{ flex:1; overflow-y:auto; padding:14px 22px; display:flex; flex-direction:column; gap:12px; }
.drawer-empty{ text-align:center; color:var(--tx-faint); padding:60px 16px; }
.li{ display:flex; gap:13px; align-items:center; }
.li-v{ width:52px; height:62px; flex:0 0 auto; border-radius:var(--r-sm); border:1px solid var(--line); background:radial-gradient(100% 90% at 50% 20%, var(--co-wash), var(--paper-2)); display:grid; place-items:center; overflow:hidden; }
.li-m{ flex:1; min-width:0; }
.li-m b{ font-family:var(--serif); font-weight:520; font-size:16px; display:block; line-height:1.2; }
.li-sz{ font-family:var(--mono); font-size:11px; color:var(--tx-faint); margin-top:2px; }
.li-bun{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--co-deep); background:var(--co-wash); border:1px solid var(--co-line); padding:1px 6px; border-radius:4px; display:inline-block; margin-top:3px; }
.li-qty{ display:inline-flex; align-items:center; gap:2px; margin-top:8px; border:1px solid var(--line-2); border-radius:999px; padding:2px; }
.li-qty button{ width:26px; height:26px; border-radius:999px; display:grid; place-items:center; color:var(--tx-soft); font-size:15px; }
.li-qty button:hover{ background:var(--paper-2); color:var(--ink); }
.li-qty span{ min-width:24px; text-align:center; font-family:var(--mono); font-size:13px; }
.li-r{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.li-p{ font-weight:700; font-size:15px; }
.li-rm{ font-family:var(--mono); font-size:10.5px; color:var(--tx-faint); transition:color .2s; }
.li-rm:hover{ color:var(--rd); }
.drawer-foot{ padding:16px 22px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px; }
.drawer-save{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--cr-deep); font-weight:650; }
.subtotal{ display:flex; align-items:baseline; justify-content:space-between; }
.subtotal .sl{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--tx-faint); }
.subtotal .sv{ font-family:var(--serif); font-size:26px; font-weight:540; }
.drawer-note{ font-family:var(--mono); font-size:10.5px; color:var(--tx-faint); text-align:center; letter-spacing:0.03em; }

/* ==========================================================================
   exit popup
   ========================================================================== */
.pop-scrim{ position:fixed; inset:0; background:oklch(0.18 0.03 264 / .58); backdrop-filter:blur(4px); z-index:120; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s; }
.pop-scrim.open{ opacity:1; pointer-events:auto; }
.pop{ width:min(460px,100%); background:var(--paper); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); transform:scale(.92) translateY(10px); transition:transform .4s var(--pop); }
.pop-scrim.open .pop{ transform:none; }
.pop-top{ background:var(--ink); color:var(--on-ink); padding:30px 30px 26px; text-align:center; position:relative; overflow:hidden; }
.pop-top .glow{ position:absolute; width:380px; height:380px; border-radius:50%; bottom:-260px; left:50%; transform:translateX(-50%); background:radial-gradient(circle, color-mix(in oklab,var(--co) 70%, transparent), transparent 60%); filter:blur(18px); opacity:.6; }
.pop-top .big{ font-family:var(--serif); font-size:50px; font-weight:540; letter-spacing:-0.02em; position:relative; }
.pop-top .big em{ color:var(--co-soft); font-style:normal; }
.pop-top p{ color:var(--on-ink-mut); position:relative; margin-top:4px; }
.pop-b{ padding:26px 30px 30px; text-align:center; }
.pop-b h3{ font-size:23px; margin-bottom:8px; }
.pop-b > p{ color:var(--tx-mut); font-size:14px; margin-bottom:18px; }
.pop-form{ display:flex; gap:8px; }
.pop-form input{ flex:1; min-width:0; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-sm); padding:13px 15px; font-size:14px; outline:none; }
.pop-form input:focus{ border-color:var(--co); }
.pop-x{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:999px; display:grid; place-items:center; color:var(--on-ink); background:oklch(1 0 0 / .12); z-index:2; }
.pop-fine{ font-family:var(--mono); font-size:10px; color:var(--tx-faint); margin-top:12px; letter-spacing:0.02em; }

/* ==========================================================================
   sticky mobile CTA
   ========================================================================== */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:color-mix(in oklab,var(--paper) 94%, transparent); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:12px; transform:translateY(110%); transition:transform .35s var(--ease); }
.sticky-cta.show{ transform:none; }
.sticky-cta .sp{ flex:1; min-width:0; }
.sticky-cta .sp .nm{ font-family:var(--serif); font-size:15px; font-weight:540; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .sp .pr{ font-family:var(--mono); font-size:12px; color:var(--cr-deep); font-weight:600; }
@media(max-width:760px){ .sticky-cta{ display:flex; } }

/* live order toast */
.toast{ position:fixed; left:18px; bottom:18px; z-index:75; max-width:300px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:12px 14px; display:flex; gap:11px; align-items:center; transform:translateY(140%); opacity:0; transition:transform .5s var(--ease), opacity .5s; }
.toast.show{ transform:none; opacity:1; }
.toast .tv{ width:34px; height:42px; flex:0 0 auto; border-radius:6px; border:1px solid var(--line); background:radial-gradient(100% 90% at 50% 20%, var(--co-wash), var(--paper-2)); display:grid; place-items:center; overflow:hidden; }
.toast .tt{ font-size:12.5px; line-height:1.35; color:var(--tx-soft); }
.toast .tt b{ color:var(--ink); font-weight:650; }
.toast .tt .ago{ font-family:var(--mono); font-size:10px; color:var(--tx-faint); }
.toast .tv .vc{ font-family:var(--cr); }
@media(max-width:760px){ .toast{ bottom:84px; left:12px; right:12px; max-width:none; } }

/* ==========================================================================
   Trustpilot widget + multilingual reviews modal
   ========================================================================== */
:root{ --tp:oklch(0.74 0.16 162); --tp-deep:oklch(0.55 0.13 162); }

.tp-widget{ display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); box-shadow:var(--sh-sm); cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .15s; white-space:nowrap; }
.tp-widget:hover{ border-color:var(--tp); box-shadow:var(--sh); transform:translateY(-1px); }
.tp-widget:active{ transform:translateY(0); }
.tp-logo{ display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:13.5px; color:var(--ink); letter-spacing:-0.01em; }
.tp-logo svg{ color:var(--tp); }
.tp-logo.big{ font-size:18px; } .tp-logo.big svg{ width:22px; height:22px; }
.tp-stars{ display:inline-flex; align-items:center; gap:2px; }
.tp-star{ display:inline-grid; place-items:center; background:var(--line-2); border-radius:3px; color:#fff; }
.tp-star svg{ width:72%; height:72%; }
.tp-star.on{ background:var(--tp); }
.tp-meta{ font-size:12.5px; color:var(--tx-soft); font-weight:500; }
.tp-meta b{ color:var(--ink); font-weight:700; }
.tp-meta .tp-count{ color:var(--tx-faint); }
/* dark-surface variant (for dark heroes/footers) */
.tp-widget.on-dark{ background:oklch(1 0 0 / .06); border-color:oklch(1 0 0 / .16); }
.tp-widget.on-dark .tp-logo, .tp-widget.on-dark .tp-meta b{ color:var(--on-ink); }
.tp-widget.on-dark .tp-meta{ color:oklch(0.82 0.012 264); }
.tp-widget.on-dark .tp-meta .tp-count{ color:oklch(0.7 0.012 264); }
/* big centered variant */
.tp-widget.lg{ padding:13px 20px; gap:13px; }
.tp-widget.lg .tp-logo{ font-size:16px; }
.tp-widget.lg .tp-star{ width:21px!important; height:21px!important; }

/* modal */
.tp-scrim{ position:fixed; inset:0; z-index:120; background:oklch(0.2 0.02 264 / .5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s; }
.tp-scrim.open{ opacity:1; pointer-events:auto; }
.tp-modal{ position:relative; width:min(620px,100%); max-height:88vh; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-lg); display:flex; flex-direction:column; overflow:hidden; transform:translateY(16px) scale(.98); transition:transform .35s var(--pop); }
.tp-scrim.open .tp-modal{ transform:none; }
.tp-x{ position:absolute; top:14px; right:14px; z-index:3; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--card); border:1px solid var(--line-2); color:var(--tx-soft); transition:all .2s; }
.tp-x:hover{ border-color:var(--ink); color:var(--ink); }
.tp-head{ padding:26px 26px 18px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--cr-wash), var(--paper)); }
.tp-head-score{ display:flex; align-items:center; gap:12px; margin:12px 0 8px; }
.tp-word{ font-family:var(--serif); font-size:24px; font-weight:520; color:var(--ink); letter-spacing:-0.02em; }
.tp-head-sub{ font-size:13.5px; color:var(--tx-soft); }
.tp-head-sub b{ color:var(--ink); font-weight:700; }
.tp-langs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.tp-lang{ font-size:12.5px; font-weight:550; padding:7px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--tx-soft); transition:all .18s; white-space:nowrap; }
.tp-lang:hover{ border-color:var(--tp); color:var(--ink); }
.tp-lang.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.tp-filter{ padding:12px 26px; font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--tx-faint); border-bottom:1px solid var(--line); background:var(--paper-2); }
.tp-filter b{ color:var(--tx-soft); }
.tp-list{ overflow-y:auto; padding:8px 26px; flex:1; }
.tp-rev{ padding:20px 0; border-bottom:1px solid var(--line); }
.tp-rev:last-child{ border-bottom:none; }
.tp-rev-top{ display:flex; align-items:center; gap:12px; margin-bottom:9px; }
.tp-ver{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--cr-deep); font-weight:600; }
.tp-ver svg{ width:13px; height:13px; }
.tp-rev-title{ font-family:var(--serif); font-size:18px; font-weight:540; color:var(--ink); margin-bottom:5px; letter-spacing:-0.01em; }
.tp-rev-body{ font-size:14.5px; line-height:1.6; color:var(--tx-soft); }
.tp-rev-who{ display:flex; align-items:center; gap:11px; margin-top:13px; }
.tp-av{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--co-soft), var(--co-deep)); color:var(--co-on); display:grid; place-items:center; font-family:var(--serif); font-weight:520; font-size:15px; }
.tp-nm{ display:flex; flex-direction:column; line-height:1.25; }
.tp-nm b{ font-size:13.5px; font-weight:650; color:var(--ink); }
.tp-nm span{ font-family:var(--mono); font-size:10.5px; color:var(--tx-faint); }
.tp-orig{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; letter-spacing:0.03em; color:var(--tx-faint); border:1px solid var(--line); border-radius:999px; padding:3px 9px; }
.tp-orig svg{ width:12px; height:12px; }
.tp-foot{ display:flex; align-items:center; justify-content:center; gap:9px; padding:16px; border-top:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink); background:var(--card); transition:background .2s; }
.tp-foot:hover{ background:var(--paper-2); }
.tp-foot svg:first-child{ color:var(--tp); }
@media(max-width:560px){
  .tp-modal{ max-height:92vh; border-radius:var(--r-lg); }
  .tp-head{ padding:22px 18px 16px; } .tp-list{ padding:8px 18px; } .tp-filter{ padding:11px 18px; }
  .tp-word{ font-size:21px; }
}