/*
Theme Name: Coastal Premium Wellness (Astra Child)
Template: astra
Author: Sunny Sites
Description: Light "premium coastal-clinical" child theme for Coastal Premium Wellness LLC — a research-use-only (RUO) peptide catalog. Airy coastal aesthetic built on the client's brand palette, mirroring the amc-essentials reference layout. Hand-coded, no page builder.
Version: 2.11.0
*/

/* =====================================================================
   DESIGN TOKENS  —  single source of truth
   Direction: LIGHT "premium coastal-clinical" (reference amc-essentials
   is light, and the client's vibe.jpg is soft airy coastal). Palette from
   her logo (petrol-navy + teal waves + sage + sand + cream/seashell).
   Language + imagery stay strictly research/RUO (merchant-underwriting).
   ===================================================================== */
:root {
  /* --- surfaces (light, layered) --- */
  --cpw-bg:          #F5F8F8;   /* app background — soft blue-cream */
  --cpw-linen:       #F6F1E7;   /* warm-linen alt sections (from vibes.jpg) */
  --cpw-muted:       #EAF2F3;   /* pale-teal muted band (reference sections) */
  --cpw-card:        #FFFFFF;   /* cards / nav */
  --cpw-media:       #EEF3F4;   /* soft grey-blue product-image backing */

  /* --- brand ink + text --- */
  --cpw-ink:         #17323C;   /* petrol-navy — headings, nav (13.5:1) */
  --cpw-text:        #33454C;   /* body (9:1) */
  --cpw-muted-text:  #5F7178;   /* muted labels (4.7:1) */

  /* --- teals (the coastal accent) --- */
  --cpw-teal:        #2C8B99;   /* bright accent — large heads / icons / fills (≥3:1) */
  --cpw-teal-ink:    #1F7A87;   /* darker teal — links + small text (5:1) */
  --cpw-cta:         #1C7C88;   /* CTA fill (white text, 4.9:1) */
  --cpw-cta-hover:   #176670;
  --cpw-banner:      #2A7B88;   /* page-title banner bg (white text, 4.9:1) */
  --cpw-teal-soft:   #DDEFF1;   /* teal tint fills */

  /* --- coastal accents (sparing) --- */
  --cpw-sand:        #CBB89D;   /* seashell/sand — dividers, eyebrow flourish */
  --cpw-sand-deep:   #B49B77;
  --cpw-sage:        #8CA085;   /* botanical — verified/tested icons */
  --cpw-coral:       #E68A54;   /* limited — "sale" accent only */

  /* --- lines / states --- */
  --cpw-border:      #DDE7E8;
  --cpw-border-str:  #C9D8DA;
  --cpw-danger:      #C0483B;
  --cpw-ring:        #1C7C88;

  /* --- type — premium coastal: Fraunces (soft-serif display) + Mulish (airy sans) --- */
  --cpw-font-round:   'Fraunces', Georgia, 'Times New Roman', serif;      /* page-title banners */
  --cpw-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;      /* headings + product titles + prices */
  --cpw-font-body:    'Mulish', system-ui, -apple-system, sans-serif;     /* body + nav + buttons + meta + legal */
  --cpw-font-mono:    'Mulish', system-ui, -apple-system, sans-serif;     /* (was monospace — retired; kept as alias so dose/RUO read clean, not robotic) */

  /* --- scale / rhythm --- */
  --cpw-radius:      16px;
  --cpw-radius-sm:   10px;
  --cpw-radius-pill: 999px;
  --cpw-maxw:        1240px;
  --cpw-space:       clamp(1rem, 2vw, 1.5rem);
  --cpw-shadow:      0 18px 44px -22px rgba(23,50,60,0.34);
  --cpw-shadow-card: 0 10px 30px -18px rgba(23,50,60,0.26);
  --cpw-shadow-soft: 0 4px 14px -8px rgba(23,50,60,0.20);

  /* --- nav / logo sizing (nav hugs the logo with tiny padding) --- */
  --cpw-navh:   138px;   /* header height = logo + a little breathing room */
  --cpw-logo-h: 122px;   /* logo image height — prominent brand presence (client ask) */
}

/* =====================================================================
   BASE  —  force the light coastal base over Astra's default wrappers
   ===================================================================== */
html, body.cpw { background-color: var(--cpw-bg) !important; }
.site, #page, #content, .site-content, .ast-container, #primary,
.ast-separate-container, .entry-content,
.ast-container, .site-content > .ast-container { background: transparent !important; }
#content.site-content, .site-content { padding: 0 !important; }

body {
  background: var(--cpw-bg);
  color: var(--cpw-text);
  font-family: var(--cpw-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .cpw-display {
  font-family: var(--cpw-font-display);
  color: var(--cpw-ink);
  letter-spacing: -0.005em;   /* soft-serif: near-normal tracking (negative tracking cramps a serif) */
  line-height: 1.14;
  font-weight: 600;
}
p { margin: 0 0 1rem; }

/* two-tone headline accent (like the reference "Most Popular Products") */
.cpw-accent { color: var(--cpw-teal); }

/* compound codes / dose — clean sans now (monospace retired; the tell that read "robotic") */
.cpw-mono, .cpw-code, .cpw-dose { font-family: var(--cpw-font-body); letter-spacing: 0; font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }

/* eyebrow pill (clean sans label) */
.cpw-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--cpw-font-body);
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cpw-teal-ink);
  background: var(--cpw-teal-soft);
  border: 1px solid #CBE6E9;
  padding: .4rem .9rem; border-radius: var(--cpw-radius-pill);
}
.cpw-eyebrow svg { color: var(--cpw-teal); }

a { color: var(--cpw-teal-ink); text-decoration: none; }
a:hover { color: var(--cpw-cta-hover); }

:focus-visible { outline: 2px solid var(--cpw-ring); outline-offset: 3px; border-radius: var(--cpw-radius-sm); }

img { max-width: 100%; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.cpw-btn,
.woocommerce a.button.alt, .woocommerce button.button.alt, .wp-block-button__link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--cpw-font-body); font-weight: 700; font-size: .95rem;
  padding: .85rem 1.5rem; border-radius: var(--cpw-radius-pill);
  background: var(--cpw-cta); color: #fff !important; border: 1px solid var(--cpw-cta);
  transition: transform .16s ease, background .2s ease, box-shadow .2s ease;
  cursor: pointer; min-height: 46px; box-shadow: var(--cpw-shadow-soft);
}
.cpw-btn:hover, .woocommerce a.button.alt:hover, .wp-block-button__link:hover {
  background: var(--cpw-cta-hover); border-color: var(--cpw-cta-hover);
  transform: translateY(-2px); box-shadow: var(--cpw-shadow-card); color: #fff !important;
}
.cpw-btn--ghost {
  background: #fff; color: var(--cpw-ink) !important; border: 1px solid var(--cpw-border-str);
  box-shadow: none;
}
.cpw-btn--ghost:hover { border-color: var(--cpw-teal); color: var(--cpw-teal-ink) !important; background: #fff; }
.cpw-btn--sm { padding: .6rem 1.05rem; font-size: .84rem; min-height: 40px; }
.cpw-btn__arrow { transition: transform .18s ease; }
.cpw-btn:hover .cpw-btn__arrow { transform: translateX(3px); }

/* =====================================================================
   LAYOUT HELPERS
   ===================================================================== */
.cpw-container { max-width: var(--cpw-maxw); margin-inline: auto; padding-inline: var(--cpw-space); }
.cpw-section  { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cpw-section--tight { padding-block: 0; }
.cpw-band-muted { background: var(--cpw-muted); }
.cpw-band-linen { background: var(--cpw-linen); }
.cpw-center { text-align: center; margin-top: 2.25rem; }

.cpw-sechead { max-width: 60ch; margin: 0 auto 2.5rem; text-align: center; }
/* text-wrap: balance evens out the lines of a centred section head instead of
   leaving one orphaned word on the last line (added 2026-07-27 — "Browse by
   research category" was falling as three words then "category" alone). */
.cpw-sechead h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: .7rem 0 .6rem; text-wrap: balance; }
.cpw-sechead p { color: var(--cpw-muted-text); font-size: 1.05rem; }

/* page-title banner (interior pages) */
.cpw-pagebanner { background: var(--cpw-banner); text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.cpw-pagebanner h1 { font-family: var(--cpw-font-round); font-weight: 600; color: #fff; font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: 0; }

/* =====================================================================
   HEADER / NAV  (white frosted, sticky)
   ===================================================================== */
.cpw-skip { position: absolute; left: -9999px; top: 0; background: var(--cpw-cta); color: #fff; padding: .6rem 1rem; z-index: 300; border-radius: 0 0 8px 0; }
.cpw-skip:focus { left: 0; }

.cpw-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.9); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--cpw-border); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cpw-header.is-stuck { box-shadow: 0 8px 28px -20px rgba(23,50,60,0.5); }
/* HOME: transparent over the hero on load, frosted-white once scrolled */
.cpw-header--home:not(.is-stuck) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; box-shadow: none; }
/* offset the sticky nav below the WP admin bar so it isn't covered when logged in (real visitors have no admin bar) */
body.admin-bar .cpw-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .cpw-header { top: 46px; } }
.cpw-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--cpw-navh); }
/* flex: none is load-bearing, not tidiness. The nav links are `white-space: nowrap`
   so they cannot shrink, which left the logo as the only flexible item in the row —
   flexbox crushed it as the viewport narrowed: 166px wide at 1440, 66px at 1024,
   and 0px (gone entirely) by 941px, which also shoved the cart badge off-screen.
   Found 2026-07-27. With this the logo holds its size and the row switches to the
   mobile nav at the breakpoint below instead of silently eating the brand. */
.cpw-brand { display: inline-flex; align-items: center; margin-left: 1.25rem; flex: none; }   /* nudged right, per reference */
.cpw-brand img { height: var(--cpw-logo-h); width: auto; display: block; }

.cpw-nav { display: flex; align-items: center; gap: 1.9rem; }
.cpw-nav__link { font-family: var(--cpw-font-body); font-size: .98rem; font-weight: 600; color: var(--cpw-ink); white-space: nowrap; padding: .35rem 0; position: relative; }
.cpw-nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--cpw-teal); transition: right .22s ease; border-radius: 2px; }
.cpw-nav__link:hover, .cpw-nav__link[aria-current="page"] { color: var(--cpw-teal-ink); }
.cpw-nav__link:hover::after, .cpw-nav__link[aria-current="page"]::after { right: 0; }

/* dropdown (Research Catalog) — behaves like a plain nav link: teal text + underline, NO boxy highlight */
.cpw-nav__item { position: relative; }
.cpw-nav__toggle { display: inline-flex; align-items: center; gap: .35rem; background: none !important; border: 0; cursor: pointer; font: inherit; font-family: var(--cpw-font-body); font-size: .98rem; font-weight: 600; color: var(--cpw-ink); position: relative; padding: .35rem 0; -webkit-tap-highlight-color: transparent; }
.cpw-nav__toggle::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--cpw-teal); transition: right .22s ease; border-radius: 2px; }
.cpw-nav__toggle:hover, .cpw-nav__item[data-open="true"] .cpw-nav__toggle { color: var(--cpw-teal-ink); }
.cpw-nav__toggle:hover::after, .cpw-nav__item[data-open="true"] .cpw-nav__toggle::after { right: 0; }
.cpw-nav__toggle:focus { outline: none; }
.cpw-nav__toggle:focus-visible { color: var(--cpw-teal-ink); }
.cpw-nav__toggle:focus-visible::after { right: 0; }
.cpw-nav__toggle svg { transition: transform .2s ease; }
.cpw-nav__item[data-open="true"] .cpw-nav__toggle svg { transform: rotate(180deg); }
.cpw-nav__menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px); min-width: 210px; background: #fff; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-sm); box-shadow: var(--cpw-shadow); padding: .5rem; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; }
/* Hover bridge: the 14px gap between the toggle and the panel sits OUTSIDE
   .cpw-nav__item, so crossing it fired mouseleave and closed the menu before a
   click could land. This invisible strip is a child of the menu, so the pointer
   never leaves the item. Wider than the panel to survive a diagonal approach. */
.cpw-nav__menu::before { content: ""; position: absolute; left: -24px; right: -24px; top: -18px; height: 18px; }
.cpw-nav__item[data-open="true"] .cpw-nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cpw-nav__menu a { display: block; padding: .6rem .8rem; border-radius: 8px; color: var(--cpw-ink); font-weight: 600; font-family: var(--cpw-font-body); font-size: .92rem; }
.cpw-nav__menu a:hover { background: var(--cpw-teal-soft); color: var(--cpw-teal-ink); }

.cpw-nav__icons { display: flex; align-items: center; gap: 1.1rem; }
.cpw-nav__icon { color: var(--cpw-ink); display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.cpw-nav__icon:hover { color: var(--cpw-teal-ink); }
.cpw-nav__cart { position: relative; }

/* search popover (top-right magnifier) */
.cpw-search { position: relative; display: inline-flex; }
.cpw-search__toggle { background: none !important; -webkit-tap-highlight-color: transparent; }
.cpw-search__toggle:hover, .cpw-search[data-open="true"] .cpw-search__toggle, .cpw-search__toggle:focus-visible { color: var(--cpw-teal-ink); }
.cpw-search__toggle:focus { outline: none; }
.cpw-search__panel { position: absolute; top: calc(100% + 16px); right: 0; z-index: 130; display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-pill); box-shadow: var(--cpw-shadow); padding: .35rem .35rem .35rem 1rem; width: min(320px, 78vw); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.cpw-search[data-open="true"] .cpw-search__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.cpw-search__input { flex: 1; border: 0; outline: none; font: inherit; font-family: var(--cpw-font-body); color: var(--cpw-ink); background: none; min-width: 0; }
.cpw-search__input::placeholder { color: var(--cpw-muted-text); }
.cpw-search__go { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--cpw-cta); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.cpw-search__go:hover { background: var(--cpw-cta-hover); }

/* account dropdown (top-right person icon) — icon turns teal on hover/open, no boxy highlight */
.cpw-acct { position: relative; display: inline-flex; }
.cpw-acct__toggle { background: none !important; -webkit-tap-highlight-color: transparent; }
.cpw-acct__toggle:hover, .cpw-acct[data-open="true"] .cpw-acct__toggle, .cpw-acct__toggle:focus-visible { color: var(--cpw-teal-ink); }
.cpw-acct__toggle:focus { outline: none; }
/* Right-aligned to its icon, NOT centred on it. Centring (`right: 50%` +
   `translateX(50%)`) pushed half a 190px panel outboard of an icon that sits ~20px
   from the container edge, so the panel itself hung 24px past the viewport and
   gave every page a horizontal scroll at ~1024px wide. Right-aligning removes the
   whole class of bug at any width; the links stay centred inside via text-align. */
.cpw-acct__menu { position: absolute; top: calc(100% + 16px); right: 0; transform: translateY(6px); min-width: 190px; background: #fff; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-sm); box-shadow: var(--cpw-shadow); padding: .5rem; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; text-align: center; z-index: 120; }
/* Same hover bridge as the Research Catalog menu — see note there — but WITHOUT
   the right-hand overhang. This panel is centred on the last icon in the nav, so
   its right edge already sits flush against the container edge; a `right: -24px`
   bridge therefore stuck 24px past the viewport and gave EVERY page a 24px
   horizontal scroll at desktop widths between the 940px breakpoint and ~1290px
   (above that the 1240px container leaves enough margin to absorb it, and below
   it the mobile rule sets `content: none`). Found 2026-07-27. The overhang buys
   nothing here anyway: the pointer enters from the icon, which sits at the
   panel's horizontal centre. */
.cpw-acct__menu::before { content: ""; position: absolute; left: -24px; right: 0; top: -20px; height: 20px; }
.cpw-acct[data-open="true"] .cpw-acct__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cpw-acct__menu a { display: block; padding: .6rem .8rem; border-radius: 8px; color: var(--cpw-teal-ink); font-family: var(--cpw-font-body); font-weight: 600; font-size: .95rem; }
.cpw-acct__menu a:hover { background: var(--cpw-teal-soft); color: var(--cpw-cta-hover); }
.cpw-cartcount { position: absolute; top: -8px; right: -10px; background: var(--cpw-cta); color: #fff; font-family: var(--cpw-font-mono); font-size: .66rem; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 4px; }

.cpw-navtoggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.cpw-navtoggle span { width: 24px; height: 2px; background: var(--cpw-ink); border-radius: 2px; transition: .2s; }

/* Breakpoint raised 940px -> 1150px on 2026-07-27. MEASURED, not preference: the
   desktop row needs 1084px (166px logo + 20px offset + 766px of nowrap links +
   99px of icons + 32px gaps), so with container padding it wants a ~1132px
   viewport. At the old 940px the desktop nav was still on screen from 941px up
   while having nowhere near the room for it — which is why the logo was being
   crushed to nothing across the whole tablet-landscape band (1024x768 included).
   The hamburger nav already handles this width well. */
@media (max-width: 1150px) {
  :root { --cpw-navh: 86px; --cpw-logo-h: 70px; }
  .cpw-brand { margin-left: .25rem; }
  .cpw-navtoggle { display: flex; order: 3; }
  .cpw-nav__icons { order: 2; }
  .cpw-nav { position: fixed; inset: var(--cpw-navh) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--cpw-border); padding: .5rem 1.25rem 1.25rem; transform: translateY(-130%); transition: transform .25s ease; box-shadow: var(--cpw-shadow); }
  /* mobile menu panel needs a solid backdrop even when the home header is transparent */
  body.cpw-nav-open .cpw-header--home:not(.is-stuck) { background: rgba(255,255,255,0.96); backdrop-filter: saturate(150%) blur(12px); }
  .cpw-nav__link { padding: .95rem 0; border-bottom: 1px solid var(--cpw-border); }
  .cpw-nav__item { border-bottom: 1px solid var(--cpw-border); }
  .cpw-nav__toggle { padding: .95rem 0; width: 100%; justify-content: space-between; }
  .cpw-nav__menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 .6rem 1rem; display: none; min-width: 0; }
  /* Must match the specificity of the desktop open-state rule
     (.cpw-nav__item[data-open="true"] .cpw-nav__menu) or its translate(-50%,0)
     wins here too and shifts the open submenu half its width off-screen left. */
  .cpw-nav__item[data-open="true"] .cpw-nav__menu { display: block; transform: none; }
  .cpw-nav__menu::before { content: none; }   /* no hover bridge needed on touch */
  body.cpw-nav-open .cpw-nav { transform: translateY(0); }

  /* Search panel: anchored to the search icon it overflowed the left edge, because
     on mobile that icon is not at the right edge (the hamburger is). Pin it to the
     header instead so it always sits inside the viewport. */
  .cpw-search { position: static; }
  .cpw-search__panel { top: calc(var(--cpw-navh) - 10px); left: 1rem; right: 1rem; width: auto; }
  /* The account menu is centred on its icon and can clip on narrow screens. */
  .cpw-acct { position: static; }
  .cpw-acct__menu { right: 1rem; left: auto; transform: translate(0, 6px); top: calc(var(--cpw-navh) - 10px); min-width: 180px; max-width: calc(100vw - 2rem); }
  .cpw-acct[data-open="true"] .cpw-acct__menu { transform: translate(0, 0); }
  .cpw-acct__menu::before { content: none; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.cpw-hero { position: relative; overflow: hidden; min-height: 600px; border-bottom: 1px solid var(--cpw-border);
  background: var(--cpw-bg); }
.cpw-home .cpw-hero { margin-top: calc(-1 * var(--cpw-navh)); }   /* slide under the transparent home header */
/* dedicated hero image layer — parallaxes + fades on scroll (JS, gated on reduced-motion) */
.cpw-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--cpw-bg) url("images/hero.webp") no-repeat right center / cover;
  will-change: transform, opacity; }

/* FIXED faded page backdrop (homepage only): as you scroll, the hero image fades
   out of the hero AND fades in here as a soft fixed backdrop behind the rest of the
   page (JS drives the opacity 0 -> ~0.13). Sits above the body bg, below all content. */
.cpw-pagebg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: url("images/hero.webp") no-repeat center center / cover; will-change: opacity; }
@media (max-width: 980px) { .cpw-pagebg { background-position: 70% center; } }
/* soft left scrim so the copy stays crisp even where the molecule art drifts left */
.cpw-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg, var(--cpw-bg) 0%, rgba(245,248,248,0.97) 32%, rgba(245,248,248,0.62) 48%, rgba(245,248,248,0) 62%); }
.cpw-hero__inner { position: relative; z-index: 2;
  padding-block: calc(var(--cpw-navh) + clamp(2rem, 5vw, 4rem)) clamp(3.5rem, 8vw, 6rem); }
.cpw-hero__copy { max-width: 540px; }   /* left-aligned copy column; photo stays clear on the right */
.cpw-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 1rem 0 1.1rem; max-width: 14ch; }
.cpw-hero__sub { color: var(--cpw-muted-text); font-size: 1.12rem; max-width: 42ch; }
.cpw-hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin: 1.7rem 0 1.2rem; }
.cpw-hero__ruo { font-size: .74rem; color: var(--cpw-muted-text); }

/* hero stat row */
.cpw-hero__stats { display: flex; gap: 2.4rem; margin-top: 2rem; flex-wrap: wrap; }
.cpw-stat__n { font-family: var(--cpw-font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--cpw-teal-ink); line-height: 1; }
.cpw-stat__l { font-size: .82rem; color: var(--cpw-muted-text); margin-top: .3rem; }

@media (max-width: 980px) {
  /* stack: photo becomes a full-bleed backdrop, copy over a vertical scrim */
  .cpw-hero { min-height: 0; }
  .cpw-hero__bg { background-size: cover; background-position: 78% center; }
  .cpw-hero::before { background: linear-gradient(180deg, rgba(245,248,248,0.93) 0%, rgba(245,248,248,0.83) 52%, rgba(245,248,248,0.96) 100%); }
  .cpw-hero__inner { max-width: 100%; padding-block: calc(var(--cpw-navh) + 1.5rem) 3rem; }
  .cpw-hero__copy { max-width: 100%; }
  .cpw-hero__sub { max-width: 100%; }
}

/* =====================================================================
   TEAL TRUST STRIP  (full-width band, like reference)
   ===================================================================== */
.cpw-trustbar { background: var(--cpw-banner); color: #fff; }
.cpw-trustbar__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.4rem; padding-block: 1.05rem; }
.cpw-trustbar__item { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--cpw-font-body); font-weight: 600; font-size: .95rem; }
.cpw-trustbar__item svg { opacity: .92; }

/* =====================================================================
   SHOP BY CATEGORY  (colorful tiles + product thumbnail — adds color+imagery)
   ===================================================================== */
.cpw-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 820px){ .cpw-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .cpw-cats { grid-template-columns: 1fr; } }
.cpw-cat { display: flex; align-items: center; gap: 1.1rem; min-height: 132px; padding: 1.2rem 1.3rem; border-radius: var(--cpw-radius); border: 1px solid var(--cpw-border); box-shadow: var(--cpw-shadow-card); transition: transform .2s ease, box-shadow .25s ease; }
.cpw-cat:hover { transform: translateY(-5px); box-shadow: var(--cpw-shadow); }
.cpw-cat--teal { background: linear-gradient(135deg, #DCF0F1 0%, #EAF7F3 100%); }
.cpw-cat--navy { background: linear-gradient(135deg, #E1EBEE 0%, #EFF5F6 100%); }
.cpw-cat--sage { background: linear-gradient(135deg, #E7EEE4 0%, #F1F5EC 100%); }
.cpw-cat--sand { background: linear-gradient(135deg, #F3EADB 0%, #FBF5EA 100%); }
.cpw-cat__img { flex: none; width: 90px; height: 90px; border-radius: 14px; background-size: cover; background-position: center; box-shadow: var(--cpw-shadow-soft); border: 1px solid rgba(255,255,255,0.7); transition: transform .3s ease; }
.cpw-cat:hover .cpw-cat__img { transform: translateY(-3px) scale(1.03); }
.cpw-cat__body { flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.cpw-cat__label { font-family: var(--cpw-font-display); font-weight: 600; font-size: 1.14rem; color: var(--cpw-ink); line-height: 1.18; }
.cpw-cat__go { font-family: var(--cpw-font-body); font-weight: 700; font-size: .82rem; color: var(--cpw-teal-ink); display: inline-flex; align-items: center; gap: .3rem; }
.cpw-cat__go span { transition: transform .18s ease; }
.cpw-cat:hover .cpw-cat__go { color: var(--cpw-cta-hover); }
.cpw-cat:hover .cpw-cat__go span { transform: translateX(3px); }

/* =====================================================================
   PRODUCT CARDS  (white, soft shadow, vial tilt on hover)
   ===================================================================== */
.cpw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 820px){ .cpw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .cpw-grid { grid-template-columns: 1fr; } }
.cpw-card { background: var(--cpw-card); border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius); box-shadow: var(--cpw-shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .25s ease; }
.cpw-card:hover { transform: translateY(-5px); box-shadow: var(--cpw-shadow); }
/* square media; the normalized vial images carry their own uniform backdrop + margin, so fill edge-to-edge (all vials now render at one consistent size). Tilt is JS pointer-follow only. */
.cpw-card__media { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(180deg, #F3F7F8, var(--cpw-media)); overflow: hidden; }
.cpw-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; transform-origin: center center; will-change: transform; }
.cpw-card__ruo { position: absolute; top: .7rem; left: .7rem; background: rgba(255,255,255,0.92); color: var(--cpw-teal-ink); font-family: var(--cpw-font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .5rem; border-radius: 6px; border: 1px solid var(--cpw-border); }
.cpw-card__body { padding: .95rem 1rem 1rem; display: flex; flex-direction: column; gap: .12rem; flex: 1; }
.cpw-card__title { font-family: var(--cpw-font-display); color: var(--cpw-ink); font-size: 1.06rem; font-weight: 600; margin: 0; line-height: 1.2; }
.cpw-card__desc { color: var(--cpw-muted-text); font-size: .82rem; margin: 0; }
.cpw-card__dose { font-family: var(--cpw-font-body); font-weight: 600; color: var(--cpw-teal-ink); font-size: .76rem; margin-top: .15rem; }
.cpw-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.cpw-card__price { font-family: var(--cpw-font-display); font-weight: 600; color: var(--cpw-ink); font-size: 1.12rem; }
.cpw-card__price span { font-family: var(--cpw-font-body); font-weight: 500; font-size: .68rem; color: var(--cpw-muted-text); }
.cpw-card__ruoline { font-size: .62rem; color: var(--cpw-muted-text); border-top: 1px solid var(--cpw-border); margin-top: .6rem; padding-top: .5rem; line-height: 1.45; }

/* =====================================================================
   WHY CHOOSE US  (2-col: copy + feature cards)
   ===================================================================== */
.cpw-why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.cpw-why__copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: .7rem 0 1rem; }
.cpw-why__copy p { color: var(--cpw-muted-text); margin-bottom: 1.4rem; }
.cpw-features { display: grid; gap: 1rem; }
.cpw-feature { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-sm); padding: 1.1rem 1.25rem; box-shadow: var(--cpw-shadow-soft); transition: transform .18s ease, box-shadow .2s ease; }
.cpw-feature:hover { transform: translateX(4px); box-shadow: var(--cpw-shadow-card); }
.cpw-feature__ico { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cpw-teal) 0%, var(--cpw-cta) 100%); }
.cpw-feature h4 { margin: 0 0 .2rem; font-size: 1.05rem; }
.cpw-feature p { margin: 0; color: var(--cpw-muted-text); font-size: .9rem; }
@media (max-width: 860px){ .cpw-why { grid-template-columns: 1fr; gap: 2rem; } }

/* =====================================================================
   PROMO CARDS
   ===================================================================== */
.cpw-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.cpw-promo { position: relative; overflow: hidden; border-radius: var(--cpw-radius); padding: 2.2rem 2rem; border: 1px solid var(--cpw-border); }
.cpw-promo--teal { background: linear-gradient(135deg, #DCF0F1 0%, #EAF7F3 100%); }
.cpw-promo--sale { background: linear-gradient(135deg, #FBEAD9 0%, #FDF3EA 100%); }
.cpw-promo__tag { font-family: var(--cpw-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cpw-muted-text); }
.cpw-promo h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .3rem 0 .6rem; }
.cpw-promo--teal h3 { color: var(--cpw-teal-ink); }
.cpw-promo--sale h3 { color: #C86A32; }
.cpw-promo p { color: var(--cpw-text); max-width: 42ch; margin-bottom: 1.3rem; }
@media (max-width: 720px){ .cpw-promos { grid-template-columns: 1fr; } }

/* =====================================================================
   ABOUT / MOLECULAR
   ===================================================================== */
.cpw-about { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.cpw-about__copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: .7rem 0 1rem; }
.cpw-about__copy p { color: var(--cpw-text); margin-bottom: 1rem; }
.cpw-about__media { position: relative; border-radius: var(--cpw-radius); overflow: hidden; background: linear-gradient(160deg, #EAF3F4, #F6F1E7); border: 1px solid var(--cpw-border); min-height: 340px; display: grid; place-items: center; padding: 1.5rem; }
.cpw-about__media img { width: min(70%, 260px); height: auto; filter: drop-shadow(0 20px 34px rgba(23,50,60,0.24)); }
.cpw-about__hex { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
/* photo variant: the brand photograph fills the panel edge to edge instead of a
   small vial centred on a gradient (client review 2026-07-26 §13) */
/* The panel carries the SAME aspect ratio the photograph is cropped to (5:4), so
   `cover` has nothing left to crop at any viewport width and the three vials stay
   whole and centred. A fixed min-height did the opposite: the panel went taller
   than the image on narrow screens, so cover scaled to the height and clipped the
   outer two vials off the sides — that plus an off-centre `object-position: 62%`
   is what the client reported on 2026-07-27 (§1). Keep the two in step: if the
   crop aspect in build/make-company-image.py changes, change this too. */
.cpw-about__media--photo { padding: 0; background: var(--cpw-muted); min-height: 0; aspect-ratio: 5 / 4; }
.cpw-about__media--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: none; }
@media (max-width: 860px){ .cpw-about { grid-template-columns: 1fr; gap: 2rem; } }

/* =====================================================================
   FAQ  (teal pill accordion — reference style)
   ===================================================================== */
.cpw-faqwrap { max-width: 860px; margin-inline: auto; }
.cpw-faq { display: flex; flex-direction: column; gap: .8rem; }
.cpw-faq__item { border-radius: var(--cpw-radius-pill); overflow: hidden; box-shadow: var(--cpw-shadow-soft); }
.cpw-faq__item[data-open="true"] { border-radius: var(--cpw-radius); }
.cpw-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; background: var(--cpw-banner); border: 0; color: #fff; font-family: var(--cpw-font-display); font-size: 1rem; font-weight: 500; padding: 1.05rem 1.5rem; cursor: pointer; min-height: 46px; transition: background .18s ease; }
.cpw-faq__q:hover { background: var(--cpw-teal-ink); }
/* no boxy blue/teal outline lingering after a mouse click (Astra adds a blue focus box-shadow on buttons); keyboard focus = subtle white inset ring on the teal pill */
.cpw-faq__q { -webkit-tap-highlight-color: transparent; }
.cpw-faq__q:focus, .cpw-faq__q:active { outline: none; box-shadow: none; }
.cpw-faq__q:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: -5px; }
.cpw-faq__q svg { transition: transform .28s ease; flex: none; }
.cpw-faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
/* animated fall-down: grid-template-rows 0fr -> 1fr (smooth height, no JS measuring).
   The collapsing grid item (.cpw-faq__a-in) must carry NO padding/border of its own —
   padding sets a track minimum that stops it collapsing to 0. Padding/bg/border go on the <p> inside. */
.cpw-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1); }
.cpw-faq__item[data-open="true"] .cpw-faq__a { grid-template-rows: 1fr; }
.cpw-faq__a-in { overflow: hidden; min-height: 0; }
.cpw-faq__a-in p { margin: 0; background: #fff; border: 1px solid var(--cpw-border); border-top: 0; border-radius: 0 0 var(--cpw-radius) var(--cpw-radius); padding: 1.15rem 1.5rem; color: var(--cpw-text); }
.cpw-faq__a-in strong { color: var(--cpw-ink); }

/* =====================================================================
   CTA
   ===================================================================== */
.cpw-cta { background: linear-gradient(135deg, #EAF3F4, #F6F1E7); border-top: 1px solid var(--cpw-border); }
.cpw-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cpw-cta h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: .5rem 0 .5rem; }
.cpw-cta p { color: var(--cpw-text); max-width: 48ch; margin: 0; }
.cpw-cta__actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.cpw-footer { background: #fff; border-top: 1px solid var(--cpw-border); margin-top: 0; }
.cpw-footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; padding-block: 3.5rem 2rem; }
.cpw-footer__brand { margin-left: 1.25rem; }   /* same left offset as the nav logo */
.cpw-footer__brand img { height: 92px; width: auto; margin-bottom: 1rem; }
@media (max-width: 940px){ .cpw-footer__brand { margin-left: .25rem; } }
.cpw-footer__tag { color: var(--cpw-muted-text); font-size: .9rem; max-width: 34ch; }
.cpw-footer__contact { margin-top: 1rem; display: grid; gap: .35rem; font-size: .85rem; color: var(--cpw-text); }
.cpw-footer__contact a { color: var(--cpw-text); }
.cpw-footer__contact a:hover { color: var(--cpw-teal-ink); }
.cpw-footer__col { display: flex; flex-direction: column; gap: .6rem; }
.cpw-footer__col h4 { font-family: var(--cpw-font-display); font-size: 1.05rem; color: var(--cpw-ink); margin: 0 0 .35rem; }
.cpw-footer__col a { color: var(--cpw-muted-text); font-size: .9rem; }
.cpw-footer__col a:hover { color: var(--cpw-teal-ink); }
.cpw-footer__ruo { border-top: 1px solid var(--cpw-border); padding-block: 1.5rem; }
.cpw-footer__ruo p { color: var(--cpw-muted-text); font-size: .78rem; line-height: 1.7; max-width: 100ch; margin: 0; }
.cpw-footer__ruo strong { color: var(--cpw-ink); }
.cpw-footer__bottom { background: var(--cpw-banner); }
.cpw-footer__bottominner { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.1rem; color: rgba(255,255,255,0.9); font-size: .82rem; }
.cpw-footer__bottominner nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.cpw-footer__bottominner a { color: rgba(255,255,255,0.9); }
.cpw-footer__bottominner a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 860px){ .cpw-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .cpw-footer__top { grid-template-columns: 1fr; } }

/* =====================================================================
   MODALS (age gate + mandatory researcher registration + account prompt)
   ===================================================================== */
body.cpw-locked { overflow: hidden; }
.cpw-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(15,35,44,0.55); backdrop-filter: blur(5px); }
.cpw-modal[hidden] { display: none; }
.cpw-modal__panel { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: #fff; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius); box-shadow: var(--cpw-shadow); padding: 2.1rem 2rem; text-align: center; }
.cpw-modal__panel--wide { max-width: 560px; text-align: left; }
.cpw-modal__panel h2 { font-size: 1.55rem; margin: .55rem 0 .75rem; }
.cpw-modal__panel > p { color: var(--cpw-text); font-size: .95rem; }
.cpw-modal__logo { height: 52px; width: auto; margin: 0 auto .4rem; display: block; }
.cpw-modal__close { position: absolute; top: .7rem; right: .9rem; background: none; border: 0; color: var(--cpw-muted-text); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.cpw-modal__close:hover { color: var(--cpw-teal-ink); }
.cpw-agegate__actions, .cpw-account__actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.4rem; flex-wrap: wrap; }
.cpw-agegate__panel { border-top: 4px solid var(--cpw-cta); }

/* registration form */
.cpw-reg { display: grid; gap: .9rem; margin-top: 1.25rem; text-align: left; }
.cpw-reg label { font-size: .82rem; font-weight: 600; color: var(--cpw-ink); display: block; margin-bottom: .3rem; }
.cpw-reg input, .cpw-reg select { width: 100%; padding: .7rem .85rem; border: 1px solid var(--cpw-border-str); border-radius: var(--cpw-radius-sm); font: inherit; color: var(--cpw-ink); background: #fff; }
.cpw-reg input:focus, .cpw-reg select:focus { outline: 2px solid var(--cpw-ring); outline-offset: 1px; }
/* A select inherits the body's 1.6 line-height, so 25.6px of line + 22.4px of
   padding overflowed the 40px control and cropped the chosen option's descenders
   (visible on the registration modal's Account Type too, not just here).
   Pin a line-height that fits and let the control grow if a theme bumps the font. */
.cpw-reg select { line-height: 1.2; min-height: 44px; }
.cpw-reg input { min-height: 44px; }
.cpw-reg__checks { display: grid; gap: .7rem; margin-top: .3rem; }
.cpw-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; color: var(--cpw-text); line-height: 1.5; }
.cpw-check input { width: 18px; height: 18px; margin-top: .1rem; flex: none; accent-color: var(--cpw-cta); }
.cpw-check strong { color: var(--cpw-ink); }
/* sign-in view of the gate modal */
.cpw-login[hidden], .cpw-reg[hidden] { display: none; }
.cpw-login__remember { margin-top: -.2rem; }
.cpw-login__remember input { width: 18px; height: 18px; }
.cpw-login__lost { margin: -.2rem 0 0; font-size: .84rem; }
.cpw-login__lost a { color: var(--cpw-teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cpw-login__lost a:hover { color: var(--cpw-cta-hover); }

/* =====================================================================
   MOTION  (subtle only — respect reduced-motion)
   ===================================================================== */
.cpw-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.cpw-reveal.is-in { opacity: 1; transform: none; }
.cpw-reveal--d1 { transition-delay: .06s; } .cpw-reveal--d2 { transition-delay: .12s; } .cpw-reveal--d3 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .cpw-reveal { opacity: 1 !important; transform: none !important; }
  .cpw-float { animation: none !important; }
  .cpw-card:hover .cpw-card__media img { transform: none; }
}

/* legal / info page content (refund, privacy, terms, disclaimer, shipping) */
.cpw-legalwrap { max-width: 820px; }
.cpw-legal { color: var(--cpw-text); font-size: 1rem; line-height: 1.75; }
.cpw-legal > *:first-child { margin-top: 0; }
.cpw-legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 2rem 0 .6rem; color: var(--cpw-ink); }
.cpw-legal h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; color: var(--cpw-teal-ink); }
.cpw-legal p { margin: 0 0 1.05rem; }
.cpw-legal ul, .cpw-legal ol { margin: 0 0 1.05rem; padding-left: 1.3rem; }
.cpw-legal li { margin-bottom: .5rem; }
.cpw-legal strong { color: var(--cpw-ink); }
.cpw-legal a { color: var(--cpw-teal-ink); text-decoration: underline; text-underline-offset: 2px; }
.cpw-legal a:hover { color: var(--cpw-cta-hover); }
.cpw-legal hr { border: 0; border-top: 1px solid var(--cpw-border); margin: 2rem 0; }
.cpw-legal em { color: var(--cpw-muted-text); }
/* WooCommerce pages routed through page.php (cart/checkout/account) — full width, no banner clash */
.cpw-wcpage { max-width: var(--cpw-maxw); }
.cpw-pagebanner + .cpw-section { padding-top: clamp(2rem, 4vw, 3rem); }

/* package-protection toggle (cart + checkout) + checkout RUO acknowledgment */
/* Free-shipping progress line in the cart totals. Sits in the totals table as
   its own full-width row, so it is styled as a quiet inline note rather than a
   banner — it must not compete with the order total directly beneath it. */
.cpw-shipnudge td { padding: .55rem .9rem !important; background: var(--cpw-muted); border-radius: var(--cpw-radius-sm); }
.cpw-shipnudge span { font-family: var(--cpw-font-body); font-size: .84rem; line-height: 1.5; color: var(--cpw-text); }
.cpw-shipnudge--met td { background: var(--cpw-teal-soft); }
.cpw-shipnudge--met span { color: var(--cpw-teal-ink); font-weight: 600; }

.cpw-protect-row th { font-weight: 400 !important; }
.cpw-protect { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; text-align: left; font-weight: 400; }
.cpw-protect input { width: 18px; height: 18px; margin-top: .15rem; flex: none; accent-color: var(--cpw-cta); }
.cpw-protect strong { display: block; font-family: var(--cpw-font-body); color: var(--cpw-ink); font-size: .92rem; }
.cpw-protect small { display: block; color: var(--cpw-muted-text); font-size: .78rem; margin-top: .15rem; line-height: 1.45; }
.woocommerce-checkout .cpw-ruo-ack { background: var(--cpw-muted); border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-sm); padding: .9rem 1rem !important; margin: .5rem 0 1rem; }
.cpw-ruo-ack label { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; line-height: 1.5; color: var(--cpw-text); }
.cpw-ruo-ack input[type="checkbox"] { width: 18px; height: 18px; margin-top: .1rem; flex: none; accent-color: var(--cpw-cta); }

/* =====================================================================
   WOOCOMMERCE — shop archive / category / search / single product
   (constrained in .cpw-woo > .cpw-container via woocommerce.php)
   ===================================================================== */
.cpw-woo { padding-block: clamp(2rem, 4vw, 3.5rem); }
.cpw-woo .woocommerce-breadcrumb { color: var(--cpw-muted-text); font-size: .85rem; margin-bottom: 1rem; }
.cpw-woo .woocommerce-products-header__title, .cpw-woo h1.entry-title, .cpw-woo .page-title { font-family: var(--cpw-font-display); color: var(--cpw-ink); font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0 0 .5rem; }
.cpw-woo .woocommerce-result-count { color: var(--cpw-muted-text); font-size: .9rem; }
.cpw-woo .woocommerce-ordering select { border: 1px solid var(--cpw-border-str); border-radius: var(--cpw-radius-pill); padding: .5rem 1rem; font-family: var(--cpw-font-body); color: var(--cpw-ink); background: #fff; }
.term-description, .cpw-woo .term-description { color: var(--cpw-muted-text); max-width: 70ch; margin-bottom: 1.5rem; }

/* ===== Research Catalog cards — mirror the amc reference: vial on soft-grey rounded
   panel, centered name / "starting at" / price, pill buttons, NO white card box ===== */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2.6rem 1.6rem !important; margin: 1.75rem 0 0 !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
@media (max-width: 1180px){ .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 800px){ .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px){ .woocommerce ul.products { grid-template-columns: 1fr !important; } }
.woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: center; display: flex; flex-direction: column; }
.woocommerce ul.products li.product a img, .woocommerce ul.products li.product img { margin: 0 !important; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; background: linear-gradient(160deg, #f4f5f6, #e7e9eb); transition: transform .3s ease, box-shadow .3s ease; }
.woocommerce ul.products li.product:hover img { transform: translateY(-5px); box-shadow: 0 22px 40px -26px rgba(23,50,60,.5); }
/* category label hidden on cards (reference shows none) */
.woocommerce ul.products li.product .ast-woo-product-category { display: none !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .ast-loop-product__link {
  font-family: var(--cpw-font-display); color: var(--cpw-ink); font-size: 1.15rem; font-weight: 600; text-align: center; padding: 1rem .4rem .35rem !important; display: block; line-height: 1.22; }
.woocommerce ul.products li.product .price { text-align: center; color: var(--cpw-ink) !important; font-family: var(--cpw-font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 1rem !important; padding: 0 !important; line-height: 1.2; display: block; }
.woocommerce ul.products li.product .price del { color: var(--cpw-muted-text); font-weight: 400; font-size: 1rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.cpw-startingat { display: block; font-family: var(--cpw-font-body); font-weight: 600; font-size: .8rem; color: var(--cpw-muted-text); letter-spacing: .01em; margin-bottom: .12rem; }
/* button row: outline "Select options"/"Add to cart" + solid "Buy Now" */
.woocommerce ul.products li.product .cpw-cardbtns { display: flex; gap: .6rem; justify-content: center; margin-top: auto; padding: 0 .3rem; }
.woocommerce ul.products li.product .button { flex: 1; display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; background: #fff !important; color: var(--cpw-teal-ink) !important; border: 1.5px solid var(--cpw-teal) !important; border-radius: var(--cpw-radius-pill) !important; font-family: var(--cpw-font-body); font-weight: 700; font-size: .92rem; padding: .62rem 1rem !important; transition: background .2s ease, color .2s ease; white-space: nowrap; }
.woocommerce ul.products li.product .button:hover { background: var(--cpw-teal-soft) !important; color: var(--cpw-cta-hover) !important; }
.woocommerce ul.products li.product .button.loading::after { color: var(--cpw-teal-ink); }
.woocommerce ul.products li.product .cpw-buynow { background: var(--cpw-cta) !important; color: #fff !important; border-color: var(--cpw-cta) !important; }
.woocommerce ul.products li.product .cpw-buynow:hover { background: var(--cpw-cta-hover) !important; color: #fff !important; border-color: var(--cpw-cta-hover) !important; }
.woocommerce ul.products li.product .cpw-addcart.is-loading { opacity: .7; pointer-events: none; }
.woocommerce ul.products li.product .cpw-addcart.is-added { background: var(--cpw-sage) !important; border-color: var(--cpw-sage) !important; color: #fff !important; }
.woocommerce ul.products li.product .added_to_cart { display: none !important; }
/* stretch Astra's summary wrap to fill the (grid-equalized) card so the button row's
   margin-top:auto pins Add to Cart / Buy Now to the SAME baseline regardless of how many
   lines the product name wraps to */
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-loop-product__link { display: block; }
.woocommerce ul.products li.product .price { margin-top: auto !important; }
.woocommerce ul.products li.product .cpw-cardbtns { margin-top: .35rem; }
/* breathing room between the last product row and the page-number pagination */
.woocommerce nav.woocommerce-pagination, .woocommerce-page nav.woocommerce-pagination { margin-top: 3rem !important; padding-top: .5rem; }
/* Pagination was the ONE place left on the site still painting Astra's default
   blue (#046BD2) — the current page sat in a hard blue square in the middle of an
   otherwise teal palette. Found by scanning every page's computed colours for
   non-brand hues on 2026-07-27. Now brand teal pills matching the card buttons. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li { border: 0 !important; margin: 0 !important; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .7rem;
  border-radius: var(--cpw-radius-pill) !important;
  font-family: var(--cpw-font-body); font-weight: 700; font-size: .92rem;
  background: #fff; color: var(--cpw-teal-ink) !important;
  border: 1.5px solid var(--cpw-border-str) !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .16s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
  background: var(--cpw-teal-soft); border-color: var(--cpw-teal) !important;
  color: var(--cpw-cta-hover) !important; transform: translateY(-2px);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
  background: var(--cpw-cta) !important; color: #fff !important;
  border-color: var(--cpw-cta) !important; box-shadow: var(--cpw-shadow-soft);
}

/* single product page */
.woocommerce div.product .product_title { font-family: var(--cpw-font-display); color: var(--cpw-ink); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--cpw-ink); font-family: var(--cpw-font-display); }
.woocommerce div.product form.cart .button, .woocommerce div.product .single_add_to_cart_button { background: var(--cpw-cta); color: #fff !important; border-radius: var(--cpw-radius-pill); font-family: var(--cpw-font-body); font-weight: 700; }
.woocommerce div.product form.cart .button:hover { background: var(--cpw-cta-hover); }
/* Product tabs: the active tab was marked with Astra's dark slate rule, which read
   as a stray grey line rather than part of the palette. Teal underline instead. */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--cpw-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--cpw-font-body); font-weight: 700; color: var(--cpw-muted-text) !important; padding: .6rem .2rem !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--cpw-teal-ink) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--cpw-teal) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--cpw-ink) !important; }
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale { background: var(--cpw-cta); color: #fff; border-radius: var(--cpw-radius-pill); }
.woocommerce .star-rating span { color: var(--cpw-teal); }
.woocommerce div.product .images img { border-radius: var(--cpw-radius); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--cpw-cta); }

/* single-product reference elements: COA button (under image), note box, bulk-pricing table */
/* .cpw-coa-btn removed 2026-07-27 along with the per-product COA button it styled
   (see the note in functions.php). The COA Library page is the single home for
   certificates now. */
.cpw-prodnote { display: flex; gap: .6rem; align-items: flex-start; border: 1.5px solid var(--cpw-teal); background: var(--cpw-teal-soft); border-radius: var(--cpw-radius-sm); padding: .9rem 1.1rem; margin: 0 0 1.3rem; }
.cpw-prodnote svg { color: var(--cpw-teal-ink); flex: none; margin-top: 2px; }
.cpw-prodnote p { margin: 0; color: var(--cpw-ink); font-size: .92rem; line-height: 1.5; }
.cpw-bulk { width: 100%; max-width: 430px; border-collapse: collapse; margin: 0 0 1.5rem; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-sm); overflow: hidden; }
.cpw-bulk th { background: var(--cpw-muted); color: var(--cpw-ink); font-family: var(--cpw-font-display); font-weight: 600; font-size: .95rem; padding: .6rem 1.1rem; text-align: left; }
.cpw-bulk td { padding: .55rem 1.1rem; border-top: 1px solid var(--cpw-border); color: var(--cpw-text); font-family: var(--cpw-font-body); font-size: .95rem; }
.cpw-bulk tbody tr:first-child td { background: var(--cpw-teal); color: #fff; font-weight: 600; }

/* per-vial pricing table (retail vs wholesale), client price list 2026-07-24 */
.cpw-pricing { margin: 0 0 1.6rem; }
.cpw-pricing__title { font-family: var(--cpw-font-display); font-weight: 600; font-size: 1.02rem; color: var(--cpw-ink); margin: 0 0 .6rem; letter-spacing: -.005em; }
.cpw-pricing__table { width: 100%; max-width: 470px; border-collapse: collapse; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-sm); overflow: hidden; font-family: var(--cpw-font-body); }
.cpw-pricing__table th, .cpw-pricing__table td { padding: .58rem 1rem; font-size: .93rem; text-align: right; }
.cpw-pricing__table thead th { background: var(--cpw-muted); color: var(--cpw-ink); font-family: var(--cpw-font-display); font-weight: 600; }
.cpw-pricing__table thead th:first-child,
.cpw-pricing__table tbody th { text-align: left; }
.cpw-pricing__table tbody th { font-weight: 600; color: var(--cpw-ink); font-family: var(--cpw-font-body); }
.cpw-pricing__table tbody tr { border-top: 1px solid var(--cpw-border); }
.cpw-pricing__table tbody td { color: var(--cpw-text); font-variant-numeric: tabular-nums; }
.cpw-pricing__wholesale { color: var(--cpw-teal-ink); font-weight: 700; }
.cpw-pricing__na { color: var(--cpw-muted-text, #66787e); font-weight: 400; }
.cpw-pricing__note { margin: .55rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--cpw-muted-text, #66787e); max-width: 470px; }
@media (max-width: 480px) {
  .cpw-pricing__table th, .cpw-pricing__table td { padding: .5rem .65rem; font-size: .87rem; }
}

/* ---------------------------------------------------------------------------
   WHOLESALE PAGE — 10-vial packs (client request 2026-07-24)
--------------------------------------------------------------------------- */
.cpw-sechead__sub { max-width: 62ch; margin: .7rem auto 0; color: var(--cpw-muted-text); font-size: .98rem; line-height: 1.6; }

.cpw-wsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2.4rem; }
@media (max-width: 1024px) { .cpw-wsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } }
@media (max-width: 600px)  { .cpw-wsgrid { grid-template-columns: 1fr; } }

.cpw-wscard { display: flex; flex-direction: column; background: var(--cpw-card); border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.cpw-wscard:hover { transform: translateY(-3px); box-shadow: var(--cpw-shadow-card); }

.cpw-wscard__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--cpw-media); }
.cpw-wscard__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cpw-wscard__save { position: absolute; top: .8rem; left: .8rem; background: var(--cpw-cta); color: #fff; font-family: var(--cpw-font-body); font-weight: 700; font-size: .78rem; letter-spacing: .01em; padding: .3rem .62rem; border-radius: var(--cpw-radius-pill); }

.cpw-wscard__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.05rem 1.15rem; gap: .38rem; }
.cpw-wscard__title { font-family: var(--cpw-font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.25; margin: 0; letter-spacing: -.005em; }
.cpw-wscard__title a { color: var(--cpw-ink); text-decoration: none; }
.cpw-wscard__title a:hover { color: var(--cpw-teal-ink); }

.cpw-wscard__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.cpw-wscard__dose, .cpw-wscard__pack { font-family: var(--cpw-font-body); font-size: .78rem; font-weight: 600; padding: .2rem .55rem; border-radius: var(--cpw-radius-pill); }
.cpw-wscard__dose { background: var(--cpw-teal-soft); color: var(--cpw-teal-ink); }
.cpw-wscard__pack { background: var(--cpw-muted); color: var(--cpw-muted-text); }

.cpw-wscard__price { margin: .3rem 0 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.cpw-wscard__price del { color: var(--cpw-muted-text); text-decoration-thickness: 1px; font-size: .95rem; }
.cpw-wscard__price ins { text-decoration: none; color: var(--cpw-ink); font-family: var(--cpw-font-display); font-weight: 700; font-size: 1.28rem; }
.cpw-wscard__unit { margin: 0; font-size: .82rem; color: var(--cpw-muted-text); font-variant-numeric: tabular-nums; }

.cpw-wscard__body .cpw-wsadd { margin-top: auto; width: 100%; background: var(--cpw-cta); color: #fff; border: 0; border-radius: var(--cpw-radius-pill); font-family: var(--cpw-font-body); font-weight: 700; font-size: .93rem; padding: .68rem 1rem; cursor: pointer; transition: background .16s ease, opacity .16s ease; }
.cpw-wscard__body .cpw-wsadd:hover { background: var(--cpw-cta-hover); }
.cpw-wsadd.is-loading { opacity: .7; cursor: default; }
.cpw-wsadd.is-added { background: var(--cpw-sage); }
.cpw-wsadd:focus-visible { outline: 2px solid var(--cpw-teal-ink); outline-offset: 2px; }

.cpw-wscard__ruo { margin: .1rem 0 0; font-size: .7rem; line-height: 1.45; color: var(--cpw-muted-text); }
.cpw-wsnote, .cpw-wsempty { margin: 2.2rem auto 0; max-width: 70ch; text-align: center; font-size: .88rem; line-height: 1.6; color: var(--cpw-muted-text); }
.cpw-wsnote a, .cpw-wsempty a { color: var(--cpw-teal-ink); }

/* ---------------------------------------------------------------------------
   COA LIBRARY PAGE (client request 2026-07-25)
--------------------------------------------------------------------------- */
/* Client's opening statement. Set as prose at a readable measure and left
   aligned rather than as centred sub-copy: it is a dense formal paragraph, and
   centring six lines of compliance language hurts legibility. The measure sits
   between .cpw-sechead (60ch) and .cpw-coa__foot (74ch) so the column widths
   still step down the page in the established rhythm. */
.cpw-coa__intro { max-width: 76ch; margin: 0 auto; }
.cpw-coa__intro p { margin: 0; color: var(--cpw-text); font-size: 1.02rem; line-height: 1.75; }

.cpw-coa { margin-top: 2.2rem; }

.cpw-coa__tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.cpw-coa__search { display: flex; align-items: center; gap: .55rem; flex: 1 1 320px; max-width: 420px; background: var(--cpw-card); border: 1px solid var(--cpw-border-str); border-radius: var(--cpw-radius-pill); padding: .55rem 1rem; color: var(--cpw-muted-text); }
.cpw-coa__search:focus-within { border-color: var(--cpw-ring); box-shadow: 0 0 0 3px rgba(28, 124, 136, .14); }
.cpw-coa__search input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--cpw-font-body); font-size: .95rem; color: var(--cpw-ink); min-width: 0; }
.cpw-coa__count { margin: 0; font-size: .86rem; color: var(--cpw-muted-text); font-variant-numeric: tabular-nums; }
.cpw-coa__count strong { color: var(--cpw-ink); }

.cpw-coa__notice { display: flex; gap: .7rem; align-items: flex-start; background: var(--cpw-teal-soft); border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius); padding: .95rem 1.1rem; margin-bottom: 1.6rem; color: var(--cpw-teal-ink); }
.cpw-coa__notice svg { flex: 0 0 auto; margin-top: .12rem; }
.cpw-coa__notice p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--cpw-text); }
.cpw-coa__notice a { color: var(--cpw-teal-ink); font-weight: 600; }

.cpw-coa__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius); overflow: hidden; background: var(--cpw-card); }
.cpw-coa__row { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-top: 1px solid var(--cpw-border); scroll-margin-top: calc(var(--cpw-navh) + 1rem); }
.cpw-coa__row:first-child { border-top: 0; }
.cpw-coa__row:target { background: var(--cpw-teal-soft); }
.cpw-coa__row[hidden] { display: none; }

.cpw-coa__thumb { flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--cpw-radius-sm); background: var(--cpw-media); overflow: hidden; display: block; }
.cpw-coa__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.cpw-coa__main { min-width: 0; flex: 1; }
.cpw-coa__name { font-family: var(--cpw-font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; margin: 0 0 .28rem; letter-spacing: -.005em; }
.cpw-coa__name a { color: var(--cpw-ink); text-decoration: none; }
.cpw-coa__name a:hover { color: var(--cpw-teal-ink); }

.cpw-coa__docs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.cpw-coa__docs li { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.cpw-coa__docs a { display: inline-flex; align-items: center; gap: .35rem; color: var(--cpw-teal-ink); font-weight: 600; text-decoration: none; }
.cpw-coa__docs a:hover { text-decoration: underline; }
.cpw-coa__docs em { font-style: normal; color: var(--cpw-muted-text); font-size: .8rem; }

.cpw-coa__pending { margin: 0; font-size: .85rem; color: var(--cpw-muted-text); }
.cpw-coa__pending a { color: var(--cpw-teal-ink); }

.cpw-coa__empty { margin: 1.4rem 0 0; text-align: center; color: var(--cpw-muted-text); font-size: .9rem; }
.cpw-coa__foot { margin: 1.8rem auto 0; max-width: 74ch; text-align: center; font-size: .85rem; line-height: 1.6; color: var(--cpw-muted-text); }
.cpw-coa__foot a { color: var(--cpw-teal-ink); }

@media (max-width: 600px) {
  .cpw-coa__tools { flex-direction: column; align-items: stretch; }
  /* the toolbar is a COLUMN here, so the 320px flex-basis would size the
     search box's HEIGHT — reset it or the pill radius turns it into a circle */
  .cpw-coa__search { flex: 0 0 auto; max-width: none; }
  .cpw-coa__row { align-items: flex-start; gap: .8rem; padding: .85rem .9rem; }
  .cpw-coa__thumb { width: 46px; height: 46px; }
  .cpw-coa__docs { gap: .3rem .7rem; }
}

/* composition ("ingredient list") pills in the product short description (2026-07-25) */
.cpw-composition { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cpw-composition li { font-family: var(--cpw-font-body); font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: var(--cpw-radius-pill); background: var(--cpw-teal-soft); color: var(--cpw-teal-ink); }
.woocommerce-product-details__short-description p { margin: 0; }
.woocommerce-product-details__short-description strong { color: var(--cpw-ink); }

/* The standalone RUO + appearance notes that used to sit under the photo and
   under the dose dropdown were removed 2026-07-26 (client review §11/§18) —
   their content now lives once in the Important Notices box below. */
/* single "Important Notices" box (mirrors the client's reference panel) */
.cpw-notices { margin: 1.2rem 0 0; background: linear-gradient(180deg, #F3F9FA, var(--cpw-muted)); border: 1px solid var(--cpw-border-str); border-radius: var(--cpw-radius-sm); padding: 1.1rem 1.3rem 1.15rem; }
.cpw-notices h4 { display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--cpw-font-display); font-size: 1.02rem; font-weight: 600; color: var(--cpw-ink); margin: 0 0 .7rem; }
.cpw-notices h4 svg { color: var(--cpw-coral); }
.cpw-notices ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .5rem; }
.cpw-notices li { font-family: var(--cpw-font-body); font-size: .82rem; line-height: 1.5; color: var(--cpw-text); }
.cpw-notices li::marker { color: var(--cpw-teal); }
/* theme ALL WooCommerce buttons teal (login, register, place order, update cart, apply coupon, etc.) */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button,
.woocommerce #respond input#submit, .woocommerce #place_order, .woocommerce-account button.button {
  background: var(--cpw-cta) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--cpw-radius-pill) !important; font-family: var(--cpw-font-body); font-weight: 700;
  padding: .7rem 1.5rem; transition: background .2s ease;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button:hover, .woocommerce #place_order:hover { background: var(--cpw-cta-hover) !important; }
/* form fields on account/checkout */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-account input[type="text"],
.woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .woocommerce input[type="tel"],
.woocommerce select, .select2-container .select2-selection { border: 1px solid var(--cpw-border-str) !important; border-radius: var(--cpw-radius-sm) !important; padding: .6rem .8rem; font-family: var(--cpw-font-body); }
.woocommerce form .form-row label { font-family: var(--cpw-font-body); color: var(--cpw-ink); font-weight: 600; }

/* =====================================================================
   WHOLESALE — institutional procurement page (client review 2026-07-26 §19)
   Replaced the 71-card pack grid. The .cpw-ws* card rules above are kept
   because the pack data still exists; only this page stopped using them.
   ===================================================================== */
/* The client's full heading is long ("Coastal Premium Wellness — Bulk Procurement
   & Wholesale"): 1333px on one line at the 2.9rem display size, so it cannot fit
   the 1240px container and must break.
   This rule was MEANT to widen the measure past .cpw-sechead's 60ch, but 30ch is
   NARROWER — it forced a 288px column and stacked the heading into SIX lines,
   which is what the client reported on 2026-07-27 (§2).
   720px is measured, not guessed: line 2 ("Bulk Procurement & Wholesale") needs
   694px, and "Bulk" would rejoin line 1 at 743px — so 720px lands the break
   exactly on the em-dash, putting the ink half on line 1 and the teal accent half
   on line 2. text-wrap:balance keeps the two lines even where it's supported.
   Below ~1290px the font-size clamp shrinks the text proportionally, so the break
   holds until the container itself gets narrow enough to re-wrap naturally. */
.cpw-wsead { max-width: 720px; text-wrap: balance; }
.cpw-wsintro { max-width: 72ch; margin: 0 auto 3rem; text-align: center; }
.cpw-wsintro p { font-family: var(--cpw-font-body); font-size: 1.06rem; line-height: 1.75; color: var(--cpw-text); margin: 0 0 1rem; }
.cpw-wsintro p:last-child { margin-bottom: 0; }

.cpw-wsservices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin: 0 0 3.4rem; }
.cpw-wsservice { background: #fff; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius-sm); padding: 1.6rem 1.4rem; box-shadow: var(--cpw-shadow-sm, 0 1px 2px rgba(23,50,60,.04)); }
.cpw-wsservice__ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--cpw-teal-soft); color: var(--cpw-teal-ink); margin-bottom: .9rem; }
.cpw-wsservice h3 { font-family: var(--cpw-font-display); font-size: 1.06rem; font-weight: 600; color: var(--cpw-ink); margin: 0 0 .45rem; }
.cpw-wsservice p { font-family: var(--cpw-font-body); font-size: .9rem; line-height: 1.6; color: var(--cpw-text); margin: 0; }
.cpw-wsservice a { color: var(--cpw-teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.cpw-wsenquiry { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.6rem; align-items: start;
  background: linear-gradient(180deg, #F3F9FA, var(--cpw-muted)); border: 1px solid var(--cpw-border-str);
  border-radius: var(--cpw-radius); padding: 2.4rem; }
.cpw-wsenquiry__copy h3 { font-family: var(--cpw-font-display); font-size: 1.5rem; font-weight: 600; color: var(--cpw-ink); margin: .6rem 0 .8rem; line-height: 1.25; }
.cpw-wsenquiry__copy p { font-family: var(--cpw-font-body); font-size: .96rem; line-height: 1.7; color: var(--cpw-text); margin: 0 0 1rem; }
.cpw-wsenquiry__alt { font-size: .9rem !important; color: var(--cpw-muted-text) !important; }
.cpw-wsenquiry__alt a { color: var(--cpw-teal-ink); font-weight: 600; }
.cpw-wsform { margin-top: 0; }
.cpw-wsform textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--cpw-border-str); border-radius: var(--cpw-radius-sm); font: inherit; font-family: var(--cpw-font-body); color: var(--cpw-ink); background: #fff; resize: vertical; }
.cpw-wsform textarea:focus { outline: 2px solid var(--cpw-ring); outline-offset: 1px; }
.cpw-wsform__fine { font-size: .74rem; line-height: 1.5; color: var(--cpw-muted-text); margin: 0; }

/* shared submit feedback for the contact + wholesale forms */
.cpw-formnote { font-family: var(--cpw-font-body); font-size: .88rem; line-height: 1.55; margin: 0; padding: .75rem .9rem; border-radius: var(--cpw-radius-sm); }
.cpw-formnote.is-ok  { background: #EAF5EE; border: 1px solid #BFDCC9; color: #245C3A; }
.cpw-formnote.is-err { background: #FBEDEB; border: 1px solid #EBC4BE; color: #8C2F22; }

@media (max-width: 1024px) {
  .cpw-wsservices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpw-wsenquiry { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.8rem; }
}
@media (max-width: 600px) {
  .cpw-wsservices { grid-template-columns: 1fr; }
  .cpw-wsenquiry { padding: 1.35rem; }
  .cpw-wsintro p { font-size: 1rem; }
}

/* =====================================================================
   MORE COLOUR (client review 2026-07-26 §16)
   She asked for "slightly more colour throughout while keeping the elegant
   design of the Home page". The home page already alternates linen / pale-teal /
   plain bands, which is exactly why it reads richer — the interior pages were a
   single flat field. These rules bring the same rhythm inward and finally use
   the sand + sage accents that have been sitting unused in the palette since
   the 7/18 design lock.
   ===================================================================== */

/* Rotate the icon-tile colour so a row of cards is not four identical teal
   squares. Applies to the wholesale services and the Our Company features. */
.cpw-tinted .cpw-wsservice:nth-child(2) .cpw-wsservice__ico,
.cpw-features .cpw-feature:nth-child(2) .cpw-feature__ico {
  background: #EFE7DA; color: var(--cpw-sand-deep);
}
.cpw-tinted .cpw-wsservice:nth-child(3) .cpw-wsservice__ico,
.cpw-features .cpw-feature:nth-child(3) .cpw-feature__ico {
  background: #E6EDE3; color: #5F7357;
}
.cpw-tinted .cpw-wsservice:nth-child(4) .cpw-wsservice__ico {
  background: var(--cpw-teal-soft); color: var(--cpw-teal-ink);
}

/* A warm hairline under each centred section eyebrow — the "seashell/sand
   flourish" the palette always intended it for. This was declared on 2026-07-26
   but only ever got `position: relative`, so the flourish never actually drew;
   implemented 2026-07-27. Sand fading out to nothing at both ends, so it reads as
   a soft rule rather than a hard divider. */
.cpw-sechead .cpw-eyebrow { position: relative; }
.cpw-sechead .cpw-eyebrow::after {
  content: ""; position: absolute; top: 50%; left: calc(100% + .85rem); width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--cpw-sand), rgba(203,184,157,0));
}
.cpw-sechead .cpw-eyebrow::before {
  content: ""; position: absolute; top: 50%; right: calc(100% + .85rem); width: 46px; height: 1px;
  background: linear-gradient(270deg, var(--cpw-sand), rgba(203,184,157,0));
}
/* No room for the flourish once the eyebrow is close to the viewport edges. */
@media (max-width: 560px) {
  .cpw-sechead .cpw-eyebrow::before, .cpw-sechead .cpw-eyebrow::after { display: none; }
}

/* Interior pages: give the long flat sections the same alternating rhythm the
   home page has. */
.cpw-band-linen + .cpw-section,
.cpw-section + .cpw-band-linen { border-top: 1px solid var(--cpw-border); }

/* FAQ / COA / Contact closing band */
.cpw-closer { background: var(--cpw-linen); border-top: 1px solid var(--cpw-border); }
.cpw-closer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 2.6rem 0; }
.cpw-closer__copy h3 { font-family: var(--cpw-font-display); font-size: 1.35rem; font-weight: 600; color: var(--cpw-ink); margin: 0 0 .35rem; }
.cpw-closer__copy p { font-family: var(--cpw-font-body); font-size: .96rem; color: var(--cpw-text); margin: 0; max-width: 56ch; }
.cpw-closer .cpw-btn { flex: none; }

/* Contact: lift the details out of the flat field onto a tinted card so the
   page has two distinct zones instead of one. */
.cpw-contactcard { background: linear-gradient(180deg, #F3F9FA, var(--cpw-muted));
  border: 1px solid var(--cpw-border-str); border-radius: var(--cpw-radius); padding: 1.9rem; }

@media (max-width: 700px) {
  .cpw-closer__inner { padding: 2rem 0; }
  .cpw-contactcard { padding: 1.3rem; }
}

/* =====================================================================
   CREATIVE PASS 2026-07-27
   Brief: "add more colour, images and have fun with it, bring it to life."
   Constraint that shapes everything below: the language and imagery stay
   strictly research/laboratory (this store is pending high-risk underwriting,
   and therapeutic-sounding copy is the thing that sinks it), and every number
   shown is one the site already states elsewhere — nothing new is claimed.
   The home page is the reference for "rich"; these components exist to bring
   the interior pages up to it rather than to restyle the home page.
   ===================================================================== */

/* ---- Stat band: credentials as a colour block instead of a line of prose ---- */
/* Gradient deliberately stops at --cpw-banner (#2A7B88) and gets no lighter: the
   small stat LABELS sit on it, and white-on-#2A7B88 is 4.90:1 (AA for small text)
   while a lighter #35899A end would have dropped it to 4.04:1 and failed. */
.cpw-statband { background: linear-gradient(135deg, #1A6673 0%, #23737F 52%, #2A7B88 100%); color: #fff; }
.cpw-statband__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; padding-block: 2.6rem; }
.cpw-statband__item { text-align: center; position: relative; }
/* hairline separators between items, never after the last one */
.cpw-statband__item + .cpw-statband__item::before {
  content: ""; position: absolute; left: -1rem; top: 12%; bottom: 12%; width: 1px;
  background: rgba(255,255,255,0.22);
}
.cpw-statband__n { font-family: var(--cpw-font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.05; color: #fff; }
/* Full white, not a translucent white: at .84rem this is small text, and 0.86 alpha
   over the band drops the ratio to ~4.4:1. Weight carries the hierarchy instead. */
.cpw-statband__l { font-family: var(--cpw-font-body); font-size: .84rem; font-weight: 500; line-height: 1.45; color: #fff; margin-top: .35rem; }
@media (max-width: 820px) {
  .cpw-statband__inner { grid-template-columns: repeat(2, 1fr); padding-block: 2rem; }
  /* the separator assumes a single row — drop it once the grid wraps */
  .cpw-statband__item + .cpw-statband__item::before { display: none; }
}

/* ---- Numbered process steps (sourcing -> verification -> dispatch) ---- */
.cpw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cpw-step { position: relative; background: #fff; border: 1px solid var(--cpw-border); border-radius: var(--cpw-radius); padding: 1.7rem 1.5rem 1.5rem; box-shadow: var(--cpw-shadow-card); transition: transform .2s ease, box-shadow .25s ease; }
.cpw-step:hover { transform: translateY(-4px); box-shadow: var(--cpw-shadow); }
.cpw-step__n { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-family: var(--cpw-font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: .9rem; }
/* one accent per step so the row is not three identical teal squares */
.cpw-step:nth-child(1) .cpw-step__n { background: var(--cpw-teal-soft); color: var(--cpw-teal-ink); }
.cpw-step:nth-child(2) .cpw-step__n { background: #EFE7DA; color: var(--cpw-sand-deep); }
.cpw-step:nth-child(3) .cpw-step__n { background: #E6EDE3; color: #5F7357; }
.cpw-step h3 { font-family: var(--cpw-font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 .4rem; }
.cpw-step p { font-family: var(--cpw-font-body); font-size: .92rem; line-height: 1.6; color: var(--cpw-text); margin: 0; }
/* a tinted top edge picks up the step's own accent */
.cpw-step::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--cpw-radius) var(--cpw-radius) 0 0; }
.cpw-step:nth-child(1)::after { background: var(--cpw-teal); }
.cpw-step:nth-child(2)::after { background: var(--cpw-sand); }
.cpw-step:nth-child(3)::after { background: var(--cpw-sage); }
@media (max-width: 860px) { .cpw-steps { grid-template-columns: 1fr; } }

/* ---- Wholesale enquiry: fill the column beside the tall form ----
   The form is far taller than the copy beside it, which left a large empty well
   in the left column. A real 10-vial pack photograph (already generated for the
   old pack grid) plus the dispatch points fills it with imagery rather than
   filler text. */
/* The pack tiles are square with ~17% empty headroom (measured: content starts at
   y=171/1000, vertical centre at 58.5%), so shown at full square they read as a
   big pale box. A 4:3 frame with the crop biased downward trims the empty top and
   keeps the vials plus their contact shadow. */
.cpw-wsenquiry__media { margin: 1.4rem 0 0; border-radius: var(--cpw-radius-sm); overflow: hidden; background: var(--cpw-card); border: 1px solid var(--cpw-border); aspect-ratio: 4 / 3; }
.cpw-wsenquiry__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.cpw-wspoints { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.cpw-wspoints li { display: flex; gap: .55rem; align-items: flex-start; font-family: var(--cpw-font-body); font-size: .89rem; line-height: 1.55; color: var(--cpw-text); }
.cpw-wspoints svg { flex: none; margin-top: .18rem; color: var(--cpw-teal-ink); }

/* Tint the four wholesale service cards to match their own icon accent, so the
   row carries colour instead of being four identical white boxes. */
.cpw-tinted .cpw-wsservice:nth-child(1) { background: linear-gradient(160deg, #F1F9FA 0%, #FFFFFF 62%); }
.cpw-tinted .cpw-wsservice:nth-child(2) { background: linear-gradient(160deg, #FAF5EC 0%, #FFFFFF 62%); }
.cpw-tinted .cpw-wsservice:nth-child(3) { background: linear-gradient(160deg, #F2F6F0 0%, #FFFFFF 62%); }
.cpw-tinted .cpw-wsservice:nth-child(4) { background: linear-gradient(160deg, #F1F9FA 0%, #FFFFFF 62%); }

/* ---- COA Library rows ----
   All 38 thumbnails load, but at 58px a clear glass vial on a pale panel read as
   an empty grey square, so the page looked image-less. Bigger thumb on a tinted
   gradient panel, plus a status chip, gives the list imagery AND makes the
   published-vs-pending state scannable at a glance. */
.cpw-coa__thumb { width: 74px; height: 74px; background: linear-gradient(160deg, #F3F7F8, var(--cpw-media)); border: 1px solid var(--cpw-border); transition: transform .25s ease, box-shadow .25s ease; }
.cpw-coa__row:hover .cpw-coa__thumb { transform: translateY(-2px); box-shadow: var(--cpw-shadow-soft); }
.cpw-coa__row { transition: background .18s ease; }
/* zebra striping: 38 near-identical rows are hard to track across otherwise */
.cpw-coa__row:nth-child(even) { background: #FBFCFC; }
.cpw-coa__row:hover { background: var(--cpw-teal-soft); }
.cpw-coa__status { display: inline-flex; align-items: center; gap: .34rem; flex: none; align-self: center; font-family: var(--cpw-font-body); font-weight: 700; font-size: .72rem; letter-spacing: .02em; padding: .32rem .68rem; border-radius: var(--cpw-radius-pill); white-space: nowrap; }
.cpw-coa__status--ready { background: #E4F1E8; color: #2F6642; border: 1px solid #C3DECB; }
.cpw-coa__status--pending { background: #F4EDE1; color: #7A6238; border: 1px solid #E2D3BB; }
@media (max-width: 600px) {
  .cpw-coa__thumb { width: 56px; height: 56px; }
  .cpw-coa__status { align-self: flex-start; font-size: .68rem; padding: .26rem .55rem; }
}

/* ---- Legal / policy pages: a teal marker on each subhead so the long
   single-column policy text has visual anchors instead of being a grey slab. ---- */
.cpw-legal h3 { position: relative; padding-left: .85rem; }
.cpw-legal h3::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 2px; background: var(--cpw-teal); }

/* Astra's scroll-to-top button — the last piece of default #046BD2 blue on the
   site, and a hard 2px-radius square. It only mounts after you scroll, which is
   why the first colour audit (run at the top of each page) missed it. */
#ast-scroll-top {
  background: var(--cpw-cta) !important; color: #fff !important;
  border-radius: var(--cpw-radius-pill) !important;
  box-shadow: var(--cpw-shadow-card);
  transition: background .2s ease, transform .16s ease;
}
#ast-scroll-top:hover { background: var(--cpw-cta-hover) !important; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { #ast-scroll-top:hover { transform: none !important; } }

/* Reduced motion: these components' hover lifts are already transitions (covered
   by the global reduce block), but pin the transforms off explicitly so a
   reduced-motion user gets no movement at all. */
@media (prefers-reduced-motion: reduce) {
  .cpw-step:hover, .cpw-coa__row:hover .cpw-coa__thumb { transform: none !important; }
}

/* ---- Site-wide promotion bar (client request 2026-07-31) -----------------
   Sits above the sticky header via wp_body_open, so it scrolls away rather
   than eating vertical space on every screen. Uses the banner teal already
   used for page titles, which is the one brand colour verified at 4.90:1 on
   white text -- so the bar meets contrast without introducing a new value. */
.cpw-promobar { background: var(--cpw-banner); color: #fff; }
.cpw-promobar__in {
	display: flex; align-items: center; justify-content: center; gap: .75rem;
	flex-wrap: wrap; padding: .6rem 1rem; text-align: center;
}
.cpw-promobar__txt {
	font-family: var(--cpw-font-body); font-size: .95rem; font-weight: 600;
	letter-spacing: .01em; color: #fff;
}
.cpw-promobar__code {
	font-family: var(--cpw-font-body); font-size: .82rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	background: rgba(255,255,255,.18); border: 1px dashed rgba(255,255,255,.55);
	border-radius: 999px; padding: .2rem .7rem; white-space: nowrap;
}
/* The home page header is transparent until scroll; the bar must not inherit
   that treatment, so it keeps its own solid background above it. */
.cpw-header--home { top: 0; }
@media (max-width: 600px) {
	.cpw-promobar__txt { font-size: .86rem; }
	.cpw-promobar__in  { padding: .5rem .75rem; gap: .5rem; }
}