/* ============================================================
   Arctic Meds — ATELIER LAYER  ·  luxe.css
   The "final luxury pass." Loaded LAST on every page, on top of
   tokens → styles → products → editorial (→ checkout).
   Adds: a couture two-serif system (Bodoni display + Source Serif
   text), tighter optical rhythm, hairline detailing, refined
   micro-interaction surfaces, and three switchable moods
   (editorial · clinical · jewel) driven by body[data-lux].
   Nothing here changes structure — pure refinement.
   ============================================================ */

:root {
  --am-display: 'Bodoni Moda', 'Source Serif 4', Georgia, serif;
  --am-rule: var(--ll-accent);                 /* hairline / numeral accent */
  --am-ring: color-mix(in srgb, var(--ll-accent) 38%, transparent);
  --am-lift: cubic-bezier(.16,.84,.36,1);
  /* couture shadow stack — softer, deeper, two-layer */
  --am-sh-card: 0 1px 1px rgba(24,20,13,.04), 0 10px 30px -18px rgba(24,20,13,.30);
  --am-sh-hi:   0 2px 4px rgba(24,20,13,.05), 0 26px 60px -28px rgba(24,20,13,.42);
}

/* ---------- 0 · Rendering & selection ---------- */
.ll { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.display, .serif, .am-display { font-optical-sizing: auto; }
::selection { background: color-mix(in srgb, var(--ll-accent) 22%, transparent); color: var(--ll-ink); }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ll-bg), 0 0 0 4px var(--am-ring); border-radius: 4px; }
.btn:focus-visible, a:focus-visible { border-radius: 999px; }

/* thin, restrained scrollbar */
@media (pointer: fine) {
  .cs-body, .cart-body { scrollbar-width: thin; scrollbar-color: var(--ll-border-2) transparent; }
}

/* ============================================================
   1 · COUTURE DISPLAY TYPE
   Bodoni Moda for the big emotional statements; Source Serif 4
   keeps the steadier multi-line heads, figures and card titles.
   ============================================================ */
.hero h1,
.cta-box h2,
.page-head h1,
.pdp-info h1,
.co-confirm h1,
.co-empty h2 {
  font-family: var(--am-display);
  font-weight: 500;
  letter-spacing: -.02em;
  font-feature-settings: "ss01";
}
.hero h1 {
  font-size: clamp(48px, 7vw, 98px);
  line-height: .94;
  letter-spacing: -.025em;
  text-wrap: balance;
  font-weight: 500;
}
.hero h1 em { font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.cta-box h2 { font-size: clamp(36px, 4.4vw, 58px); letter-spacing: -.025em; line-height: 1; }
.page-head h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1; }
.pdp-info h1 { font-size: clamp(34px, 4.2vw, 50px); line-height: 1; }

/* the recurring lede gets a refined measure + color */
.hero-sub { max-width: 31em; }
.hero-sub.dropcap::first-letter { font-family: var(--am-display); font-weight: 500; color: var(--ll-accent); }

/* ============================================================
   2 · KICKERS  →  couture index labels
   A hairline tick + spaced caps + an italic figure already exist
   in editorial.css; here we refine weight, color and the rule.
   ============================================================ */
.eyebrow { font-size: 11px; letter-spacing: .28em; font-weight: 600; color: var(--ll-ink-2); }
.eyebrow::before { width: 34px; height: 1px; opacity: .55; background: currentColor; }
.section .section-head .eyebrow::after { color: var(--am-rule); font-weight: 500; }

/* a quiet centered rule under centered heads */
.section-head.center { position: relative; }

/* ============================================================
   3 · NAV  ·  masthead refinement
   ============================================================ */
.nav { transition: background .4s var(--am-ease), backdrop-filter .4s, border-color .4s, height .35s var(--am-ease); }
.nav.scrolled { box-shadow: 0 1px 0 var(--am-line), 0 10px 30px -24px rgba(24,20,13,.5); }
.brand .name { letter-spacing: -.005em; }
.brand .mark { transition: opacity .25s var(--am-ease); }
.brand:hover .mark { opacity: .85; }

/* nav account dropdown */
.nav-acct { position: relative; display: inline-flex; align-items: center; border-radius: 999px; user-select: none; }
.nav-acct-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font-family: var(--ll-font-sans); }
.nav-acct-toggle:hover, .nav-acct-toggle:focus-visible { background: var(--ll-surface-2); outline: none; }
.nav-acct .na-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ll-brand); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 650; flex-shrink: 0; }
.nav-acct .na-name { font-size: 14px; font-weight: 600; color: var(--ll-ink-2); }
.nav-acct-toggle > svg { width: 15px; height: 15px; color: var(--ll-muted); transition: transform .2s; }
.nav-acct.open .nav-acct-toggle > svg { transform: rotate(180deg); }
.nav-acct .na-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: var(--ll-surface); border: 1px solid var(--ll-border); border-radius: var(--ll-r-4); box-shadow: 0 16px 40px -12px rgba(4,68,133,.28); padding: 7px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s var(--am-ease); z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.nav-acct.open .na-menu { opacity: 1; visibility: visible; transform: none; }
.nav-acct .na-menu a, .nav-acct .na-menu button { display: block; width: 100%; text-align: left; font-family: var(--ll-font-sans); font-size: 14px; font-weight: 550; color: var(--ll-ink-2); padding: 10px 12px; border-radius: 8px; background: none; border: none; cursor: pointer; }
.nav-acct .na-menu a:hover, .nav-acct .na-menu button:hover { background: var(--ll-surface-2); color: var(--ll-ink); }
.nav-acct .na-menu button[data-signout] { color: var(--ll-danger); border-top: 1px solid var(--am-line); margin-top: 4px; border-radius: 0 0 8px 8px; }
@media (max-width: 720px){ .nav-acct .na-name { display: none; } }

/* animated underline on the uppercase nav links */
.nav-links a { position: relative; padding-bottom: 3px; transition: color .2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ll-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--am-lift);
}
.nav-links a:hover { color: var(--ll-ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cart { transition: border-color .2s, color .2s, transform .25s var(--am-lift), box-shadow .25s; }
.nav-cart:hover { transform: translateY(-1px); box-shadow: var(--am-sh-card); }
.nav-cart:active { transform: translateY(0) scale(.96); }

/* ============================================================
   4 · BUTTONS  ·  jewellery-grade
   ============================================================ */
.btn { transition: transform .3s var(--am-lift), box-shadow .3s var(--am-ease), background .25s, border-color .25s, color .2s; will-change: transform; }
.btn svg { transition: transform .35s var(--am-lift); }
.btn-primary, .btn-accent {
  position: relative; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%);
}
.btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(24,20,13,.18), 0 12px 30px -14px rgba(24,20,13,.55); }
.btn-accent  { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px -14px color-mix(in srgb, var(--ll-accent) 80%, black); }
/* sweeping sheen on hover */
.btn-primary::after, .btn-accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); transition: left .7s var(--am-ease); pointer-events: none;
}
.btn-primary:hover::after, .btn-accent:hover::after { left: 130%; }
.btn:hover svg { transform: translateX(3px); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ll-ink) 4%, var(--ll-surface)); }
.btn:active { transform: translateY(0) scale(.985); }
/* magnetic hook (luxe.js sets --mx/--my) */
.btn.magnetic { transform: translate(var(--mx,0), var(--my,0)); }
.btn.magnetic:hover { transform: translate(var(--mx,0), calc(var(--my,0) - 2px)); }

/* ============================================================
   5 · HERO COMPOSITION
   ============================================================ */
.hero { padding-bottom: 132px; }
.hero-bg .glow.a { opacity: .85; }
.hero-grid { gap: 64px; }
.hero-trust .t svg { transition: transform .3s var(--am-lift); }
.hero-trust .t:hover svg { transform: scale(1.12); }

/* the showcase Rx card — refined stock + reactive tilt */
.rxcard {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ll-accent) 6%, var(--ll-surface)), var(--ll-surface) 55%);
  box-shadow: var(--am-sh-hi);
  transition: transform .4s var(--am-lift), box-shadow .4s var(--am-ease);
  transform-style: preserve-3d;
}
.rxcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); mix-blend-mode: overlay;
}
.hero-visual:hover .rxcard { box-shadow: var(--am-sh-hi), 0 40px 80px -40px rgba(24,20,13,.35); }
.rxcard .am-price { font-family: var(--am-display); font-weight: 500; }
.rxcard .pill-ill { transition: transform .5s var(--am-lift); }
.hero-visual:hover .rxcard .pill-ill { transform: rotate(-8deg) scale(1.05); }

.float-badge { box-shadow: var(--am-sh-hi); transition: transform .4s var(--am-lift); }

/* ============================================================
   6 · CARDS  ·  value, step, product, safety
   A whisper-thin accent rule wipes in across the top on hover.
   ============================================================ */
.vcard, .pcard, .scard { position: relative; transition: transform .4s var(--am-lift), box-shadow .4s var(--am-ease), border-color .3s; }
.vcard::before, .pcard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--ll-accent), color-mix(in srgb, var(--ll-accent) 30%, transparent));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--am-lift); border-radius: 3px 3px 0 0;
}
.vcard:hover::before, .pcard:hover::before { transform: scaleX(1); }
.vcard:hover, .pcard:hover { box-shadow: var(--am-sh-hi); }
.vcard .vic { transition: transform .45s var(--am-lift), background .3s; }
.vcard:hover .vic { transform: translateY(-2px) scale(1.04); }

.step .snum { transition: transform .45s var(--am-lift), box-shadow .3s, color .3s; }
.step:hover .snum { transform: translateY(-3px); box-shadow: var(--am-sh-card); color: var(--ll-ink); }

.pcard-media { transition: filter .4s; }
.pcard:hover .pcard-media { filter: saturate(1.05); }
.pcard-price .amt { font-family: var(--ll-font-serif); }

/* ============================================================
   7 · SAVINGS CALCULATOR
   ============================================================ */
.calc-grid { box-shadow: var(--am-sh-card); }
.calc-bigsave { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--ll-brand-2), var(--ll-brand)); }
.calc-bigsave::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ll-accent) 50%, transparent), transparent 70%);
  right: -60px; top: -80px; opacity: .5;
}
.calc-bigsave .pct { font-family: var(--am-display); font-weight: 500; }
.med-opt { transition: border-color .2s, background .2s, box-shadow .25s, transform .2s var(--am-lift); }
.med-opt:hover { transform: translateX(2px); }
.calc-compare .col .cval { font-family: var(--ll-font-serif); }

/* ============================================================
   8 · SAFETY (dark band) — richer depth
   ============================================================ */
.safety { background: linear-gradient(170deg, var(--ll-brand-2), var(--ll-brand) 55%); }
.scard { backdrop-filter: blur(2px); transition: background .3s, border-color .3s, transform .4s var(--am-lift); }
.scard:hover { transform: translateY(-3px); }
.rx-band { background: rgba(255,255,255,.07); }

/* ============================================================
   9 · CARE / TESTIMONIAL
   ============================================================ */
.care-photo { box-shadow: var(--am-sh-hi); }
.care-photo image-slot { transition: transform .8s var(--am-lift); display: block; }
.care-visual:hover .care-photo image-slot { transform: scale(1.03); }
.care-quotebox { box-shadow: var(--am-sh-hi); }
.care-quotebox .qm { font-family: var(--am-display); }
.care .cpoint .cp-ic { transition: transform .4s var(--am-lift); }
.care .cpoint:hover .cp-ic { transform: scale(1.08) rotate(-4deg); }

/* ============================================================
   10 · METRICS — couture figures
   ============================================================ */
.metrics { border-top: 1px solid var(--am-line); border-bottom: 1px solid var(--am-line); padding: 8px 0; }
.metric { padding: 30px 12px; position: relative; }
.metric:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 22%; height: 56%; width: 1px; background: var(--am-line); }
.metric .mval { font-family: var(--am-display); font-weight: 500; letter-spacing: -.03em; }
.metric .mval .u { color: var(--am-rule); }
.metric .mlab { letter-spacing: .03em; }

/* ============================================================
   11 · FAQ
   ============================================================ */
.faq-q { transition: color .2s; }
.faq-q:hover { color: var(--ll-accent); }
.faq-item { transition: background .3s; }
.faq-item.open { background: linear-gradient(90deg, color-mix(in srgb, var(--ll-accent) 4%, transparent), transparent 60%); }

/* ============================================================
   12 · CTA / FOOTER
   ============================================================ */
.cta-box { box-shadow: var(--am-sh-hi); background: linear-gradient(165deg, var(--ll-brand-2), var(--ll-brand) 60%); }
.footer .fcol a { position: relative; width: fit-content; }
.footer .fcol a::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ll-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--am-lift); }
.footer .fcol a:hover::after { transform: scaleX(1); }
.footer-bottom .fsocial a { transition: transform .3s var(--am-lift), color .2s; }
.footer-bottom .fsocial a:hover { transform: translateY(-2px); }

/* ============================================================
   13 · PDP + CHECKOUT refinement
   ============================================================ */
.pdp-stage { box-shadow: var(--am-sh-hi); }
.buy-card { box-shadow: var(--am-sh-card); }
.price-block .pb-am { font-family: var(--am-display); font-weight: 500; }
.strength-opt, .cat-chip, .qty-btn { transition: all .2s var(--am-lift); }
.strength-opt:hover, .cat-chip:hover { transform: translateY(-1px); }
.pharm-callout { background: linear-gradient(155deg, var(--ll-brand-2), var(--ll-brand)); box-shadow: var(--am-sh-card); }
.pdp-assure .pa { transition: transform .3s var(--am-lift), border-color .2s, box-shadow .3s; }
.pdp-assure .pa:hover { transform: translateY(-2px); border-color: var(--ll-border-2); box-shadow: var(--am-sh-card); }

.co-summary { box-shadow: var(--am-sh-card); }
.cs-row.total .tval, .co-confirm h1, .co-h, .cc-next h4, .co-empty h2 { font-family: var(--ll-font-serif); }
.cc-rxalert, .rx-banner { background: linear-gradient(155deg, var(--ll-brand-2), var(--ll-brand)); box-shadow: var(--am-sh-card); }
.field input, .field select, .field textarea, .shop-search input { transition: border-color .2s, box-shadow .25s var(--am-ease), background .2s; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px var(--am-ring); }
.rx-method { transition: border-color .2s, box-shadow .3s var(--am-ease), background .25s, transform .25s var(--am-lift); }
.rx-method:hover { transform: translateY(-1px); }
.co-step .dot { box-shadow: var(--ll-sh-1); }
.cc-badge { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ll-success) 9%, transparent); }

/* ============================================================
   14 · CART DRAWER
   ============================================================ */
.cart-drawer { box-shadow: -30px 0 80px -30px rgba(24,20,13,.45); }
.cart-line { transition: background .2s; }
.cart-line:hover { background: color-mix(in srgb, var(--ll-accent) 3%, transparent); }

/* ============================================================
   15 · MOTION — couture reveals
   Base .reveal stays (app.js drives .in); we deepen the curve and
   add a soft de-blur. Hero copy & metrics get a longer settle.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* deepen the existing reveal curve + add a soft de-blur (app.js still drives .in,
     with its 1.2s forced-visible failsafe — nothing can stay hidden) */
  .reveal { transform: translateY(26px); filter: blur(6px); transition: opacity .9s var(--am-lift), transform .9s var(--am-lift), filter .9s var(--am-ease); }
  .reveal.in { filter: blur(0); }
}

/* ============================================================
   16 · MOODS
   editorial = warm paper (editorial.css default, refined here)
   clinical  = cool, airy, white  ·  jewel = deep, navy + gold rule
   ============================================================ */

/* default tint of the rule accent per mood is set below */

/* ---- CLINICAL · quiet, cool, lots of air ---- */
body.ll[data-lux="clinical"]:not(.dark) {
  --ll-bg:        #f7f8f8;
  --ll-surface:   #ffffff;
  --ll-surface-2: #f1f3f3;
  --ll-surface-3: #e9eced;
  --ll-border:    #e7eaea;
  --ll-border-2:  #d6dbdc;
  --ll-hair:      #eef0f0;
  --ll-ink:       #0c1316;
  --ll-ink-2:     #2b3338;
  --ll-muted:     #5c656b;
  --ll-muted-2:   #8a9398;
  --am-ice:       #eef3f4;
  --am-ice-2:     #e4ecee;
  --am-frost:     #f6f9fa;
  --am-glow:      #dceaee;
  --am-line:      rgba(12,19,22,.08);
}
body.ll[data-lux="clinical"]:not(.dark)::before {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(140% 130% at 50% 120%, rgba(12,19,22,.035), transparent 55%);
}
/* clinical wants more air + thinner display weight */
body.ll[data-lux="clinical"] .section { padding: 132px 0; }
body.ll[data-lux="clinical"] .hero h1,
body.ll[data-lux="clinical"] .page-head h1,
body.ll[data-lux="clinical"] .cta-box h2 { font-weight: 500; letter-spacing: -.03em; }
body.ll[data-lux="clinical"] .dropcap::first-letter { color: var(--ll-ink); }

/* ---- JEWEL · deep warm, navy-forward, restrained gold rules ---- */
body.ll[data-lux="jewel"]:not(.dark) {
  --ll-bg:        #ece5d7;
  --ll-surface:   #f6f1e6;
  --ll-surface-2: #e6ddcb;
  --ll-surface-3: #ded3bd;
  --ll-border:    #ddd2bc;
  --ll-border-2:  #ccbe9f;
  --ll-hair:      #e3dac8;
  --ll-ink:       #15120b;
  --ll-ink-2:     #36322a;
  --ll-muted:     #6a6051;
  --ll-muted-2:   #968b76;
  --am-ice:       #e7decd;
  --am-ice-2:     #ded3bd;
  --am-frost:     #f1ece0;
  --am-glow:      #e3d9c2;
  --am-line:      rgba(21,18,11,.13);
  --am-rule:      #9a6a1d;                 /* restrained gold (from --ll-warning family) */
}
body.ll[data-lux="jewel"]:not(.dark)::before {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,251,242,.5), transparent 58%),
    radial-gradient(140% 120% at 50% 120%, rgba(21,18,11,.07), transparent 55%);
}
/* jewel: gold hairline accents on the editorial rules + figures */
body.ll[data-lux="jewel"] .section .section-head .eyebrow::after { color: var(--am-rule); }
body.ll[data-lux="jewel"] .metric .mval .u { color: var(--am-rule); }
body.ll[data-lux="jewel"] .eyebrow::before { background: var(--am-rule); opacity: .8; }
body.ll[data-lux="jewel"] .vcard::before,
body.ll[data-lux="jewel"] .pcard::before { background: linear-gradient(90deg, var(--am-rule), color-mix(in srgb, var(--am-rule) 25%, transparent)); }
body.ll[data-lux="jewel"] .hero h1 em,
body.ll[data-lux="jewel"] .hero-sub.dropcap::first-letter { color: var(--am-rule); }
body.ll[data-lux="jewel"] .safety,
body.ll[data-lux="jewel"] .cta-box,
body.ll[data-lux="jewel"] .pharm-callout,
body.ll[data-lux="jewel"] .cc-rxalert,
body.ll[data-lux="jewel"] .rx-banner { background: linear-gradient(165deg, #14233b, #0a1729 60%); }
body.ll[data-lux="jewel"] .calc-bigsave { background: linear-gradient(155deg, #14233b, #0a1729); }
body.ll[data-lux="jewel"] .safety .eyebrow,
body.ll[data-lux="jewel"] .cta-box .eyebrow { color: var(--am-rule); }
body.ll[data-lux="jewel"] .safety .eyebrow::before,
body.ll[data-lux="jewel"] .cta-box .eyebrow::before { background: var(--am-rule); }

/* ============================================================
   17 · RESPONSIVE trims
   ============================================================ */
@media (max-width: 980px) {
  .metric:nth-child(2)::after { display: none; }
}
@media (max-width: 680px) {
  .hero h1 { font-size: clamp(40px, 12vw, 60px); }
  .metric::after { display: none !important; }
  body.ll[data-lux="clinical"] .section { padding: 84px 0; }
}