/*
Theme Name: Synvexa Bio Labs
Theme URI: https://synvexabiolabs.com
Author: Synvexa Bio Labs LLC
Description: Synvexa Bio Labs — clinical-grade research compound storefront. Trust & Authority + Conversion pattern. Per BUILDS/synvexa-bio-labs/ spec.
Version: 1.1.0
License: Proprietary
Text Domain: synvexa-bio-labs
*/

/* ============================================================
   SELF-HOSTED DISPLAY FACE — Cabinet Grotesk (Fontshare, ITF FFL)
   ============================================================ */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/CabinetGrotesk-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/CabinetGrotesk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/CabinetGrotesk-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — sourced from BUILDS/synvexa-bio-labs/tokens.css
   ============================================================ */
:root {
  /* Anchor brand — Synvexa dual-metal on near-black (see SPEC.md § Sanitized picks) */
  --color-primary:        #c4b490;   /* brand gold — the signal color */
  --color-secondary:      #c8ccd2;   /* brushed silver — metallic support */
  --color-gold-deep:      #a08f6a;   /* pressed/hover gold */
  --color-gold-soft:      rgba(196,180,144,0.14);  /* gold tint wash */

  /* Surfaces (dark premium clinical) */
  --color-bg:             #040404;   /* page ground */
  --color-bg-muted:       #0c0c0e;   /* alt section band */
  --color-card:           #0a0a0a;   /* pick #10 card bg */
  --color-fg:             #f2f0eb;   /* warm white text */
  --color-muted:          #8a919c;   /* secondary text */
  --color-border:         rgba(255,255,255,0.06);  /* pick #10 hairline */
  --color-border-strong:  rgba(255,255,255,0.14);

  --color-destructive:    #d96a5f;
  --color-success:        #6fbf8c;

  /* Button (pick #9 — white bg, dark text) */
  --btn-bg:               #ffffff;
  --btn-fg:               #0b0d10;

  /* Dark panel gradient (checkout rails, callouts) */
  --gradient-tier-start:  #131315;
  --gradient-tier-end:    #060607;

  /* Typography — Cabinet Grotesk display + Inter body (de-slop 2026-09-10; Inter-everywhere was the tell) */
  --font-heading:         'Cabinet Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:            'Inter', system-ui, sans-serif;
  --font-mono:            'JetBrains Mono', ui-monospace, monospace;

  --section-pad:          clamp(48px, 7vw, 88px);
  --line-tight:           1.1;
  --line-base:            1.6;
  --tracking-tight:       -0.015em;

  /* Type scale (modular 12/14/16/18/20/24/32/40/56/64) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  64px;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;

  /* Radius (pick #7 near-sharp; buttons 4px per pick #9) */
  --r-sm: 2px;  --r-md: 4px;  --r-lg: 6px;  --r-pill: 9999px;

  /* Shadows (pick #8 dramatic, dark-tinted) */
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.35);
  --shadow-md:  0 6px 18px 0 rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 32px 0 rgba(0,0,0,0.45);
  --shadow-xl:  0 20px 60px 0 rgba(0,0,0,0.5);
  --shadow-card: none;

  /* Layout */
  --container-narrow:  720px;
  --container-default: 1200px;
  --container-wide:    1440px;
  --header-h:          72px;
  --header-h-mobile:   64px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--line-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  touch-action: manipulation;
}
a:hover { color: var(--color-gold-deep); }
button { cursor: pointer; font-family: inherit; touch-action: manipulation; }
input, button, textarea, select { font: inherit; }
::-moz-focus-inner { border: 0; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}
h1 { font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl)); font-weight: 800; }
h2 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-3); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container         { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--sp-4); }
.container--narrow { max-width: var(--container-narrow);  margin: 0 auto; padding: 0 var(--sp-4); }
.container--wide   { max-width: var(--container-wide);    margin: 0 auto; padding: 0 var(--sp-4); }
.section           { padding: var(--sp-8) 0; }
.section--tight    { padding: var(--sp-6) 0; }
.section--muted    { background: var(--color-bg-muted); }
.section--dark     { background: var(--color-bg-muted); color: var(--color-fg); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: var(--color-fg); }
@media (max-width: 900px) { .section { padding: var(--sp-6) 0; } }

.section-header { text-align: center; max-width: 700px; margin: 0 auto var(--sp-6); }
.section-header .label {
  display: inline-block;
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.section-header p { color: var(--color-muted); font-size: var(--fs-md); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 15px 28px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  min-height: 48px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.btn--primary:hover { background: var(--color-primary); color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost {
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
}
.btn--ghost:hover { border-color: var(--color-primary); background: transparent; color: var(--color-primary); }
.btn--accent {
  background: var(--color-secondary);
  color: var(--btn-fg);
}
.btn--accent:hover { background: var(--color-primary); color: var(--btn-fg); }
.btn--full { width: 100%; }

/* ============================================================
   TRUST STRIP (above header) — Rule 26
   ============================================================ */
.trust-strip {
  background: var(--color-secondary);
  color: var(--btn-fg);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px var(--sp-3);
}
.trust-strip span { margin: 0 var(--sp-3); white-space: nowrap; }
.trust-strip span + span::before {
  content: "•";
  color: var(--btn-fg);
  margin-right: var(--sp-3);
}
@media (max-width: 700px) {
  .trust-strip { font-size: 11px; padding: 8px var(--sp-2); }
  .trust-strip span { margin: 0 6px; }
  .trust-strip span + span::before { margin-right: 6px; }
}

/* ============================================================
   HEADER — Rule 24 (mobile: single 64px row)
   ============================================================ */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 !important;
  margin: 0 !important;
  height: 64px;
}
.site-header > .container { padding-top: 0 !important; padding-bottom: 0 !important; height: 100%; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: var(--sp-4);
  line-height: 1;
}
.header-logo { display: flex; align-items: center; line-height: 0; height: 100%; }
.header-logo a { display: flex; line-height: 0; padding: 0; margin: 0; align-items: center; }
.header-logo a { display: inline-block; }
.header-logo img {
  height: 40px;
  width: auto;
  max-width: 310px;   /* wide horizontal lockup */
  display: block;
  object-fit: contain;   /* never distort — letterbox if box aspect is off */
}
.header-nav { display: flex; align-items: center; gap: var(--sp-4); }
.header-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-nav a {
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-2);
  border-radius: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.header-nav a:hover { color: var(--color-secondary); }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.header-cart {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--color-primary);
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out);
}
.header-cart:hover { background: var(--color-bg-muted); }
.header-cart .cart-count {
  position: absolute;
  top: 6px; right: 4px;
  min-width: 18px; height: 18px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--btn-fg);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.header-mobile-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  color: var(--color-primary);
  align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .site-header { height: 56px; }
  .header-inner { height: 56px !important; min-height: 0; padding: 0; }
  .header-logo img { height: 31px; max-width: 185px; }
  .header-mobile-toggle { display: inline-flex; }
  .header-nav {
    position: fixed;
    inset: var(--header-h-mobile) 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    padding: var(--sp-4);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    border-top: 1px solid var(--color-border);
    overflow-y: auto;
  }
  .header-nav.is-open { transform: translateX(0); }
  .header-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .header-nav a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-md);
  }
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--color-bg-muted);
  padding: var(--sp-7) var(--sp-3);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--sp-2); }
.cta-band p { color: var(--color-muted); max-width: 560px; margin: 0 auto var(--sp-4); }

/* ============================================================
   FOOTER — Rule 61 (4-col dark navy)
   ============================================================ */
.site-footer {
  background: var(--color-bg-muted);
  color: rgba(255,255,255,0.7);
  padding: var(--sp-7) 0 var(--sp-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.footer-col h4 {
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col a {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--color-fg); }
.footer-brand img { height: 48px; width: auto; margin-bottom: var(--sp-3); display: block; }
.footer-brand p { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); max-width: 320px; }
.footer-disclaimer {
  background: rgba(255,255,255,0.04);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-4);
  line-height: 1.6;
}
.footer-disclaimer a { color: var(--color-secondary); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: var(--sp-2);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LEGAL / TEXT PAGES
   ============================================================ */
.legal { max-width: 760px; margin: 0 auto; padding: var(--sp-7) var(--sp-3); }
/* Checkout, Cart, My Account: blow out the .legal wrapper — they need full width */
body.woocommerce-checkout .legal,
body.woocommerce-cart .legal,
body.woocommerce-account .legal,
body.woocommerce-checkout .page,
body.woocommerce-cart .page,
body.woocommerce-account .page {
  max-width: 100% !important;
  padding: var(--sp-5) var(--sp-3) !important;
}
body.woocommerce-checkout .legal > h1 {
  max-width: min(1480px, 100%);
  margin: 0 auto var(--sp-4);
}
.legal h1 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); margin-bottom: var(--sp-2); }
.legal .meta { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.legal h2 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); color: var(--color-primary); }
.legal p { font-size: var(--fs-base); line-height: 1.7; margin-bottom: var(--sp-3); }

/* FAQ accordion */
.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-2) 0;
  background: var(--color-card);
  transition: border-color var(--dur-base) var(--ease-out);
}
.faq details[open] { border-color: var(--color-primary); }
.faq summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 26px;
  color: var(--color-secondary);
  font-weight: 300;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin-top: var(--sp-3);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* ============================================================
   WOOCOMMERCE — product grid (server-side replaced, see functions.php)
   ============================================================ */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.container--wide .shop-grid { gap: var(--sp-5); }
.shop-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.shop-card:hover { transform: translateY(-4px); border-color: var(--color-border-strong); box-shadow: var(--shadow-lg); }
.shop-card .img-wrap {
  aspect-ratio: 1;
  background: var(--color-bg-muted);
  overflow: hidden;
}
.shop-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card .img-wrap { position: relative; }
.shop-card-sale-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--color-secondary); color: var(--btn-fg);
  font-family: var(--font-heading); font-size: 14px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
/* Mobile: push the Sale badge tighter into the top-right corner so it
   doesn't sit on top of the vial. Smaller pill + edge-hugging position. */
@media (max-width: 600px) {
  .shop-card-sale-badge {
    top: 6px !important;
    right: 6px !important;
    font-size: 10px !important;
    padding: 4px 9px !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12) !important;
  }
}
.shop-card-price del {
  color: var(--color-muted); font-weight: 500;
  margin-right: 6px; opacity: 0.7; text-decoration: line-through;
}
.shop-card-price ins { text-decoration: none; color: var(--color-secondary); }
.product-hero .price__current del {
  color: var(--color-muted); font-weight: 500; font-size: 0.65em;
  margin-right: 10px; opacity: 0.75; text-decoration: line-through;
}
.product-hero .price__current ins { text-decoration: none; color: var(--color-secondary); }
.shop-card-body { padding: var(--sp-4) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }
.shop-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
  min-height: 56px;
}
.shop-card-title a { color: inherit; }
.shop-card-price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.shop-card-cta {
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 14px 18px;
  border-radius: var(--r-pill);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  margin-top: auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.shop-card-cta:hover { background: var(--color-primary); color: var(--btn-fg); }
@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .shop-grid { grid-template-columns: 1fr; gap: var(--sp-3); } .shop-card-title { min-height: 0; } }

/* Single product layout */
.product-hero { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); padding: var(--sp-6) var(--sp-3); max-width: var(--container-default); margin: 0 auto; align-items: start; }
.product-hero .gallery {
  background: var(--color-bg-muted);
  border-radius: var(--r-lg);
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.product-hero .gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}
.product-hero .info h1 { margin: 0 0 var(--sp-2); }
.product-hero .info .price { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: 800; color: var(--color-primary); margin: var(--sp-2) 0; }
.product-hero .info .meta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--color-muted); margin: var(--sp-3) 0; }
.product-hero .info .meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.product-hero .info .meta-row svg { width: 16px; height: 16px; color: var(--color-secondary); }
.product-hero .info .description { color: var(--color-muted); font-size: var(--fs-base); line-height: 1.7; margin: var(--sp-3) 0; }
.product-hero .info .cart-form { display: flex; gap: var(--sp-2); align-items: stretch; margin: var(--sp-3) 0; }
.product-hero .info .cart-form input[type=number] { width: 80px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--r-md); text-align: center; font-weight: 700; background: var(--color-card); color: var(--color-fg); }
.product-hero .info .ruo {
  background: var(--color-gold-soft);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--color-fg);
  margin-top: var(--sp-3);
  border-left: 3px solid var(--color-secondary);
}
@media (max-width: 900px) { .product-hero { grid-template-columns: 1fr; padding: var(--sp-5) var(--sp-3); } }

/* Sticky mobile Add-to-Cart (Rule 25) */
.sticky-atc {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: 12px var(--sp-3);
  z-index: 90;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.sticky-atc .meta { display: flex; flex-direction: column; }
.sticky-atc .meta strong { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--color-primary); }
.sticky-atc .meta span { font-size: var(--fs-xs); color: var(--color-muted); }
.sticky-atc .btn { flex: 1; max-width: 200px; min-height: 48px; }
@media (max-width: 768px) { body.single-product .sticky-atc { display: flex; } body.single-product { padding-bottom: 80px; } }

/* WC cart / checkout / my-account polish */
.woocommerce table.shop_table { border: 1px solid var(--color-border); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce .button, .woocommerce-page .button {
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 24px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border: 0 !important;
  min-height: 48px;
  transition: background var(--dur-fast) var(--ease-out);
}
.woocommerce .button:hover { background: var(--color-primary) !important; }
.woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce textarea, .woocommerce select, .woocommerce form .form-row input.input-text {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--r-sm) !important;
  padding: 12px 14px !important;
  font-size: var(--fs-base);
  background: var(--color-card);
  color: var(--color-fg);
}
.woocommerce form .form-row label { font-weight: 600; font-size: var(--fs-sm); color: var(--color-fg); }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  color: var(--color-fg);
  font-weight: 600;
}
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--color-bg-muted); color: var(--color-primary); }

/* ============================================================
   CHECKOUT — 2-col grid, card sections, full-width labeled fields
   ============================================================ */
.woocommerce-checkout .page-title,
.woocommerce-checkout > h1,
body.woocommerce-checkout main h1 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  margin: var(--sp-5) 0 var(--sp-4);
}

/* Coupon toggle pill */
.woocommerce-checkout .woocommerce-info {
  background: var(--color-bg-muted) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 3px solid var(--color-secondary) !important;
  padding: 12px 16px !important;
  border-radius: var(--r-md) !important;
  margin-bottom: var(--sp-4) !important;
  font-size: var(--fs-sm);
}
.woocommerce-checkout .woocommerce-info a { color: var(--color-secondary); font-weight: 700; }
.woocommerce-checkout .checkout_coupon { background: var(--color-bg-muted); padding: var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-5); }

/* Wide horizontal layout: form left + sticky summary right.
   Page width pushed wider so checkout fits more above the fold. */
form.woocommerce-checkout,
form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr);
  gap: var(--sp-4);
  align-items: start;
  max-width: min(1480px, 100%);
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
/* #customer_details = ONE grid cell in col 1 (its .col-1 / .col-2 stack inside as block) */
form.woocommerce-checkout #customer_details,
form.checkout #customer_details {
  display: block;
  grid-column: 1;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
#customer_details .col-1,
#customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0;
  padding: 0;
}
#customer_details .col-1 { margin-bottom: 18px; }

.woocommerce-additional-fields,
.woocommerce-checkout-review-order {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Inside billing card: pack short fields onto one row so checkout shortens */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
}
/* Strip the old width:calc(50% - 8px) — grid handles sizing now */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last,
.woocommerce-checkout .form-row-wide {
  width: 100% !important;
  margin-right: 0 !important;
  display: flex !important;
}
/* Only TRULY wide fields span both columns (country / address / email / phone / company) */
.woocommerce-billing-fields__field-wrapper #billing_country_field,
.woocommerce-billing-fields__field-wrapper #billing_address_1_field,
.woocommerce-billing-fields__field-wrapper #billing_address_2_field,
.woocommerce-billing-fields__field-wrapper #billing_email_field,
.woocommerce-billing-fields__field-wrapper #billing_phone_field,
.woocommerce-billing-fields__field-wrapper #billing_company_field,
.woocommerce-shipping-fields__field-wrapper #shipping_country_field,
.woocommerce-shipping-fields__field-wrapper #shipping_address_1_field,
.woocommerce-shipping-fields__field-wrapper #shipping_address_2_field,
.woocommerce-shipping-fields__field-wrapper #shipping_company_field {
  grid-column: 1 / -1 !important;
}
/* Short fields pack 2-up — override WC's default form-row-wide on these */
.woocommerce-billing-fields__field-wrapper #billing_first_name_field,
.woocommerce-billing-fields__field-wrapper #billing_last_name_field,
.woocommerce-billing-fields__field-wrapper #billing_city_field,
.woocommerce-billing-fields__field-wrapper #billing_state_field,
.woocommerce-billing-fields__field-wrapper #billing_postcode_field,
.woocommerce-shipping-fields__field-wrapper #shipping_first_name_field,
.woocommerce-shipping-fields__field-wrapper #shipping_last_name_field,
.woocommerce-shipping-fields__field-wrapper #shipping_city_field,
.woocommerce-shipping-fields__field-wrapper #shipping_state_field,
.woocommerce-shipping-fields__field-wrapper #shipping_postcode_field {
  grid-column: span 1 !important;
}
@media (max-width: 980px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr !important; }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { grid-column: 1 / -1 !important; }
}

/* Additional fields = full left-column card, below #customer_details */
.woocommerce-additional-fields { grid-column: 1; }

/* Right-side rail (JS-wrapped div containing callouts + order summary) — single grid cell */
.svx-checkout-rail {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  align-self: start;
}
/* Sticky requires no overflow:hidden / transform on any ancestor — neutralize
   the most common culprits within the checkout grid. */
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout form.woocommerce-checkout,
body.woocommerce-checkout .woocommerce {
  overflow: visible !important;
  transform: none !important;
}

/* Order review card — same chrome but no sticky (rail is sticky) */
.woocommerce-checkout-review-order {
  background: linear-gradient(180deg, var(--gradient-tier-start) 0%, var(--gradient-tier-end) 35%);
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 20px 48px -16px rgba(0,0,0,0.18);
}
#order_review_heading { display: none; } /* the card header below replaces it */

.woocommerce-checkout-review-order::before {
  content: "Order summary";
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  margin: -4px 0 16px;
}

/* Section headings inside cards */
#customer_details .col-1 > h3,
#customer_details .col-2 > h3,
.woocommerce-additional-fields > h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

/* Form rows — labels ABOVE inputs, full-width */
.woocommerce-checkout .form-row,
.woocommerce-checkout p.form-row {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}
/* Old static label rule removed — floating-label block (later in file) handles labels */
.woocommerce-checkout .form-row .required { color: var(--color-destructive); margin-left: 2px; }

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container,
.woocommerce-checkout .form-row .select2-selection {
  width: 100% !important;
  display: block !important;
  height: 48px;
  font-size: 15px !important;
  padding: 12px 14px !important;
}
.woocommerce-checkout .form-row textarea { height: auto; min-height: 90px; }
.woocommerce-checkout .form-row .select2-selection { line-height: 46px !important; padding: 0 14px !important; }
.woocommerce-checkout .form-row .select2-selection__rendered { line-height: 46px !important; padding: 0 !important; }
.woocommerce-checkout .form-row .select2-selection__arrow { height: 48px !important; }

/* Side-by-side rows */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  display: inline-flex !important;
  flex-direction: column;
  width: calc(50% - 8px) !important;
  margin-right: 0 !important;
  vertical-align: top;
}
.woocommerce-checkout .form-row-first { margin-right: 16px !important; }
.woocommerce-checkout .form-row-wide { width: 100% !important; }

/* Order review table — clean */
.woocommerce-checkout-review-order table.shop_table {
  background: transparent !important;
  border: 0 !important;
  border-collapse: collapse !important;
  width: 100%;
  margin: 0 0 16px;
}
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-size: 14px;
  background: transparent !important;
}
.woocommerce-checkout-review-order table.shop_table thead { display: none; }
.woocommerce-checkout-review-order table.shop_table tfoot th { font-weight: 700; color: var(--color-primary); }
.woocommerce-checkout-review-order .order-total td,
.woocommerce-checkout-review-order .order-total th {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  padding-top: 14px !important;
  border-bottom: 0 !important;
}
.woocommerce-checkout-review-order .product-name { font-weight: 600; color: var(--color-primary); }
.woocommerce-checkout-review-order .product-quantity { color: var(--color-muted); font-weight: 500; margin-left: 4px; }

/* Payment box */
.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  background: var(--color-bg-muted) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  margin: 0 0 14px !important;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li { border-bottom: 1px dashed var(--color-border); padding: 8px 0; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; color: var(--color-primary); }
.woocommerce-checkout #payment .payment_box {
  background: var(--color-card) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--color-border) !important;
  padding: 12px !important;
  margin-top: 8px !important;
  font-size: 13px;
  color: var(--color-muted);
}

/* Place order — big primary CTA */
.woocommerce-checkout #place_order {
  width: 100%;
  font-size: 16px !important;
  padding: 18px 24px !important;
  min-height: 56px;
  margin-top: 8px;
}

/* Terms checkbox */
.woocommerce-terms-and-conditions-wrapper { margin: 12px 0; padding: 12px; background: var(--color-bg-muted); border-radius: var(--r-sm); font-size: 13px; }

/* Mobile: stack */
@media (max-width: 980px) {
  form.woocommerce-checkout,
  form.checkout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .woocommerce-checkout-review-order {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  #customer_details .col-1,
  #customer_details .col-2,
  .woocommerce-additional-fields,
  .woocommerce-checkout-review-order { padding: 18px 18px; }
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last { width: 100% !important; margin-right: 0 !important; }
}

/* Age-gate CSS removed — handled by Verified Access plugin */

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.is-hidden { display: none !important; }

/* ============================================================
   COLOR HYGIENE — every interactive surface uses Synvexa tokens
   (Forces WC/WP defaults into the brand system)
   ============================================================ */

/* Selection */
::selection { background: var(--color-primary); color: var(--btn-fg); }

/* Form focus rings, required asterisks, validation */
.required, .woocommerce form .form-row .required { color: var(--color-destructive); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary) !important; }

/* WooCommerce — every button variant */
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .button.added_to_cart,
.woocommerce-mini-cart__buttons .button,
.woocommerce-page button.button {
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  padding: 13px 24px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  min-height: 48px;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--color-primary) !important;
  color: var(--btn-fg) !important;
  transform: translateY(-1px);
}

/* WC notices */
.woocommerce-message, .woocommerce-info, .woocommerce-notice,
.woocommerce-error, .wc-block-components-notice-banner {
  background: var(--color-bg-muted) !important;
  border-top: 3px solid var(--color-secondary) !important;
  color: var(--color-fg) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--sp-3) var(--sp-4) !important;
}
.woocommerce-error { border-top-color: var(--color-destructive) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--color-secondary) !important; }
.woocommerce-error::before { color: var(--color-destructive) !important; }
.woocommerce-message .button, .woocommerce-info .button { float: right; }

/* Quantity stepper */
.woocommerce .quantity .qty {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--r-md) !important;
  padding: 10px !important;
  text-align: center;
  width: 80px;
  font-weight: 700;
  background: var(--color-card);
  color: var(--color-fg);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul,
.page-numbers {
  border: 0 !important;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li,
.page-numbers li {
  border: 0 !important;
  list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers a, .page-numbers span {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-primary) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: all var(--dur-fast) var(--ease-out);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.page-numbers a:hover {
  background: var(--color-primary) !important;
  color: var(--btn-fg) !important;
  border-color: var(--color-primary) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers .current {
  background: var(--color-primary) !important;
  color: var(--btn-fg) !important;
  border-color: var(--color-primary) !important;
}

/* Mini cart drawer */
.woocommerce-mini-cart__total .amount,
.cart-subtotal .amount,
.order-total .amount {
  color: var(--color-primary) !important;
  font-family: var(--font-heading);
  font-weight: 800;
}

/* Coupon form */
.checkout_coupon, .woocommerce-form-coupon {
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-muted);
  padding: var(--sp-3) !important;
  border-radius: var(--r-sm) !important;
}
.coupon input[type=text], .woocommerce-form-coupon input[type=text] {
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--color-border) !important;
  padding: 12px 16px !important;
}

/* My Account navigation */
.woocommerce-MyAccount-navigation { background: var(--color-bg-muted); padding: var(--sp-3); border-radius: var(--r-md); }
.woocommerce-MyAccount-navigation ul li a {
  color: var(--color-fg) !important;
  font-weight: 600;
  font-family: var(--font-body);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--color-primary) !important;
  color: var(--btn-fg) !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--color-bg-muted) !important;
  color: var(--color-primary) !important;
}

/* Login / register tabs */
.woocommerce-account .woocommerce > h2,
.woocommerce-account .u-columns h2 {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

/* Payment box */
ul.wc_payment_methods, ul.payment_methods { border: 1px solid var(--color-border) !important; border-radius: var(--r-md) !important; padding: var(--sp-3) !important; background: var(--color-card) !important; }
.payment_box { background: var(--color-bg-muted) !important; border-radius: var(--r-sm) !important; color: var(--color-fg) !important; }
.payment_box::before { border-bottom-color: var(--color-bg-muted) !important; }

/* WC sale / featured badge */
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
  background: var(--color-secondary) !important;
  color: var(--btn-fg) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

/* Loaders */
.blockUI.blockOverlay, .blockUI.blockMsg { color: var(--color-primary) !important; }
.woocommerce .blockUI.blockOverlay::before, .woocommerce-page .blockUI.blockOverlay::before {
  border-top-color: var(--color-secondary) !important;
  border-right-color: var(--color-secondary) !important;
}

/* WC block UI buttons (cart/checkout blocks) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button {
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
}
.wc-block-components-button:hover { background: var(--color-primary) !important; }
.wc-block-components-totals-item__value, .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-formatted-money-amount,
.wc-block-formatted-money-amount { color: var(--color-primary) !important; font-weight: 700; }

/* Yoast breadcrumbs */
.yoast-breadcrumbs, .breadcrumbs { color: var(--color-muted); font-size: var(--fs-xs); }
.yoast-breadcrumbs a, .breadcrumbs a { color: var(--color-secondary); }

/* Search form */
.search-form input[type=search] { border: 1px solid var(--color-border); border-radius: var(--r-pill); padding: 12px 18px; }
.search-form button { background: var(--btn-bg); color: var(--btn-fg); border: 0; padding: 12px 18px; border-radius: var(--r-md); font-weight: 700; }

/* Generic submit buttons */
button[type=submit], input[type=submit] {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--r-md);
  padding: 13px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 48px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
button[type=submit]:hover, input[type=submit]:hover { background: var(--color-primary); }

/* ============================================================
   CART PAGE (custom 2-col layout)
   ============================================================ */
.cart-wrap { max-width: var(--container-default); margin: 0 auto; padding: var(--sp-6) var(--sp-3) var(--sp-7); }
.cart-wrap__header { margin-bottom: var(--sp-5); }
.cart-wrap__header h1 { margin: 0 0 4px; }
.cart-wrap__header p { color: var(--color-muted); margin: 0; font-size: var(--fs-sm); }

.cart-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); align-items: flex-start; }
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } }

.cart-items { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--r-md); overflow: hidden; }
.cart-row {
  display: grid;
  grid-template-columns: 96px 1fr 130px 110px 40px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.cart-row:last-of-type { border-bottom: 0; }
.cart-row__img {
  display: block;
  width: 96px; height: 96px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--color-bg-muted);
}
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-row__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.2;
  margin-bottom: 6px;
}
.cart-row__title:hover { color: var(--color-secondary); }
.cart-row__sku { font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.02em; }
.cart-row__qty .quantity .qty {
  width: 100% !important;
  text-align: center;
  font-weight: 700;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--r-pill) !important;
  padding: 10px !important;
  color: var(--color-primary);
}
.cart-row__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-primary);
  text-align: right;
  letter-spacing: -0.01em;
}
.cart-row__price .amount { color: var(--color-primary) !important; }
.cart-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--color-muted);
  background: transparent;
  border: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-remove-btn:hover { background: rgba(217,106,95,0.12); color: var(--color-destructive); }

.cart-actions {
  padding: var(--sp-4);
  background: var(--color-bg-muted);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.cart-coupon { display: inline-flex; flex: 1 1 280px; gap: 8px; align-items: center; }
.cart-coupon__input {
  flex: 1;
  padding: 12px 16px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--r-pill) !important;
  background: var(--color-card) !important;
  color: var(--color-fg);
  font-family: var(--font-body);
}
.cart-coupon__input:focus { border-color: var(--color-primary) !important; outline: 0; }
.cart-coupon__btn, .cart-update {
  padding: 12px 22px !important;
  min-height: 0 !important;
  font-size: 13px;
}

/* Cart summary card */
.cart-summary {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  position: sticky;
  top: 96px;
}
.cart-summary__title { font-size: var(--fs-lg); margin: 0 0 var(--sp-4); }
.cart-summary__rows { display: flex; flex-direction: column; gap: 12px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-3); }
.cart-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); color: var(--color-fg); }
.cart-summary__row span { color: var(--color-muted); }
.cart-summary__row strong { font-family: var(--font-heading); color: var(--color-primary); font-weight: 700; }
.cart-summary__row--coupon strong { color: var(--color-success); }
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.cart-summary__total span { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--color-primary); font-weight: 700; }
.cart-summary__total strong { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--color-primary); font-weight: 800; letter-spacing: -0.02em; }
.cart-summary__total strong .amount { color: var(--color-primary) !important; }

.cart-summary__checkout { padding: 16px 24px !important; font-size: 15px !important; margin-bottom: 12px; }
.cart-summary__continue {
  display: block;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
  text-decoration: none;
}
.cart-summary__continue:hover { color: var(--color-primary); }
.cart-summary__trust { border-top: 1px solid var(--color-border); padding-top: var(--sp-3); display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--color-muted); }
.cart-summary__trust > div { display: flex; align-items: center; gap: 8px; }
.cart-summary__trust svg { width: 14px; height: 14px; color: var(--color-secondary); flex-shrink: 0; }

/* BW upsell block inside cart summary */
.cart-bw-upsell {
  background: var(--color-gold-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-left: 3px solid var(--color-secondary);
}
.cart-bw-upsell__icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-secondary); }
.cart-bw-upsell__icon svg { width: 24px; height: 24px; }
.cart-bw-upsell__body { flex: 1; }
.cart-bw-upsell__body strong { font-family: var(--font-heading); display: block; font-size: var(--fs-sm); color: var(--color-primary); margin-bottom: 2px; }
.cart-bw-upsell__body p { margin: 0 0 10px; font-size: 12px; color: var(--color-muted); line-height: 1.4; }
.cart-bw-upsell__ctas { display: flex; gap: 6px; flex-wrap: wrap; }
.cart-bw-upsell__btn { padding: 8px 14px !important; min-height: 0 !important; font-size: 12px !important; }

/* Hide WC's default totals box that ships in cart_collaterals */
.cart-collaterals, .cart_totals { display: none !important; }

@media (max-width: 600px) {
  /* 2-row layout: [img] [name/sku] [x] on top, [qty] ...... [price] below.
     Image spans both rows; the name column gets the full width so long
     product names wrap normally instead of breaking mid-word. */
  .cart-row {
    grid-template-columns: 56px minmax(0, 1fr) 86px !important;
    grid-template-areas:
      "img info remove"
      "img qty  price" !important;
    align-items: center;
    column-gap: 8px !important;
    row-gap: 8px;
    padding: 14px 8px !important;
  }
  .cart-row__img { width: 56px; height: 56px; grid-area: img; align-self: start; }
  .cart-row__info { grid-area: info; min-width: 0; align-self: center; }
  .cart-row__title { overflow-wrap: break-word; word-break: normal; font-size: var(--fs-sm); }
  .cart-row__sku { overflow-wrap: break-word; word-break: normal; }
  .cart-row__remove { grid-area: remove; align-self: start; justify-self: end; }
  .cart-row__qty { grid-area: qty; justify-self: start; }
  .cart-row__qty .quantity, .cart-row__qty .quantity .qty { width: 64px !important; padding: 8px !important; }
  .cart-row__price {
    grid-area: price; justify-self: end; text-align: right;
    font-size: var(--fs-md) !important;
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px;
  }
  .cart-row__price del, .cart-row__price ins { flex-basis: 100%; text-align: right; }
  .cart-row__price .bundle-saved {
    flex-basis: 100%; text-align: right; white-space: normal;
    font-size: 10px !important; padding: 2px 6px !important; line-height: 1.25;
  }
}

/* ============================================================
   EMPTY CART
   ============================================================ */
.cart-empty {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-3) var(--sp-6);
  text-align: center;
}
.cart-empty__icon {
  width: 96px; height: 96px;
  margin: 0 auto var(--sp-4);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}
.cart-empty__icon svg { width: 40px; height: 40px; }
.cart-empty__title { font-size: clamp(28px, 4vw, 36px); margin: 0 0 8px; }
.cart-empty__sub { color: var(--color-muted); font-size: var(--fs-md); margin: 0 0 var(--sp-5); }
.cart-empty__cta { padding: 16px 32px; font-size: var(--fs-base); }

.cart-suggested {
  max-width: var(--container-default);
  margin: var(--sp-3) auto;
  padding: var(--sp-6) var(--sp-3) var(--sp-7);
  border-top: 1px solid var(--color-border);
}
.cart-suggested__header { text-align: center; margin-bottom: var(--sp-5); }
.cart-suggested__header h2 { margin: 8px 0 0; font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); }

/* Hide WP default emoji */
img.emoji, img.wp-smiley { display: none !important; }

/* Force checkbox / radio accent */
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); }

/* ============================================================
   HEADER — logged-in account chip
   ============================================================ */
.header-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.header-account:hover { border-color: var(--color-border-strong); background: var(--color-bg-muted); color: var(--color-primary); }
.header-account__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--btn-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-heading);
  font-size: 14px;
}
@media (max-width: 900px) {
  .header-account__name { display: none; }
  .header-account { padding: 4px; border: 0; }
}

/* ============================================================
   AUTH FORM (Sign in / Create account)
   ============================================================ */
.auth-shell { max-width: 580px; margin: 0 auto; padding: var(--sp-7) var(--sp-3); }
.auth-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.auth-tabs {
  display: flex;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}
.auth-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 18px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  cursor: pointer;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.auth-tab:hover { color: var(--color-primary); }
.auth-tab.is-active {
  color: var(--color-primary);
  background: var(--color-card);
  border-bottom-color: var(--color-primary);
}
.auth-pane { display: none; padding: var(--sp-5) var(--sp-5); }
.auth-pane.is-active { display: block; }
.auth-pane h2 { font-size: var(--fs-xl); margin: 0 0 6px; }
.auth-pane .auth-lead { color: var(--color-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.auth-field input, .auth-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: var(--color-card);
  color: var(--color-fg);
}
.auth-field input:focus, .auth-field select:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 2px var(--color-gold-soft);
}
.auth-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  margin: 6px 0 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.auth-remember { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); cursor: pointer; }
.auth-link {
  color: var(--color-secondary);
  font-weight: 600;
  background: 0;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
}
.auth-link:hover { color: var(--color-primary); }
.auth-checks { margin: 14px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.auth-checks label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--color-fg);
  line-height: 1.45;
  cursor: pointer;
}
.auth-checks input[type=checkbox] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.auth-swap { text-align: center; font-size: var(--fs-sm); color: var(--color-muted); margin: var(--sp-4) 0 0; }
.auth-submit { width: 100%; margin-top: 4px; }
@media (max-width: 540px) { .auth-row { grid-template-columns: 1fr; } .auth-pane { padding: var(--sp-4); } }

/* ============================================================
   MY ACCOUNT DASHBOARD (amino-style)
   ============================================================ */
.acct-shell { max-width: var(--container-default); margin: 0 auto; padding: var(--sp-4) var(--sp-3); }

.acct-subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.acct-subheader__crumb { display: inline-flex; align-items: center; gap: 12px; }
.acct-subheader__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--btn-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-md);
}
.acct-subheader__label { display: block; font-size: var(--fs-xs); color: var(--color-muted); letter-spacing: 0.04em; }
.acct-subheader__crumb strong { font-family: var(--font-heading); font-size: var(--fs-md); color: var(--color-primary); }
.acct-subheader__actions { display: inline-flex; align-items: center; gap: var(--sp-3); }
.acct-link { color: var(--color-fg); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.acct-link:hover { color: var(--color-primary); }
.acct-subheader__signout { padding: 10px 20px; min-height: 0; font-size: 13px; }

.acct-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--color-bg-muted);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.acct-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.acct-nav__item svg { width: 16px; height: 16px; }
.acct-nav__item:hover { background: var(--color-card); color: var(--color-primary); }
.acct-nav__item.is-active {
  background: var(--color-primary);
  color: var(--btn-fg);
}
@media (max-width: 700px) { .acct-nav { flex-wrap: nowrap; } .acct-nav__item { flex-shrink: 0; } .acct-nav::-webkit-scrollbar { display: none; } }

.acct-page-wrap { background: var(--color-bg-muted); padding-bottom: var(--sp-7); }
.acct-shell.acct-shell { max-width: var(--container-wide); padding: var(--sp-4) var(--sp-4) var(--sp-7); }

.acct__greet { margin: 0 0 var(--sp-4); }
.acct__since {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.acct__greet h1 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); margin: 0 0 8px; }
.acct__lead { color: var(--color-muted); font-size: var(--fs-md); margin: 0; }
.acct__link {
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.acct__link:hover { color: var(--color-secondary); }

/* ============================================================
   SHOP TOOLBAR (search + category chips, amino-style)
   ============================================================ */
.shop-toolbar {
  padding: var(--sp-5) 0 var(--sp-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.shop-search {
  position: relative;
  max-width: 720px;
  margin: 0 auto var(--sp-4);
}
.shop-search input[type=search] {
  width: 100%;
  padding: 16px 18px 16px 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  background: var(--color-bg-muted);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-fg);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.shop-search input[type=search]:focus {
  border-color: var(--color-primary);
  background: var(--color-card);
  outline: 0;
}
.shop-search svg {
  position: absolute;
  left: 20px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--color-muted);
}
/* Mobile: hide the magnifying-glass icon and reclaim its left padding. */
@media (max-width: 600px) {
  .shop-search svg { display: none !important; }
  .shop-search input[type=search] { padding-left: 18px !important; }
}
.shop-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  border-radius: var(--r-pill);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.chip:hover { border-color: var(--color-border-strong); color: var(--color-primary); }
.chip.is-active {
  background: var(--color-primary);
  color: var(--btn-fg);
  border-color: var(--color-primary);
}
@media (max-width: 700px) {
  .shop-cats { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 var(--sp-3) var(--sp-2); margin: 0 calc(-1 * var(--sp-3)); }
  .shop-cats::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
}

/* ============================================================
   DOSE selector + dynamic price block (single product)
   ============================================================ */
.product-hero .price { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.product-hero .price__current { font-size: clamp(28px, 4vw, 38px); font-weight: 800; color: var(--color-primary); line-height: 1.05; }
.product-hero .price__per { font-size: 13px; color: var(--color-muted); font-weight: 600; }
.product-hero .price__bundle { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 14px; }
.product-hero .price__bundle-total strong { color: var(--color-primary); }
.product-hero .price__bundle-save { color: var(--color-secondary); font-weight: 700; }

.dose-select { margin: var(--sp-3) 0; }
.dose-select__label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 10px; }
.dose-select__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.dose-tile {
  background: var(--color-card); border: 2px solid var(--color-border); border-radius: var(--r-md);
  padding: 12px 10px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: border-color .15s ease, transform .1s ease;
}
.dose-tile:hover { border-color: var(--color-border-strong); }
.dose-tile.is-active { border-color: var(--color-primary); background: rgba(255,255,255,0.04); }
.dose-tile__label { font-weight: 700; color: var(--color-primary); font-size: 15px; }
.dose-tile__price { font-size: 13px; color: var(--color-muted); }
.dose-tile.is-active .dose-tile__price { color: var(--color-primary); font-weight: 700; }

/* ============================================================
   BUNDLE & SAVE tiles (single product)
   ============================================================ */
.bundle-save { margin: var(--sp-4) 0; }
.bundle-save__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
}
.bundle-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bundle-tile {
  position: relative;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 16px 14px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  font-family: var(--font-body);
}
.bundle-tile:hover { border-color: var(--color-border-strong); }
.bundle-tile.is-active { border-color: var(--color-primary); }
.bundle-tile__badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: var(--btn-fg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.bundle-tile--featured .bundle-tile__badge { background: var(--color-primary); color: var(--btn-fg); }
.bundle-tile__qty {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-primary);
  margin-bottom: 2px;
}
.bundle-tile__save {
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 600;
}
.bundle-tile.is-active .bundle-tile__save { color: var(--color-secondary); }
@media (max-width: 540px) { .bundle-tile { padding: 14px 10px 12px; } .bundle-tile__qty { font-size: var(--fs-md); } }

/* CoA outlined button beside Add-to-cart */
.product-actions { display: flex; gap: 10px; align-items: stretch; margin: var(--sp-3) 0; }
.product-actions .btn { flex: 1; }
.product-actions .btn-coa {
  flex: 0 0 auto;
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
  padding: 0 22px;
  font-weight: 700;
  border-radius: var(--r-md);
  min-height: 48px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.product-actions .btn-coa:hover { border-color: var(--color-primary); }

/* Delivery info row beneath cart form */
.product-delivery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: var(--sp-4) 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.product-delivery__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 500;
}
.product-delivery__item svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; }
@media (max-width: 600px) { .product-delivery { grid-template-columns: 1fr; gap: 8px; } }
/* ============================================================
   MOBILE OPTIMIZATION — applied per .agents/skills/mobile-optimization
   Cardinal rules + WC patterns. KEEP AT END OF STYLESHEET.
   ============================================================ */
@media (max-width: 782px) {
  /* ---- Cardinal: lock viewport, kill horizontal scroll ---- */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  *, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  img, svg, video, iframe, picture {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Exceptions: pin fixed-height brand marks so cardinal img:auto doesn't blow them up */
  .header-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 160px !important;
  }
  .footer-brand img {
    height: 40px !important;
    width: auto !important;
  }
  .vra-gate-logo {
    height: 56px !important;
    width: auto !important;
    max-width: 200px !important;
  }
  .container, .container--wide,
  .elementor-container, .elementor-section, .elementor-column,
  .site-content, .entry-content, .page-content {
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  p, h1, h2, h3, h4, h5, h6, li, td, span, a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* ---- Form inputs: kill iOS zoom + WCAG tap targets ---- */
  input[type=text], input[type=email], input[type=tel],
  input[type=password], input[type=number], input[type=search],
  input[type=date], select, textarea,
  .wc-block-components-text-input input,
  .wc-block-components-combobox input {
    font-size: 16px !important;          /* <16px = iOS auto-zoom */
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: var(--r-md) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  button, .btn, a.btn, input[type=submit] {
    min-height: 48px;
  }

  /* ---- WC blocks float-label fix (country/state) ---- */
  .wc-block-components-combobox-control__label,
  .wc-block-components-country-input label,
  .wc-block-components-state-input label {
    position: static !important;
    transform: none !important;
    display: block !important;
    margin: 0 0 6px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
  }

  /* ---- Shop grid: 2-up on phones (not 1 giant card, not 4-up cramped) ---- */
  .shop-grid, .woocommerce ul.products, .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .shop-card { padding: 0; }
  .shop-card-title { font-size: 14px !important; line-height: 1.25 !important; }
  .shop-card-price { font-size: 14px !important; }
  .shop-card-cta { font-size: 12px !important; padding: 10px 14px !important; }

  /* ---- Featured carousel: tighter on small screens ---- */
  .ftr-carousel { padding: 32px 0 40px !important; }
  .ftr-carousel__viewport { padding: 36px 0 !important; }
  .ftr-card { flex: 0 0 180px !important; border-radius: var(--r-lg) !important; }
  .ftr-card.is-active { transform: scale(1.12) !important; }
  .ftr-card__title { font-size: 14px !important; min-height: 32px !important; }
  .ftr-card__cta { display: none !important; }  /* hide on mobile, tap-anywhere */

  /* ---- Hero glove: ensure copy block has breathing room ---- */

  /* ---- Trust strip: more compact ---- */
  .trust-strip { font-size: 10px !important; padding: 7px 12px !important; }
  .trust-strip span { white-space: nowrap; }

  /* ---- Tier cards: tighten ---- */

  /* ---- Cart / checkout mobile polish (Place Order always reachable) ---- */
  .woocommerce-checkout-review-order { padding: 18px !important; }
  .woocommerce-checkout #place_order {
    font-size: 16px !important;
    padding: 16px 20px !important;
    min-height: 56px !important;
  }
  .cart-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  /* .cart-row mobile layout is defined in the max-width:600 block above (2-row grid) */

  /* ---- Footer: single column ---- */
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-brand img { height: 40px !important; }

  /* ---- FDA compliance banner: don't crash mobile viewport ---- */
  #svx-fda-banner { font-size: 9px !important; padding: 5px 10px !important; }

  /* ---- Sticky ATC always reachable ---- */
  body.single-product { padding-bottom: 92px !important; }

  /* ---- My Account: revert Elementor squash ---- */
  body.woocommerce-account .elementor-widget-wp-widget-woocommerce_my_account,
  body.woocommerce-account .woocommerce {
    display: revert !important;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; }
  body.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; margin-top: 16px !important; }
}

/* Small phones (≤480px) — emergency tightening */
@media (max-width: 480px) {
  .ftr-card { flex: 0 0 160px !important; }
  .container, .container--wide { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ============================================================
   MOBILE PASS v2 — header logo, trust marquee, mobile hero,
   single-product RUO topbar + sticky ATC ordering
   ============================================================ */


@media (prefers-reduced-motion: reduce) {
}

/* ---- Header logo sizing (wide 5.58:1 horizontal lockup — keep aspect, don't cap width below natural) ---- */
@media (max-width: 782px) {
  .header-logo img,
  .site-logo {
    height: 32px !important;
    width: auto !important;
    max-width: 220px !important;   /* 32px * 5.58 ≈ 179px natural, so this never binds/squishes */
    object-fit: contain !important;
  }
}

/* ---- MOBILE HERO: full-bleed image bg, text top-right ---- */
@media (max-width: 782px) {
  /* MOBILE HERO = full-screen image background, text + CTAs overlay it */
  .hero-glove {
    min-height: calc(100vh - 56px) !important;   /* fill the screen below header */
    background-image: url("assets/hero/hero-glove-mobile.png") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background-color: var(--color-bg-muted) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    position: relative;
  }
  /* Soft white-to-transparent gradient at top + bottom for text legibility on the image */
  .hero-glove::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 22%, rgba(255,255,255,0) 40%),
      linear-gradient(0deg,   rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 28%);
    z-index: 1;
  }
  /* Headline sits high; CTAs lifted up from bottom */
  /* Image grid-area kept empty (the section background is the image) */

  /* Hide cred chips on mobile (per user request earlier) */
  /* hide the desktop spacer column entirely on mobile (image is now the bg) */
}

/* ---- HAMBURGER MENU — header stays ABOVE menu; scroll-lock body when open ---- */
@media (max-width: 900px) {
  .site-header { z-index: 500 !important; position: sticky !important; top: 0 !important; }
  .header-nav {
    inset: 56px 0 0 0 !important;  /* drops right under the 56px header */
    z-index: 400 !important;
    background: var(--color-bg) !important;
    padding: 16px !important;
    max-height: calc(100vh - 56px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  }
  .header-nav.is-open { transform: translateX(0) !important; }
  .header-mobile-toggle { display: inline-flex !important; }
  /* Body scroll lock (CSS half — JS sets these classes/styles too for iOS) */
  body.nav-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  /* Hide the marquee while menu is open so it doesn't poke through the header z-stack */
}

/* ---- SINGLE-PRODUCT: top RUO topbar ---- */
.ruo-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-gold-soft);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 20px;
  text-align: left;
}
.ruo-topbar svg { color: var(--color-secondary); flex-shrink: 0; }
.ruo-topbar strong { font-weight: 800; }
@media (max-width: 782px) {
  .ruo-topbar { font-size: 12px; padding: 10px 14px; line-height: 1.4; }
}

/* ---- SINGLE-PRODUCT mobile: slightly smaller gallery image ---- */
@media (max-width: 782px) {
  .product-hero .gallery {
    max-width: 88% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .product-hero .gallery img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ---- Sticky ATC sits ABOVE the FDA banner; FDA banner shrinks on single-product ---- */
@media (max-width: 782px) {
  body.single-product .sticky-atc {
    bottom: 0 !important;        /* flush with bottom edge of viewport */
    z-index: 50 !important;       /* well below the cart drawer (which is 9990) */
  }
  body.single-product #svx-fda-banner {
    z-index: 40 !important;
    padding: 5px 8px !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
  }
  body.single-product { padding-bottom: 92px !important; }
  /* Hide the sticky ATC when the real Add-to-Cart button is in view */
  body.single-product.atc-in-view .sticky-atc {
    transform: translateY(calc(100% + 60px));
    transition: transform 0.3s var(--ease-out, ease-out);
    pointer-events: none;
  }
}

/* ---- MEMBERSHIP PAGE — land directly at the plans on mobile ---- */
@media (max-width: 782px) {
}

.cart-row__price .bundle-saved {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-success);
  background: rgba(111,191,140,0.12);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.cart-row__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }

/* ---- Quick-add buttons (bundle hints + featured cards) ---- */
.svx-quick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  margin-left: 8px;
  background: var(--color-secondary);
  color: var(--btn-fg);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  vertical-align: middle;
}
.svx-quick-add:hover { background: var(--color-primary); transform: translateY(-1px); }
.svx-quick-add:disabled { background: var(--color-muted); cursor: wait; transform: none; }
.svx-quick-add--mini { padding: 3px 9px; font-size: 11px; margin-left: 6px; }

/* ---- "Add more to your order" panel (checkout rail bottom) ---- */
.svx-checkout-addmore {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.svx-checkout-addmore__hdr {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  gap: 2px;
}
.svx-checkout-addmore__hdr h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: -0.005em;
}
.svx-checkout-addmore__hdr span {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 600;
}
.svx-checkout-addmore__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svx-checkout-addmore__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
}
.svx-checkout-addmore__item:last-child { border-bottom: 0; }
.svx-checkout-addmore__img {
  display: block;
  width: 44px; height: 44px;
  background: var(--color-bg-muted);
  border-radius: var(--r-md);
  overflow: hidden;
}
.svx-checkout-addmore__img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.svx-checkout-addmore__body { min-width: 0; }
.svx-checkout-addmore__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svx-checkout-addmore__price {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
}
.svx-checkout-addmore__price .woocommerce-Price-amount { color: var(--color-primary); font-weight: 700; }

/* Retire the old class to avoid double-render */
.svx-checkout-addmore { display: none; }
@keyframes svx-flash {
  0%   { box-shadow: 0 0 0 4px rgba(200,204,210,0); }
  35%  { box-shadow: 0 0 0 4px rgba(200,204,210,0.45); }
  100% { box-shadow: 0 0 0 4px rgba(200,204,210,0); }
}

/* ============================================================
   CHECKOUT MOBILE — sticky summary top, sticky pay CTA bottom,
   floating labels, real-time validation
   ============================================================ */
@media (max-width: 782px) {
  /* Make room for the sticky bottom Pay CTA (≈72px) */
  body.woocommerce-checkout { padding-bottom: 88px !important; }
  /* Strip the rail's desktop card styling on mobile (no border/padding/etc.)
     and make sure it cannot inherit any display:none from earlier rules.
     CRITICAL: snap grid-column back to 1 — the desktop `grid-column: 2` on a
     1-column mobile grid creates an implicit 2nd column that overflows the
     viewport (user had to rotate to landscape just to see the card form). */
  .svx-checkout-rail {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: static !important;        /* override sticky from desktop */
    top: auto !important;
    grid-column: 1 / -1 !important;     /* span the only mobile column */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* #order_review on mobile collapses to just its #payment child. */
  .svx-checkout-rail #order_review,
  body.woocommerce-checkout #order_review {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* BELT-AND-SUSPENDERS: force #payment + every payment method visible on mobile.
     If something else is hiding them, this wins via specificity + !important.
     Also constrain widths so nothing inside overflows the viewport. */
  body.woocommerce-checkout #payment,
  body.woocommerce-checkout #payment ul.payment_methods,
  body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
  body.woocommerce-checkout #payment .payment_box,
  body.woocommerce-checkout #payment .form-row.place-order,
  body.woocommerce-checkout #vra-express-wrap.vra-express-ready {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Mobile-tight padding on payment chrome so the card fields fit a 360px viewport
     (previous total inset of ~70px ate too much horizontal room). */
  body.woocommerce-checkout #payment ul.payment_methods {
    padding: 10px 12px !important;
  }
  body.woocommerce-checkout #payment .payment_box {
    padding: 12px 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Card fields: make sure they shrink with their container (Stripe Element).
     The plugin already uses flex with min-width:0, but force it across our overrides. */
  body.woocommerce-checkout .vra-card-form,
  body.woocommerce-checkout .vra-cc-row,
  body.woocommerce-checkout .vra-cc-col,
  body.woocommerce-checkout .vra-cc-field {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Tighter horizontal padding inside Stripe Element wrappers on mobile. */
  body.woocommerce-checkout .vra-cc-field {
    padding: 12px 12px !important;
  }
  /* Make sure the form itself doesn't have horizontal padding that compresses
     the payment box on narrow viewports. */
  body.woocommerce-checkout form.checkout,
  body.woocommerce-checkout form.woocommerce-checkout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Prevent horizontal scroll caused by any rogue child wider than viewport. */
  body.woocommerce-checkout { overflow-x: hidden !important; }

  /* Reorder children of form.checkout on mobile so Payment (rail) is FIRST
     and Shipping/Contact (#customer_details) is SECOND — matches the numbered
     section headers and puts Apple Pay above the fold. */
  body.woocommerce-checkout form.checkout,
  body.woocommerce-checkout form.woocommerce-checkout {
    display: flex !important;
    flex-direction: column !important;
  }
  body.woocommerce-checkout form.checkout > .svx-checkout-banners { order: 0 !important; }
  body.woocommerce-checkout form.checkout > .svx-checkout-rail     { order: 1 !important; }
  body.woocommerce-checkout form.checkout > #customer_details          { order: 2 !important; }
  body.woocommerce-checkout form.checkout > .woocommerce-additional-fields,
  body.woocommerce-checkout form.checkout > .woocommerce-shipping-fields { order: 3 !important; }
  /* …except the wrap until vra-express.js calls show() (it adds .vra-express-ready). */
  /* Sticky bottom Pay CTA sits over content at z-index 9000. Ensure the
     checkout form has enough bottom padding so #payment (now at the bottom of
     the form on mobile) is never covered. Bumped from 88/100 -> 140. */
  body.woocommerce-checkout form.checkout,
  body.woocommerce-checkout form.woocommerce-checkout {
    padding-bottom: 140px !important;
  }

  /* ============================================================
     MOBILE FIX (2026-06-25) — Stripe Payment Element gap + billing input box
     ============================================================ */

  /* 1) STRIPE PAYMENT ELEMENT — clamp the huge empty space.
     Stripe / VRA wrappers were getting auto-sized to enormous heights
     because nothing was telling them their natural content height was OK. */
  body.woocommerce-checkout .payment_box .StripeElement,
  body.woocommerce-checkout .payment_box [class^="vra-"],
  body.woocommerce-checkout .payment_box [id^="vra-"],
  body.woocommerce-checkout .vra-card-form,
  body.woocommerce-checkout .vra-cc-row,
  body.woocommerce-checkout .vra-cc-col,
  body.woocommerce-checkout .vra-cc-field,
  body.woocommerce-checkout .vra-card-form > div,
  body.woocommerce-checkout .vra-card-form > * {
    min-height: 0 !important;
    height: auto !important;
  }
  /* Stripe injects iframes for the inline Payment Element. They self-report
     their height via postMessage; just make sure we're not forcing a min. */
  body.woocommerce-checkout iframe[name^="__privateStripeFrame"],
  body.woocommerce-checkout iframe[name^="__privateStripeMetricsController"] {
    min-height: 0 !important;
  }
  /* The individual Stripe field wrappers (card number / expiration / cvc)
     should be exactly tall enough for the iframe inside — no extra padding
     stacking on top. */
  body.woocommerce-checkout .vra-cc-field {
    padding: 0 !important;
    min-height: 0 !important;
  }
  /* The express-pay wallet block above "OR" — tight padding so the wallet
     button is flush against the divider. */
  body.woocommerce-checkout .vra-express-pay,
  body.woocommerce-checkout [class*="express-pay"],
  body.woocommerce-checkout [class*="wallet"] {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }
  /* The OR divider — tight spacing on both sides. */
  body.woocommerce-checkout .vra-or-divider,
  body.woocommerce-checkout [class*="-divider"] {
    margin: 12px 0 !important;
  }

  /* DEFENSIVE: every non-iframe descendant of .payment_box has min-height:0 +
     auto height, so nothing in our CSS or VRA's can pin them tall. Excludes
     buttons / inputs (which have their own height rules) and iframes
     (Stripe sizes those internally via postMessage). */
  body.woocommerce-checkout .payment_box div,
  body.woocommerce-checkout .payment_box section,
  body.woocommerce-checkout .payment_box span,
  body.woocommerce-checkout .payment_box label,
  body.woocommerce-checkout .payment_box p,
  body.woocommerce-checkout .payment_box ul,
  body.woocommerce-checkout .payment_box li {
    min-height: 0 !important;
    height: auto !important;
  }
  /* Stripe Express Checkout Element + Payment Element wrappers (kie may emit
     these classes from the newer Stripe SDK — covering both spellings). */
  body.woocommerce-checkout #wc-stripe-express-checkout-element,
  body.woocommerce-checkout #wc-stripe-payment-element,
  body.woocommerce-checkout [id*="payment-element"],
  body.woocommerce-checkout [id*="express-checkout-element"],
  body.woocommerce-checkout .wp-block-woocommerce-checkout-express-payment-block {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* ============================================================
     STRIPE IFRAME HARD CLAMPS — this is what was missing.
     The iframes Stripe injects inside .vra-cc-field and
     #vra-express-checkout self-set height via inline attribute /
     postMessage. Without these clamps the wallet iframe inflates
     to 200-300px and the card-input iframes carry empty bottom area.
     The button height set in vra-express.js is 46px, so a 50px clamp
     gives 4px breathing room. Card inputs are single-line so 40px.
     ============================================================ */
  body.woocommerce-checkout #vra-express-checkout {
    height: 50px !important;
    max-height: 50px !important;
    overflow: hidden !important;
  }
  body.woocommerce-checkout #vra-express-checkout > div,
  body.woocommerce-checkout #vra-express-checkout iframe,
  body.woocommerce-checkout #vra-express-checkout .StripeElement,
  body.woocommerce-checkout #vra-express-checkout .__PrivateStripeElement {
    height: 50px !important;
    max-height: 50px !important;
    min-height: 50px !important;
  }
  body.woocommerce-checkout .vra-cc-field {
    height: 48px !important;
    max-height: 48px !important;
    min-height: 48px !important;
    overflow: hidden !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    background: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 10px !important;
  }
  /* Let the Stripe iframe/element size to ITS natural content height; the
     flex parent vertically centers it. Forcing the iframe to 100% height made
     Stripe paint the placeholder at the top of an oversized box. */
  body.woocommerce-checkout .vra-cc-field > *,
  body.woocommerce-checkout .vra-cc-field iframe,
  body.woocommerce-checkout .vra-cc-field .StripeElement,
  body.woocommerce-checkout .vra-cc-field .__PrivateStripeElement {
    width: 100% !important;
    height: auto !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* The 22px bottom margin VRA puts on the express-wrap (inline CSS) is
     unnecessary on mobile — tighten it. */
  body.woocommerce-checkout #vra-express-wrap.vra-express-wrap {
    margin: 0 0 14px !important;
  }
  body.woocommerce-checkout .vra-express-or {
    margin: 14px auto 10px !important;
  }

  /* 2) BILLING INPUTS — KILL the floating-label gymnastics on mobile.
     Use a plain stacked layout: label ABOVE input, input ALWAYS 48px tall
     with text vertically centered. Bulletproof. */
  body.woocommerce-checkout .form-row {
    position: static !important;          /* defeat the absolute-label setup */
    padding: 0 !important;
    margin: 0 0 14px !important;
    display: block !important;
  }
  body.woocommerce-checkout .form-row > label,
  body.woocommerce-checkout .form-row label[for] {
    position: static !important;
    display: block !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 0 6px !important;          /* small gap between label and input */
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  /* Input: exactly 48px, text vertically centered, no extra padding. */
  body.woocommerce-checkout .form-row input,
  body.woocommerce-checkout .form-row input.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="number"],
  body.woocommerce-checkout .form-row input[type="password"],
  body.woocommerce-checkout .form-row select {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--r-md) !important;
    background: var(--color-card) !important;
    color: var(--color-fg) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
  }
}
/* Mobile: the native Place Order button MUST be visible + tappable. (The old sticky
   "Pay" CTA that used to submit the form on its behalf was removed, so hiding this
   button left mobile with no way to place the order.) Show it full-width. */
@media (max-width: 782px) {
  body.woocommerce-checkout #place_order {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 56px !important;
    margin: 10px 0 0 !important;
    padding: 16px 22px !important;
    clip: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 16px !important;
    border: 0 !important;
    z-index: 1 !important;
  }
}

/* FLOATING LABELS — label sits absolutely over input center, floats above on focus/fill.
   Max specificity + explicit overrides so nothing else can fight this. */
body.woocommerce-checkout .form-row {
  position: relative;
  padding-top: 14px !important;
  overflow: visible !important;
  margin-bottom: 14px !important;
  display: block !important;
}
body.woocommerce-checkout .form-row > label,
body.woocommerce-checkout .form-row label[for] {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 !important;
  padding: 0 4px !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 2 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-muted) !important;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0 !important;
  transition: top 0.15s var(--ease-out),
              font-size 0.15s var(--ease-out),
              color 0.15s var(--ease-out),
              background 0.15s var(--ease-out);
}
body.woocommerce-checkout .form-row.is-filled > label,
body.woocommerce-checkout .form-row.is-focused > label,
body.woocommerce-checkout .form-row.woocommerce-invalid > label,
body.woocommerce-checkout .form-row.is-filled label[for],
body.woocommerce-checkout .form-row.is-focused label[for],
body.woocommerce-checkout .form-row.woocommerce-invalid label[for] {
  top: 14px !important;
  color: var(--color-primary) !important;
  background: var(--color-card) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
body.woocommerce-checkout .form-row.woocommerce-invalid > label,
body.woocommerce-checkout .form-row.woocommerce-invalid label[for] { color: var(--color-destructive) !important; }
body.woocommerce-checkout .form-row .required { color: var(--color-destructive); font-weight: 800; }

/* Error state: hide the checkout plugin's per-field duplicate error lines (the top
   notice already lists every error) and just mark invalid fields with a red border,
   so nothing overlaps the floating labels. */
body.woocommerce-checkout .checkout-inline-error-message { display: none !important; }
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--color-destructive) !important;
  box-shadow: 0 0 0 1px var(--color-destructive) inset !important;
}

/* Hide native input placeholders — they conflict with floating labels */
.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder { color: transparent !important; }

/* Input vertical centering inside the 48px box.
   High specificity (body.woocommerce-checkout + .form-row + input) so it beats
   the mobile cardinal `input { padding: 12px 14px !important }` rule. */
body.woocommerce-checkout .form-row input.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="number"],
body.woocommerce-checkout .form-row input[type="password"],
body.woocommerce-checkout .form-row select {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;          /* horizontal only — vertical centering via line-height */
  line-height: 48px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* All field wrappers in the billing/shipping grid share the same left edge.
   Reset margins/padding on the input wrappers so nothing shifts horizontally. */
body.woocommerce-checkout .form-row .woocommerce-input-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
body.woocommerce-checkout .form-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  justify-self: stretch;
  align-self: start;
}
/* Select2 (State dropdown) must align with the other inputs — same left edge */
body.woocommerce-checkout .form-row .select2-container,
body.woocommerce-checkout .form-row .select2-container--default {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
body.woocommerce-checkout .form-row .select2-container .select2-selection--single {
  width: 100% !important;
  margin: 0 !important;
}
/* Textarea (order notes) — proper bounds, no overflow */
.woocommerce-checkout .form-row textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 96px !important;
  padding: 14px !important;
  line-height: 1.45 !important;
  font-size: 14px !important;
  resize: vertical;
  box-sizing: border-box !important;
  display: block;
}
/* Textarea wrapper must allow it to fit */
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout .form-row.notes .woocommerce-input-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
/* Tall textarea row needs more top padding so label clears */
.woocommerce-checkout .form-row.notes label {
  top: 28px;                        /* sits at top of textarea */
}
.woocommerce-checkout .form-row.notes.is-filled label,
.woocommerce-checkout .form-row.notes.is-focused label {
  top: 14px;
}

/* Select2 dropdown styling for state field */
.woocommerce-checkout .select2-container .select2-selection--single {
  height: 48px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--r-md) !important;
  padding: 0 14px !important;
  background: var(--color-card) !important;
}
.woocommerce-checkout .select2-container .select2-selection__rendered {
  line-height: 46px !important;
  color: var(--color-fg) !important;
  font-size: 15px !important;
  padding: 0 !important;
}
.woocommerce-checkout .select2-container .select2-selection__arrow {
  height: 46px !important;
  right: 8px !important;
}
.woocommerce-checkout .select2-container--open .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px var(--color-gold-soft) !important;
}
.select2-dropdown {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.18) !important;
  overflow: hidden;
}
.select2-results__option { padding: 10px 14px !important; font-size: 14px !important; }
.select2-results__option--highlighted { background: var(--color-bg-muted) !important; color: var(--color-primary) !important; }

/* Country = locked chip, not a dropdown */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field {
  background: var(--color-bg-muted);
  border-radius: var(--r-md);
  padding: 10px 14px !important;
}
.woocommerce-checkout #billing_country_field > label,
.woocommerce-checkout #shipping_country_field > label { display: none !important; }
.woocommerce-checkout #billing_country_field .woocommerce-input-wrapper,
.woocommerce-checkout #shipping_country_field .woocommerce-input-wrapper {
  display: flex; align-items: center; gap: 10px;
}
.woocommerce-checkout #billing_country_field .woocommerce-input-wrapper::before,
.woocommerce-checkout #shipping_country_field .woocommerce-input-wrapper::before {
  content: "Shipping to: United States";
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}
.woocommerce-checkout #billing_country_field select,
.woocommerce-checkout #shipping_country_field select,
.woocommerce-checkout #billing_country_field .select2-container,
.woocommerce-checkout #shipping_country_field .select2-container {
  display: none !important;
}

/* Real-time validation states */
.woocommerce-checkout .form-row.is-valid input,
.woocommerce-checkout .form-row.is-valid select {
  border-color: var(--color-success) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FBF8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px !important;
}
.woocommerce-checkout .form-row.is-invalid input,
.woocommerce-checkout .form-row.is-invalid select {
  border-color: var(--color-destructive) !important;
}
.woocommerce-checkout .form-row.is-invalid::after {
  content: "Please check this field";
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-destructive);
  font-weight: 600;
}

/* Estimated arrival row in the order review table */
tr.svx-eta th { font-weight: 600; color: var(--color-muted); }
tr.svx-eta td { color: var(--color-primary); font-weight: 700; }

/* Bottom padding on mobile so the sticky Pay CTA doesn't cover the last form field */
@media (max-width: 980px) {
  body.woocommerce-checkout form.checkout {
    padding-bottom: 100px !important;
  }
}
/* Failsafe: prevent any stale collapse rule from ever hiding billing */
body.svx-card-collapsed #customer_details,
body.svx-card-collapsed .woocommerce-additional-fields { display: block !important; }

/* NOTE: The "Quick Checkout" panel (#svx-express + .svx-express__*) used
   to live here and was paired with liftExpressCheckout() in main.js. Both have
   been removed — the Verified Access plugin renders the Apple Pay / Google Pay
   button INSIDE its card payment box (above the card fields, with an "OR"
   divider) starting in 1.0.45. The mobile CSS below visually elevates the
   entire payment box to the top of the checkout so wallet users see Apple Pay
   first — purely visual, never DOM-move (Stripe iframes need stable mounts). */

/* =============================================================
   MOBILE CHECKOUT — conversion optimization (SAFE PASS)
   Pulled the visual reorder + payment-box restyle + single-gateway radio
   hide, since one of them was making payment options disappear. Keeping
   the harmless wins: 16px no-zoom, trust badge, tighter spacing,
   collapse-optional-fields toggles, section headers, large tap targets.
   ============================================================= */
@media (max-width: 980px) {
  /* iOS auto-zoom kicks in on input focus when font-size < 16px. Force 16px
     on every form input so the page never zooms in and breaks the layout. */
  body.woocommerce-checkout form.checkout input[type="text"],
  body.woocommerce-checkout form.checkout input[type="email"],
  body.woocommerce-checkout form.checkout input[type="tel"],
  body.woocommerce-checkout form.checkout input[type="number"],
  body.woocommerce-checkout form.checkout input[type="password"],
  body.woocommerce-checkout form.checkout select,
  body.woocommerce-checkout form.checkout textarea,
  body.woocommerce-checkout .select2-selection__rendered,
  body.woocommerce-checkout .select2-selection {
    font-size: 16px !important;
  }

  /* Trust + express-availability hint (injected by JS above the payment box). */
  .svx-mobile-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
  }
  .svx-mobile-trust svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .svx-mobile-trust.is-express {
    background: var(--color-card);
    color: var(--color-fg);
  }
  .svx-mobile-trust .svx-trust-lab { letter-spacing: -0.005em; }

  /* Tighter form spacing on mobile saves ~1 screen of scroll. KEEP padding-top:8px
     on form-row so the floating label has room to sit on the input's top border. */
  body.woocommerce-checkout form.checkout .form-row {
    margin: 0 0 12px !important;
    padding: 8px 0 0 !important;
  }
  body.woocommerce-checkout form.checkout h3 {
    font-size: 17px !important;
    margin: 0 0 12px !important;
    padding-bottom: 8px !important;
  }
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #order_review {
    margin-bottom: 18px !important;
  }
  /* Inputs: exact 48px tall, line-height-centered text, no vertical padding.
     (Was: min-height:46 + padding:12px 14px — that pushed text to the bottom
     of a too-tall box and gave us the "label outside / value at bottom" bug.) */
  body.woocommerce-checkout form.checkout input,
  body.woocommerce-checkout form.checkout select,
  body.woocommerce-checkout form.checkout textarea {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
    padding: 0 14px !important;
    border-radius: var(--r-md) !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-checkout form.checkout textarea {
    max-height: none !important;
    line-height: 1.4 !important;
    padding: 12px 14px !important;
  }

  /* Hide optional fields behind toggle links (injected by JS). */
  body.woocommerce-checkout form.checkout .form-row.is-collapsed { display: none !important; }
  .svx-field-toggle {
    display: inline-block;
    margin: -4px 0 12px;
    padding: 4px 0;
    background: transparent;
    border: 0;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .svx-field-toggle:hover { opacity: 0.7; }

  /* Section headers — visual chunking. JS injects markers; CSS styles them. */
  .svx-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--color-bg-muted);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .svx-section-head .svx-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: var(--color-primary);
    color: var(--btn-fg);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
  }
}

/* ---- Checkout banner row at top (desktop) ---- */
.svx-checkout-banners {
  grid-column: 1 / -1 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.svx-checkout-banners > div { margin: 0 !important; }
/* On mobile, also stack the banners above everything; sticky summary still shows separately */
@media (max-width: 980px) {
  .svx-checkout-banners { margin-bottom: 0; }
}

/* ============================================================
   EDUCATION HUB + ARTICLE
   ============================================================ */
.edu-hero {
  background: linear-gradient(180deg, var(--color-bg-muted) 0%, var(--color-bg) 100%);
  padding: clamp(48px, 7vw, 80px) 0 32px;
  text-align: center;
}
.edu-hero__eyebrow {
  display: inline-block; color: var(--color-secondary);
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px;
}
.edu-hero__title {
  font-family: var(--font-heading); font-size: clamp(36px, 5vw, 56px);
  font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary);
  margin: 0 0 14px;
}
.edu-hero__lead {
  color: var(--color-muted); font-size: 17px; line-height: 1.6;
  max-width: 680px; margin: 0 auto 32px;
}
.edu-search {
  position: relative; max-width: 640px; margin: 0 auto;
}
.edu-search svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--color-muted);
}
.edu-search input {
  width: 100%; padding: 16px 18px 16px 48px;
  border: 1.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-card); font-family: var(--font-body); font-size: 15px;
  color: var(--color-fg); transition: border-color .15s ease;
}
.edu-search input:focus { outline: none; border-color: var(--color-primary); }

.edu-filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 22px;
}
.edu-filter {
  background: var(--color-card); color: var(--color-primary);
  border: 1.5px solid var(--color-border); border-radius: 999px;
  padding: 8px 18px; font-family: var(--font-body); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.edu-filter:hover { border-color: var(--color-border-strong); }
.edu-filter.is-active {
  background: var(--color-primary); color: var(--btn-fg); border-color: var(--color-primary);
}

.edu-grid-section { padding: 48px 0 80px; }
.edu-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.edu-card {
  background: var(--color-card); border: 1.5px solid var(--color-border);
  border-radius: var(--r-md); padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.edu-card:hover {
  transform: translateY(-4px); border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.edu-card__cat {
  display: inline-block; align-self: flex-start;
  background: rgba(200,204,210, 0.08); color: var(--color-secondary);
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px;
}
.edu-card__title {
  font-family: var(--font-heading); font-size: 19px; font-weight: 700;
  color: var(--color-primary); letter-spacing: -0.01em; line-height: 1.3;
  margin: 0;
}
.edu-card__excerpt {
  color: var(--color-muted); font-size: 14px; line-height: 1.55;
  margin: 0; flex: 1;
}
.edu-card__cta {
  color: var(--color-secondary); font-weight: 700; font-size: 14px;
  margin-top: 4px;
}
.edu-empty, .edu-noresults {
  text-align: center; color: var(--color-muted);
  padding: 60px 20px; font-size: 16px;
}
@media (max-width: 980px) { .edu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .edu-grid { grid-template-columns: 1fr; } }

/* Article page */
.edu-article { padding: var(--section-pad) 0; background: var(--color-bg); }
.edu-crumbs {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; margin-bottom: 24px;
}
.edu-crumbs a {
  color: var(--color-secondary); text-decoration: none; font-weight: 600;
}
.edu-crumbs a:hover { text-decoration: underline; }
.edu-crumbs__cat {
  display: inline-block; background: rgba(200,204,210, 0.08);
  color: var(--color-secondary); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
}
.edu-article__title {
  font-family: var(--font-heading); font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary);
  margin: 0 0 28px; line-height: 1.15;
}
.edu-article__ruo {
  background: var(--color-gold-soft); border-left: 4px solid var(--color-primary);
  padding: 14px 18px; border-radius: 4px; font-size: 14px;
  color: var(--color-fg); margin-bottom: 36px; line-height: 1.55;
}
.edu-article__ruo strong { color: var(--color-primary); }
.edu-article__body { color: var(--color-fg); line-height: 1.7; font-size: 16px; }
.edu-article__body h2 {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
  color: var(--color-primary); letter-spacing: -0.01em;
  margin: 36px 0 14px;
}
.edu-article__body p { margin: 0 0 16px; color: var(--color-fg); }
.edu-article__body ul, .edu-article__body ol { margin: 0 0 20px 22px; color: var(--color-fg); }
.edu-article__body li { margin-bottom: 8px; line-height: 1.55; }
.edu-article__body a { color: var(--color-secondary); text-decoration: underline; word-break: break-word; }
.edu-article__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-border); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section { padding: var(--section-pad) 0; background: var(--color-bg); }
.contact-hero { text-align: center; margin-bottom: 36px; }
.contact-hero__eyebrow {
  display: inline-block; color: var(--color-secondary);
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px;
}
.contact-hero__title {
  font-family: var(--font-heading); font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary);
  margin: 0 0 14px;
}
.contact-hero__lead {
  color: var(--color-muted); font-size: 17px; line-height: 1.6;
  max-width: 580px; margin: 0 auto;
}

.contact-flash {
  padding: 14px 18px; border-radius: var(--r-md); font-size: 14px; font-weight: 500;
  margin-bottom: 24px;
}
.contact-flash--success { background: rgba(111,191,140,0.12); color: var(--color-success); border-left: 4px solid var(--color-success); }
.contact-flash--error   { background: rgba(217,106,95,0.12); color: var(--color-destructive); border-left: 4px solid var(--color-destructive); }

.contact-coa-callout {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(200,204,210, 0.06); border-left: 4px solid var(--color-secondary);
  padding: 16px 18px; border-radius: var(--r-md); margin-bottom: 24px;
  color: var(--color-fg); font-size: 14px; line-height: 1.5;
}
.contact-coa-callout svg { color: var(--color-secondary); flex-shrink: 0; margin-top: 1px; }
.contact-coa-callout strong { display: block; font-weight: 700; margin-bottom: 2px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label, .contact-form__label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--color-primary); letter-spacing: 0.02em;
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 15px;
  color: var(--color-fg); background: var(--color-card);
  border: 1.5px solid var(--color-border); border-radius: var(--r-md);
  font-weight: 400; line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-gold-soft);
}
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form__submit {
  align-self: flex-start; margin-top: 8px;
  display: inline-flex; align-items: center;
}
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }

.contact-aside {
  margin-top: 48px; padding: 28px 30px;
  background: var(--color-bg-muted); border-radius: var(--r-lg);
  display: flex; gap: 48px; flex-wrap: wrap;
}
.contact-aside__item { display: flex; flex-direction: column; gap: 4px; }
.contact-aside__label {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
.contact-aside__value {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  color: var(--color-primary); text-decoration: none;
}
a.contact-aside__value:hover { color: var(--color-secondary); }

/* ============================================================
   MOBILE CHECKOUT AUDIT FIX (2026-06-25)
   Last-in-file so source order beats earlier conflicting rules.
   Addresses:
     - "Last name *" label floating outside its box (stacked-label fix)
     - Duplicate "Order summary" heading
     - "View add-ons" button doing nothing (target was display:none)
     - Inconsistent flow order
   ============================================================ */
@media (max-width: 980px) {

  /* 1) STACKED LABELS — defeat the absolute-positioned floating-label rules
     defined earlier in this file. Labels above inputs, inputs always 48px. */
  body.woocommerce-checkout .form-row {
    position: static !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    display: block !important;
  }
  body.woocommerce-checkout .form-row > label,
  body.woocommerce-checkout .form-row label[for] {
    position: static !important;
    display: block !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
  body.woocommerce-checkout .form-row input,
  body.woocommerce-checkout .form-row select,
  body.woocommerce-checkout .form-row input.input-text {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--r-md) !important;
    background: var(--color-card) !important;
    color: var(--color-fg) !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 2) NO DUPLICATE "Order summary" heading. My mobile-summary card at the
     top already shows the line items + total — the WC native heading is
     redundant. Hide it regardless of nesting depth. */
  body.woocommerce-checkout #order_review_heading {
    display: none !important;
  }

  /* 5) "TAP APPLE PAY ABOVE" pre-payment hint — currently rendered as a
     full-width card with chunky padding; tighten so it doesn't double-up
     visually with the actual payment box. */
  body.woocommerce-checkout .svx-mobile-trust,
  body.woocommerce-checkout [class*="apple-pay-hint"] {
    margin: 0 0 14px !important;
  }

  /* ============================================================
     MOBILE CHECKOUT TOP COMPACTION (2026-06-25)
     Shrink "Checkout" h1, group callouts close together,
     remove visual chrome where it adds bulk.
     ============================================================ */
  /* Smaller "Checkout" page heading */
  body.woocommerce-checkout h1.entry-title,
  body.woocommerce-checkout .page-title,
  body.woocommerce-checkout main h1 {
    font-size: 24px !important;
    margin: 8px 0 12px !important;
    line-height: 1.15 !important;
  }
  /* Coupon notice — thinner */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle,
  body.woocommerce-checkout .woocommerce-info {
    padding: 8px 12px !important;
    margin: 0 0 8px !important;
    font-size: 12.5px !important;
    border-radius: var(--r-md) !important;
    border-width: 0 0 0 3px !important;
  }
  /* Step dots — slightly less top spacing so the form starts higher */
  body.woocommerce-checkout .svx-steps {
    margin: 0 0 14px !important;
  }

  /* LOCK horizontal scroll on mobile cart + checkout (no side-swipe) */
  body.woocommerce-cart,
  body.woocommerce-checkout {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
    position: relative !important;
  }
  html { overflow-x: hidden !important; max-width: 100vw !important; }
  body.woocommerce-cart > *,
  body.woocommerce-checkout > * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-cart .container,
  body.woocommerce-checkout .container,
  body.woocommerce-cart main,
  body.woocommerce-checkout main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Move EVERYTHING up — kill top padding on the main wrapper + page */
  body.woocommerce-checkout .page-wrap,
  body.woocommerce-checkout main,
  body.woocommerce-checkout .container--narrow,
  body.woocommerce-checkout .container {
    padding-top: 8px !important;
  }
  body.woocommerce-checkout h1.entry-title,
  body.woocommerce-checkout .page-title,
  body.woocommerce-checkout main h1 {
    margin: 0 0 10px !important;
    font-size: 22px !important;
  }

  /* ============================================================
     MULTI-STEP CHECKOUT (mobile) — Shipping → Payment
     ============================================================ */
  body.woocommerce-checkout .svx-steps {
    margin: 0 0 22px !important;
    padding: 6px 0 0;
  }
  body.woocommerce-checkout .svx-steps__row {
    display: flex; align-items: center; justify-content: center; gap: 0;
    max-width: 320px; margin: 0 auto;
  }
  body.woocommerce-checkout .svx-steps__dot {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex: 0 0 auto;
  }
  body.woocommerce-checkout .svx-steps__dot span {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-border-strong); color: var(--color-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 13px; font-weight: 800;
    transition: background .2s ease, color .2s ease;
  }
  body.woocommerce-checkout .svx-steps__dot label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-muted);
    transition: color .2s ease;
  }
  body.woocommerce-checkout .svx-steps__dot.is-active span,
  body.woocommerce-checkout .svx-steps__dot.is-done span {
    background: var(--color-primary); color: var(--btn-fg);
  }
  body.woocommerce-checkout .svx-steps__dot.is-active label {
    color: var(--color-primary);
  }
  body.woocommerce-checkout .svx-steps__line {
    flex: 1; height: 2px; background: var(--color-border-strong); margin: 0 12px; margin-top: -16px;
  }
  body.woocommerce-checkout .svx-steps__dot.is-done ~ .svx-steps__line,
  body.woocommerce-checkout .svx-steps__row:has(.is-done) .svx-steps__line {
    background: var(--color-primary);
  }

  /* Step containers — only the active one is visible */
  body.woocommerce-checkout .svx-step { display: none !important; }
  body.woocommerce-checkout .svx-step.is-active { display: block !important; }

  /* Continue-to-payment button at the end of step 1 */
  body.woocommerce-checkout .svx-step-continue {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: 18px 0 8px;
    padding: 16px 22px;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 0; border-radius: var(--r-md);
    font-family: var(--font-body); font-size: 15px; font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer; transition: opacity .15s ease;
  }
  body.woocommerce-checkout .svx-step-continue:hover { opacity: 0.92; }

  /* Back-to-shipping link at the top of step 2 */
  body.woocommerce-checkout .svx-step-back {
    background: transparent; border: 0; padding: 0; margin: 0 0 14px;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-secondary);
    font-family: var(--font-body); font-size: 14px; font-weight: 700;
    cursor: pointer;
  }
  body.woocommerce-checkout .svx-step-back:hover { color: var(--color-primary); }
}

/* WC checkout coupon form (after the "Have a coupon?" toggle expands) */
body.woocommerce-checkout .checkout_coupon,
body.woocommerce-checkout .woocommerce-form-coupon {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 6px 0 10px !important;
  border-radius: var(--r-md) !important;
  background: var(--color-bg-muted) !important;
  border: 1px solid var(--color-border) !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
body.woocommerce-checkout .checkout_coupon p.form-row-first,
body.woocommerce-checkout .woocommerce-form-coupon p.form-row-first,
body.woocommerce-checkout .checkout_coupon .form-row,
body.woocommerce-checkout .woocommerce-form-coupon .form-row {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-checkout .checkout_coupon input[type="text"],
body.woocommerce-checkout .woocommerce-form-coupon input[type="text"] {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 12px !important;
  border-radius: var(--r-md) !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 38px !important;
}
body.woocommerce-checkout .checkout_coupon button,
body.woocommerce-checkout .woocommerce-form-coupon button {
  flex: 0 0 auto !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: var(--r-md) !important;
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
body.woocommerce-checkout .checkout_coupon p:not(.form-row),
body.woocommerce-checkout .woocommerce-form-coupon p:not(.form-row) { display: none !important; }

/* ============================================================
   CHECKOUT-ONLY MINIMAL HEADER
   Back arrow on the left → home, logo centered, nothing else.
   ============================================================ */
body.woocommerce-checkout .site-header {
  border-bottom: 1px solid var(--color-border) !important;
  background: var(--color-bg) !important;
}
body.woocommerce-checkout .site-header .header-inner {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 10px 14px !important;
}
/* Hide everything except logo + the injected back arrow */
body.woocommerce-checkout .site-header .header-nav,
body.woocommerce-checkout .site-header .header-cart,
body.woocommerce-checkout .site-header .header-account,
body.woocommerce-checkout .site-header [class*="cart"],
body.woocommerce-checkout .site-header [class*="account"],
body.woocommerce-checkout .site-header .mobile-nav-toggle,
body.woocommerce-checkout .site-header .hamburger,
body.woocommerce-checkout .site-header nav,
body.woocommerce-checkout .apex-trust-strip,
body.woocommerce-checkout #vra-express-wrap.vra-express-wrap[style*="display:none"] {
  display: none !important;
}
body.woocommerce-checkout .site-header .header-logo {
  grid-column: 2 !important;
  justify-self: center !important;
  margin: 0 !important;
}
body.woocommerce-checkout .site-header .header-logo img,
body.woocommerce-checkout .site-header .header-logo .site-logo {
  max-height: 36px !important; width: auto !important;
}

/* Back-arrow link injected via JS */
.svx-checkout-back {
  grid-column: 1 !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important; gap: 4px !important;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-bg-muted);
  color: var(--color-primary);
  text-decoration: none;
  justify-content: center;
}
.svx-checkout-back svg { width: 18px; height: 18px; }
.svx-checkout-back:hover { background: var(--color-primary); color: var(--btn-fg); }

/* OVERRIDE: logo now right-aligned (was center), no hamburger. */
body.woocommerce-checkout .site-header .header-inner {
  grid-template-columns: auto 1fr auto !important;
}
body.woocommerce-checkout .site-header .header-logo {
  grid-column: 3 !important;
  justify-self: end !important;
}
/* Hamburger gone from checkout at EVERY breakpoint, top-level + nested. */
body.woocommerce-checkout .mobile-nav-toggle,
body.woocommerce-checkout .hamburger,
body.woocommerce-checkout [class*="hamburger"],
body.woocommerce-checkout [class*="menu-toggle"],
body.woocommerce-checkout #mobile-nav,
body.woocommerce-checkout .nav-toggle,
body.woocommerce-checkout button[aria-label*="menu" i],
body.woocommerce-checkout button[aria-label*="Menu" i] {
  display: none !important;
}

/* WC native applied-coupons row on checkout — minor cleanup so removing a coupon
   from there also looks consistent (and so the ugly default chips don't double-render) */
body.woocommerce-checkout .cart-discount,
body.woocommerce-checkout .cart_totals .woocommerce-remove-coupon {
  font-size: 13px;
}
body.woocommerce-checkout .woocommerce-remove-coupon {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(217,106,95, 0.08);
  color: var(--color-destructive);
  border-radius: 999px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}


/* =====================================================================
   SYNVEXA REDESIGN LAYER (2026-06-26) - distinct from LOTF base.
   image-forward cards, category tiles, CTA band.
   ===================================================================== */

/* kill LOTF signature components */

/* slim static announcement bar */
.announce-bar { background: var(--color-bg-muted); color: var(--color-fg); font-size: 12.5px; letter-spacing: .02em; }
.announce-bar__inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; flex-wrap: wrap; }
.announce-bar__item { opacity: .92; }
.announce-bar__dot { color: var(--color-secondary); }
@media (max-width: 600px){ .announce-bar__inner > *:not(:first-child){ display: none; } }

/* asymmetric editorial hero */
.svx-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--color-bg-muted) 0%, var(--color-bg) 100%); }
.svx-hero::after { content:""; position:absolute; right:4%; top:18%; width:560px; height:560px; background: radial-gradient(circle, var(--color-gold-soft), transparent 70%); pointer-events:none; }
.svx-hero__molecule { position:absolute; right:-60px; top:-40px; width:min(480px, 44vw); height:auto; color: var(--color-primary); opacity:.07; pointer-events:none; }
.svx-hero__inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; min-height: clamp(460px, 62vh, 640px); padding: var(--sp-6) 0 var(--sp-7); z-index: 1; }
.svx-hero__copy { max-width: 640px; }
.svx-hero__eyebrow { display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--color-secondary); font-weight:700; margin-bottom: var(--sp-2); }
.svx-hero__title { font-family: var(--font-heading); font-weight:800; line-height:1.02; letter-spacing:-.025em; font-size: clamp(38px, 4.8vw, 64px); color: var(--color-fg); margin: 0 0 var(--sp-3); }
.svx-hero__accent { font-style: normal; color: var(--color-primary); position: relative; white-space: nowrap; }
.svx-hero__accent::after { content:""; position:absolute; left:0; right:0; bottom:.02em; height:3px; background: linear-gradient(90deg, var(--color-primary), var(--color-gold-deep)); }
.svx-hero__lead { font-size: clamp(15px, 1.25vw, 18px); line-height:1.6; color: var(--color-muted); max-width: 32em; margin: 0 0 var(--sp-4); }
.svx-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; }
.svx-hero__art { position: relative; justify-self: end; width: 100%; max-width: 440px; }
.svx-hero__plate { position: relative; border: 1px solid var(--color-border-strong); border-radius: var(--r-sm); background: var(--color-card); box-shadow: var(--shadow-xl); overflow: hidden; }
.svx-hero__plate::after { content:""; position:absolute; inset:0; border:1px solid var(--color-gold-soft); border-radius:inherit; pointer-events:none; }
.svx-hero__plate img { display:block; width:100%; height:auto; }
.svx-hero .btn--primary, .svx-cta .btn--primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.svx-hero .btn--primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--btn-fg); }
.svx-hero .btn--ghost { border-color: var(--color-border-strong); color: var(--color-fg); background: transparent; }
.svx-hero .btn--ghost:hover { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
@media (max-width: 860px){
  .svx-hero__inner { grid-template-columns: 1fr; min-height: 0; padding: 36px 0 44px; gap: 28px; }
  .svx-hero__title { font-size: clamp(32px, 9vw, 44px); }
  .svx-hero__molecule { display: none; }
  .svx-hero__art { justify-self: center; max-width: 320px; }
  .svx-hero__ctas .btn { flex: 1 1 100%; text-align: center; min-height: 48px; }
}

/* COAs page */
.svx-section__head--stack { display:block; }
.svx-coa-intro { color: var(--color-muted); max-width: 46em; margin: 10px 0 0; }
.svx-coa-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width:1000px){ .svx-coa-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .svx-coa-grid { grid-template-columns: 1fr; } }
.svx-coa-card { display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-sm); text-decoration:none; color:var(--color-fg); transition: transform .2s var(--ease-out), border-color .2s; }
.svx-coa-card:hover { transform: translateY(-3px); border-color: var(--color-border-strong); color: var(--color-fg); }
.svx-coa-card__ico { flex:0 0 auto; width:34px; height:34px; color: var(--color-primary); }
.svx-coa-card__ico svg { width:100%; height:100%; }
.svx-coa-card__name { flex:1; font-weight:700; }
.svx-coa-card__open { font-size:13px; color: var(--color-secondary); white-space:nowrap; }
.svx-coa-empty { text-align:center; padding: 56px 24px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--r-sm); margin-top: 28px; }
.svx-coa-empty__ico { display:inline-block; width:44px; height:44px; color: var(--color-primary); margin-bottom: 12px; }
.svx-coa-empty__ico svg { width:100%; height:100%; }
.svx-coa-empty h2 { margin: 0 0 8px; font-size: 22px; color: var(--color-fg); }
.svx-coa-empty p { color: var(--color-muted); max-width: 40em; margin: 0 auto; }
.svx-coa-ruo { margin-top: 26px; color: var(--color-muted); font-size: 13px; }

/* sections */
.svx-section { padding: var(--section-pad) 0; }
.svx-section--alt { background: var(--color-bg-muted); }
.svx-section__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom: 28px; }
.svx-section__title { font-family: var(--font-heading); font-size: clamp(26px, 3.4vw, 38px); font-weight:800; letter-spacing:-.02em; color: var(--color-primary); margin:0; }
.svx-section__link { color: var(--color-secondary); font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap; }
.svx-section__link:hover { text-decoration: underline; }
.svx-empty { color: var(--color-muted); }

/* image-forward product grid + cards */
.svx-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
@media (max-width:1100px){ .svx-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:760px){ .svx-grid { grid-template-columns: repeat(2,1fr); gap:14px; } }

.svx-card { position:relative; display:flex; flex-direction:column; height:100%; border-radius:var(--r-lg); overflow:hidden; background:var(--color-card); border:1px solid var(--color-border); text-decoration:none; color:inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.svx-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.45); border-color: var(--color-border-strong); }
.svx-card__chip { position:absolute; top:12px; left:12px; z-index:2; background: rgba(0,0,0,.82); color:var(--color-fg); font-size:11px; font-weight:600; letter-spacing:.03em; padding:5px 10px; border-radius:999px; }
.svx-card__sale { position:absolute; top:12px; right:12px; z-index:2; background: var(--color-secondary); color: var(--btn-fg); font-size:11px; font-weight:700; padding:5px 9px; border-radius:999px; }
.svx-card__media { position:relative; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; background: linear-gradient(160deg, var(--color-card), var(--color-bg-muted)); overflow:hidden; }
.svx-card__media img, .svx-card__img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease, filter .25s ease; }
.svx-card:hover .svx-card__media img { transform: scale(1.04); }
.svx-card__media.is-empty { background: linear-gradient(160deg, var(--gradient-tier-start), var(--gradient-tier-end)); }
.svx-card__emblem { position:absolute; inset:0; background: url("assets/images/favicon.png") center / 54% no-repeat; opacity:.20; filter: grayscale(1) brightness(2.2); }
.svx-card__phname { position:relative; z-index:1; color:var(--color-fg); font-family: var(--font-heading); font-weight:700; font-size:18px; letter-spacing:.02em; text-align:center; padding:0 14px; opacity:.92; }
/* uniform text block — name clamps to 2 lines, price+CTA pinned to bottom so every card aligns */
.svx-card__body { display:flex; flex-direction:column; flex:1 1 auto; padding:16px 16px 18px; }
.svx-card__name {
  font-family: var(--font-heading);
  font-weight:700; font-size:16px; color: var(--color-primary);
  line-height:1.25; letter-spacing:-.01em; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height: 2.5em;   /* reserve two lines */
}
.svx-card__dose {
  align-self:flex-start; margin-top:9px;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--color-primary);
  background: var(--color-bg-muted); border:1px solid var(--color-border);
  padding:3px 10px; border-radius:999px;
}
.svx-card__foot { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.svx-card__price { font-family: var(--font-heading); font-weight:800; font-size:18px; color: var(--color-primary); white-space:nowrap; }
.svx-card__price del { color:var(--color-muted); font-weight:400; font-size:14px; margin-right:5px; }
.svx-card__price ins { text-decoration:none; }
.svx-card__cta { font-size:13px; font-weight:600; color: var(--color-primary); white-space:nowrap; transition: transform .2s var(--ease-out); }
.svx-card:hover .svx-card__cta { transform: translateX(3px); }
.svx-card:hover .svx-card__img, .svx-card:hover .svx-card__media img { filter: brightness(1.07); }

/* archive grid: strip old .shop-card chrome so svx-card stands alone */
.shop-grid .shop-card { all: unset; display: block; }
@media (max-width:1100px){ .shop-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width:760px){ .shop-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* category tiles */
.svx-cats { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
@media (max-width:1100px){ .svx-cats { grid-template-columns: repeat(3,1fr); } }
@media (max-width:680px){ .svx-cats { grid-template-columns: repeat(2,1fr); } }
.svx-cat { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:120px; padding:18px; border-radius:var(--r-lg); background:var(--color-card); border:1px solid var(--color-border); text-decoration:none; color: var(--color-primary); transition:.2s; }
.svx-cat:hover { border-color: var(--color-border-strong); box-shadow: 0 14px 30px rgba(0,0,0,.4); transform: translateY(-3px); }
.svx-cat__name { font-family: var(--font-heading); font-weight:700; font-size:17px; }
.svx-cat__count { font-size:12.5px; color: var(--color-muted); margin-top:3px; }
.svx-cat__arrow { position:absolute; top:16px; right:16px; color: var(--color-secondary); font-size:18px; transition: transform .2s; }
.svx-cat:hover .svx-cat__arrow { transform: translateX(4px); }

/* quality / CoA CTA band */
.svx-cta { background: var(--color-primary); color: var(--btn-fg); padding: var(--section-pad) 0; }
.svx-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.svx-cta__title { font-family: var(--font-heading); font-size: clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.02em; margin:0 0 8px; color: var(--btn-fg); }
.svx-cta__lead { color: rgba(11,13,16,.72); max-width:46ch; margin:0; font-size:16px; }
.svx-cta .btn--primary:hover { background: var(--color-bg); color: var(--color-fg); border-color: var(--color-bg); }
/* END SYNVEXA REDESIGN LAYER */


/* Global: all primary / CTA buttons use the pick #9 system (white fill, dark text, gold hover) */
.btn--primary, button.btn--primary, a.header-cta, .header-cta,
.single_add_to_cart_button, .button.alt, #place_order, .checkout-button,
.wc-block-components-button, .added_to_cart, .svx-section__link.btn {
  background: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
}
.btn--primary:hover, button.btn--primary:hover, a.header-cta:hover, .header-cta:hover,
.single_add_to_cart_button:hover, .button.alt:hover, #place_order:hover, .checkout-button:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--btn-fg) !important;
}
.btn--ghost { color: var(--color-fg) !important; border-color: var(--color-border-strong) !important; background: transparent !important; }
.btn--ghost:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; background: transparent !important; }
/* END GLOBAL BUTTON ACCENT */


/* =====================================================================
   SYNVEXA ACCENT LAYER (reworked 2026-09-09) — gold signal + brushed-silver
   support on near-black. The stray `:root { --color-secondary }` re-declaration
   that lived here was removed; tokens are defined once in the top :root.
   ===================================================================== */

/* Buttons: pick #9 — white fill + dark text; hover flips to gold */
.btn--primary, button.btn--primary, a.header-cta, .header-cta, .single_add_to_cart_button,
.button.alt, #place_order, .checkout-button, .wc-block-components-button, .added_to_cart,
.svx-hero .btn--primary, .svx-cta .btn--primary {
  background: var(--btn-bg) !important; border-color: var(--btn-bg) !important; color: var(--btn-fg) !important;
}
.btn--primary:hover, button.btn--primary:hover, a.header-cta:hover, .header-cta:hover,
.single_add_to_cart_button:hover, .button.alt:hover, #place_order:hover, .checkout-button:hover,
.svx-hero .btn--primary:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--btn-fg) !important; }
.svx-cta .btn--primary:hover { background: var(--color-bg) !important; border-color: var(--color-bg) !important; color: var(--color-fg) !important; }

/* Text accents on dark backgrounds -> gold */
.svx-hero__eyebrow, .svx-section__link, .svx-card__cta, .svx-cat__arrow,
.header-nav a:hover, .breadcrumbs a, .yoast-breadcrumbs a, .woocommerce-info a,
.cart-row__title:hover, .acct__link:hover, .entry-content a, .legal a {
  color: var(--color-primary) !important;
}
.svx-section__link:hover { text-decoration:underline; }

/* Decorative bits: gold signal, silver sale chip w/ dark text, gold hover borders */
.svx-hero__dot, .announce-bar__dot { color: var(--color-primary) !important; }
.svx-card__sale { background: var(--color-secondary) !important; color: var(--btn-fg) !important; }
/* END SYNVEXA ACCENT LAYER */


/* =====================================================================
   SYNVEXA SKO-STYLE HEADER (2026-07-09) — dark top utility bar +
   header with search/account/cart icons. No points system.
   ===================================================================== */
.announce-bar { display: none !important; }   /* replaced by .topbar */

/* --- top utility bar --- */
.topbar { background: var(--color-bg-muted); color: rgba(255,255,255,.82); font-size: 11.5px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 12px; }
.topbar__group { display: flex; align-items: center; gap: 14px; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.82); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; white-space: nowrap; transition: color .15s; }
a.topbar__item:hover { color: var(--color-fg); }
.topbar__item svg { width: 14px; height: 14px; color: var(--color-secondary); flex-shrink: 0; }
.topbar__right .topbar__item svg { color: rgba(255,255,255,.55); }
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
.topbar__center { text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); font-weight: 600; }
@media (max-width: 980px){ .topbar__center { display: none; } }
@media (max-width: 620px){ .topbar__left { display: none; } .topbar__inner { justify-content: center; } }

/* --- header action icons --- */
.header-actions { display: flex; align-items: center; gap: 2px; }
.header-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-md); color: var(--color-primary); background: transparent; border: none; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.header-icon:hover { background: rgba(255,255,255,.06); color: var(--color-primary); }
.header-cart { position: relative; }
.header-cart .cart-count { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--color-secondary); color: var(--btn-fg); font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; }

/* --- search panel --- */
.header-search { background: var(--color-bg); border-top: 1px solid var(--color-border); box-shadow: 0 12px 24px rgba(0,0,0,.5); padding: 16px 0; }
.header-search__form { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: 8px 10px 8px 16px; }
.header-search__form svg { color: var(--color-secondary); flex-shrink: 0; }
.header-search__form input[type=search] { flex: 1; border: none; outline: none; font-size: 16px; font-family: var(--font-body); background: transparent; color: var(--color-primary); }
.header-search__form .btn { flex-shrink: 0; padding: 10px 20px; }

/* nav spacing/centering to match the reference */
.site-header .header-inner { gap: var(--sp-4); }
.header-nav { flex: 1; justify-content: center; }
@media (max-width: 900px){ .header-nav { flex: 0; } }
/* END SYNVEXA SKO-STYLE HEADER */

/* --- SPEC STRIP — hairline-divided facts, no icons (de-slop 2026-09-10) --- */
.svx-specstrip { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg-muted); }
.svx-specstrip__row { display: grid; grid-template-columns: 2fr 1fr 1.1fr 1.2fr; margin: 0; }
.svx-specstrip__cell { padding: 18px 24px; border-left: 1px solid var(--color-border); }
.svx-specstrip__cell:first-child { border-left: 0; padding-left: 0; }
.svx-specstrip__cell dt {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted); margin: 0 0 4px;
}
.svx-specstrip__cell dd { margin: 0; font-size: 13.5px; color: var(--color-muted); line-height: 1.4; }
.svx-specstrip__num {
  font-family: var(--font-mono); font-weight: 500; font-size: 17px;
  color: var(--color-primary); letter-spacing: -.01em; margin-right: 6px;
}
@media (max-width: 900px) {
  .svx-specstrip__row { grid-template-columns: 1fr 1fr; }
  .svx-specstrip__cell { padding: 14px 18px; }
  .svx-specstrip__cell:first-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-bottom: 1px solid var(--color-border); }
  .svx-specstrip__cell:nth-child(2) { border-left: 0; padding-left: 0; }
  .svx-specstrip__cell:nth-child(4) { border-left: 0; padding-left: 0; grid-column: 1 / -1; border-top: 1px solid var(--color-border); }
}
/* END SYNVEXA SPEC STRIP */

/* Duotone icon accents — gold detail inside silver-stroke glyphs */
svg .svx-ico-acc { fill: var(--color-primary); }
svg .svx-ico-acc-stroke { stroke: var(--color-primary); }

/* Product buy-box fact list (replaces the icon delivery trio) */
.product-facts { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; }
.product-facts li { font-size: 13.5px; color: var(--color-muted); display: flex; align-items: baseline; gap: 9px; }
.product-facts__tick { color: var(--color-primary); font-weight: 700; }

/* Research applications — asymmetric 2-col (replaces 3-equal-cards row) */
.research-apps { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.research-apps__lead { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 32px; }
.research-apps__lead h3 { font-family: var(--font-heading); font-size: 22px; margin: 0 0 10px; color: var(--color-fg); }
.research-apps__lead p { font-size: 14.5px; line-height: 1.65; color: var(--color-muted); margin: 0; }
.research-apps__stack { display: flex; flex-direction: column; gap: 20px; }
.research-apps__item { flex: 1; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: 22px 24px; }
.research-apps__item h3 { font-family: var(--font-heading); font-size: 17px; margin: 0 0 6px; color: var(--color-fg); }
.research-apps__item p { font-size: 13.5px; color: var(--color-muted); margin: 0; }
@media (max-width: 820px) { .research-apps { grid-template-columns: 1fr; } }

/* Content pages (About / FAQ / Lab Results) — intro + FAQ readability */
.legal .lead { font-size: 19px; line-height: 1.6; color: var(--color-fg); margin-bottom: 22px; }
.legal .faq h2 { font-size: 20px; margin: 30px 0 8px; }
.legal .faq h2:first-child { margin-top: 6px; }
.legal .faq p { margin: 0 0 8px; }

/* =====================================================================
   MOBILE LANDING POLISH (2026-07-15)
   ===================================================================== */
@media (max-width: 600px) {
  /* Header goes solid on phones (no marble behind it to justify transparency) */
  body.home .site-header { position: static; top: auto; background: var(--color-bg) !important; box-shadow: 0 1px 0 var(--color-border); }
  body.home .site-header .header-nav a, body.home .site-header .header-icon { text-shadow: none; }

  /* Hero: clean STACKED layout — centered text, then a crisp product vial (no washed ghost) */

  /* Product card: compact category chip so it no longer covers the vial */
  .svx-card__chip { top: 8px; left: 8px; font-size: 10px; padding: 3px 8px; max-width: calc(100% - 16px); line-height: 1.25; }
  .svx-card__body { padding: 12px 12px 14px; }
  .svx-card__name { font-size: 14.5px; min-height: 0; }
  .svx-card__dose { font-size: 10px; margin-top: 7px; }
  .svx-card__price { font-size: 16px; }

  /* Tighter section rhythm + headings */
  .svx-section { padding: 40px 0; }
  .svx-section__title { font-size: 24px; }
  .svx-section__head { margin-bottom: 18px; }

  /* Category tiles: smaller name, tucked arrow */
  .svx-cat { padding: 18px 16px; }
  .svx-cat__name { font-size: 15px; }
  .svx-cat__arrow { top: 12px; right: 12px; font-size: 15px; }

  /* CTA band a touch tighter */
  .svx-cta__title { font-size: 26px; }
}

/* =====================================================================
   PARTNER LOGIN + AFFLYR PORTAL (2026-07-17)
   ===================================================================== */
.partner-wrap { padding: 56px 0 80px; }
.partner-head { text-align: center; max-width: 620px; margin: 0 auto 32px; }
.partner-eyebrow { display:inline-block; color:var(--color-primary); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:13px; margin-bottom:10px; }
.partner-head h1 { font-family: var(--font-heading); font-size: clamp(30px,4vw,46px); color: var(--color-primary); margin:0 0 12px; }
.partner-lead { color: var(--color-muted); font-size:17px; line-height:1.6; }
.partner-login { max-width: 460px; margin: 0 auto; padding: 0; }

/* Afflyr portal / dashboard — themed to match Synvexa */
.afflyr-portal { max-width: 980px; margin: 0 auto; }
.afflyr-portal-header { text-align:center; margin-bottom: 24px; }
.afflyr-portal-header h2 { font-family: var(--font-heading); font-size: 26px; color: var(--color-primary); margin:0 0 6px; }
.afflyr-portal-header p { color: var(--color-muted); margin:0; }
.afflyr-notice { max-width:560px; margin:0 auto; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-lg); padding:24px 28px; text-align:center; color:var(--color-fg); box-shadow: var(--shadow-md); }
.afflyr-notice a { color:var(--color-primary); font-weight:600; }
.afflyr-notice-warning { background: var(--color-gold-soft); border-color: var(--color-border); }
.afflyr-notice-error { background: rgba(217,106,95,0.12); border-color: var(--color-destructive); }

.afflyr-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; background:var(--color-bg-muted); padding:6px; border-radius:999px; margin:0 auto 28px; max-width:520px; }
.afflyr-tab { flex:1; min-width:88px; background:transparent; border:0; padding:10px 16px; border-radius:999px; font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--color-muted); cursor:pointer; transition:all .15s; }
.afflyr-tab.active { background:var(--color-primary); color: var(--btn-fg); }
.afflyr-tab-content { display:none; }
.afflyr-tab-content.active { display:block; }

.afflyr-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.afflyr-stat-card { background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-lg); padding:18px 20px; }
.afflyr-stat-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); font-weight:700; margin-bottom:8px; }
.afflyr-stat-value { font-family:var(--font-heading); font-weight:800; font-size:24px; color:var(--color-primary); }
.afflyr-highlight { color:var(--color-primary) !important; }

.afflyr-section { background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:20px; }
.afflyr-section h3 { font-family:var(--font-heading); font-size:18px; color:var(--color-primary); margin:0 0 14px; }
.afflyr-link-box { display:flex; gap:10px; }
.afflyr-link-box input, .afflyr-form-row input, .afflyr-form-row textarea, .afflyr-form-row select { flex:1; width:100%; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--r-md); font-family:var(--font-body); font-size:15px; color:var(--color-fg); background:var(--color-card); }
.afflyr-form-row { margin-bottom:16px; }
.afflyr-form-row label { display:block; font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--color-muted); margin-bottom:7px; }
.afflyr-btn { background: var(--btn-bg) !important; color: var(--btn-fg) !important; border:0 !important; padding:12px 22px; border-radius:var(--r-md); font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; display:inline-block; }
.afflyr-btn:hover { background: var(--color-primary) !important; }
.afflyr-btn-secondary { background:var(--color-bg-muted) !important; color:var(--color-primary) !important; border:1px solid var(--color-border) !important; }
.afflyr-btn-small { padding:8px 14px; font-size:13px; }
.afflyr-coupon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.afflyr-coupon-card { background:var(--color-bg-muted); border:1px solid var(--color-border); border-radius:var(--r-lg); padding:16px; }
.afflyr-coupon-code { font-weight:800; color:var(--color-primary); font-size:18px; }
.afflyr-payout-hint { color:var(--color-muted); font-size:14px; }

@media (max-width:700px){ .afflyr-stats-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .afflyr-stats-grid { grid-template-columns:1fr; } .afflyr-link-box { flex-direction:column; } }
/* END PARTNER / AFFLYR */

/* ===== FREE-SHIPPING PROGRESS BAR (cart + checkout) ===== */
.svx-freeship{
  margin:0 0 22px; padding:14px 18px;
  background: var(--color-card); border:1px solid var(--color-border); border-radius: var(--r-lg);
}
.svx-freeship__msg{
  font-size:14.5px; color: var(--color-fg); margin-bottom:10px; text-align:center; letter-spacing:.01em;
}
.svx-freeship__msg strong{ color:var(--color-primary); }
.svx-freeship__track{
  height:8px; border-radius:999px; background:var(--color-bg-muted); overflow:hidden;
}
.svx-freeship__track > span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--color-primary), var(--color-gold-deep));
  transition:width .4s ease;
}
.svx-freeship.is-won{ background:rgba(111,191,140,0.12); border-color:var(--color-success); }
.svx-freeship.is-won .svx-freeship__msg{ color:var(--color-success); }
.svx-freeship.is-won .svx-freeship__msg strong{ color:var(--color-success); }
.svx-freeship.is-won .svx-freeship__track > span{ background: var(--color-success); }
.svx-freeship__msg .amount{ white-space:nowrap; }
@media (max-width:600px){ .svx-freeship{ margin-bottom:16px; padding:12px 14px; } }

/* /cart/ free-shipping bar (was navy/green) */
.svx-freeship {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-left: 3px solid var(--color-primary) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 4px 16px -12px rgba(0,0,0,0.40) !important;
}
.svx-freeship__msg,
.svx-freeship__msg strong { color: var(--color-primary) !important; }
.svx-freeship__track { background: var(--color-bg-muted) !important; }
.svx-freeship__track > span { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-gold-deep) 100%) !important; }
.svx-freeship.is-won { background: var(--color-card) !important; border-left-color: var(--color-success) !important; }
.svx-freeship.is-won .svx-freeship__msg,
.svx-freeship.is-won .svx-freeship__msg strong { color: var(--color-success) !important; }
.svx-freeship.is-won .svx-freeship__track > span { background: var(--color-success) !important; }
/* END PROMO REDESIGN v2 */

/* ============================================================
   SYNVEXA CHECKOUT COMPONENTS v3 — perk strips, add-on grid,
   static mobile total bar. Own anatomy (no icon chips, no reason
   pills over images, no slide-up flap).
   ============================================================ */

/* Perk strips (free shipping + multi-vial discount) */
.svx-perk{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-primary);
  border-radius:var(--r-md);
  padding:12px 16px;
  margin:0 0 10px;
  font-size:13.5px;
  color:var(--color-primary);
  line-height:1.45;
}
.svx-perk__text strong{ font-weight:800; }
.svx-perk--ship.is-unlocked,
.svx-perk--bundle.is-saving{ border-left-color:var(--color-success); }
.svx-perk--ship.is-unlocked .svx-perk__text{ color:var(--color-success); }
.svx-perk__track{ height:4px; border-radius:999px; background:var(--color-bg-muted); overflow:hidden; margin-top:8px; }
.svx-perk__track > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--color-primary), var(--color-gold-deep)); transition:width .4s ease; }
.svx-perk--ship.is-unlocked .svx-perk__track > span{ background: var(--color-success); }
.svx-perk__hint{
  margin-top:7px; font-size:12.5px; color:var(--color-muted);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.svx-perk__add{ margin:0; }

/* Add-on grid (checkout) — flat cards, edge-to-edge image, caption text */
.svx-addons{ margin:18px 0 0; }
.svx-addons__hdr h3{
  font-family:var(--font-heading); font-size:17px; font-weight:800;
  margin:0 0 10px; letter-spacing:-0.005em; color:var(--color-primary);
}
.svx-addons__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (max-width:980px){ .svx-addons__grid{ grid-template-columns:repeat(2,1fr); } }
.svx-addons__card{
  display:flex; flex-direction:column;
  background:var(--color-card); border:1px solid var(--color-border);
  border-radius:var(--r-lg); overflow:hidden;
}
.svx-addons__img{ display:block; width:100%; height:140px; background:var(--color-bg-muted); }
.svx-addons__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.svx-addons__body{ display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px; flex:1; }
.svx-addons__name{ font-size:13.5px; font-weight:700; color:var(--color-primary); line-height:1.3; }
.svx-addons__note{ font-size:11.5px; color:var(--color-muted); }
.svx-addons__price{ font-size:13px; font-weight:700; color:var(--color-primary); margin-top:4px; }
.svx-addons__price del{ color:var(--color-muted); font-weight:500; margin-right:4px; }
.svx-addons__add{ margin-top:auto; width:100%; }
.svx-addons__body .svx-addons__add{ margin-top:8px; }

/* Static mobile total bar — checkout only, text only, no interactions */
#svx-totalbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  background:var(--color-card); border-top:1px solid var(--color-border);
  padding:10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  font-size:13px; color:var(--color-muted);
  align-items:baseline; justify-content:space-between;
  pointer-events:none;
}
#svx-totalbar .svx-totalbar__label{
  letter-spacing:.06em; text-transform:uppercase; font-size:11px; font-weight:700;
}
#svx-totalbar .svx-totalbar__amount{ font-size:16px; font-weight:800; color:var(--color-primary); }
@media (max-width:980px){ body.woocommerce-checkout #svx-totalbar{ display:flex; } }
/* END SYNVEXA CHECKOUT COMPONENTS v3 */


/* ============================================================
   ACCOUNT DASHBOARD v2 — Synvexa theme (graphite/silver, flat,
   spec-strip metrics). Replaces the pastel tile + points layout.
   ============================================================ */

/* First-order welcome offer */
.acct-offer{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background: var(--color-card); color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
  margin:0 0 var(--sp-3);
}
.acct-offer__eyebrow{
  display:block; font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-secondary); margin-bottom:6px;
}
.acct-offer__title{
  font-family:var(--font-heading); font-size:clamp(20px,2.4vw,26px); font-weight:800;
  letter-spacing:-0.01em; margin:0 0 6px; color:var(--color-fg); line-height:1.15;
}
.acct-offer__sub{ margin:0; font-size:13.5px; color:rgba(255,255,255,.72); }
.acct-offer__aside{ display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
.acct-offer__code{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:transparent; border:1px dashed rgba(255,255,255,.45);
  border-radius:var(--r-md); padding:10px 20px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.acct-offer__code:hover{ border-color:var(--color-fg); background:rgba(255,255,255,.06); }
.acct-offer__code.is-copied{ border-color:var(--color-success); border-style:solid; }
.acct-offer__code-value{
  font-family:var(--font-heading); font-size:17px; font-weight:800;
  letter-spacing:.08em; color:var(--color-fg);
}
.acct-offer__code-hint{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-secondary); }
.acct-offer__cta{ color:var(--color-fg); font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap; }
.acct-offer__cta:hover{ color:var(--color-secondary); }
@media (max-width:760px){
  .acct-offer{ flex-direction:column; align-items:flex-start; padding:var(--sp-4); }
  .acct-offer__aside{ width:100%; justify-content:space-between; }
}

/* Metric spec strip — one bordered row, divided cells (not floating tiles) */
.acct-spec{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-md);
  overflow:hidden; margin:0 0 var(--sp-3);
}
.acct-spec__cell{
  padding:var(--sp-4) var(--sp-4);
  border-left:1px solid var(--color-border);
  display:flex; flex-direction:column; gap:6px;
}
.acct-spec__cell:first-child{ border-left:0; }
.acct-spec__label{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-muted);
}
.acct-spec__value{
  font-family:var(--font-heading); font-size:clamp(24px,3vw,32px); font-weight:800;
  color:var(--color-primary); line-height:1; letter-spacing:-0.02em;
}
.acct-spec__value--text{ font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; }
.acct-spec__note{ font-size:11.5px; color:var(--color-muted); }
@media (max-width:760px){
  .acct-spec{ grid-template-columns:1fr; }
  .acct-spec__cell{ border-left:0; border-top:1px solid var(--color-border); }
  .acct-spec__cell:first-child{ border-top:0; }
}

/* Panel (recent orders) */
.acct-panel{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5); margin:0 0 var(--sp-3);
}
.acct-panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.acct-panel__head h3{ font-size:var(--fs-lg); margin:0; }
.acct-panel__empty{ text-align:center; padding:var(--sp-5) 0 var(--sp-4); color:var(--color-muted); }
.acct-panel__empty p{ margin:0 0 var(--sp-3); }

.acct-orders{ list-style:none; margin:0; padding:0; }
.acct-orders__row{
  display:grid; grid-template-columns:90px 1fr auto auto 60px;
  align-items:center; gap:var(--sp-3);
  padding:14px 0; border-top:1px solid var(--color-border);
}
.acct-orders__row:first-child{ border-top:0; }
.acct-orders__id{ font-family:var(--font-heading); font-weight:800; color:var(--color-primary); font-size:14px; }
.acct-orders__status{
  justify-self:start; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-muted); border:1px solid var(--color-border); border-radius:999px; padding:3px 10px;
}
.acct-orders__status[data-status="processing"]{ color:var(--color-success); border-color:var(--color-success); }
.acct-orders__status[data-status="completed"]{ color: var(--color-fg); border-color: var(--color-secondary); }
.acct-orders__date{ font-size:12.5px; color:var(--color-muted); white-space:nowrap; }
.acct-orders__total{ font-family:var(--font-heading); font-weight:800; color:var(--color-primary); font-size:14.5px; }
.acct-orders__view{ font-size:13px; font-weight:700; color:var(--color-primary); text-decoration:none; justify-self:end; }
.acct-orders__view:hover{ text-decoration:underline; }
@media (max-width:760px){
  .acct-orders__row{ grid-template-columns:1fr auto; row-gap:6px; }
  .acct-orders__status{ grid-column:2; grid-row:1; justify-self:end; }
  .acct-orders__date{ grid-column:1; grid-row:2; }
  .acct-orders__total{ grid-column:2; grid-row:2; text-align:right; }
  .acct-orders__view{ grid-column:1 / -1; grid-row:3; justify-self:start; }
}

/* Quick links */
.acct-links{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.acct-links__item{
  display:flex; flex-direction:column; gap:4px;
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-md);
  padding:var(--sp-4); text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.acct-links__item:hover{ border-color:var(--color-primary); transform:translateY(-2px); }
.acct-links__label{ font-family:var(--font-heading); font-weight:800; font-size:14.5px; color:var(--color-primary); }
.acct-links__note{ font-size:12px; color:var(--color-muted); }
@media (max-width:900px){ .acct-links{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .acct-links{ grid-template-columns:1fr; } }
.acct-spec__note--link{ color:var(--color-primary); font-weight:700; text-decoration:none; }
.acct-spec__note--link:hover{ text-decoration:underline; }

/* Research-context select — register form + account profile */
.svx-ctx-field select{
  width:100%; padding:12px 14px;
  border:1px solid var(--color-border); border-radius:var(--r-md);
  background:var(--color-card); color: var(--color-fg);
  font-family:var(--font-body); font-size:14.5px; line-height:1.3;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f0eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
  padding-right:38px;
}
.svx-ctx-field select:focus{ outline:none; border-color:var(--color-primary); }
.svx-ctx-help{ display:block; margin-top:6px; font-size:11.5px; color:var(--color-muted); line-height:1.45; }
/* On the WC edit-account page the field sits among default form-rows */
.woocommerce-EditAccountForm .svx-ctx-field{ margin:0 0 var(--sp-3); }
.woocommerce-EditAccountForm .svx-ctx-field label{
  display:block; margin-bottom:6px; font-size:11.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted);
}
/* ── Account forms: Profile + Addresses (scoped so checkout is untouched) ── */
/* Cap the measure — full-container-width inputs are unreadable on desktop. */
.acct-form{ margin:0; max-width:760px; }
.acct-form__card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5); margin:0 0 var(--sp-3);
}
.acct-form__head{ margin-bottom:var(--sp-4); }
.acct-form__head h3{ font-size:var(--fs-lg); margin:0 0 4px; }
.acct-form__head p{ margin:0; font-size:13px; color:var(--color-muted); }
.acct-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-3); }
@media (max-width:600px){ .acct-form__grid{ grid-template-columns:1fr; } }

/* Rows — kill WC's float/width defaults inside the account form */
.acct-form .form-row,
.acct-form .acct-form__row,
.acct-form .woocommerce-address-fields__field-wrapper .form-row{
  float:none !important; width:100% !important; padding:0 !important;
  margin:0 0 var(--sp-3) !important; display:block;
}
.acct-form label{
  display:block; margin:0 0 6px;
  font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-muted);
}
.acct-form label .required{ color:var(--color-destructive); text-decoration:none; }
.acct-form input[type="text"],
.acct-form input[type="email"],
.acct-form input[type="tel"],
.acct-form input[type="password"],
.acct-form select,
.acct-form .input-text{
  width:100%; padding:12px 14px;
  border:1px solid var(--color-border); border-radius:var(--r-md); background:var(--color-card);
  color: var(--color-fg); font-family:var(--font-body); font-size:14.5px; line-height:1.3;
}
.acct-form input:focus, .acct-form select:focus{ outline:none; border-color:var(--color-primary); }
.acct-form__help,
.acct-form .woocommerce-input-wrapper + span em,
.acct-form #account_display_name_description{
  display:block; margin-top:6px; font-size:11.5px; color:var(--color-muted); font-style:normal;
}
.acct-form__fieldset{ border:0; margin:0; padding:0; }
.acct-form .woocommerce-input-wrapper{ display:block; width:100%; }
.acct-form abbr[title]{ text-decoration:none; border:0; }
.acct-form__actions{ display:flex; align-items:center; gap:var(--sp-3); margin:0; }
.acct-form__submit{ min-width:170px; }
.acct-form__cancel{ font-size:13.5px; font-weight:700; color:var(--color-muted); text-decoration:none; }
.acct-form__cancel:hover{ color:var(--color-primary); }
/* Password-toggle button WC injects next to password inputs */
.acct-form .woocommerce-password-input{ position:relative; display:block; }
.acct-form .show-password-input{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }

/* Addresses */
.acct-addr__intro{ color:var(--color-muted); font-size:13.5px; margin:0 0 var(--sp-3); }
.acct-addr{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media (max-width:760px){ .acct-addr{ grid-template-columns:1fr; } }
.acct-addr__card{
  background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
}
.acct-addr__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.acct-addr__head h3{ font-size:var(--fs-md); margin:0; }
.acct-addr__edit{ font-size:13px; font-weight:700; color:var(--color-primary); text-decoration:none; }
.acct-addr__edit:hover{ text-decoration:underline; }
.acct-addr__body{ font-style:normal; font-size:14px; line-height:1.65; color:var(--color-fg); }
.acct-addr__empty{ color:var(--color-muted); font-size:13.5px; }
/* ============================================================
   WELCOME BAR — slim promo strip directly under the site header.
   ============================================================ */
.svx-welcome-bar{
  background: var(--color-bg-muted); color: var(--color-fg);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.svx-welcome-bar__inner{
  max-width:var(--container-wide); margin:0 auto;
  padding:9px var(--sp-4);
  display:flex; align-items:center; justify-content:center; gap:12px;
  position:relative;
}
.svx-welcome-bar__msg{
  color:var(--color-fg); text-decoration:none; font-size:13px; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:8px;
}
.svx-welcome-bar__msg strong{ font-weight:800; }
.svx-welcome-bar__msg:hover{ color:var(--color-fg); text-decoration:underline; }
.svx-welcome-bar__sep{ color:var(--color-secondary); }
.svx-welcome-bar__use{ color:var(--color-secondary); }
.svx-welcome-bar__code{
  background:transparent; border:1px dashed rgba(255,255,255,.5); border-radius:6px;
  color:var(--color-fg); font-family:var(--font-heading); font-weight:800; font-size:12.5px;
  letter-spacing:.08em; padding:4px 12px; cursor:pointer; line-height:1.4;
  transition:border-color .2s ease, background .2s ease;
}
.svx-welcome-bar__code:hover{ border-color:var(--color-fg); background:rgba(255,255,255,.08); }
.svx-welcome-bar__code.is-copied{ border-style:solid; border-color:var(--color-success); }
.svx-welcome-bar__close{
  position:absolute; right:var(--sp-4); top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--color-secondary); cursor:pointer;
  font-size:20px; line-height:1; padding:2px 6px;
}
.svx-welcome-bar__close:hover{ color:var(--color-fg); }
@media (max-width:600px){
  .svx-welcome-bar__inner{ padding:8px 40px 8px 14px; gap:8px; flex-wrap:wrap; }
  .svx-welcome-bar__msg{ font-size:12px; }
  .svx-welcome-bar__use{ display:none; }
  .svx-welcome-bar__code{ font-size:11.5px; padding:3px 9px; }
  .svx-welcome-bar__close{ right:10px; }
}
/* Homepage: the header is absolutely positioned over the hero, so the bar has
   to be pinned under it rather than sitting in normal flow (which would put it
   above the header). Hero copy gets extra top padding to clear both. */
@media (min-width:901px){
  body.home .svx-welcome-bar{ position:absolute; top:102px; left:0; right:0; z-index:29; } /* 38 topbar + 64 header */
}
@media (min-width:601px) and (max-width:900px){
  body.home .svx-welcome-bar{ position:absolute; top:94px; left:0; right:0; z-index:29; }  /* 38 topbar + 56 header */
}
/* END WELCOME BAR */

/* END ACCOUNT DASHBOARD v2 */

/* ============================================================
   AGE GATE (21+) — v1.0.1. Pre-paint stamp in header.php hides
   it for verified visitors before first render (no flash).
   ============================================================ */
.svx-agegate { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,4,4,.92); backdrop-filter: blur(6px); }
html.age-ok .svx-agegate { display: none; }
html:not(.age-ok) body { overflow: hidden; }
.svx-agegate__panel { max-width: 480px; width: 100%; text-align: center; background: var(--color-card); border: 1px solid var(--color-border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-xl); padding: 40px 32px 32px; position: relative; }
.svx-agegate__panel::after { content:""; position:absolute; inset:0; border:1px solid var(--color-gold-soft); border-radius:inherit; pointer-events:none; }
.svx-agegate__logo { display:block; margin: 0 auto 20px; max-height: 56px; width: auto; }
.svx-agegate__panel h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--color-fg); margin: 0 0 10px; }
.svx-agegate__panel p { color: var(--color-muted); font-size: 15px; line-height: 1.55; margin: 0 0 22px; }
.svx-agegate__checks { display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 0 0 20px; }
.svx-agegate__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--color-muted); cursor: pointer; }
.svx-agegate__check input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--color-primary); cursor: pointer; }
.svx-agegate__check a { color: var(--color-primary); text-decoration: underline; }
.svx-agegate__actions .btn[disabled] { opacity: .38; cursor: not-allowed; }
.svx-agegate__actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.svx-agegate__actions .btn { width: 100%; min-height: 48px; }
.svx-agegate__ruo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0 !important; }