/* =========================================================
   SIGMA STACKS — site-wide chrome (header / trust strip / footer)
   Ported from the V1 "Clinical-Luxe" homepage (sigma-home.css) so the
   design no longer stops at the front page. Loaded on every page EXCEPT
   the front page (front-page.php ships its own self-contained canvas).

   Scoping rule: every selector below is anchored to body.ss-chrome
   (added by inc/sigma-chrome.php) so nothing here can leak into Astra
   content styles or future templates. Tokens mirror sigma-home.css —
   keep the two blocks in sync if the palette ever changes.
   ========================================================= */
:root {
  --bg:       #0A0B0D;
  --bg-2:     #101216;
  --surface:  #15171B;
  --surface-2:#1B1E24;
  --line:     #23262D;
  --line-2:   #32363F;
  --ink:      #F5F7FA;
  --muted:    #9BA3AE;
  --faint:    #6E7683;
  --acid:     #C6FF3A;
  --acid-soft:rgba(198,255,58,0.10);
  --acid-ink: #0A0B0D;
  --blue:     #2E7CF6;
  --blue-soft:rgba(46,124,246,0.14);
  --amber:    #FFB020;
  --radius:   16px;
  --maxw:     1180px;
  --ease:     cubic-bezier(.16,1,.3,1);
}

body.ss-chrome {
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--blue-soft), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, var(--acid-soft), transparent 55%),
    var(--bg);
  color: var(--ink);
}

/* ---------- Header ---------- */
body.ss-chrome .ss-hdr {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px;
  background: oklch(13% 0.008 255 / 0.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
body.ss-chrome .ss-hdr .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Archivo", sans-serif; font-weight: 500; font-size: 21px;
  letter-spacing: .3px; color: var(--acid); text-decoration: none;
}
body.ss-chrome .ss-hdr .brand .mark { width: 26px; height: 26px; display: block; }
body.ss-chrome .ss-hdr .brand b { color: var(--ink); font-weight: 800; }
body.ss-chrome .ss-hdr nav.main { display: flex; align-items: center; gap: 26px; }
body.ss-chrome .ss-hdr nav.main a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s;
}
body.ss-chrome .ss-hdr nav.main a:hover { color: var(--ink); }
body.ss-chrome .ss-hdr .header-cta { display: flex; align-items: center; gap: 12px; }
body.ss-chrome .ss-hdr .ss-acct { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 4px; color: var(--muted); transition: color .2s; }
body.ss-chrome .ss-hdr .ss-acct:hover { color: var(--acid); }
/* logged-in state: brighter icon + lime presence dot */
body.ss-chrome .ss-hdr .ss-acct.in { color: var(--ink); }
body.ss-chrome .ss-hdr .ss-acct.in::after { content: ""; position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 2px var(--bg); }

body.ss-chrome .ss-hdr .btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--acid); background: var(--acid); color: var(--acid-ink);
  text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s, background .2s;
}
body.ss-chrome .ss-hdr .btn:hover { box-shadow: 0 8px 30px -10px var(--acid); transform: translateY(-1px); }
body.ss-chrome .ss-hdr .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
body.ss-chrome .ss-hdr .btn.ghost:hover { border-color: var(--ink); box-shadow: none; background: oklch(100% 0 0 / 0.03); }

/* Inner pages must keep a path to Shop on small screens (no hero CTA here),
   so the nav compresses and scrolls instead of vanishing like the homepage. */
@media (max-width: 860px) {
  body.ss-chrome .ss-hdr { flex-wrap: wrap; row-gap: 8px; }
  body.ss-chrome .ss-hdr nav.main {
    order: 3; flex-basis: 100%; gap: 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  body.ss-chrome .ss-hdr nav.main::-webkit-scrollbar { display: none; }
  body.ss-chrome .ss-hdr .header-cta .btn.ghost { display: none; }
}

/* ---------- Trust marquee ---------- */
body.ss-chrome .trust-strip {
  border-block: 1px solid var(--acid); background: var(--acid);
  padding-block: 12px; overflow: hidden;
}
body.ss-chrome .trust-track {
  display: flex; gap: 44px; align-items: center; white-space: nowrap; width: max-content;
  animation: ss-marquee 34s linear infinite;
}
body.ss-chrome .trust-strip:hover .trust-track { animation-play-state: paused; }
@keyframes ss-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  body.ss-chrome .trust-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}
body.ss-chrome .trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: #0A0B0D; font-size: 14px; font-weight: 600;
}
body.ss-chrome .trust-item b { color: #05070A; }
body.ss-chrome .trust-item .ic { color: #0A0B0D; }

/* ---------- Content headings ----------
   Astra's customizer default heading color is a near-invisible dark slate
   on this background (pre-existing on the old Astra pages too). */
body.ss-chrome h1, body.ss-chrome h2, body.ss-chrome h3,
body.ss-chrome h4, body.ss-chrome h5, body.ss-chrome h6 {
  color: var(--ink);
}

/* ---------- Woo pagination (shop archive) ----------
   Astra's defaults render blue link boxes that clash with the palette. */
body.ss-chrome .woocommerce-pagination ul.page-numbers {
  display: flex; gap: 8px; justify-content: center; list-style: none;
  margin: 32px 0 0; padding: 0; border: 0;
}
body.ss-chrome .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
body.ss-chrome .woocommerce-pagination .page-numbers li .page-numbers,
body.ss-chrome .woocommerce-pagination span.page-numbers,
body.ss-chrome .woocommerce-pagination a.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: border-color .2s, color .2s;
}
body.ss-chrome .woocommerce-pagination a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }
body.ss-chrome .woocommerce-pagination .page-numbers.current {
  background: var(--acid); border-color: var(--acid); color: var(--acid-ink);
}

/* ---------- Footer ---------- */
body.ss-chrome .ss-foot {
  max-width: var(--maxw); margin-inline: auto; padding: 56px 24px 40px;
  border-top: 1px solid var(--line); margin-top: 64px;
}
body.ss-chrome .ss-foot .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Archivo", sans-serif; font-weight: 500; font-size: 19px;
  letter-spacing: .3px; color: var(--acid);
}
body.ss-chrome .ss-foot .brand b { color: var(--ink); font-weight: 800; }
body.ss-chrome .ss-foot .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { body.ss-chrome .ss-foot .foot-grid { grid-template-columns: 1fr 1fr; } }
body.ss-chrome .ss-foot h5 {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--faint); margin: 0 0 12px;
}
body.ss-chrome .ss-foot .foot-grid a {
  color: var(--muted); text-decoration: none; font-size: 14px; display: block; padding: 4px 0;
}
body.ss-chrome .ss-foot .foot-grid a:hover { color: var(--ink); }
body.ss-chrome .ss-foot .ruo-block {
  margin-top: 32px; background: var(--acid-soft); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 16px 18px; font-size: 12.5px; color: var(--muted);
}
body.ss-chrome .ss-foot .ruo-block b { color: var(--acid); }
body.ss-chrome .ss-foot .copy {
  margin-top: 20px; color: var(--faint); font-size: 12.5px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
body.ss-chrome .ss-foot .copy a { color: var(--faint); text-decoration: none; }
body.ss-chrome .ss-foot .copy a:hover { color: var(--ink); }
body.ss-chrome .ss-foot .badge-21 {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  border: 1px solid var(--amber); color: var(--amber); border-radius: 6px; padding: 2px 7px;
}