/* ============================================================
   Arctic Meds — EDITORIAL LAYER
   Turns the clinical base into a luxury health-journal aesthetic:
   warm paper stock, sepia ink, oversized serif display, magazine
   kickers + section numerals, drop caps, pull-quotes, hairline rules.
   Loaded AFTER styles.css / products.css. Light mode only for the
   warm palette; dark mode keeps the cool base.
   ============================================================ */

/* ---------- 1 · Warm paper palette ---------- */
body.ll:not(.dark) {
  --ll-bg:        #f2eee5;   /* warm paper */
  --ll-surface:   #fbf9f3;   /* warm card stock */
  --ll-surface-2: #ece7da;
  --ll-surface-3: #e4ded0;
  --ll-border:    #e3ddcf;
  --ll-border-2:  #d4ccb9;
  --ll-hair:      #e8e2d3;
  --ll-ink:       #18140d;   /* warm near-black */
  --ll-ink-2:     #3b362b;
  --ll-muted:     #6e6657;
  --ll-muted-2:   #9a9281;

  --am-ice:   #ece8db;
  --am-ice-2: #e3ddcc;
  --am-frost: #f6f3ea;
  --am-glow:  #e7e0cf;
  --am-line:  rgba(24,20,13,.10);
}

/* faint paper grain + vignette for depth */
body.ll:not(.dark)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(24,20,13,.05), transparent 55%);
}
/* lift in-flow content above the texture — but NOT the fixed overlays
   (cart drawer, scrim, toast) which must keep position:fixed */
body.ll > .nav { position: fixed; z-index: 100; }
body.ll > header,
body.ll > main,
body.ll > section,
body.ll > footer { position: relative; z-index: 1; }

/* ---------- 2 · Editorial typography ---------- */
.ll { font-feature-settings: "ss01","cv11","liga","dlig"; }
.display, .serif { letter-spacing: -.025em; font-weight: 400; }
em { font-style: italic; }

/* kickers / eyebrows → masthead labels */
.eyebrow {
  font-size: 11.5px; letter-spacing: .26em; font-weight: 600;
  text-transform: uppercase; color: var(--ll-ink-2); gap: 14px;
}
.eyebrow::before { width: 30px; opacity: .5; background: var(--ll-ink-2); }
.safety .eyebrow, .cta-box .eyebrow { color: color-mix(in srgb, var(--ll-accent) 50%, #fff); }
.safety .eyebrow::before { background: color-mix(in srgb, var(--ll-accent) 50%, #fff); }

/* magazine section numerals */
body { counter-reset: amsec; }
.section .section-head { counter-increment: amsec; }
.section .section-head .eyebrow::after {
  content: "/ " counter(amsec, decimal-leading-zero);
  font-family: var(--ll-font-serif); font-style: italic; font-weight: 400;
  letter-spacing: 0; text-transform: none; font-size: 16px;
  color: var(--ll-accent); margin-left: 2px;
}

/* ---------- 3 · Headlines ---------- */
.hero h1 {
  font-size: clamp(46px, 6.7vw, 92px); line-height: .97; letter-spacing: -.035em;
  font-weight: 400; margin-bottom: 30px;
}
.hero h1 em { color: var(--ll-accent); font-weight: 400; }
.section-head h2, .featured-head h2, .care h2, .cta-box h2, .related h2, .calc-left h3 {
  letter-spacing: -.03em; line-height: 1.02;
}
.section-head h2 { font-size: clamp(34px, 4.4vw, 56px); }
.section-head { max-width: 760px; }
.section-head p, .featured-head p { font-size: 18px; line-height: 1.65; }

/* drop cap for ledes */
.hero-sub { font-size: clamp(17px, 1.6vw, 20px); color: var(--ll-ink-2); }
.dropcap::first-letter {
  float: left; font-family: var(--ll-font-serif); font-weight: 500;
  font-size: 3.5em; line-height: .72; padding: 8px 12px 0 0; color: var(--ll-accent);
}

/* ---------- 4 · Generous editorial rhythm ---------- */
.section { padding: 120px 0; }
.section-head { margin-bottom: 64px; }
.hero { padding-top: calc(var(--am-nav-h) + 88px); padding-bottom: 120px; }

/* hairline rule between major sections */
.section + .section, .section.how, .cta-final {
  border-top: 1px solid var(--am-line);
}
.how { background: transparent; }   /* let paper show through */
.how::before {
  content: ""; position: absolute; inset: 0; background: var(--am-frost);
  border-top: 1px solid var(--am-line); border-bottom: 1px solid var(--am-line); z-index: -1;
}

/* ---------- 5 · Refined nav (masthead) ---------- */
.nav .brand .name { font-weight: 600; letter-spacing: -.01em; }
.nav-links { gap: 22px; }
.nav-links a { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ll-ink-2); white-space: nowrap; }
.nav-cta .signin { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.nav.scrolled { background: color-mix(in srgb, var(--ll-bg) 86%, transparent); }
@media (max-width: 1080px){ .nav-links { gap: 16px; } .nav-links a { font-size: 11.5px; letter-spacing: .05em; } }

/* ---------- 6 · Cards: sharper, hairline, paper ---------- */
.vcard, .pcard, .rxcard, .calc-grid, .buy-card, .float-badge, .pdp-stage {
  border-radius: 3px;
}
.vcard { border-radius: 3px; box-shadow: none; border-color: var(--am-line); background: var(--ll-surface); }
.vcard:hover { box-shadow: var(--ll-sh-2); transform: translateY(-3px); }
.vcard h3, .pcard-body h3, .step h3, .scard h3, .care .cpoint h4 {
  font-family: var(--ll-font-serif); font-weight: 500; letter-spacing: -.02em;
}
.vcard h3 { font-size: 22px; }
.vcard .vic, .care .cpoint .cp-ic, .step .snum {
  border-radius: 3px; background: var(--am-ice); border-color: var(--am-line);
}
.step .snum { border-radius: 50%; font-size: 24px; }

.pcard { box-shadow: none; border-color: var(--am-line); border-radius: 3px; }
.pcard:hover { box-shadow: var(--ll-sh-2); }
.pcard-body h3 { font-size: 20px; }
.pcard-media { border-radius: 0; }
.cat-tile { border-radius: 2px; }

.rxcard { border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(24,20,13,.4), 0 0 0 1px var(--am-line); }
.float-badge { border-radius: 3px; }

/* price numerals more editorial */
.pcard-price .amt, .am-price, .price-block .pb-am, .calc-compare .col .cval, .metric .mval {
  letter-spacing: -.03em;
}

/* ---------- 7 · Pull-quote (care) ---------- */
.care-quotebox { border-radius: 4px; }
.care-quotebox p { font-family: var(--ll-font-serif); font-size: 15px; font-style: italic; line-height: 1.5; color: var(--ll-ink); }

/* trustbar → editorial colophon */
.trustbar { background: transparent; border-color: var(--am-line); }
.trustbar .label { letter-spacing: .22em; }

/* buttons: refined pill → keep but tighten type */
.btn { letter-spacing: .01em; font-weight: 600; }
.btn-primary { box-shadow: 0 1px 2px rgba(24,20,13,.16), 0 10px 26px -12px rgba(24,20,13,.45); }

/* ---------- 8 · Featured head as contents entry ---------- */
.featured-head h2 { font-size: clamp(32px, 4.2vw, 52px); }

/* ---------- 9 · PDP editorial ---------- */
.page-head h1, .pdp-info h1 { letter-spacing: -.035em; }
.pdp-blurb { font-size: 17px; }
.tab-btn { letter-spacing: .02em; }

/* keep cart drawer + toast sharp */
.cart-drawer { border-radius: 0; }
.am-toast { border-radius: 3px; }

/* ---------- responsive trims ---------- */
@media (max-width: 680px){
  .section { padding: 84px 0; }
  .section-head { margin-bottom: 44px; }
}