/*
Theme Name: Impulse Compounds
Theme URI: https://impulsecompounds.com
Author: Impulse Labs LLC
Description: Impulse Compounds — clinical-grade research compound storefront. Trust & Authority + Conversion pattern. Per BUILDS/impulse-compounds/ spec.
Version: 1.0.0
License: Proprietary
Text Domain: impulse-compounds
*/

/* ============================================================
   DESIGN TOKENS — sourced from BUILDS/impulse-compounds/tokens.css
   ============================================================ */
:root {
  /* Anchor brand */
  --color-primary:        #1C1F24;
  --color-secondary:      #4F9BE8;

  /* Pastel category accents */
  --color-accent-sky:     #E5F0F7;
  --color-accent-cream:   #F7F2E5;
  --color-accent-sage:    #E8F0E5;
  --color-accent-peach:   #F7E8DF;
  --color-accent-lavender:#EEE5F7;
  --color-accent-blush:   #F7E5EC;
  --color-accent-mist:    #EDEFF2;

  /* Surfaces */
  --color-bg:             #FFFFFF;
  --color-bg-muted:       #FAFAFB;
  --color-fg:             #1C1F24;
  --color-muted:          #6B7280;
  --color-border:         #E5E7EB;

  --color-destructive:    #B72A2E;
  --color-success:        #1F7A48;

  /* Tier card gradient (only dark surface) */
  --gradient-tier-start:  #2A2A35;
  --gradient-tier-end:    #0F0F1A;

  /* Typography — Trust & Authority pattern from UI/UX Lookup */
  --font-heading:         'Outfit', 'Inter', system-ui, sans-serif;
  --font-body:            'Inter', system-ui, sans-serif;
  --font-mono:            'JetBrains Mono', monospace;

  --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 */
  --r-sm: 12px;  --r-md: 20px;  --r-lg: 32px;  --r-pill: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgba(20,25,50,0.04);
  --shadow-md:  0 4px 12px 0 rgba(20,25,50,0.06);
  --shadow-lg:  0 8px 24px 0 rgba(20,25,50,0.08);
  --shadow-xl:  0 20px 40px 0 rgba(20,25,50,0.12);
  --shadow-card: 0 1px 3px 0 rgba(20,25,50,0.05), 0 1px 2px 0 rgba(20,25,50,0.04);

  /* 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-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  touch-action: manipulation;
}
a:hover { color: var(--color-primary); }
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-secondary);
  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-primary); color: #fff; }
.section--dark h1,.section--dark h2,.section--dark h3 { color: #fff; }
@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-pill);
  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(--color-secondary);
  color: #fff;
}
.btn--primary:hover { background: var(--color-primary); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-primary); background: var(--color-bg-muted); color: var(--color-primary); }
.btn--accent {
  background: var(--color-secondary);
  color: #fff;
}
.btn--accent:hover { background: var(--color-primary); color: #fff; }
.btn--full { width: 100%; }

/* ============================================================
   TRUST STRIP (above header) — Rule 26
   ============================================================ */
.trust-strip {
  background: var(--color-secondary);
  color: #ffffff;
  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(--color-secondary);
  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: #fff;
  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: 56px;
  width: auto;
  max-width: 180px;
  display: block;
}
.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-primary);
  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: #fff;
  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: 44px; }
  .header-mobile-toggle { display: inline-flex; }
  .header-nav {
    position: fixed;
    inset: var(--header-h-mobile) 0 0 0;
    background: #fff;
    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);
  }
}

/* ============================================================
   HERO — full-width art with text overlay (G concept ceramic)
   ============================================================ */
.hero-art {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(19,19,41,0.55) 0%, rgba(19,19,41,0.25) 38%, transparent 55%);
  pointer-events: none;
}
.hero-art__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5);
  width: 100%;
}
.hero-art__copy {
  max-width: 560px;
  color: #fff;
}
.hero-art__copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.hero-art__copy .eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(17,133,210,0.25);
  animation: impulse-pulse 2s var(--ease-in-out) infinite;
}
@keyframes impulse-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(17,133,210,0.5); }
  50%     { box-shadow: 0 0 0 8px rgba(17,133,210,0); }
}
.hero-art__copy h1 {
  color: #fff;
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 800;
  line-height: 0.98;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.025em;
  text-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
.hero-art__copy h1 .accent {
  color: transparent;
  background: linear-gradient(110deg, var(--color-secondary), #6CA8E8);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
}
.hero-art__copy .lead {
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-md);
  line-height: 1.55;
  margin: 0 0 var(--sp-5);
  max-width: 480px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.hero-art__copy .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.hero-art__copy .btn--primary { background: #fff; color: var(--color-primary); }
.hero-art__copy .btn--primary:hover { background: var(--color-secondary); color: #fff; }
.hero-art__copy .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.32); background: transparent; }
.hero-art__copy .btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }
.hero-art__cred {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-art__cred span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-xs);
}
.hero-art__cred svg { width: 16px; height: 16px; color: var(--color-secondary); flex-shrink: 0; }

@media (max-width: 980px) {
  .hero-art { min-height: 0; padding: var(--sp-7) 0 var(--sp-8); background-position: 75% center; }
  .hero-art::before { background: linear-gradient(180deg, rgba(19,19,41,0.7) 0%, rgba(19,19,41,0.55) 60%, rgba(19,19,41,0.7) 100%); }
  .hero-art__copy { max-width: 100%; }
  .hero-art__copy .ctas .btn { flex: 1 1 100%; }
}

/* ============================================================
   HERO — GLOVE
   Desktop: 2-col grid — head+foot on LEFT, full image on RIGHT
   Mobile : single column, CENTERED — head → image → foot
   ============================================================ */
.hero-glove {
  position: relative;
  background: #F4F4F2;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background-image: url("assets/hero/hero-glove.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
.hero-glove__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-wide);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head image"
    "foot image";
  gap: var(--sp-5) var(--sp-6);
  align-items: center;
}
.hero-glove__head { grid-area: head; align-self: end; }
.hero-glove__foot { grid-area: foot; align-self: start; }
.hero-glove__image { grid-area: image; }
.hero-glove__head, .hero-glove__foot {
  max-width: 620px;
  color: var(--color-primary);
}
/* DESKTOP image is the section bg already; the named area is just a layout placeholder. */
@media (min-width: 981px) {
  .hero-glove__image { visibility: hidden; min-height: 1px; }
}
/* legacy alias so older markup still works */
.hero-glove__copy {
  max-width: 620px;
  color: var(--color-primary);
}
.hero-glove__copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  padding: 8px 16px 8px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  box-shadow: 0 1px 2px rgba(19,19,41,0.04);
}
.hero-glove__copy .eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25C46A; /* live green */
  box-shadow: 0 0 0 4px rgba(37,196,106,0.18);
  animation: impulse-pulse-green 1.8s var(--ease-in-out) infinite;
  flex-shrink: 0;
}
@keyframes impulse-pulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,196,106,0.5); }
  50%     { box-shadow: 0 0 0 8px rgba(37,196,106,0); }
}
.hero-glove__copy .eyebrow__label {
  color: var(--color-muted);
  letter-spacing: 0.1em;
  font-size: 11px;
}
.hero-glove__copy .eyebrow__sep {
  color: var(--color-border);
  font-weight: 400;
}
.hero-glove__copy .eyebrow__names {
  position: relative;
  display: inline-block;
  min-width: 160px;
  height: 14px;
  overflow: hidden;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-size: 12px;
  text-transform: none;
  font-weight: 600;
}
.hero-glove__copy .eyebrow__name {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  color: var(--color-primary);
}
.hero-glove__copy .eyebrow__name.is-active {
  opacity: 1;
  transform: translateY(0);
}
.hero-glove__copy .eyebrow__name.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}
.hero-glove__head h1,
.hero-glove__copy h1 {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 700;
  line-height: 1.02;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.02em;
}
.hero-glove__head h1 .accent,
.hero-glove__copy h1 .accent {
  color: var(--color-secondary);
  font-style: italic;
  background: linear-gradient(110deg, var(--color-secondary) 0%, #6CA8E8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-right: 0.12em;       /* room for the italic skew of the last letter */
  margin-right: -0.08em;       /* visually neutral — letter spacing unchanged */
}
.hero-glove__head .lead,
.hero-glove__copy .lead {
  color: var(--color-muted);
  font-size: var(--fs-md);
  line-height: 1.55;
  margin: 0 0 var(--sp-5);
  max-width: 520px;
}
.hero-glove__foot .ctas,
.hero-glove__copy .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.hero-glove__foot .btn--primary,
.hero-glove__copy .btn--primary { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.hero-glove__foot .btn--primary:hover,
.hero-glove__copy .btn--primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.hero-glove__foot .btn--ghost,
.hero-glove__copy .btn--ghost { color: var(--color-primary); border-color: var(--color-primary); background: transparent; }
.hero-glove__foot .btn--ghost:hover,
.hero-glove__copy .btn--ghost:hover { background: var(--color-primary); color: #fff; }
.hero-glove__cred {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}
.hero-glove__cred span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.hero-glove__cred svg { width: 16px; height: 16px; color: var(--color-secondary); flex-shrink: 0; }
.hero-glove__spacer { display: block; }

@media (max-width: 980px) {
  .hero-glove {
    min-height: 0;
    background-image: none;
    padding: 0;
  }
  .hero-glove__inner {
    grid-template-columns: 1fr;
    padding: var(--sp-6) var(--sp-5) 0;
    gap: var(--sp-5);
  }
  .hero-glove__copy { max-width: 100%; order: 1; }
  .hero-glove__copy h1 { font-size: clamp(36px, 9vw, 52px); }
  .hero-glove__copy .ctas .btn { flex: 1 1 100%; }
  .hero-glove__spacer {
    order: 2;
    width: 100%;
    aspect-ratio: 16/10;
    background: #F4F4F2 url("assets/hero/hero-glove.png") right center / contain no-repeat;
  }
}

/* ============================================================
   PROOF STRIP — 4 colored stat cards under hero
   ============================================================ */
.proof-strip {
  padding: var(--sp-7) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.proof-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.proof-card {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid rgba(19,19,41,0.08);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 168px;
}
.proof-card .icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(19,19,41,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
}
.proof-card .icon svg { width: 20px; height: 20px; color: var(--color-primary); }
.proof-card .stat {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.proof-card .label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
}
.proof-card .desc {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  line-height: 1.5;
}
.proof-card.sky      { background: var(--color-accent-sky); }
.proof-card.sage     { background: var(--color-accent-sage); }
.proof-card.cream    { background: var(--color-accent-cream); }
.proof-card.lavender { background: var(--color-accent-lavender); }

@media (max-width: 980px) {
  .proof-strip { padding: var(--sp-6) 0; }
  .proof-strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .proof-card { padding: var(--sp-4); min-height: 0; }
  .proof-card .stat { font-size: var(--fs-2xl); }
}

/* ============================================================
   FEATURED PRODUCTS — coverflow auto-scroll carousel (v2)
   ============================================================ */
.ftr-carousel {
  padding: var(--sp-7) 0 var(--sp-8);
  background: var(--color-bg);
  overflow: hidden;
}
.ftr-carousel .fp-header { margin-bottom: var(--sp-5); }
.ftr-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 70px 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.ftr-carousel__track {
  display: flex;
  gap: 24px;
  will-change: transform;
}
.ftr-card {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  isolation: isolate;
  /* only transition transform + opacity; shadow is on a pseudo so it's cheap */
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
  opacity: 0.55;
  transform: scale(0.82);
  transform-origin: center center;
  will-change: transform, opacity;
  cursor: pointer;
}
.ftr-card::after {
  /* cheap shadow that fades in via opacity, not box-shadow animation */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 24px 60px -12px rgba(19,19,41,0.22), 0 8px 24px -8px rgba(19,19,41,0.12);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  z-index: -1;
}
.ftr-card.is-near {
  opacity: 0.85;
  transform: scale(0.94);
}
.ftr-card.is-active {
  opacity: 1;
  transform: scale(1.22);
  z-index: 2;
}
.ftr-card.is-active::after { opacity: 1; }

/* image area — fills the card edge-to-edge, brand accent stripe at top */
.ftr-card__img {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(180deg, var(--color-accent-sky) 0%, #F4F8FB 100%);
  overflow: hidden;
  position: relative;
}
.ftr-card__img::before {
  /* slim brand accent stripe across the top of the image area */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  z-index: 2;
}
.ftr-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 10px 16px rgba(19,19,41,0.10));
  transition: transform 0.45s var(--ease-out);
}
.ftr-card.is-active .ftr-card__img img { transform: scale(1.04); }

.ftr-card__body {
  padding: 18px 20px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ftr-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  min-height: 44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ftr-card__price {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
}
.ftr-card__price .woocommerce-Price-amount { color: inherit; }
.ftr-card__price del { color: var(--color-muted); opacity: 0.6; margin-right: 6px; font-weight: 500; }
.ftr-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px auto 0;
  padding: 8px 18px;
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
  opacity: 0;
  transform: translateY(4px);
}
.ftr-card.is-active .ftr-card__cta {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s 0.1s var(--ease-out), transform 0.3s 0.1s var(--ease-out), background 0.2s, color 0.2s;
}
.ftr-card.is-active .ftr-card__cta:hover {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 980px) {
  .ftr-carousel { padding: var(--sp-6) 0; }
  .ftr-carousel__viewport { padding: 50px 0; }
  .ftr-card { flex: 0 0 200px; border-radius: 16px; }
  .ftr-card.is-active { transform: scale(1.16); }
  .ftr-card__title { font-size: 15px; min-height: 36px; }
  .ftr-card__body { padding: 14px 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ftr-card { transition: none; }
}

/* ============================================================
   HERO (legacy split — kept in case any page still references it)
   ============================================================ */
.hero-split {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
}
.hero-split__bg-left,
.hero-split__bg-right {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-split__bg-left {
  background:
    radial-gradient(circle at 15% 20%, rgba(17,133,210,0.18) 0%, transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(255,255,255,0.04) 0%, transparent 40%),
    var(--color-primary);
  clip-path: polygon(0 0, 62% 0, 44% 100%, 0 100%);
}
.hero-split__bg-right {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(17,133,210,0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--color-accent-sky) 0%, var(--color-accent-cream) 55%, var(--color-accent-lavender) 100%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 44% 100%);
}
/* Subtle grid noise on the dark side */
.hero-split__bg-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 80%);
  pointer-events: none;
}

/* Huge bleeding split-O behind the right wedge */
.hero-split__monogram {
  position: absolute;
  z-index: 1;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 70vmin;
  height: 70vmin;
  pointer-events: none;
}
.hero-split__monogram svg { width: 100%; height: 100%; }
.hero-split__monogram .impulse-mono-l { fill: rgba(255,255,255,0.18); }
.hero-split__monogram .impulse-mono-r { fill: rgba(17,133,210,0.22); }

.hero-split__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-7);
  align-items: center;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);
  min-height: 88vh;
}

.hero-split__left {
  color: #fff;
  max-width: 560px;
}
.hero-split__left .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.hero-split__left .eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(17,133,210,0.25);
  animation: impulse-pulse 2s var(--ease-in-out) infinite;
}
@keyframes impulse-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(17,133,210,0.5); }
  50%     { box-shadow: 0 0 0 8px rgba(17,133,210,0); }
}
.hero-split__left h1 {
  color: #fff;
  font-size: clamp(var(--fs-3xl), 6vw, 84px);
  font-weight: 800;
  line-height: 0.98;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.025em;
}
.hero-split__left h1 .accent {
  color: transparent;
  background: linear-gradient(110deg, var(--color-secondary) 0%, #6CA8E8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
}
.hero-split__left .lead {
  color: rgba(255,255,255,0.75);
  font-size: var(--fs-md);
  line-height: 1.55;
  margin: 0 0 var(--sp-5);
  max-width: 480px;
}
.hero-split__left .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-split__left .btn--primary { background: #fff; color: var(--color-primary); }
.hero-split__left .btn--primary:hover { background: var(--color-secondary); color: #fff; }
.hero-split__left .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.3); background: transparent; }
.hero-split__left .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }

/* Mini cred row beneath CTAs */
.hero-split__cred {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.hero-split__cred-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: var(--fs-xs); }
.hero-split__cred-item svg { width: 16px; height: 16px; color: var(--color-secondary); flex-shrink: 0; }

/* Right side — bleeding vial collage */
.hero-split__right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.hero-vials {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
}
.hero-vial {
  position: absolute;
  filter: drop-shadow(0 30px 60px rgba(19,19,41,0.18));
  transition: transform var(--dur-slow) var(--ease-out);
  animation: impulse-float 6s var(--ease-in-out) infinite;
}
@keyframes impulse-float {
  0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); }
  50%     { transform: translateY(-14px) rotate(var(--rot,0deg)); }
}
.hero-vial--front {
  width: 56%;
  top: 18%;
  left: 22%;
  z-index: 3;
  --rot: 0deg;
}
.hero-vial--back-left {
  width: 38%;
  top: 38%;
  left: -2%;
  z-index: 2;
  --rot: -8deg;
  animation-delay: -2s;
}
.hero-vial--back-right {
  width: 42%;
  top: 8%;
  right: -2%;
  z-index: 2;
  --rot: 6deg;
  animation-delay: -4s;
}
.hero-vial img { width: 100%; height: auto; display: block; }

/* Edge accent strip — bleeds across the diagonal seam */
.hero-split__seam {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(17,133,210,0.6) 30%, rgba(17,133,210,0.6) 70%, transparent 100%);
  left: 52%;
  transform: rotate(11deg) translateX(-50%);
  transform-origin: center;
  height: 130%;
  top: -15%;
  pointer-events: none;
}

@media (max-width: 980px) {
  .hero-split { min-height: 0; }
  .hero-split__inner { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-3); gap: var(--sp-5); min-height: 0; }
  .hero-split__bg-left  { clip-path: polygon(0 0, 100% 0, 100% 58%, 0 58%); }
  .hero-split__bg-right { clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%); }
  .hero-split__seam    { display: none; }
  .hero-split__monogram { width: 75vmin; height: 75vmin; right: -25%; top: 75%; }
  .hero-split__left h1 { font-size: clamp(36px, 8vw, 56px); }
  .hero-split__left .ctas .btn { flex: 1 1 100%; }
  .hero-split__right { min-height: 400px; }
}

/* Legacy .hero kept for backwards compat (other pages) */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-8) var(--sp-4) calc(var(--sp-8) + var(--sp-3));
  max-width: var(--container-default);
  margin: 0 auto;
}
.hero .eyebrow {
  display: inline-block;
  background: var(--color-accent-sky);
  color: var(--color-primary);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.hero h1 {
  font-size: clamp(var(--fs-3xl), 5.5vw, 68px);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}
.hero h1 .accent { color: var(--color-secondary); font-style: italic; }
.hero .lead {
  font-size: var(--fs-md);
  color: var(--color-muted);
  max-width: 520px;
  margin-bottom: var(--sp-5);
  line-height: 1.55;
}
.hero .ctas { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.hero-stage {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--color-accent-sky) 0%, var(--color-accent-cream) 100%);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-stage::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(17,133,210,0.08) 0%, transparent 70%);
  top: 5%; right: -15%;
}
.hero-stage img {
  max-width: 80%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(19,19,41,0.15));
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-6) var(--sp-3); }
  .hero h1 { font-size: clamp(36px, 8vw, 48px); }
  .hero .ctas .btn { flex: 1 1 100%; }
  .hero-stage { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ============================================================
   PROOF — Trust & Authority Section 2 (logos, certs, stats)
   ============================================================ */
.proof {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  padding: var(--sp-6) 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.proof-item {
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--color-border);
}
.proof-item:last-child { border-right: 0; }
.proof-icon {
  width: 36px; height: 36px;
  color: var(--color-secondary);
  margin: 0 auto var(--sp-2);
}
.proof-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
  letter-spacing: var(--tracking-tight);
}
.proof-item span {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-item:nth-child(2) { border-right: 0; }
  .proof-item:nth-child(1), .proof-item:nth-child(2) {
    border-bottom: 1px solid var(--color-border);
  }
}

/* Cert/badge row */
.certs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  flex-wrap: wrap;
}
.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-fg);
  background: #fff;
}
.cert-badge svg { width: 18px; height: 18px; color: var(--color-secondary); }

/* ============================================================
   SOLUTION (categories) — Trust & Authority Section 3
   ============================================================ */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
.cats-card {
  flex: 0 1 calc(25% - var(--sp-3));
  min-width: 220px;
  max-width: calc(25% - var(--sp-3));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  min-height: 180px;
  position: relative;
  overflow: hidden;
}
.cats-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--color-primary); }
.cats-card .arrow {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cats-card:hover .arrow { background: var(--color-secondary); transform: translateX(4px); }
.cats-card .arrow svg { width: 16px; height: 16px; }
.cats-card .cats-card__title {
  display: block;
  padding-right: 48px;
  margin-bottom: var(--sp-2);
}
.cats-card small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-top: auto;
}
@media (max-width: 1024px) {
  .cats-card { flex: 0 1 calc(33.333% - var(--sp-3)); max-width: calc(33.333% - var(--sp-3)); }
}
@media (max-width: 700px) {
  .cats-card { flex: 0 1 calc(50% - var(--sp-3)); max-width: calc(50% - var(--sp-3)); }
}

/* ============================================================
   FEATURED PRODUCTS — section header
   ============================================================ */
.fp-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-5); gap: var(--sp-3); flex-wrap: wrap; }
.fp-header h2 { margin: 8px 0 0; font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-3xl)); }

/* ============================================================
   TIER CARDS (homepage — Impulse light aesthetic)
   ============================================================ */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.tier-card {
  --tier-accent: var(--color-accent-mist);
  background: #FFFFFF;
  color: var(--color-fg);
  padding: 28px 26px 26px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  box-shadow: 0 1px 2px rgba(19,19,41,0.04);
}
.tier-card::before {
  /* slim colored accent stripe across the very top of the card */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--tier-accent);
}
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(19,19,41,0.16), 0 4px 12px -4px rgba(19,19,41,0.06);
}
.tier-card:nth-child(1) { --tier-accent: #C8CFD8; }
.tier-card:nth-child(2) { --tier-accent: #9CBF8E; }
.tier-card:nth-child(3) { --tier-accent: var(--color-secondary); }
.tier-card:nth-child(4) { --tier-accent: #D8B36F; }

.tier-card.is-featured {
  background: linear-gradient(180deg, #F6FAFD 0%, #FFFFFF 35%);
  border: 1.5px solid var(--color-primary);
  transform: scale(1.04);
  z-index: 1;
  box-shadow: 0 32px 64px -20px rgba(19,19,41,0.25), 0 8px 24px -8px rgba(19,19,41,0.10);
}
.tier-card.is-featured::before {
  height: 6px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
.tier-card.is-featured::after {
  /* "MOST POPULAR" pill sits inside the card, top-right */
  content: "MOST POPULAR";
  position: absolute;
  top: 18px; right: 18px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 999px;
}

.tier-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.tier-card__dot {
  width: 12px; height: 12px;
  border-radius: 4px;
  background: var(--tier-accent);
  flex-shrink: 0;
}
.tier-card h3 {
  color: var(--color-primary);
  margin: 0;
  font-size: 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tier-card .tagline {
  font-size: 11px;
  color: var(--color-muted);
  margin-bottom: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-body);
}
.tier-card .price {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 22px;
  letter-spacing: -0.03em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tier-card .price small {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  font-family: var(--font-body);
  letter-spacing: 0;
}
.tier-card ul {
  list-style: none;
  padding: 20px 0 0;
  margin: 0 0 24px;
  flex: 1;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tier-card ul li {
  font-size: 14px;
  color: var(--color-fg);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}
.tier-card ul li svg {
  width: 18px; height: 18px;
  color: var(--color-secondary);
  background: var(--color-accent-sky);
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  margin-top: 1px;
  stroke-width: 3;
}
.tier-card .btn {
  margin-top: auto;
  width: 100%;
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary) !important;
  padding: 12px 16px;
  font-weight: 700;
}
.tier-card .btn:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.tier-card.is-featured .btn {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}
.tier-card.is-featured .btn:hover {
  background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

@media (max-width: 1024px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tier-card.is-featured { transform: none; }
  .tier-card.is-featured:hover { transform: translateY(-4px); }
}
@media (max-width: 560px) {
  .tiers { grid-template-columns: 1fr; }
  .tier-card { padding: 24px 22px; }
  .tier-card .price { font-size: 40px; }
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--color-accent-sky);
  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-primary);
  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: #fff;
  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: #fff; }
.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: #fff;
  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: #fff;
  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-primary); box-shadow: var(--shadow-lg); }
.shop-card .img-wrap {
  aspect-ratio: 1;
  background: var(--color-accent-sky);
  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, #d92626); color: #fff;
  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, #888); font-weight: 500;
  margin-right: 6px; opacity: 0.7; text-decoration: line-through;
}
.shop-card-price ins { text-decoration: none; color: var(--color-secondary, #d92626); }
.product-hero .price__current del {
  color: var(--color-muted, #888); 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, #d92626); }
.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(--color-primary);
  color: #fff;
  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-secondary); color: #fff; }
@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-accent-sky);
  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-pill); text-align: center; font-weight: 700; }
.product-hero .info .ruo {
  background: var(--color-accent-cream);
  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: #fff;
  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(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !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-secondary) !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: #fff;
}
.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-accent-sky); 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: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(19,19,41,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: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(19,19,41,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 */
.impulse-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;
}
/* Items inside the rail no longer need grid-column — they stack via flex */
.impulse-checkout-rail .impulse-points-callout,
.impulse-checkout-rail .impulse-ship-callout,
.impulse-checkout-rail .impulse-bundle-callout { margin: 0; }

/* Order review card — same chrome but no sticky (rail is sticky) */
.woocommerce-checkout-review-order {
  background: linear-gradient(180deg, #F6FAFD 0%, #FFFFFF 35%);
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 20px 48px -16px rgba(19,19,41,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: #FFFFFF !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 Impulse tokens
   (Forces WC/WP defaults into the brand system)
   ============================================================ */

/* Selection */
::selection { background: var(--color-secondary); color: #fff; }

/* 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-secondary); 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(--color-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r-pill) !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-secondary) !important;
  color: #fff !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-pill) !important;
  padding: 10px !important;
  text-align: center;
  width: 80px;
  font-weight: 700;
  color: var(--color-primary);
}

/* 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: #fff !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-primary) !important;
  border-radius: 8px !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: #fff !important;
  border-color: var(--color-primary) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers .current {
  background: var(--color-primary) !important;
  color: #fff !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: #fff !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--color-accent-sky) !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: #fff !important; }
.payment_box { background: var(--color-accent-sky) !important; border-radius: var(--r-sm) !important; color: var(--color-fg) !important; }
.payment_box::before { border-bottom-color: var(--color-accent-sky) !important; }

/* WC sale / featured badge */
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
  background: var(--color-secondary) !important;
  color: #fff !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(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !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-secondary) !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(--color-primary); color: #fff; border: 0; padding: 12px 18px; border-radius: var(--r-pill); font-weight: 700; }

/* Generic submit buttons */
button[type=submit], input[type=submit] {
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  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-secondary); }

/* ============================================================
   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: #fff; 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-accent-sky);
}
.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(183,42,46,0.08); 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: #fff !important;
  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: #fff;
  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-accent-cream);
  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) {
  .cart-row { grid-template-columns: 72px 1fr 100px; gap: 12px; }
  .cart-row__img { width: 72px; height: 72px; }
  .cart-row__qty { grid-column: 2; }
  .cart-row__price { grid-column: 3; }
  .cart-row__remove { grid-column: 3; justify-self: end; }
}

/* ============================================================
   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-primary); background: var(--color-bg-muted); color: var(--color-primary); }
.header-account__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  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: #fff;
  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: #fff;
  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: #fff;
  color: var(--color-fg);
}
.auth-field input:focus, .auth-field select:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(17,133,210,0.15);
}
.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; }
@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: #fff;
  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: #fff; color: var(--color-primary); }
.acct-nav__item.is-active {
  background: var(--color-primary);
  color: #fff;
}
@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__overline {
  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);
}
.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); }

/* ── ROW grid layouts ── */
.acct__row { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.acct__row--hero  { grid-template-columns: 1.75fr 1fr; }
.acct__row--split { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) {
  .acct__row--hero, .acct__row--split { grid-template-columns: 1fr; }
}

/* ── Tier hero card ── */
.acct__tier-card {
  background:
    radial-gradient(circle at 80% 0%, rgba(17,133,210,0.35) 0%, transparent 50%),
    radial-gradient(circle at 10% 100%, rgba(124,79,224,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a2e 0%, #0F0F1A 100%);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.acct__tier-card-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 110%, rgba(17,133,210,0.25) 0%, transparent 50%),
    linear-gradient(135deg, transparent 25%, rgba(255,255,255,0.04) 50%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.acct__tier-card-left { position: relative; z-index: 1; }
.acct__tier-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.acct__tier-name {
  font-family: var(--font-heading);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: var(--sp-3);
}
.acct__tier-sub { color: rgba(255,255,255,0.7); font-size: var(--fs-md); max-width: 420px; margin: 0 0 var(--sp-5); line-height: 1.55; }
.acct__tier-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.acct__tier-metrics > div { display: flex; flex-direction: column; gap: 4px; }
.acct__tier-metrics span { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; }
.acct__tier-metrics strong { font-family: var(--font-heading); font-size: var(--fs-md); color: #fff; font-weight: 700; }
@media (max-width: 540px) {
  .acct__tier-metrics { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* ── Upgrade promo (right column) ── */
.acct__upgrade-promo {
  --accent: var(--color-secondary);
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(17,133,210,0.08);
}
.acct__upgrade-badge {
  position: absolute;
  top: -12px; left: var(--sp-4);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.acct__upgrade-promo h3 { font-family: var(--font-heading); font-size: var(--fs-2xl); margin: 8px 0 6px; font-weight: 800; letter-spacing: -0.02em; }
.acct__upgrade-promo h3 strong { color: var(--accent); }
.acct__upgrade-price { font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--color-fg); font-weight: 700; margin-bottom: var(--sp-3); }
.acct__upgrade-feat { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-direction: column; gap: 10px; }
.acct__upgrade-feat li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-fg);
  font-weight: 500;
}
.acct__upgrade-feat svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.acct__upgrade-promo .btn--accent { background: var(--accent); }
.acct__upgrade-promo .btn--accent:hover { background: var(--color-primary); }
.acct__upgrade-compare { text-align: center; color: var(--color-muted); font-size: var(--fs-xs); margin-top: var(--sp-3); text-decoration: none; }
.acct__upgrade-compare:hover { color: var(--accent); }

/* ── Stat tiles (colored variants) ── */
.acct__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.acct__stat-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.acct__stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.acct__stat-tile--blue     { background: linear-gradient(135deg, var(--color-accent-sky) 0%, #FFFFFF 100%); border-color: rgba(17,133,210,0.2); }
.acct__stat-tile--cream    { background: linear-gradient(135deg, var(--color-accent-cream) 0%, #FFFFFF 100%); border-color: rgba(247,242,229,0.6); }
.acct__stat-tile--sage     { background: linear-gradient(135deg, var(--color-accent-sage) 0%, #FFFFFF 100%); border-color: rgba(232,240,229,0.6); }
.acct__stat-tile--lavender { background: linear-gradient(135deg, var(--color-accent-lavender) 0%, #FFFFFF 100%); border-color: rgba(238,229,247,0.6); }
.acct__stat-value { font-family: var(--font-heading); font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; color: var(--color-primary); margin: 6px 0 4px; letter-spacing: -0.02em; line-height: 1; }
.acct__stat-value--text { font-size: var(--fs-md); font-family: var(--font-body); font-weight: 600; }
.acct__stat-foot { font-size: 11px; color: var(--color-muted); letter-spacing: 0.04em; }
@media (max-width: 900px) { .acct__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .acct__stats { grid-template-columns: 1fr; } }

/* ── Points panel (split-row left card) ── */
.acct__points-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(31,122,72,0.08) 0%, transparent 50%),
    var(--color-accent-sage);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.acct__points-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.acct__points-big { font-family: var(--font-heading); font-size: clamp(64px, 7vw, 88px); font-weight: 800; color: var(--color-primary); line-height: 1; margin: 0; letter-spacing: -0.025em; }
.acct__points-cash { color: var(--color-fg); font-size: var(--fs-md); margin: 4px 0 var(--sp-4); font-weight: 500; }
.acct__progress-meta { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--color-fg); margin-bottom: 8px; font-weight: 600; }
.acct__progress { background: rgba(19,19,41,0.1); border-radius: var(--r-pill); height: 8px; overflow: hidden; margin-bottom: var(--sp-3); }
.acct__progress-bar { background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); height: 100%; transition: width var(--dur-slow) var(--ease-out); border-radius: var(--r-pill); }
.acct__points-help { font-size: 12px; color: var(--color-muted); margin: auto 0 0; line-height: 1.5; }

/* ── Recent activity (split-row right card) ── */
.acct__recent {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.acct__recent-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.acct__recent-header h3 { font-size: var(--fs-lg); margin: 0; }
.acct__recent-list { list-style: none; padding: 0; margin: 0; }
.acct__recent-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--sp-3);
}
.acct__recent-list li:last-child { border-bottom: 0; }
.acct__recent-left strong { font-family: var(--font-heading); color: var(--color-primary); }
.acct__meta { display: block; font-size: var(--fs-xs); color: var(--color-muted); margin-top: 4px; }
.acct__recent-right { display: flex; align-items: center; gap: var(--sp-3); }
.acct__recent-right strong { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--fs-md); }
.acct__empty { text-align: center; padding: var(--sp-4) 0; color: var(--color-muted); margin: auto 0; }
.acct__empty p { margin: 0 0 var(--sp-3); }

/* ============================================================
   MEMBERSHIP PAGE — conversion landing
   ============================================================ */
.mem-hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(17,133,210,0.25) 0%, transparent 50%),
    radial-gradient(circle at 10% 100%, rgba(124,79,224,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #0F0F1A 0%, #1a1a2e 100%);
  color: #fff;
  padding: var(--sp-8) 0 var(--sp-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mem-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
  pointer-events: none;
}
.mem-hero > .container { position: relative; z-index: 1; }
.mem-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.mem-hero__title {
  color: #fff;
  font-size: clamp(36px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  max-width: 900px;
  margin: 0 auto var(--sp-3);
  letter-spacing: -0.02em;
}
.mem-hero__accent {
  background: linear-gradient(110deg, var(--color-secondary), #6CA8E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.mem-hero__lead {
  color: rgba(255,255,255,0.75);
  font-size: var(--fs-md);
  max-width: 620px;
  margin: 0 auto var(--sp-5);
  line-height: 1.55;
}
.mem-hero__ctas { display: flex; gap: 12px; justify-content: center; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.mem-hero__ctas .btn--primary { background: #fff; color: var(--color-primary); }
.mem-hero__ctas .btn--primary:hover { background: var(--color-secondary); color: #fff; }
.mem-hero__ctas .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.mem-hero__ctas .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.mem-hero__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  max-width: 760px;
  margin: var(--sp-5) auto 0;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mem-hero__metrics > div { text-align: center; }
.mem-hero__metrics strong { display: block; font-family: var(--font-heading); font-size: clamp(20px, 2.5vw, 32px); color: #fff; font-weight: 800; letter-spacing: -0.02em; }
.mem-hero__metrics span { display: block; font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 700px) {
  .mem-hero__metrics { grid-template-columns: repeat(2, 1fr); }
  .mem-hero__ctas .btn { flex: 1 1 100%; }
}

/* Tier cards (paid plans) */
.mem-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.mem-tier {
  --accent: var(--color-secondary);
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mem-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mem-tier--featured {
  border-color: var(--accent);
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(124,79,224,0.15);
  z-index: 1;
}
.mem-tier--featured:hover { transform: scale(1.03) translateY(-4px); }
.mem-tier__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.mem-tier__tag { font-family: var(--font-body); font-size: 11px; color: var(--color-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.mem-tier__name { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 36px); margin: 8px 0 var(--sp-3); color: var(--color-primary); font-weight: 800; letter-spacing: -0.02em; }
.mem-tier__price {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.mem-tier__price .curr { font-size: 0.5em; vertical-align: super; color: var(--color-muted); }
.mem-tier__price small { font-size: 14px; color: var(--color-muted); font-weight: 500; margin-left: 4px; }
.mem-tier__feat { list-style: none; padding: 0; margin: 0 0 var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: 10px; }
.mem-tier__feat li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-fg);
  line-height: 1.5;
}
.mem-tier__feat svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.mem-tier__feat li.is-disabled { color: var(--color-muted); }
.mem-tier__feat li.is-disabled svg { color: var(--color-muted); }
.mem-tier--featured .btn--accent { background: var(--accent); }
.mem-tier--featured .btn--accent:hover { background: var(--color-primary); }
@media (max-width: 1024px) {
  .mem-tiers { grid-template-columns: repeat(2, 1fr); }
  .mem-tier--featured { transform: none; }
  .mem-tier--featured:hover { transform: translateY(-4px); }
}
@media (max-width: 540px) { .mem-tiers { grid-template-columns: 1fr; } }

/* Value-prop strip (4 features) */
.mem-value { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.mem-value > div {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--color-border);
}
.mem-value svg { width: 36px; height: 36px; color: var(--color-secondary); margin-bottom: var(--sp-3); }
.mem-value h3 { font-size: var(--fs-lg); margin: 0 0 8px; }
.mem-value p { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .mem-value { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mem-value { grid-template-columns: 1fr; } }

/* Compare table */
.mem-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mem-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 720px;
}
.mem-compare th, .mem-compare td {
  padding: 16px 20px;
  text-align: center;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border);
}
.mem-compare th {
  background: var(--color-bg-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg);
}
.mem-compare th:first-child, .mem-compare td:first-child { text-align: left; font-weight: 600; color: var(--color-fg); }
.mem-compare th.is-featured, .mem-compare td.is-featured {
  background: rgba(124,79,224,0.05);
  font-weight: 700;
  color: var(--color-primary);
}
.mem-compare tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   SHOP TOOLBAR (search + category chips, amino-style)
   ============================================================ */
.shop-toolbar {
  padding: var(--sp-5) 0 var(--sp-3);
  background: #fff;
  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: #fff;
  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: #fff;
  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-primary); color: var(--color-primary); }
.chip.is-active {
  background: var(--color-primary);
  color: #fff;
  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: #fff; 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-primary); }
.dose-tile.is-active { border-color: var(--color-primary); background: rgba(0,0,0,0.02); }
.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: #fff;
  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-primary); }
.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: #fff;
  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: #F7A300; color: var(--color-primary); }
.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: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  padding: 0 22px;
  font-weight: 700;
  border-radius: var(--r-pill);
  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: 8px !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: 14px !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 ---- */
  .hero-glove__copy h1 { font-size: clamp(32px, 8.5vw, 44px) !important; line-height: 1.05 !important; }
  .hero-glove__copy .lead { font-size: 15px !important; }
  .hero-glove__cred { gap: 12px !important; }
  .hero-glove__cred span { font-size: 11px !important; }

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

  /* ---- Tier cards: tighten ---- */
  .tier-card { padding: 22px 20px !important; border-radius: 16px !important; }
  .tier-card .price { font-size: 36px !important; }

  /* ---- 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 { grid-template-columns: 72px 1fr !important; gap: 12px !important; }

  /* ---- 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 ---- */
  #impulse-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) {
  .hero-glove__copy h1 { font-size: 32px !important; }
  .ftr-card { flex: 0 0 160px !important; }
  .tier-card .price { font-size: 32px !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
   ============================================================ */

/* ---- Hide legacy static strip (replaced by always-on scrolling marquee) ---- */
.trust-strip,
.trust-strip--desktop,
.trust-strip--mobile { display: none !important; }

/* ---- Scrolling trust marquee — desktop + mobile, always on ---- */
.trust-marquee {
  background: var(--color-secondary);
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 99;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 900px) {
  .trust-marquee { position: sticky; top: 56px; border-top: 1px solid rgba(255,255,255,0.18); }
}
.trust-marquee__track {
  display: inline-flex;
  white-space: nowrap;
  padding: 9px 0;
  animation: impulse-marquee 28s linear infinite;
  will-change: transform;
}
.trust-marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 28px;
  position: relative;
}
@media (max-width: 782px) {
  .trust-marquee__item { font-size: 11px; padding: 0 18px; }
  .trust-marquee__track { padding: 8px 0; animation-duration: 22s; }
}
.trust-marquee__item + .trust-marquee__item::before {
  content: "•";
  position: absolute;
  left: -2px;
  color: rgba(255,255,255,0.55);
}
@keyframes impulse-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-marquee__track { animation: none; }
}

/* ---- Header logo sizing (mobile gets bigger now that bg is transparent) ---- */
@media (max-width: 782px) {
  .header-logo img,
  .site-logo {
    height: 54px !important;
    width: auto !important;
    max-width: 180px !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: #F2F2F0 !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;
  }
  .hero-glove__inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "image"
      "foot" !important;
    grid-template-rows: auto 1fr auto !important;
    padding: 16px 18px 56px !important;
    gap: 0 !important;
    width: 100%;
    align-items: stretch !important;
    text-align: center !important;
    position: relative;
    z-index: 2;
    display: grid !important;
    min-height: calc(100vh - 56px) !important;
  }
  /* Headline sits high; CTAs lifted up from bottom */
  .hero-glove__head { max-width: 100% !important; text-align: center !important; align-self: start !important; padding-top: 0 !important; }
  .hero-glove__head h1 {
    font-size: clamp(42px, 11.5vw, 60px) !important;
    line-height: 1.0 !important;
    text-align: center !important;
    margin: 0 auto 10px !important;
    color: var(--color-primary) !important;
  }
  .hero-glove__head .lead {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 92% !important;
    font-size: 15px !important;
    color: var(--color-primary) !important;
    font-weight: 600;
  }
  /* Image grid-area kept empty (the section background is the image) */
  .hero-glove__image { display: none !important; }

  .hero-glove__foot { max-width: 100% !important; text-align: center !important; align-self: end !important; padding-bottom: 5vh !important; }
  .hero-glove__foot .ctas {
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    flex-direction: column !important;
  }
  .hero-glove__foot .ctas .btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 16px 22px !important;
    font-size: 15px !important;
  }
  .hero-glove__foot .btn--primary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #0A6BB0 100%) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px -8px rgba(17,133,210,0.55), 0 2px 6px rgba(19,19,41,0.18) !important;
  }
  .hero-glove__foot .btn--ghost {
    background: rgba(255,255,255,0.96) !important;
    color: var(--color-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
    box-shadow: 0 6px 16px -6px rgba(19,19,41,0.22), 0 2px 4px rgba(19,19,41,0.1) !important;
    backdrop-filter: blur(4px);
  }
  /* Hide cred chips on mobile (per user request earlier) */
  .hero-glove__cred { display: none !important; }
  .hero-glove__copy { max-width: 100% !important; text-align: center !important; }
  .hero-glove__copy h1 { text-align: center !important; }
  .hero-glove__copy .lead { text-align: center !important; margin: 0 auto !important; }
  .hero-glove__copy .ctas { justify-content: center !important; }
  /* hide the desktop spacer column entirely on mobile (image is now the bg) */
  .hero-glove__spacer { display: none !important; }
}

/* ---- 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; }
  .trust-marquee { z-index: 480 !important; }
  .header-nav {
    inset: 56px 0 0 0 !important;  /* drops right under the 56px header */
    z-index: 400 !important;
    background: #fff !important;
    padding: 16px !important;
    max-height: calc(100vh - 56px);
    box-shadow: 0 12px 28px rgba(19,19,41,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 */
  body.nav-open .trust-marquee { display: none !important; }
}

/* ---- SINGLE-PRODUCT: top RUO topbar ---- */
.ruo-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #F7F2E5 0%, #FAF6EB 100%);
  border-bottom: 1px solid #E7DFC8;
  color: var(--color-primary);
  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 #impulse-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;
  }
  /* Hide the sticky ATC when the cart drawer is open (so it doesn't overlay the drawer) */
  body.cart-open .sticky-atc {
    transform: translateY(calc(100% + 60px)) !important;
    pointer-events: none !important;
    transition: transform 0.25s var(--ease-out, ease-out);
  }
}

/* ---- MEMBERSHIP PAGE — land directly at the plans on mobile ---- */
@media (max-width: 782px) {
  html body .mem-hero,
  html body main .mem-hero,
  html body section.mem-hero { display: none !important; }
}

/* ============================================================
   CART DRAWER — slide-in from right (mobile + desktop)
   ============================================================ */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  visibility: hidden;
}
.cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(19,19,41,0.45);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }

.cart-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 520px;            /* desktop default — was 440 */
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 40px -8px rgba(19,19,41,0.22);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
/* Desktop only: scale up the drawer typography + image so it feels right
   in the wider panel without changing the mobile compact look. */
@media (min-width: 781px) {
  .cart-drawer__panel { max-width: 540px; }
  .cart-drawer__head { padding: 16px 22px !important; }
  .cart-drawer__head h2 { font-size: 19px !important; }
  .cart-drawer__close { width: 34px !important; height: 34px !important; }
  .cart-drawer__items { padding: 10px 18px 0 !important; gap: 12px !important; }
  .cart-drawer__item {
    padding: 14px !important;
    grid-template-columns: 72px 1fr 24px !important;
    gap: 14px !important;
  }
  .cart-drawer__item-img { width: 72px !important; height: 72px !important; }
  .cart-drawer__item-title { font-size: 15px !important; margin-bottom: 6px !important; }
  .cart-drawer__qty { height: 30px !important; padding: 0 10px 0 12px !important; }
  .cart-drawer__qty-select { font-size: 13px !important; line-height: 30px !important; height: 30px !important; }
  .cart-drawer__line { font-size: 15px !important; }
  .cart-drawer__line del { font-size: 12.5px !important; }
  .cart-drawer__bundle-upgrade { padding: 3px 9px !important; font-size: 10px !important; }
  .cart-drawer__bundle.is-on { padding: 3px 8px !important; font-size: 10px !important; }

  .cart-drawer__protection { padding: 14px 22px !important; font-size: 14px !important; }
  .cart-drawer__protection-label svg { width: 16px !important; height: 16px !important; }
  .cart-drawer__protection-value { font-size: 14px !important; }
  .cart-drawer__tip { width: 18px !important; height: 18px !important; font-size: 11px !important; }

  .cart-drawer__promo { padding: 12px 22px !important; }
  .cart-drawer__promo-toggle { font-size: 14px !important; padding: 6px 0 !important; }

  .cart-drawer__totals { padding: 18px 22px 22px !important; }
  .cart-drawer__totals-row { padding: 6px 0 !important; font-size: 14px !important; }
  .cart-drawer__totals-row strong { font-size: 16px !important; }
  .cart-drawer__totals-note { font-size: 12px !important; margin: 6px 0 14px !important; }
  .cart-drawer__points { margin: 8px 0 0 !important; padding: 8px 12px !important; font-size: 13px !important; }
  .cart-drawer__checkout { padding: 14px 18px !important; font-size: 15px !important; margin-top: 10px !important; }
  .cart-drawer__continue { font-size: 13px !important; padding: 6px 0 !important; margin-top: 6px !important; }
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer__head h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.cart-drawer__close {
  background: var(--color-bg-muted);
  border: 0;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.cart-drawer__close:hover { background: var(--color-primary); color: #fff; }

.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.cart-drawer__loading {
  padding: 40px 22px;
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
}

/* Empty state */
.cart-drawer__empty {
  padding: 48px 24px 24px;
  text-align: center;
}
.cart-drawer__empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-accent-sky);
  margin: 0 auto 20px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--color-primary);
}
.cart-drawer__empty-icon svg { width: 32px; height: 32px; }
.cart-drawer__empty-title { font-family: var(--font-heading); font-size: 20px; color: var(--color-primary); margin: 0 0 6px; font-weight: 700; }
.cart-drawer__empty-sub { color: var(--color-muted); font-size: 14px; margin: 0 0 24px; }

/* Items list */
.cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: 12px 22px 4px;
}
.cart-drawer__item {
  display: grid;
  grid-template-columns: 72px 1fr 28px;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-drawer__item:last-child { border-bottom: 0; }
.cart-drawer__item-img {
  display: block;
  width: 72px; height: 72px;
  border-radius: 10px;
  background: var(--color-bg-muted);
  overflow: hidden;
  flex-shrink: 0;
}
.cart-drawer__item-img img { width: 100%; height: 100%; object-fit: cover; padding: 0; display: block; }
.cart-drawer__item-title {
  display: block;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 8px;
  text-decoration: none;
}
.cart-drawer__item-title:hover { color: var(--color-secondary); }
.cart-drawer__item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.cart-drawer__qty .qty-btn {
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.cart-drawer__qty .qty-btn:hover { background: var(--color-bg-muted); }
.cart-drawer__qty .qty-val {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
}
.cart-drawer__line { font-weight: 700; color: var(--color-primary); font-size: 14px; }
.cart-drawer__line .woocommerce-Price-amount { color: inherit; }
.cart-drawer__remove {
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  padding: 2px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.cart-drawer__remove:hover { background: var(--color-destructive); color: #fff; }

/* Upsell card */
.cart-drawer__upsell {
  margin: 12px 22px;
  padding: 14px 16px;
  background: var(--color-accent-cream);
  border-radius: 12px;
  border-left: 3px solid var(--color-secondary);
}
.cart-drawer__upsell-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.cart-drawer__upsell-text { font-size: 13px; color: var(--color-primary); margin: 0 0 10px; }
.cart-drawer__upsell-ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.cart-drawer__upsell-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #FFFFFF;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.cart-drawer__upsell-btn:hover { background: var(--color-primary); color: #fff; }

/* Totals + footer CTAs */
.cart-drawer__totals {
  padding: 16px 22px 22px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-muted);
}
.cart-drawer__totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  margin-bottom: 4px;
}
.cart-drawer__totals-row strong {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-primary);
  font-weight: 700;
}
.cart-drawer__totals-note { font-size: 11px; color: var(--color-muted); margin: 0 0 14px; }
.cart-drawer__checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 22px !important;
  font-size: 15px !important;
}
.cart-drawer__continue {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: underline;
}

/* Body scroll-lock when drawer is open */
body.cart-open { overflow: hidden; }

/* Mobile: fill width minus small inset */
@media (max-width: 540px) {
  .cart-drawer__panel { max-width: 92%; }
}

/* ---- CART DRAWER — conversion upgrades + bag icon size + drawer width ---- */

/* Mobile drawer width: leave a sliver of the page visible behind */
@media (max-width: 540px) {
  .cart-drawer__panel { max-width: 85% !important; }
}
@media (max-width: 380px) {
  .cart-drawer__panel { max-width: 88% !important; }
}

/* Bundle pricing explainer — per-product, shown once at top of drawer */
.cart-drawer__bundlebar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 22px 6px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #F4FAFE 0%, #FFFFFF 100%);
  border: 1px solid #DAEBF6;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-primary);
}
.cart-drawer__bundlebar-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  flex-shrink: 0;
}
.cart-drawer__bundlebar-icon svg { width: 13px; height: 13px; }
.cart-drawer__bundlebar-text strong { font-weight: 700; color: var(--color-secondary); }

/* Per-line bundle status (under the product title) */
.cart-drawer__item-bundle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.cart-drawer__bundle.is-on {
  display: inline-flex;
  align-items: center;
  background: rgba(31,122,72,0.08);
  color: var(--color-success);
  border: 1px solid rgba(31,122,72,0.18);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.cart-drawer__bundle-next {
  color: var(--color-muted);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.01em;
}
.cart-drawer__bundle-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-secondary, #4F9BE8);
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
  white-space: nowrap;
}
.cart-drawer__bundle-upgrade:hover { background: var(--color-primary); }
.cart-drawer__bundle-upgrade:active { transform: scale(0.97); }
.cart-drawer__bundle-upgrade:disabled { opacity: 0.6; cursor: wait; }

/* Trust signals row — smaller, balanced */
.cart-drawer__trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 14px 0 4px;
  font-size: 10px;
  color: var(--color-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cart-drawer__trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  position: relative;
  line-height: 1;
}
.cart-drawer__trust span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-border);
}
.cart-drawer__trust svg {
  width: 11px;
  height: 11px;
  color: var(--color-secondary);
  flex-shrink: 0;
  stroke-width: 2.6;
}

/* Sticky totals — always visible at the bottom of the drawer even while scrolling items */
.cart-drawer__body { display: flex; flex-direction: column; }
.cart-drawer__items { flex: 1 0 auto; }
.cart-drawer__totals {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -8px 24px -8px rgba(19,19,41,0.12);
}

/* ---- Checkout bundle savings callout ---- */
.impulse-bundle-callout {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #F4FAFE 0%, #FFFFFF 100%);
  border: 1px solid #DAEBF6;
  border-radius: 12px;
}
.impulse-bundle-callout.is-saving {
  background: linear-gradient(180deg, #E9F7EE 0%, #FFFFFF 100%);
  border-color: #BFE3CD;
}
.impulse-bundle-callout__hdr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.impulse-bundle-callout__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.impulse-bundle-callout__icon--alt { background: var(--color-secondary); }
.impulse-bundle-callout__icon svg { width: 15px; height: 15px; }
.impulse-bundle-callout__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.impulse-bundle-callout__title .woocommerce-Price-amount { color: var(--color-success); font-weight: 800; }
.impulse-bundle-callout__sub {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.4;
}
.impulse-bundle-callout__sub strong { color: var(--color-primary); }
.impulse-bundle-callout__list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.impulse-bundle-callout__list li {
  font-size: 13px;
  color: var(--color-muted);
  padding: 4px 0;
  line-height: 1.4;
}
.impulse-bundle-callout__list li strong { color: var(--color-primary); font-weight: 700; }

/* ---- Bundle strikethrough display ---- */
.cart-row__price del,
.cart-drawer__line del {
  color: var(--color-muted);
  text-decoration: line-through;
  font-weight: 500;
  margin-right: 6px;
  opacity: 0.75;
}
.cart-row__price ins,
.cart-drawer__line ins {
  color: var(--color-success);
  font-weight: 800;
  text-decoration: none;
}
.cart-row__price del .woocommerce-Price-amount,
.cart-drawer__line del .woocommerce-Price-amount { color: inherit; }
.cart-row__price ins .woocommerce-Price-amount,
.cart-drawer__line ins .woocommerce-Price-amount { color: inherit; }

.cart-row__price .bundle-saved {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-success);
  background: rgba(31,122,72,0.1);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.cart-row__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.cart-drawer__line { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Free-shipping progress (cart drawer + checkout) ---- */
.cart-drawer__shipbar,
.impulse-ship-callout {
  margin: 16px 22px 6px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #FFF9EB 0%, #FFFFFF 100%);
  border: 1px solid #F0E2BD;
  border-radius: 12px;
}
.impulse-ship-callout { margin: 0 0 12px; }
.cart-drawer__shipbar.is-unlocked,
.impulse-ship-callout.is-unlocked {
  background: linear-gradient(180deg, #E9F7EE 0%, #FFFFFF 100%);
  border-color: #BFE3CD;
}
.impulse-ship-callout__hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.impulse-ship-callout__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #A7ADB5;
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.impulse-ship-callout.is-unlocked .impulse-ship-callout__icon { background: var(--color-success); }
.impulse-ship-callout__icon svg { width: 14px; height: 14px; }
.impulse-ship-callout__msg,
.cart-drawer__shipbar-msg {
  font-size: 13px;
  color: var(--color-primary);
  line-height: 1.4;
}
.impulse-ship-callout__msg strong,
.cart-drawer__shipbar-msg strong { color: var(--color-primary); font-weight: 700; }
.cart-drawer__shipbar.is-unlocked .cart-drawer__shipbar-msg strong,
.impulse-ship-callout.is-unlocked .impulse-ship-callout__msg strong { color: var(--color-success); }

.impulse-ship-callout__bar,
.cart-drawer__shipbar-bar {
  height: 8px;
  border-radius: 999px;
  background: #F0E5C8;
  overflow: hidden;
  margin-top: 8px;
}
.cart-drawer__shipbar.is-unlocked .cart-drawer__shipbar-bar,
.impulse-ship-callout.is-unlocked .cart-drawer__shipbar-bar,
.cart-drawer__shipbar.is-unlocked .impulse-ship-callout__bar,
.impulse-ship-callout.is-unlocked .impulse-ship-callout__bar { background: #C8E8D3; }

.impulse-ship-callout__fill,
.cart-drawer__shipbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #A7ADB5 0%, #F0C964 100%);
  border-radius: 999px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 8px rgba(212,169,63,0.4);
}
.cart-drawer__shipbar.is-unlocked .cart-drawer__shipbar-fill,
.impulse-ship-callout.is-unlocked .impulse-ship-callout__fill {
  background: linear-gradient(90deg, var(--color-success), #2BA869);
  box-shadow: 0 0 8px rgba(31,122,72,0.4);
}

/* ---- Points-earned callouts (checkout + cart drawer) ---- */
.impulse-points-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #F6F8FB 0%, #FFFFFF 100%);
  border: 1px solid #E2E5EA;
  border-radius: 12px;
  font-size: 13px;
  color: var(--color-primary);
  line-height: 1.4;
}
.impulse-points-callout__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #A7ADB5;
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.impulse-points-callout__icon svg { width: 14px; height: 14px; }
.impulse-points-callout__msg strong { font-weight: 800; color: #8A9099; }
.impulse-points-callout__mult { color: var(--color-muted); font-size: 12px; }

.cart-drawer__points {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 8px 10px;
  background: #F6F8FB;
  border: 1px solid #E2E5EA;
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-primary);
  line-height: 1.3;
}
.cart-drawer__points svg { color: #A7ADB5; flex-shrink: 0; }
.cart-drawer__points strong { font-weight: 800; color: #8A9099; }

/* ---- Quick-add buttons (bundle hints + featured cards) ---- */
.impulse-quick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  margin-left: 8px;
  background: var(--color-secondary);
  color: #fff;
  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;
}
.impulse-quick-add:hover { background: var(--color-primary); transform: translateY(-1px); }
.impulse-quick-add:disabled { background: var(--color-muted); cursor: wait; transform: none; }
.impulse-quick-add--mini { padding: 3px 9px; font-size: 11px; margin-left: 6px; }
.impulse-quick-add--circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

/* ---- "Add more to your order" panel (checkout rail bottom) ---- */
.impulse-checkout-addmore {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(19,19,41,0.04);
}
.impulse-checkout-addmore__hdr {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  gap: 2px;
}
.impulse-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;
}
.impulse-checkout-addmore__hdr span {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: 600;
}
.impulse-checkout-addmore__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.impulse-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);
}
.impulse-checkout-addmore__item:last-child { border-bottom: 0; }
.impulse-checkout-addmore__img {
  display: block;
  width: 44px; height: 44px;
  background: var(--color-bg-muted);
  border-radius: 8px;
  overflow: hidden;
}
.impulse-checkout-addmore__img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.impulse-checkout-addmore__body { min-width: 0; }
.impulse-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;
}
.impulse-checkout-addmore__price {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
}
.impulse-checkout-addmore__price .woocommerce-Price-amount { color: var(--color-primary); font-weight: 700; }

/* ---- Best pairings panel (checkout rail) — polished ---- */
.impulse-pairings {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFD 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 18px 18px 14px;
  margin-top: 10px;
  box-shadow: 0 1px 2px rgba(19,19,41,0.04);
}
.impulse-pairings__hdr { margin-bottom: 12px; }
.impulse-pairings__hdr h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.impulse-pairings__hdr span {
  display: block;
  font-size: 11.5px;
  color: var(--color-muted);
  font-weight: 600;
}
.impulse-pairings__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* HORIZONTAL variant — desktop pairings under the form */
.impulse-pairings--horizontal { margin-top: 18px; }
.impulse-pairings--horizontal .impulse-pairings__list {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 12px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.impulse-pairings--horizontal .impulse-pairings__item {
  flex: 0 0 calc((100% - 36px) / 4);   /* 4 cards across, 12px gap */
  min-width: 180px;
  grid-template-columns: 1fr !important;  /* stack image / body inside the column */
  align-items: stretch !important;
  text-align: left;
  padding: 12px !important;
}
.impulse-pairings--horizontal .impulse-pairings__img {
  width: 100% !important;
  height: 110px !important;
  margin-bottom: 8px;
}
.impulse-pairings--horizontal .impulse-pairings__add {
  align-self: flex-start;
  margin-top: 8px;
}
@media (max-width: 1200px) {
  .impulse-pairings--horizontal .impulse-pairings__item { flex-basis: calc((100% - 24px) / 3); }
}
@media (max-width: 980px) {
  .impulse-pairings--horizontal .impulse-pairings__list { flex-direction: column !important; }
  .impulse-pairings--horizontal .impulse-pairings__item { flex-basis: auto; min-width: 0; }
}
.impulse-pairings__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.impulse-pairings__item:hover {
  border-color: var(--color-secondary);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(19,19,41,0.14);
}
.impulse-pairings__img {
  display: block;
  width: 56px; height: 56px;
  background: linear-gradient(180deg, var(--color-accent-sky) 0%, #F4F8FB 100%);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.impulse-pairings__img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
}
.impulse-pairings__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.impulse-pairings__reason {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-bg-muted);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
.impulse-pairings__reason.is-bundle   { color: var(--color-success);   background: rgba(31,122,72,0.10); }
.impulse-pairings__reason.is-shipping { color: #8A9099;                 background: rgba(212,169,63,0.12); }
.impulse-pairings__reason.is-diluent  { color: var(--color-secondary);  background: rgba(17,133,210,0.10); }
.impulse-pairings__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.impulse-pairings__price {
  font-size: 12.5px;
  color: var(--color-muted);
  font-weight: 600;
}
.impulse-pairings__price .woocommerce-Price-amount { color: var(--color-primary); font-weight: 800; }

/* Retire the old class to avoid double-render */
.impulse-checkout-addmore { display: none; }

/* ---- View add-ons CTA inside the free-shipping callout ---- */
.impulse-ship-callout__cta {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #8A9099;
  border: 1px solid #E2C97A;
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  vertical-align: middle;
  white-space: nowrap;
}
.impulse-ship-callout__cta:hover {
  background: #A7ADB5;
  color: #fff;
  border-color: #A7ADB5;
}

/* flash highlight when scrolled-to */
.impulse-pairings.is-flash {
  animation: impulse-flash 1.4s ease-out;
}
@keyframes impulse-flash {
  0%   { box-shadow: 0 0 0 4px rgba(17,133,210,0); }
  35%  { box-shadow: 0 0 0 4px rgba(17,133,210,0.45); }
  100% { box-shadow: 0 0 0 4px rgba(17,133,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; }

  /* Hide the in-flow rail on mobile — content moves to sticky summary at top.
     EXCEPT #payment, which contains the (only) payment methods + Apple Pay /
     card form. Hiding the whole rail kills checkout on mobile. So: keep the
     rail visible structurally, but hide ONLY its non-#payment children. */
  .impulse-checkout-rail > #order_review_heading,
  .impulse-checkout-rail > #order_review > .woocommerce-checkout-review-order-table,
  .impulse-checkout-rail > #order_review > .shop_table,
  .impulse-checkout-rail > .woocommerce-checkout-review-order,
  .impulse-checkout-rail > .impulse-pairings {
    display: none !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). */
  .impulse-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. */
  .impulse-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 > .impulse-checkout-banners { order: 0 !important; }
  body.woocommerce-checkout form.checkout > .impulse-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: #fff !important;
    border: 1px solid var(--color-border, #E5E7EB) !important;
    border-radius: 10px !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, #1C1F24) !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 #E5E7EB !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
  }
}

/* Sticky collapsed order summary at top of mobile checkout */
#impulse-mobile-summary {
  display: none;
  position: relative;                                /* was sticky — release */
  margin: 0 0 18px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 6px 18px -10px rgba(19,19,41,0.08);
  overflow: hidden;
}
@media (max-width: 782px) {
  #impulse-mobile-summary { display: block; }
}
.impulse-mobile-summary__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
}
.impulse-mobile-summary__total { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--color-primary); }
.impulse-mobile-summary__total .woocommerce-Price-amount { color: inherit; }
.impulse-mobile-summary__toggle svg { transition: transform 0.2s var(--ease-out); color: var(--color-muted); }
#impulse-mobile-summary.is-open .impulse-mobile-summary__toggle svg { transform: rotate(180deg); }
.impulse-mobile-summary__body {
  padding: 0 16px 16px;
  max-height: none;
  overflow-y: visible;
  border-top: 1px solid var(--color-border);
  background: #FAFCFE;
}
.impulse-mobile-summary__body table { width: 100%; font-size: 13.5px; border-collapse: collapse; }
.impulse-mobile-summary__body th,
.impulse-mobile-summary__body td { padding: 10px 0; border-bottom: 1px solid var(--color-border); color: var(--color-primary); }
.impulse-mobile-summary__body thead { display: none; }
.impulse-mobile-summary__body .product-name { font-weight: 700; }
.impulse-mobile-summary__body .product-quantity {
  color: var(--color-muted); font-weight: 600; font-size: 12px; margin-left: 4px;
}
.impulse-mobile-summary__body .product-total .amount,
.impulse-mobile-summary__body td.product-total { text-align: right; font-weight: 700; }
.impulse-mobile-summary__body tfoot th { font-weight: 600; color: var(--color-muted); }
.impulse-mobile-summary__body tfoot tr.order-total th,
.impulse-mobile-summary__body tfoot tr.order-total td {
  border-bottom: 0; padding-top: 14px;
  font-size: 16px; font-weight: 800; color: var(--color-primary);
}

/* DEFENSIVE: ensure no child of the ship-callout picks up a stray solid blue
   background — only the brand icon circle should be colored. */
body.woocommerce-checkout .impulse-ship-callout *:not(.impulse-ship-callout__icon):not(button) {
  background-color: transparent !important;
}

/* Sticky bottom "Pay $X" CTA on mobile */
#impulse-mobile-pay {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px -8px rgba(19,19,41,0.16);
}
@media (max-width: 782px) {
  #impulse-mobile-pay { display: block; }
}
.impulse-mobile-pay__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #0A6BB0 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(17,133,210,0.55);
}
.impulse-mobile-pay__btn .woocommerce-Price-amount { color: inherit; }
.impulse-mobile-pay__btn:active { transform: translateY(1px); }
/* Hide the in-form Place Order button on mobile — sticky CTA submits the form for it.
   Use accessible-hide pattern so WC handlers can still find it. Do NOT use display:none
   (would break WC's checkout.js) or pointer-events:none (would block jQuery .click triggers). */
@media (max-width: 782px) {
  body.woocommerce-checkout #place_order {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !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.is-filled label[for],
body.woocommerce-checkout .form-row.is-focused label[for] {
  top: 14px !important;
  color: var(--color-primary) !important;
  background: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
body.woocommerce-checkout .form-row .required { color: var(--color-destructive); font-weight: 800; }

/* 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: 8px !important;
  padding: 0 14px !important;
  background: #FFFFFF !important;
}
.woocommerce-checkout .select2-container .select2-selection__rendered {
  line-height: 46px !important;
  color: var(--color-primary) !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-secondary) !important;
  box-shadow: 0 0 0 3px rgba(17,133,210,0.12) !important;
}
.select2-dropdown {
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px -8px rgba(19,19,41,0.18) !important;
  overflow: hidden;
}
.select2-results__option { padding: 10px 14px !important; font-size: 14px !important; }
.select2-results__option--highlighted { background: var(--color-accent-sky) !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: 8px;
  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='%231F7A48' 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.impulse-eta th { font-weight: 600; color: var(--color-muted); }
tr.impulse-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.impulse-card-collapsed #customer_details,
body.impulse-card-collapsed .woocommerce-additional-fields { display: block !important; }

/* NOTE: The "Quick Checkout" panel (#impulse-express + .impulse-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). */
  .impulse-mobile-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #F4FAFE;
    border: 1px solid #DAEBF6;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
  }
  .impulse-mobile-trust svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .impulse-mobile-trust.is-express {
    background: linear-gradient(135deg, #EDF6FF 0%, #F8FCFF 100%);
    color: #14171C;
  }
  .impulse-mobile-trust .impulse-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: 10px !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; }
  .impulse-field-toggle {
    display: inline-block;
    margin: -4px 0 12px;
    padding: 4px 0;
    background: transparent;
    border: 0;
    color: var(--color-primary, #14171C);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .impulse-field-toggle:hover { opacity: 0.7; }

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

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

/* ============================================================
   EDUCATION HUB + ARTICLE
   ============================================================ */
.edu-hero {
  background: linear-gradient(180deg, #f6f9fc 0%, #fff 100%);
  padding: clamp(48px, 7vw, 80px) 0 32px;
  text-align: center;
}
.edu-hero__eyebrow {
  display: inline-block; color: var(--color-secondary, #4F9BE8);
  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, #5B6068); 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, #5B6068);
}
.edu-search input {
  width: 100%; padding: 16px 18px 16px 48px;
  border: 1.5px solid var(--color-border, #E5E7EB); border-radius: 999px;
  background: #fff; font-family: var(--font-body); font-size: 15px;
  color: var(--color-primary); 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: #fff; color: var(--color-primary);
  border: 1.5px solid var(--color-border, #E5E7EB); 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-primary); }
.edu-filter.is-active {
  background: var(--color-primary); color: #fff; 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: #fff; border: 1.5px solid var(--color-border, #E5E7EB);
  border-radius: var(--r-md, 14px); 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: 0 12px 32px rgba(17, 133, 210, 0.08);
}
.edu-card__cat {
  display: inline-block; align-self: flex-start;
  background: rgba(17, 133, 210, 0.08); color: var(--color-secondary, #4F9BE8);
  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, #5B6068); font-size: 14px; line-height: 1.55;
  margin: 0; flex: 1;
}
.edu-card__cta {
  color: var(--color-secondary, #4F9BE8); font-weight: 700; font-size: 14px;
  margin-top: 4px;
}
.edu-empty, .edu-noresults {
  text-align: center; color: var(--color-muted, #5B6068);
  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: clamp(40px, 6vw, 72px) 0; background: #fff; }
.edu-crumbs {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; margin-bottom: 24px;
}
.edu-crumbs a {
  color: var(--color-secondary, #4F9BE8); text-decoration: none; font-weight: 600;
}
.edu-crumbs a:hover { text-decoration: underline; }
.edu-crumbs__cat {
  display: inline-block; background: rgba(17, 133, 210, 0.08);
  color: var(--color-secondary, #4F9BE8); 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: #fff8e6; border-left: 4px solid #f4b400;
  padding: 14px 18px; border-radius: 4px; font-size: 14px;
  color: var(--color-primary); margin-bottom: 36px; line-height: 1.55;
}
.edu-article__ruo strong { color: var(--color-primary); }
.edu-article__body { color: var(--color-primary); 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: #2D3D54; }
.edu-article__body ul, .edu-article__body ol { margin: 0 0 20px 22px; color: #2D3D54; }
.edu-article__body li { margin-bottom: 8px; line-height: 1.55; }
.edu-article__body a { color: var(--color-secondary, #4F9BE8); text-decoration: underline; word-break: break-word; }
.edu-article__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-border, #E5E7EB); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section { padding: clamp(48px, 6vw, 80px) 0; background: #fff; }
.contact-hero { text-align: center; margin-bottom: 36px; }
.contact-hero__eyebrow {
  display: inline-block; color: var(--color-secondary, #4F9BE8);
  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, #5B6068); font-size: 17px; line-height: 1.6;
  max-width: 580px; margin: 0 auto;
}

.contact-flash {
  padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 500;
  margin-bottom: 24px;
}
.contact-flash--success { background: #e6f9ee; color: #0f6b3b; border-left: 4px solid #14a04c; }
.contact-flash--error   { background: #fbe9e9; color: #8a1a1a; border-left: 4px solid #d92626; }

.contact-coa-callout {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(17, 133, 210, 0.06); border-left: 4px solid var(--color-secondary, #4F9BE8);
  padding: 16px 18px; border-radius: 8px; margin-bottom: 24px;
  color: var(--color-primary); font-size: 14px; line-height: 1.5;
}
.contact-coa-callout svg { color: var(--color-secondary, #4F9BE8); 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-primary); background: #fff;
  border: 1.5px solid var(--color-border, #E5E7EB); border-radius: 10px;
  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-secondary, #4F9BE8);
  box-shadow: 0 0 0 3px rgba(17, 133, 210, 0.12);
}
.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: #f6f9fc; border-radius: 14px;
  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, #5B6068);
}
.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, #4F9BE8); }

/* ============================================================
   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, #1C1F24) !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, #E5E7EB) !important;
    border-radius: 10px !important;
    background: #fff !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;
  }
  /* Some VRA variants render a separate "Tap Apple Pay above" notice that
     also reads as a heading — keep that visible; it's its own callout. */

  /* 3) SHOW the smart-pairings card on mobile so "View add-ons →" has a
     real scroll target. Move it ABOVE the payment block via flex order so
     "scroll down" actually surfaces something useful. */
  body.woocommerce-checkout .impulse-pairings {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 18px !important;
  }
  body.woocommerce-checkout form.checkout > .impulse-pairings,
  body.woocommerce-checkout form.checkout .impulse-checkout-rail > .impulse-pairings {
    order: 1 !important;
  }
  /* Re-enable any `.impulse-checkout-rail > .impulse-pairings { display:none }`
     from earlier rules. */
  body.woocommerce-checkout .impulse-checkout-rail > .impulse-pairings {
    display: block !important;
  }

  /* 4) CONSISTENT GUTTERS — every top-level card on mobile gets the same
     horizontal margin so things stop looking like they're falling out. */
  body.woocommerce-checkout .impulse-points-callout,
  body.woocommerce-checkout .impulse-ship-callout,
  body.woocommerce-checkout .impulse-bundle-callout,
  body.woocommerce-checkout #impulse-mobile-summary,
  body.woocommerce-checkout .impulse-pairings,
  body.woocommerce-checkout #payment {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !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 .impulse-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: 8px !important;
    border-width: 0 0 0 3px !important;
  }
  /* Points callout — thinner, shares same look */
  body.woocommerce-checkout .impulse-points-callout {
    padding: 8px 12px !important;
    margin: 0 0 8px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }
  body.woocommerce-checkout .impulse-points-callout__icon {
    width: 22px !important; height: 22px !important;
  }
  body.woocommerce-checkout .impulse-points-callout__icon svg { width: 11px !important; height: 11px !important; }
  /* Ship callout — even thinner (already compact, tighten margins) */
  body.woocommerce-checkout .impulse-ship-callout {
    margin: 0 0 8px !important;
    padding: 8px 12px !important;
  }
  /* Bundle callout — even thinner */
  body.woocommerce-checkout .impulse-bundle-callout {
    margin: 0 0 8px !important;
    padding: 8px 12px !important;
  }
  /* Step dots — slightly less top spacing so the form starts higher */
  body.woocommerce-checkout .impulse-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;
  }

  /* GROUP the four callouts as one stacked block — share borders, zero
     gap between siblings so they read as one chunk. */
  body.woocommerce-checkout .woocommerce-form-coupon-toggle,
  body.woocommerce-checkout .woocommerce-info,
  body.woocommerce-checkout .impulse-points-callout,
  body.woocommerce-checkout .impulse-ship-callout,
  body.woocommerce-checkout .impulse-bundle-callout {
    margin: 0 !important;            /* zero gap — borders join them */
    border-radius: 0 !important;
    border-bottom: 0 !important;
  }
  body.woocommerce-checkout .woocommerce-form-coupon-toggle:first-child,
  body.woocommerce-checkout .impulse-points-callout:first-child { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
  body.woocommerce-checkout .impulse-bundle-callout {
    border-bottom: 1px solid var(--color-border, #ECEFF3) !important;
    border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important;
    margin-bottom: 14px !important;
  }

  /* SHIP CALLOUT — everything truly on one line. Hide the redundant
     progress bar (we have the bar separately at top of page). */
  body.woocommerce-checkout .impulse-ship-callout { padding: 6px 12px !important; }
  body.woocommerce-checkout .impulse-ship-callout__hdr {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    gap: 8px !important;
  }
  body.woocommerce-checkout .impulse-ship-callout__icon {
    width: 18px !important; height: 18px !important;
  }
  body.woocommerce-checkout .impulse-ship-callout__icon svg { width: 9px !important; height: 9px !important; }
  body.woocommerce-checkout .impulse-ship-callout__msg {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.woocommerce-checkout .impulse-ship-callout__cta {
    margin-left: auto !important;
    padding: 0 7px !important;
    font-size: 8.5px !important;
    line-height: 16px !important;
    height: 16px !important;
    letter-spacing: 0.03em !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }
  body.woocommerce-checkout .impulse-ship-callout__bar {
    display: none !important;        /* progress bar lives in the top callout area instead */
  }

  /* BUNDLE CALLOUT — one-line layout: icon + sub-msg + +Add 1 button */
  body.woocommerce-checkout .impulse-bundle-callout { padding: 6px 12px !important; }
  body.woocommerce-checkout .impulse-bundle-callout__hdr {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  body.woocommerce-checkout .impulse-bundle-callout__icon {
    width: 18px !important; height: 18px !important;
    flex-shrink: 0 !important;
  }
  body.woocommerce-checkout .impulse-bundle-callout__icon svg { width: 9px !important; height: 9px !important; }
  body.woocommerce-checkout .impulse-bundle-callout__title { display: none !important; }   /* drop the redundant "You could be saving" line — the sub already says everything */
  body.woocommerce-checkout .impulse-bundle-callout__sub {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* +Add 1 / hint button inside bundle callout — much smaller */
  body.woocommerce-checkout .impulse-bundle-callout__sub .impulse-quick-add,
  body.woocommerce-checkout .impulse-bundle-callout .impulse-quick-add,
  body.woocommerce-checkout .impulse-bundle-callout button {
    margin-left: 8px !important;
    padding: 0 7px !important;
    font-size: 8.5px !important;
    line-height: 16px !important;
    height: 16px !important;
    letter-spacing: 0.03em !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }
  /* Points callout — keep at the same 6px 12px rhythm */
  body.woocommerce-checkout .impulse-points-callout {
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
  body.woocommerce-checkout .impulse-points-callout__icon {
    width: 18px !important; height: 18px !important;
  }
  body.woocommerce-checkout .impulse-points-callout__icon svg { width: 9px !important; height: 9px !important; }

  /* ============================================================
     MULTI-STEP CHECKOUT (mobile) — Shipping → Payment
     ============================================================ */
  body.woocommerce-checkout .impulse-steps {
    margin: 0 0 22px !important;
    padding: 6px 0 0;
  }
  body.woocommerce-checkout .impulse-steps__row {
    display: flex; align-items: center; justify-content: center; gap: 0;
    max-width: 320px; margin: 0 auto;
  }
  body.woocommerce-checkout .impulse-steps__dot {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex: 0 0 auto;
  }
  body.woocommerce-checkout .impulse-steps__dot span {
    width: 28px; height: 28px; border-radius: 50%;
    background: #E5E8ED; color: var(--color-muted, #6B7280);
    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 .impulse-steps__dot label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-muted, #6B7280);
    transition: color .2s ease;
  }
  body.woocommerce-checkout .impulse-steps__dot.is-active span,
  body.woocommerce-checkout .impulse-steps__dot.is-done span {
    background: var(--color-primary, #1C1F24); color: #fff;
  }
  body.woocommerce-checkout .impulse-steps__dot.is-active label {
    color: var(--color-primary, #1C1F24);
  }
  body.woocommerce-checkout .impulse-steps__line {
    flex: 1; height: 2px; background: #E5E8ED; margin: 0 12px; margin-top: -16px;
  }
  body.woocommerce-checkout .impulse-steps__dot.is-done ~ .impulse-steps__line,
  body.woocommerce-checkout .impulse-steps__row:has(.is-done) .impulse-steps__line {
    background: var(--color-primary, #1C1F24);
  }

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

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

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

  /* When in step 2, hide the upper-flow callouts (points/ship/bundle/pairings)
     since they're context for the cart, not the payment step.
     Also hide the WC order summary table — buyer can peek via the bottom flap. */
  body.woocommerce-checkout[data-checkout-step="2"] .impulse-points-callout,
  body.woocommerce-checkout[data-checkout-step="2"] .impulse-ship-callout,
  body.woocommerce-checkout[data-checkout-step="2"] .impulse-bundle-callout,
  body.woocommerce-checkout[data-checkout-step="2"] #impulse-mobile-summary,
  body.woocommerce-checkout[data-checkout-step="2"] .impulse-pairings,
  body.woocommerce-checkout[data-checkout-step="2"] #order_review_heading,
  body.woocommerce-checkout[data-checkout-step="2"] .woocommerce-checkout-review-order-table,
  body.woocommerce-checkout[data-checkout-step="2"] .woocommerce-checkout-review-order > h3 {
    display: none !important;
  }
}

/* ============================================================
   CART DRAWER additions — Shipment Protection, promo code,
   discount row, tooltip popover, smooth qty transitions
   ============================================================ */
.cart-drawer__protection {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 8px 22px 0;
  padding: 12px 14px;
  background: #F7FBF8;
  border: 1px solid #D6E8DC;
  border-radius: 10px;
  font-size: 13.5px;
}
.cart-drawer__protection-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--color-primary, #1C1F24);
}
.cart-drawer__protection-label svg { color: var(--color-success, #1F7A48); flex-shrink: 0; }
.cart-drawer__protection-value { font-weight: 800; color: var(--color-success, #1F7A48); }
.cart-drawer__tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-bg-muted, #EEF1F4); color: var(--color-muted, #6B7280);
  border: 0; padding: 0; margin-left: 2px;
  font-size: 11px; font-weight: 800; cursor: pointer;
  line-height: 1;
}
.cart-drawer__tip:hover { background: var(--color-primary, #1C1F24); color: #fff; }
.cart-drawer__tip-popover {
  position: absolute;
  max-width: 240px;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--color-primary, #1C1F24); color: #fff;
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; font-weight: 500;
  box-shadow: 0 8px 22px -6px rgba(19,19,41,0.4);
  z-index: 10;
}

.cart-drawer__promo {
  margin: 12px 22px 0;
  border-top: 1px solid var(--color-border, #E5E7EB);
  padding-top: 10px;
}
.cart-drawer__promo-toggle {
  background: transparent; border: 0; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--color-primary, #1C1F24); cursor: pointer;
}
.cart-drawer__promo-toggle svg { color: var(--color-secondary, #4F9BE8); }
.cart-drawer__promo-row {
  display: flex; gap: 8px; margin-top: 8px;
}
.cart-drawer__promo-input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #E5E7EB); border-radius: 8px;
  font-size: 13px; color: var(--color-primary);
}
.cart-drawer__promo-apply {
  background: var(--color-primary, #1C1F24); color: #fff;
  border: 0; border-radius: 8px;
  padding: 0 14px;
  font-size: 12.5px; font-weight: 800;
  cursor: pointer;
}

/* Discount row in totals */
.cart-drawer__totals-row--discount {
  color: var(--color-success, #1F7A48);
}
.cart-drawer__totals-row--discount strong {
  color: var(--color-success, #1F7A48); font-weight: 800;
}
.cart-drawer__totals-sub {
  font-size: 11px; color: var(--color-muted, #6B7280); font-weight: 500;
  margin-left: 4px;
}

/* Smooth qty-update transition */
.cart-drawer__item { transition: opacity .2s ease, transform .2s ease; }
.cart-drawer__item [data-cd-line],
.cart-drawer__item [data-cd-qty],
.cart-drawer__item [data-cd-bundle] {
  transition: opacity .15s ease;
}
.cart-drawer__item.is-updating [data-cd-line],
.cart-drawer__item.is-updating [data-cd-qty],
.cart-drawer__item.is-updating [data-cd-bundle] {
  opacity: 0.55;
}

/* ============================================================
   CART DRAWER tightening pass (2026-06-25)
   - Slim Shipment Protection row
   - Bundle pill flush-left under qty
   - Compact totals so everything fits without covering items
   ============================================================ */
.cart-drawer__protection {
  margin: 6px 22px 0 !important;
  padding: 8px 12px !important;
  background: transparent !important;
  border: 1px dashed #D6E8DC !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}
.cart-drawer__protection-label { gap: 6px !important; font-weight: 600 !important; }
.cart-drawer__protection-label svg { width: 13px !important; height: 13px !important; }
.cart-drawer__protection-value { font-size: 12.5px !important; }
.cart-drawer__tip { width: 16px !important; height: 16px !important; font-size: 10px !important; }

/* Bundle pill: full row below qty, left-aligned with same left edge */
.cart-drawer__item-bundle {
  display: block !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.cart-drawer__item-bundle:empty { display: none !important; }
/* Make the GET X% OFF pill compact + flush with qty */
.cart-drawer__bundle-upgrade {
  margin: 0 !important;
  padding: 4px 10px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.05em !important;
}

/* Tighter totals block so it doesn't eat half the drawer */
.cart-drawer__totals {
  padding: 12px 22px !important;
}
.cart-drawer__totals-row {
  padding: 4px 0 !important;
  font-size: 13px !important;
}
.cart-drawer__totals-row strong { font-size: 14px !important; }
.cart-drawer__totals-note { margin: 2px 0 10px !important; font-size: 10.5px !important; }
.cart-drawer__points {
  margin: 6px 0 0 !important; padding: 6px 10px !important; font-size: 12px !important;
}
.cart-drawer__promo {
  margin: 10px 22px 0 !important;
  padding-top: 8px !important;
}
.cart-drawer__promo-toggle { padding: 4px 0 !important; font-size: 12.5px !important; }
.cart-drawer__checkout {
  padding: 12px 16px !important;
  font-size: 14px !important;
  margin-top: 8px !important;
}
.cart-drawer__continue {
  font-size: 12px !important;
  padding: 4px 0 !important;
  margin-top: 4px !important;
}
/* Hide trust row on the drawer footer — it pushes everything down and
   duplicates what the Shipment Protection block already says. */
.cart-drawer__trust { display: none !important; }

/* ============================================================
   CART DRAWER v3 — Amino-style: thin top bar, card-per-item,
   compact bundle pill, bare-bones free-ship bar
   ============================================================ */

/* Thin top bar */
.cart-drawer__head {
  padding: 12px 18px !important;
  border-bottom: 0 !important;
}
.cart-drawer__head h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
}
.cart-drawer__close {
  width: 28px !important; height: 28px !important;
  background: transparent !important;
}

/* Each item in a rounded white card on a tinted body */
.cart-drawer__body { background: #F6F8FB !important; }
.cart-drawer__items {
  padding: 4px 14px 0 !important;
  display: flex !important; flex-direction: column !important;
  gap: 10px !important;
}
.cart-drawer__item {
  background: #fff !important;
  border: 1px solid #ECEFF3 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: 0 1px 0 rgba(19,19,41,0.02) !important;
  border-bottom: 1px solid #ECEFF3 !important;       /* defeat the legacy bottom border */
  grid-template-columns: 60px 1fr 22px !important;
  gap: 12px !important;
}
.cart-drawer__item-img {
  width: 60px !important; height: 60px !important;
  border-radius: 10px !important;
}
.cart-drawer__item-title { font-size: 13.5px !important; margin-bottom: 6px !important; }

/* Compact bundle pill — sits inline as a tiny chip below the meta row */
.cart-drawer__item-bundle { margin: 6px 0 0 !important; }
.cart-drawer__bundle-upgrade {
  padding: 3px 8px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
}
.cart-drawer__bundle.is-on {
  padding: 2px 7px !important;
  font-size: 9.5px !important;
}

/* Free-shipping bar — strip the box, leave just bar + text */
.cart-drawer__shipbar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 12px 18px 0 !important;
  padding: 0 !important;
}
.cart-drawer__shipbar-msg {
  font-size: 12px !important;
  color: var(--color-primary, #1C1F24) !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}
.cart-drawer__shipbar-bar {
  height: 4px !important;
  background: #E5E8ED !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.cart-drawer__shipbar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #1F7A48, #2BA86A) !important;
  transition: width 0.35s ease;
}

/* Promo apply — inline status row + form layout (cart drawer + flap) */
.cart-drawer__promo-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 8px !important;
  align-items: stretch !important;
}
.cart-drawer__promo-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: 8px !important;
  font-family: var(--font-body, inherit) !important;
  font-size: 14px !important;
  line-height: 38px !important;
  color: var(--color-primary, #1C1F24) !important;
  background: #fff !important;
  text-transform: uppercase !important;
}
.cart-drawer__promo-input::placeholder { text-transform: none; color: var(--color-muted, #9aa1ab); }
.cart-drawer__promo-input:focus {
  outline: none !important;
  border-color: var(--color-secondary, #4F9BE8) !important;
  box-shadow: 0 0 0 3px rgba(17,133,210,0.12) !important;
}
.cart-drawer__promo-apply {
  flex: 0 0 auto !important;
  height: 38px !important;
  padding: 0 18px !important;
  background: var(--color-primary, #1C1F24) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: var(--font-body, inherit) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: opacity .15s ease;
}
.cart-drawer__promo-apply:hover { opacity: 0.92; }
.cart-drawer__promo-apply:disabled { opacity: 0.6; cursor: wait; }
.cart-drawer__promo-msg {
  margin-top: 6px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.cart-drawer__promo-msg.is-ok {
  background: rgba(31,122,72,0.10) !important;
  color: var(--color-success, #1F7A48) !important;
}
.cart-drawer__promo-msg.is-error {
  background: rgba(217,38,38,0.08) !important;
  color: var(--color-destructive, #d92626) !important;
}

/* 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: 8px !important;
  background: #FAFCFE !important;
  border: 1px solid var(--color-border, #E5E7EB) !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: 8px !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: 8px !important;
  background: var(--color-primary, #1C1F24) !important;
  color: #fff !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; }

/* Shipment Protection — edge-to-edge, no rounded card chrome */
.cart-drawer__protection {
  margin: 14px 0 0 !important;
  padding: 12px 18px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid #ECEFF3 !important;
}

/* Promo — edge-to-edge */
.cart-drawer__promo {
  margin: 0 !important;
  padding: 10px 18px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid #ECEFF3 !important;
}

/* Totals — edge-to-edge full width, no margin, no border-radius */
.cart-drawer__totals {
  background: #fff !important;
  margin: 0 !important;
  padding: 14px 18px 16px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid #ECEFF3 !important;
}

/* Defeat .cart-drawer__totals-row { display: flex } overriding [hidden] */
.cart-drawer__totals-row[hidden],
[data-cd-discount-row][hidden] { display: none !important; }

/* Compact card: smaller image + tighter padding */
.cart-drawer__item {
  position: relative;
  padding: 10px !important;
  grid-template-columns: 52px 1fr 20px !important;
  gap: 10px !important;
}
.cart-drawer__item-img { width: 52px !important; height: 52px !important; }
.cart-drawer__item-title { font-size: 13px !important; margin-bottom: 4px !important; }

/* Qty dropdown — pill-shaped. Sized properly for iOS native rendering. */
.cart-drawer__qty {
  border: 1px solid var(--color-border, #ECEFF3) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px 0 12px !important;
  height: 32px !important;
  background: #fff !important;
  position: relative;
  box-sizing: border-box !important;
}
.cart-drawer__qty-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 18px 0 0 !important;    /* right padding leaves room for caret */
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;        /* >=16 would prevent iOS zoom; with appearance:none we can use 14 */
  font-weight: 700 !important;
  color: var(--color-primary, #1C1F24) !important;
  cursor: pointer;
  height: 32px !important;           /* match wrapper height — no line-height on select */
  line-height: normal !important;
  outline: none;
  text-align: left !important;
  text-align-last: left !important;
  text-indent: 0 !important;
  min-width: 20px !important;
  box-sizing: content-box !important;
}
.cart-drawer__qty-caret {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-muted, #6B7280);
  display: inline-flex;
}

/* MOBILE: slim GET X% OFF pill — short vertical, short horizontal */
@media (max-width: 600px) {
  .cart-drawer__bundle-upgrade {
    padding: 0 7px !important;       /* no vertical padding — line-height alone sizes it */
    font-size: 8.5px !important;
    letter-spacing: 0.03em !important;
    line-height: 14px !important;    /* exact px → pill height = 14px */
    min-height: 14px !important;
  }
  .cart-drawer__bundle.is-on {
    padding: 0 6px !important;
    font-size: 8.5px !important;
    line-height: 14px !important;
    min-height: 14px !important;
  }
}

/* Right column: price stacked above the bundle pill */
.cart-drawer__price-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
}
.cart-drawer__line { font-size: 13px !important; }
.cart-drawer__line del { font-size: 11px !important; }

/* GET X% OFF pill — small chip BELOW the price on the right */
.cart-drawer__item-bundle {
  position: static !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}
.cart-drawer__item-bundle:empty { display: none !important; }
.cart-drawer__bundle-upgrade {
  padding: 2px 7px !important;
  font-size: 9px !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
.cart-drawer__bundle.is-on {
  padding: 2px 6px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

/* Sale strikethrough on the cart line subtotal */
.cart-drawer__line del {
  color: var(--color-muted, #6B7280);
  font-weight: 500;
  opacity: 0.75;
  margin-right: 5px;
  text-decoration: line-through;
}
.cart-drawer__line del .woocommerce-Price-amount { color: inherit; }
.cart-drawer__line ins {
  text-decoration: none;
  color: var(--color-secondary, #4F9BE8);
  font-weight: 800;
}
.cart-drawer__line ins .woocommerce-Price-amount { color: inherit; }

/* Sale strikethrough on the cart line subtotal */
.cart-drawer__line del {
  color: var(--color-muted, #6B7280);
  font-weight: 500;
  opacity: 0.75;
  margin-right: 6px;
  text-decoration: line-through;
}
.cart-drawer__line del .woocommerce-Price-amount { color: inherit; }
.cart-drawer__line ins {
  text-decoration: none;
  color: var(--color-secondary, #4F9BE8);
  font-weight: 800;
}
.cart-drawer__line ins .woocommerce-Price-amount { color: inherit; }

/* ============================================================
   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, #ECEFF3) !important;
  background: #fff !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 .trust-marquee,
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 */
.impulse-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, #F4F6F9);
  color: var(--color-primary, #1C1F24);
  text-decoration: none;
  justify-content: center;
}
.impulse-checkout-back svg { width: 18px; height: 18px; }
.impulse-checkout-back:hover { background: var(--color-primary, #1C1F24); color: #fff; }

/* 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;
}

/* ============================================================
   CHECKOUT CALLOUTS — single-row ship callout + thinner bundle
   ============================================================ */
body.woocommerce-checkout .impulse-ship-callout {
  padding: 8px 14px !important;
  border-radius: 10px !important;
  margin: 0 0 10px !important;
}
body.woocommerce-checkout .impulse-ship-callout__hdr {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
  flex-wrap: nowrap !important;
}
body.woocommerce-checkout .impulse-ship-callout__icon {
  width: 22px !important; height: 22px !important;
}
body.woocommerce-checkout .impulse-ship-callout__icon svg { width: 11px !important; height: 11px !important; }
body.woocommerce-checkout .impulse-ship-callout__msg {
  font-size: 12.5px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  line-height: 1.3 !important;
}
body.woocommerce-checkout .impulse-ship-callout__cta {
  background: transparent !important;
  border: 1px solid var(--color-secondary, #4F9BE8) !important;
  color: var(--color-secondary, #4F9BE8) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
body.woocommerce-checkout .impulse-ship-callout__bar {
  height: 4px !important;
}
body.woocommerce-checkout .impulse-ship-callout__fill { height: 100% !important; }

/* Bundle callout — thinner, single-row layout */
body.woocommerce-checkout .impulse-bundle-callout {
  padding: 8px 14px !important;
  margin: 0 0 10px !important;
  border-radius: 10px !important;
}
body.woocommerce-checkout .impulse-bundle-callout__hdr {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}
body.woocommerce-checkout .impulse-bundle-callout__icon {
  width: 22px !important; height: 22px !important;
  flex-shrink: 0 !important;
}
body.woocommerce-checkout .impulse-bundle-callout__icon svg { width: 11px !important; height: 11px !important; }
body.woocommerce-checkout .impulse-bundle-callout__title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
body.woocommerce-checkout .impulse-bundle-callout__sub {
  font-size: 11.5px !important;
  margin-top: 4px !important;
  line-height: 1.35 !important;
}
body.woocommerce-checkout .impulse-bundle-callout__list {
  margin: 4px 0 0 !important;
  font-size: 11.5px !important;
}

/* CHECKOUT BOTTOM FLAP — order summary peek
   Fixed bottom strip, thin (~52px). Tap chevron → panel slides up.
   Replaces #impulse-mobile-pay (continue button removed per design). */
@media (max-width: 980px) {
  body.woocommerce-checkout #impulse-mobile-summary { display: none !important; }
}
#impulse-flap {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: #fff;
  border-top: 1px solid var(--color-border, #ECEFF3);
  box-shadow: 0 -8px 24px -10px rgba(19,19,41,0.16);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 980px) { #impulse-flap { display: block; } }
.impulse-flap__handle {
  width: 100%;
  background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  font-family: var(--font-body); color: var(--color-primary, #1C1F24);
  position: relative;
}
.impulse-flap__handle::before {
  content: ""; position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 999px;
  background: #DCE0E7;
}
.impulse-flap__left {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
}
.impulse-flap__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary, #1C1F24); color: #fff;
  font-size: 11px; font-weight: 800;
}
.impulse-flap__right {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 800;
}
.impulse-flap__right .label { font-size: 11px; font-weight: 700; color: var(--color-muted, #6B7280); letter-spacing: 0.04em; text-transform: uppercase; }
.impulse-flap__chev {
  display: inline-flex; transition: transform .28s ease;
  color: var(--color-muted, #6B7280);
}
#impulse-flap.is-open .impulse-flap__chev { transform: rotate(180deg); }
.impulse-flap__panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  background: #FAFCFE;
  border-top: 1px solid var(--color-border, #ECEFF3);
}
#impulse-flap.is-open .impulse-flap__panel { max-height: 60vh; overflow-y: auto; }
.impulse-flap__panel-inner { padding: 0 0 18px; }
.impulse-flap__title {
  text-align: center;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--color-border, #ECEFF3);
  background: #fff;
}
.impulse-flap__title-main {
  font-family: var(--font-heading, inherit);
  font-size: 17px; font-weight: 800;
  color: var(--color-primary, #1C1F24);
}
.impulse-flap__title-sub {
  margin-top: 2px;
  font-size: 12.5px; font-weight: 600;
  color: var(--color-muted, #6B7280);
}
.impulse-flap__loading {
  padding: 32px 18px; text-align: center; color: var(--color-muted, #6B7280);
}
.impulse-flap__totals {
  background: #fff;
  padding: 14px 18px;
  border-top: 1px solid var(--color-border, #ECEFF3);
}
.impulse-flap__row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--color-primary, #1C1F24);
}
.impulse-flap__row .woocommerce-Price-amount { color: inherit; }
.impulse-flap__row--total {
  margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--color-border, #ECEFF3);
  font-size: 16px; font-weight: 800;
}
.impulse-flap__done {
  width: calc(100% - 36px); margin: 14px 18px 0 !important;
  background: var(--color-primary, #1C1F24) !important;
  color: #fff !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 14px 20px !important;
  font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* When the flap renders inside the panel, hide its own outer chrome so
   the cart-drawer items look like clean rows on the white panel surface. */
.impulse-flap__panel .cart-drawer__body { background: transparent !important; padding: 0 !important; }
.impulse-flap__panel .cart-drawer__items { padding: 8px 14px 0 !important; gap: 8px !important; }
.impulse-flap__panel .cart-drawer__item { box-shadow: none !important; border-color: var(--color-border, #ECEFF3) !important; }
.impulse-flap__panel .cart-drawer__protection,
.impulse-flap__panel .cart-drawer__promo,
.impulse-flap__panel .cart-drawer__totals {
  margin: 0 !important; padding: 12px 18px !important;
  border-radius: 0 !important; border: 0 !important;
  border-top: 1px solid var(--color-border, #ECEFF3) !important;
}
/* When flap is open, leave room above so the bottom of the form isn't covered */
body.woocommerce-checkout.flap-open { padding-bottom: calc(60vh + 60px) !important; }
/* Hide the legacy mobile-pay sticky CTA — replaced by the flap */
@media (max-width: 980px) {
  body.woocommerce-checkout #impulse-mobile-pay { display: none !important; }
}

/* ===========================================================
   Promo / coupon — applied chip + total row + info msg variant
   =========================================================== */
.cart-drawer__coupons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.cart-drawer__coupon-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 8px;
  background: rgba(31, 122, 72, 0.08);
  color: var(--color-success, #1f7a48);
  border: 1px solid rgba(31, 122, 72, 0.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.cart-drawer__coupon-chip svg { flex: 0 0 auto; width: 9px; height: 9px; }
.cart-drawer__coupon-chip strong {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cart-drawer__coupon-meta {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
}
.cart-drawer__coupon-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 1px;
  padding: 0;
  background: transparent;
  color: var(--color-success, #1f7a48);
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.cart-drawer__coupon-remove:hover { opacity: 1; background: transparent; }
.cart-drawer__coupon-remove:disabled { opacity: 0.5; cursor: wait; }

/* Promo "info" (already applied) — soft neutral, NOT red */
.cart-drawer__promo-msg.is-info {
  background: rgba(17, 133, 210, 0.08) !important;
  color: var(--color-secondary, #4F9BE8) !important;
  border: 1px solid rgba(17, 133, 210, 0.22) !important;
}

/* Grand total row — bold, larger, top divider */
.cart-drawer__totals-row.cart-drawer__totals-row--grand {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--color-border, #ECEFF3);
  font-size: 15px;
}
.cart-drawer__totals-row.cart-drawer__totals-row--grand span { font-weight: 700; color: var(--color-text, #0E1320); }
.cart-drawer__totals-row.cart-drawer__totals-row--grand strong { font-size: 17px; font-weight: 800; color: var(--color-text, #0E1320); }

/* Discount-row tint so promo line reads as savings */
.cart-drawer__totals-row.cart-drawer__totals-row--discount strong { color: var(--color-success, #1f7a48); }

/* 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, 38, 38, 0.08);
  color: var(--color-destructive, #d92626);
  border-radius: 999px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}


/* =====================================================================
   IMPULSE REDESIGN LAYER (2026-06-26) - distinct from LOTF base.
   Kills marquee/coverflow/old hero; adds announce bar, asymmetric hero,
   image-forward cards, category tiles, CTA band.
   ===================================================================== */

/* kill LOTF signature components */
.trust-marquee, .ftr-carousel, .hero-glove { display: none !important; }

/* slim static announcement bar */
.announce-bar { background: var(--color-primary); color: #fff; 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 */
.imp-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #F6F8FB 100%); }
.imp-hero::before { content:""; position:absolute; inset:0; background: url("assets/images/molecular-bg.png") right top / 60% no-repeat; opacity:.10; pointer-events:none; }
.imp-hero::after { content:""; position:absolute; right:6%; top:24%; width:520px; height:520px; background: radial-gradient(circle, rgba(79,155,232,.22), transparent 70%); pointer-events:none; }
.imp-hero__grid { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px; align-items: center; min-height: clamp(460px, 60vh, 620px); padding: 52px 0; }
.imp-hero__copy { max-width: 660px; }
.imp-hero__eyebrow { display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--color-secondary); font-weight:700; margin-bottom:18px; }
.imp-hero__title { font-family: var(--font-heading); font-weight:800; line-height:.92; letter-spacing:-.025em; font-size: clamp(56px, 9vw, 120px); color: var(--color-primary); margin: 0 0 22px; }
.imp-hero__dot { color: var(--color-secondary); }
.imp-hero__lead { font-size: clamp(16px, 1.4vw, 20px); line-height:1.6; color: var(--color-muted, #5B6068); max-width: 32em; margin: 0 0 28px; }
.imp-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.imp-hero__trust { list-style:none; display:flex; gap:30px; padding:0; margin:0; flex-wrap:wrap; }
.imp-hero__trust li { font-size:12.5px; color: var(--color-muted, #5B6068); text-transform:uppercase; letter-spacing:.04em; }
.imp-hero__num { display:block; font-family: var(--font-heading); font-size:24px; font-weight:800; color: var(--color-primary); letter-spacing:-.01em; }
.imp-hero__art { position: relative; align-self: end; justify-self: center; }
.imp-hero__vial { display:block; max-height: min(560px, 68vh); width:auto; filter: drop-shadow(0 28px 48px rgba(28,31,36,.22)); }
.imp-hero .btn--primary, .imp-cta .btn--primary { background: var(--color-secondary); border-color: var(--color-secondary); color:#fff; }
.imp-hero .btn--primary:hover { background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.imp-hero .btn--ghost { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.imp-hero .btn--ghost:hover { background: var(--color-primary); color:#fff; }
@media (max-width: 860px){
  .imp-hero__grid { grid-template-columns: 1fr; min-height: 0; padding: 32px 0 0; gap: 8px; }
  .imp-hero__title { font-size: clamp(48px, 15vw, 84px); }
  .imp-hero__art { justify-self: center; }
  .imp-hero__vial { max-height: 340px; }
}

/* sections */
.imp-section { padding: clamp(48px, 7vw, 88px) 0; }
.imp-section--alt { background: #F6F8FB; }
.imp-section__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom: 28px; }
.imp-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; }
.imp-section__link { color: var(--color-secondary); font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap; }
.imp-section__link:hover { text-decoration: underline; }
.imp-empty { color: var(--color-muted,#5B6068); }

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

.imp-card { position:relative; display:block; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--color-border,#E2E5EA); text-decoration:none; color:inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.imp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,31,36,.14); border-color: var(--color-secondary); }
.imp-card__chip { position:absolute; top:12px; left:12px; z-index:2; background: rgba(28,31,36,.82); color:#fff; font-size:11px; font-weight:600; letter-spacing:.03em; padding:5px 10px; border-radius:999px; }
.imp-card__sale { position:absolute; top:12px; right:12px; z-index:2; background: var(--color-secondary); color:#fff; font-size:11px; font-weight:700; padding:5px 9px; border-radius:999px; }
.imp-card__media { position:relative; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; background: linear-gradient(160deg, #fff, #EEF1F5); overflow:hidden; }
.imp-card__media img, .imp-card__img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.imp-card:hover .imp-card__media img { transform: scale(1.04); }
.imp-card__media.is-empty { background: linear-gradient(160deg, #20242B, #0F1115); }
.imp-card__emblem { position:absolute; inset:0; background: url("assets/images/favicon.png") center / 54% no-repeat; opacity:.20; filter: grayscale(1) brightness(2.2); }
.imp-card__phname { position:relative; z-index:1; color:#fff; font-family: var(--font-heading); font-weight:700; font-size:18px; letter-spacing:.02em; text-align:center; padding:0 14px; opacity:.92; }
.imp-card__bar { padding: 14px 14px 16px; }
.imp-card__info { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.imp-card__name { font-weight:700; font-size:15px; color: var(--color-primary); line-height:1.2; }
.imp-card__price { font-weight:700; font-size:15px; color: var(--color-primary); white-space:nowrap; }
.imp-card__price del { color:#9aa0a8; font-weight:400; margin-right:4px; }
.imp-card__price ins { text-decoration:none; }
.imp-card__view { display:block; margin-top:8px; font-size:13px; font-weight:600; color: var(--color-secondary); max-height:0; opacity:0; overflow:hidden; transition: max-height .25s ease, opacity .25s ease; }
.imp-card:hover .imp-card__view { max-height:24px; opacity:1; }

/* archive grid: strip old .shop-card chrome so imp-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 */
.imp-cats { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
@media (max-width:1100px){ .imp-cats { grid-template-columns: repeat(3,1fr); } }
@media (max-width:680px){ .imp-cats { grid-template-columns: repeat(2,1fr); } }
.imp-cat { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:120px; padding:18px; border-radius:14px; background:#fff; border:1px solid var(--color-border,#E2E5EA); text-decoration:none; color: var(--color-primary); transition:.2s; }
.imp-cat:hover { border-color: var(--color-secondary); box-shadow: 0 10px 26px rgba(28,31,36,.10); transform: translateY(-3px); }
.imp-cat__name { font-family: var(--font-heading); font-weight:700; font-size:17px; }
.imp-cat__count { font-size:12.5px; color: var(--color-muted,#5B6068); margin-top:3px; }
.imp-cat__arrow { position:absolute; top:16px; right:16px; color: var(--color-secondary); font-size:18px; transition: transform .2s; }
.imp-cat:hover .imp-cat__arrow { transform: translateX(4px); }

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


/* Global: all primary / CTA buttons use the brand accent (#4F9BE8) */
.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, .imp-section__link.btn {
  background: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #fff !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: #fff !important;
}
.btn--ghost { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background: transparent !important; }
.btn--ghost:hover { background: var(--color-primary) !important; color: #fff !important; }
/* END GLOBAL BUTTON ACCENT */