/* GlowStrong Health APEX — Premium brand certification pass.
 * Loaded last so the visual system is coherent across the accumulated APEX layers. */
:root {
  --gs-ink: #122238;
  --gs-navy: #0b2342;
  --gs-navy-deep: #06162b;
  --gs-white: #ffffff;
  --gs-off-white: #fcfcfa;
  --gs-red: #d7192a;
  --gs-red-dark: #a80f1b;
  --gs-silver: #c4c9d0;
  --gs-silver-light: #e7e9ec;
  --gs-silver-dark: #aeb5be;
  --gs-cream: #f8f4ec;
  --gs-cream-soft: #fbf8f2;
  --gs-text: #122238;
  --gs-text-muted: #536170;
  --gs-border: rgba(11, 35, 66, .14);
  --gs-line: var(--gs-border);
  --gs-max: 1320px;
  --gs-radius: 2px;
  --gs-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }
body { background: var(--gs-off-white); color: var(--gs-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body, button, input, select, textarea { -webkit-font-smoothing: antialiased; }
.gs-wrap { width: min(calc(100% - 56px), var(--gs-max)); }
.gs-skip-link { background: var(--gs-red); color: #fff; z-index: 100; }

/* Header: quiet, editorial, and usable at every breakpoint. */
.gs-announcement { height: 30px; background: var(--gs-navy); color: var(--gs-white); font-size: 10px; letter-spacing: .18em; }
.gs-site-header { min-height: 78px; background: rgba(255,255,255,.96) !important; color: var(--gs-navy); border-bottom: 1px solid var(--gs-silver); backdrop-filter: blur(12px); }
.gs-header-inner { width: min(calc(100% - 56px), var(--gs-max)); min-height: 78px; display: flex; align-items: center; gap: 30px; }
.gs-brand { gap: 12px; }
.gs-brand-mark { width: 40px; height: 40px; border: 1px solid var(--gs-navy); color: var(--gs-navy); font-size: 13px; letter-spacing: .08em; }
.gs-brand-name { color: var(--gs-navy); font-size: 13px; letter-spacing: .22em; }
.gs-primary-nav { margin-left: auto; }
.gs-nav-list { gap: 24px; }
.gs-nav-list a, .gs-header-actions a, .gs-site-start-journey { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.gs-nav-list a { display: inline-flex; align-items: center; min-height: 24px; color: var(--gs-navy); transition: color .2s ease; }
.gs-nav-list a:hover, .gs-nav-list a:focus-visible { color: var(--gs-red); }
.gs-site-start-journey { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; margin-left: 22px; background: var(--gs-red); color: #fff; transition: background .2s ease, transform .2s var(--gs-ease); }
.gs-site-start-journey:hover, .gs-site-start-journey:focus-visible { background: var(--gs-red-dark); transform: translateY(-1px); }
.gs-header-actions { gap: 16px; }
.gs-header-account, .gs-header-cart { color: var(--gs-navy); }

/* The active staging catalog has no approved product imagery. Keep the
   external/cart-injected recommendation surface out of the customer flow
   until eligible products are available; never show WooCommerce placeholders
   or unrelated unfinished SKUs as recommendations. */
.gs-cart-recs { display: none !important; }
.gs-menu-toggle { display: none; border: 1px solid var(--gs-silver-dark); border-radius: var(--gs-radius); background: var(--gs-white); color: var(--gs-navy); min-height: 44px; padding: 0 13px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* Shared type, controls, and focus treatment. */
.gs-kicker, .gs-eyebrow { color: var(--gs-red); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.gs-btn { border-radius: var(--gs-radius); min-height: 50px; padding-inline: 25px; letter-spacing: .12em; transition: transform .2s var(--gs-ease), background .2s ease, color .2s ease; }
.gs-btn:hover, .gs-btn:focus-visible { transform: translateY(-2px); }
.gs-btn-red { background: var(--gs-red); }
.gs-btn-red:hover, .gs-btn-red:focus-visible { background: var(--gs-red-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #f0a1a8; outline-offset: 3px; }

/* Homepage art direction: image-led, asymmetric, less template-like. */
.gs-v53-hero { min-height: min(760px, 86vh); background: var(--gs-cream-soft); overflow: hidden; isolation: isolate; }
/* IMG-09 (3-product hero): a square source in this wide full-bleed slot is
   always cropped top/bottom on desktop (full width is always retained —
   object-fit:cover on a square image scales to match container width
   before container height, whenever the container is wider than tall), so
   the horizontal value below only actually does anything on the narrow
   breakpoints where the crop flips to left/right. Per the owner's crop
   priority: keep all 3 product containers + labels readable (1), keep
   Hydrafuel dominant/centered (2), preserve the calm left text-safe zone
   the .gs-v53-overlay gradient already darkens (3) — lower priority than
   all of that: the full top decorative arc and full bottom juice glass.
   50% horizontal sits right on Hydrafuel's own center; 58% vertical keeps
   the product/label band in frame on desktop, trimming from the arc (top)
   and the glass (bottom) as instructed. */
.gs-v53-hero-media { object-position: 50% 58%; animation: gs-hero-drift 22s ease-in-out infinite alternate; transform-origin: 50% 58%; }
.gs-v53-hero-arc { position:absolute; z-index:1; right:-9%; top:-28%; width:58%; aspect-ratio:1; border:1px solid rgba(150,158,166,.42); border-radius:50%; transform:rotate(-17deg); animation:gs-hero-arc-drift 18s ease-in-out infinite alternate; pointer-events:none; }
@keyframes gs-hero-drift { from { transform:scale(1.01) translate3d(0,0,0); } to { transform:scale(1.045) translate3d(-.8%, -.4%, 0); } }
@keyframes gs-hero-arc-drift { from { transform:rotate(-17deg) translate3d(0,0,0); opacity:.5; } to { transform:rotate(-14deg) translate3d(-1.2%,1%,0); opacity:.78; } }
.gs-v53-overlay { background: linear-gradient(90deg, rgba(248,244,236,.97) 0%, rgba(248,244,236,.84) 43%, rgba(248,244,236,.1) 84%); }
.gs-v53-hero-content { padding-block: clamp(80px, 12vh, 150px); }
.gs-v53-hero h1 { max-width: 720px; font-size: clamp(3.7rem, 7.3vw, 7.5rem); line-height: .9; letter-spacing: -.07em; }
.gs-v53-hero h1, .gs-v53-hero h1 em { color: var(--gs-navy); }
.gs-v53-hero-content > p:not(.gs-kicker) { max-width: 430px; color: var(--gs-text-muted); font-size: 1.02rem; }
/* Locked homepage copy for the 3-product hero (IMG-09) — real HTML text,
   never baked into the image itself, per instruction. Selector is
   deliberately as specific as .gs-v53-hero-content > p:not(.gs-kicker)
   above so these overrides (color/font-size/max-width) actually win rather
   than losing silently to that rule's higher specificity. */
.gs-v53-hero-content > p.gs-v53-hero-pillars { max-width: 430px; margin-top: 18px; color: var(--gs-navy); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.gs-v53-ghost { border-color: var(--gs-navy); color: var(--gs-navy); border-radius: var(--gs-radius); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.gs-v53-ghost:hover, .gs-v53-ghost:focus-visible { background: var(--gs-navy); color: var(--gs-white); }
.gs-v53-steps { padding-block: 18px; background: var(--gs-cream); }
.gs-v53-step { padding-block: 18px; border-color: var(--gs-line); }
.gs-v53-step span { color: var(--gs-red); font-size: 11px; letter-spacing: .12em; }
.gs-v53-step b { letter-spacing: .18em; }
.gs-v53-step small { color: #536170; }
.gs-home-shop-focus { padding-block: clamp(62px, 9vw, 112px); background: var(--gs-white); }
.gs-home-shop-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.gs-home-shop-heading h2 { max-width: 700px; margin: 10px 0 0; font-family: Georgia, serif; font-size: clamp(2.6rem, 4.5vw, 5rem); line-height: .98; font-weight: 500; letter-spacing: -.06em; }
.gs-home-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gs-silver-light); }
.gs-home-product-card { background: var(--gs-white); padding: 0 24px 24px; border: 1px solid var(--gs-silver-light); transition: transform .25s var(--gs-ease), box-shadow .25s ease; }
.gs-home-product-card:hover { position: relative; z-index: 1; transform: translateY(-4px); box-shadow: 0 18px 35px rgba(7,20,38,.12); }
.gs-home-product-image { display: block; margin: 0 -24px 18px; background: var(--gs-cream); border-bottom: 1px solid var(--gs-silver); aspect-ratio: 1 / 1; overflow: hidden; }
.gs-home-product-image img { width: 100%; height: 100%; object-fit: contain; }
.gs-home-product-card h3 { margin: 8px 0 16px; font-family: Georgia, serif; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.05; letter-spacing: -.035em; }
.gs-home-product-meta { display: flex; justify-content: space-between; color: var(--gs-navy); font-size: 13px; font-weight: 700; }
.gs-home-shop-empty { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px; background: var(--gs-cream); }
.gs-home-shop-empty p { margin: 0; font-family: Georgia, serif; font-size: 1.6rem; max-width: 680px; }
.gs-v53-split { min-height: 650px; }
.gs-v53-split-image { background: #dfe3e7; }
.gs-v53-split-image img { object-position: center; }
.gs-v53-split-copy { padding: clamp(42px, 7vw, 100px); background: var(--gs-navy); }
.gs-v53-split-copy h2 { max-width: 520px; font-size: clamp(3.4rem, 6vw, 6.2rem); letter-spacing: -.07em; }
.gs-v53-video { padding-block: clamp(56px, 9vw, 110px); }
.gs-v53-video-placeholder { min-height: 560px; }
.gs-v53-video-placeholder > div { max-width: 640px; padding: clamp(28px, 6vw, 72px); }
.gs-v53-discover { padding-block: clamp(70px, 9vw, 124px); background: var(--gs-cream-soft); }
.gs-v53-section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:38px; }
.gs-v53-section-title { max-width: 760px; }
.gs-v53-section-title h2 { margin:10px 0 14px; color:var(--gs-navy); font-size: clamp(42px, 4vw, 62px); line-height:.98; letter-spacing: -.06em; }
.gs-v53-section-intro { margin:0; max-width:560px; color:var(--gs-text-muted); font-size:1rem; line-height:1.55; }
.gs-v53-brand-statement { position:relative; flex:0 0 auto; margin:0 0 4px; padding-bottom:12px; color:var(--gs-text-muted); font-size:11px; line-height:1.55; letter-spacing:.18em; text-align:right; }
.gs-v53-brand-statement span { position:absolute; right:0; bottom:0; width:28px; height:2px; background:var(--gs-red); }
.gs-v53-discover-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; background:transparent; }
.gs-v53-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,42%); min-height:330px; overflow:hidden; padding:0; border:1px solid var(--gs-silver); border-radius:24px; background:var(--gs-white); text-decoration:none; box-shadow:0 8px 22px rgba(11,35,66,.05); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.gs-v53-card-copy { display:flex; flex-direction:column; align-items:flex-start; padding:30px 10px 30px 32px; z-index:1; }
.gs-v53-card-label { display:flex; align-items:center; gap:9px; color:var(--gs-red); font-size:10px; font-weight:800; letter-spacing:.14em; }
.gs-v53-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--gs-silver-dark); border-radius:50%; color:var(--gs-navy); font-size:19px; font-style:normal; line-height:1; }
.gs-v53-card h3 { margin:34px 0 12px; color:var(--gs-navy); font-size:clamp(1.55rem, 2.3vw, 2.25rem); line-height:1.02; letter-spacing:-.045em; }
.gs-v53-card p { max-width:260px; margin:0 0 22px; color:var(--gs-text-muted); font-size:.91rem; line-height:1.5; }
.gs-v53-card b { margin-top:auto; color:var(--gs-navy); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.gs-v53-card b span { display:inline-block; color:var(--gs-red); transition:transform .2s ease; }
/* gs_apex_bundled_webp_wrap() / gs_apex_visual_image() can wrap an <img> in a
   <picture> when a WebP variant exists. display:contents removes <picture>
   from the box tree entirely so the <img> inside sizes exactly as if it were
   still a direct child — every existing width/height/object-fit rule below
   keeps working unchanged whether or not a given placement is wrapped. */
picture { display: contents; }
.gs-v53-card-art { position:relative; min-height:330px; overflow:hidden; background:var(--gs-cream); }
.gs-v53-card-art img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(.97); transition:transform .22s ease; }
.gs-v53-card-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(248,244,236,.18), transparent 45%), linear-gradient(0deg, rgba(11,35,66,.62) 0%, rgba(11,35,66,.20) 26%, transparent 52%); pointer-events:none; }
.gs-v53-arc { position:absolute; right:-34px; top:24px; width:150px; height:150px; border:1px solid rgba(255,255,255,.7); border-radius:50%; box-shadow:0 0 0 8px rgba(196,201,208,.22); }
.gs-v53-card-art em { position:absolute; right:18px; bottom:18px; color:var(--gs-white); font-family:Georgia,serif; font-size:13px; line-height:1.15; text-align:right; text-shadow:0 1px 10px rgba(11,35,66,.35); }
.gs-v53-card:hover, .gs-v53-card:focus-visible { border-color:var(--gs-silver-dark); box-shadow:0 14px 30px rgba(11,35,66,.1); transform:translateY(-3px); }
.gs-v53-card:hover .gs-v53-card-art img, .gs-v53-card:focus-visible .gs-v53-card-art img { transform:scale(1.025); }
.gs-v53-card:hover b span, .gs-v53-card:focus-visible b span { transform:translateX(3px); }
/* Composition-preserving crops for the 4 discover-grid photographs, re-tuned
   against the actual approved v5.13.0 final photography (not the original
   generation brief) — see APEX-v5.13.0-FINAL-HERO-IMAGE-INTEGRATION-REPORT.md.
   object-fit:cover crops top/bottom on the wide desktop card and left/right
   on the narrow mobile 39%-width split (.gs-v53-card at max-width:620px), so
   both the x and y values below matter, just at different breakpoints. */
.gs-v53-card--workout .gs-v53-card-art img { object-position: 30% 40%; } /* IMG-01: subject occupies roughly the left half of frame, kneeling low; keeps her in frame on the narrow mobile crop and keeps her face/torso on the wide desktop crop */
.gs-v53-card--systems .gs-v53-card-art img { object-position: 35% 45%; } /* IMG-04: subject seated at the left of the counter, face in the upper-middle band */
.gs-v53-card--marketplace .gs-v53-card-art img { object-position: 30% 62%; } /* IMG-05: approved still-life is a different composition than originally briefed — objects cluster in the lower-left two-thirds of the square frame with empty space top-right, so the crop is weighted left and low rather than the generic center used before this was confirmed */
.gs-v53-card--learn .gs-v53-card-art img { object-position: 38% 42%; } /* IMG-07: seated subject occupies roughly the left two-thirds, face/torso upper-middle */
.gs-v53-final { min-height: 500px; }
.gs-v53-final .gs-wrap { max-width: 850px; }
/* IMG-03: the approved final-cta photograph places the subject on the RIGHT
   side of the frame (an oceanfront terrace with the man at roughly 65-90%
   across), not the left/ambiguous placement the original brief allowed for.
   78% keeps him in frame on the narrow crops this full-bleed banner uses at
   small viewports; on wider viewports this banner shows its full width
   regardless (object-fit:cover only trims top/bottom there), so this value
   only matters — and only helps — at the sizes where it would otherwise
   crop him out entirely. */
.gs-v53-final img { object-position: 78% center; }
/* IMG-02: keep the two subjects right-of-center so the bottom-left text
   zone (headline, copy, CTA over the automatic dark gradient scrim) stays
   visually calm, per crop notes. */
.gs-v53-video-placeholder { background-position: 72% center; }

/* .gs-lead sitewide contrast (rendered zero-trust QA remediation, v5.13.0):
   the shared .gs-lead utility now defaults to a dark, readable color
   (glowstrong.css) for the many bright/light-background pages that use it
   without their own scoped override. Two hero sections are genuinely dark
   (Apex Journey, Scan) and previously depended on the old near-white
   global default by coincidence with no explicit rule of their own — that
   dependency is made explicit here so it survives independently of the
   global default. Every other .gs-lead usage already has its own correct
   scoped override elsewhere in this stylesheet chain (unaffected). */
.gs-journey-hero .gs-lead, .gs-scan-hero .gs-lead { color: #d8dee6; }

/* Commerce and content pages inherit the same premium rhythm. */
.gs-page-hero, .gs-shop-hero, .gs-products-direct-head, .gs-market-hero, .gs-sys-hero { background: var(--gs-cream); }
.gs-page-hero h1, .gs-shop-hero h1, .gs-products-direct-head h1, .gs-market-hero h1, .gs-sys-hero h1 { letter-spacing: -.065em; }
.gs-shop-hero h1, .gs-shop-hero h1 span, .gs-shop-hero .gs-shop-inline-link { color: var(--gs-navy); }
.gs-shop-hero .gs-shop-hero-copy, .gs-shop-hero > .gs-wrap > p:not(.gs-kicker) { color: #405166; }
.gs-shop-paths a, .gs-products-category-nav a { border-color: var(--gs-line); transition: background .2s ease, color .2s ease; }
.gs-shop-paths a:hover, .gs-products-category-nav a:hover { background: var(--gs-navy); color: #fff; }
.woocommerce ul.products li.product a img { background: var(--gs-cream); }
.woocommerce ul.products li.product .woocommerce-loop-product__title, .single-product div.product .product_title { letter-spacing: -.045em; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { border-radius: var(--gs-radius) !important; }
.gs-cart-hero, .gs-checkout-hero { background: var(--gs-cream); padding-block: clamp(58px, 8vw, 92px); }
.gs-cart-hero h1, .gs-checkout-hero h1 { color: var(--gs-navy); }
.gs-cart-hero h1, .gs-checkout-hero h1 { letter-spacing: -.06em; }
.gs-cart-content, .gs-checkout-content { background: var(--gs-white); }
.gs-cart-content .shop_table, .gs-checkout-content .woocommerce-checkout-review-order-table, .gs-checkout-content .col-1, .gs-checkout-content .col-2, .gs-checkout-order { box-shadow: 0 10px 30px rgba(7,20,38,.06); }
.gs-cart-content .cart-collaterals .checkout-button, .gs-checkout-content #place_order { width: 100%; min-height: 54px; font-size: 12px !important; letter-spacing: .14em; }
.gs-product-info .cart .button { min-height: 54px; min-width: 220px; }
.gs-site-footer { background: var(--gs-navy); }

/* Bright commerce surfaces: white leads, cream contextualizes, silver refines. */
.gs-page-hero, .gs-shop-hero, .gs-products-direct-head, .gs-market-hero, .gs-sys-hero,
.gs-v53-discover { background: var(--gs-cream-soft); }
.gs-shop-paths a, .gs-products-category-nav a, .gs-v53-card,
.woocommerce ul.products li.product, .single-product div.product,
.gs-cart-content .shop_table, .gs-checkout-content .woocommerce-checkout-review-order-table,
.gs-checkout-content .col-1, .gs-checkout-content .col-2, .gs-checkout-order {
  background: var(--gs-white);
  border-color: var(--gs-silver-light);
}
.woocommerce ul.products li.product a img { background: var(--gs-cream); border-bottom: 1px solid var(--gs-silver-light); }
.gs-v53-card { border-left-color: var(--gs-silver-dark); }
.gs-v53-card:hover, .gs-v53-card:focus-visible { background: var(--gs-navy); }
.gs-home-product-meta, .woocommerce ul.products li.product .price, .single-product div.product .price { color: var(--gs-navy); }
.gs-cart-content .cart-collaterals, .gs-checkout-content .woocommerce-checkout-review-order { background: var(--gs-cream-soft); border: 1px solid var(--gs-silver-light); }
.gs-cart-content .cart-collaterals .checkout-button, .gs-checkout-content #place_order,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--gs-red); color: var(--gs-white); }
.gs-cart-content .cart-collaterals .checkout-button:hover, .gs-checkout-content #place_order:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--gs-red-dark); }

/* WooCommerce Cart Block: premium, readable, and mobile-safe. */
.woocommerce-cart .wp-block-woocommerce-cart {
  width: 100%;
  max-width: var(--gs-max);
  margin-inline: auto;
}
.woocommerce-cart .wc-block-cart {
  gap: 28px;
}
.woocommerce-cart .wc-block-cart-items {
  width: 100%;
  border: 1px solid var(--gs-silver-light);
  border-radius: 24px;
  overflow: hidden;
  background: var(--gs-white);
  box-shadow: 0 12px 32px rgba(7,20,38,.06);
}
.woocommerce-cart .wc-block-cart-items th {
  color: var(--gs-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.woocommerce-cart .wc-block-cart-items__row {
  background: var(--gs-white);
}
.woocommerce-cart .wc-block-cart-item__image img {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--gs-cream);
}
.woocommerce-cart .wc-block-components-product-name {
  color: var(--gs-navy);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.2;
  text-decoration: none;
}
.woocommerce-cart .wc-block-components-product-price,
.woocommerce-cart .wc-block-components-formatted-money-amount {
  color: var(--gs-navy);
  font-weight: 800;
}
.woocommerce-cart .wc-block-components-quantity-selector {
  min-height: 44px;
  border: 1px solid var(--gs-silver-light);
  border-radius: 999px;
  background: var(--gs-off-white);
}
.woocommerce-cart .wc-block-components-quantity-selector__input {
  min-width: 42px;
  color: var(--gs-navy);
  font-weight: 800;
}
.woocommerce-cart .wc-block-components-quantity-selector__button {
  min-width: 42px;
  color: var(--gs-navy);
}
.woocommerce-cart .wc-block-cart-item__remove-link {
  color: var(--gs-text-muted);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.woocommerce-cart .wc-block-cart__sidebar {
  align-self: start;
  padding: 28px;
  border: 1px solid var(--gs-silver-light);
  border-radius: 24px;
  background: var(--gs-cream-soft);
  box-shadow: 0 12px 32px rgba(7,20,38,.07);
}
.woocommerce-cart .wc-block-cart__totals-title {
  color: var(--gs-navy);
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce-cart .wc-block-components-totals-coupon__button {
  color: var(--gs-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.woocommerce-cart .wc-block-cart__submit-button {
  min-height: 56px;
  border-radius: var(--gs-radius);
  background: var(--gs-red);
  color: var(--gs-white);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-cart__submit-button:focus-visible {
  background: var(--gs-red-dark);
  color: var(--gs-white);
}
.woocommerce-cart .wc-block-components-totals-footer-item {
  color: var(--gs-navy);
  font-weight: 900;
}
.woocommerce-cart .wc-block-cart__payment-options {
  color: var(--gs-text-muted);
  font-size: .9rem;
  line-height: 1.5;
}

/* Avoid expensive motion and oversized media on small screens. */
@media (max-width: 900px) {
  .gs-header-inner { position: relative; }
  .gs-menu-toggle { display: inline-flex; align-items: center; margin-left: auto; }
  .gs-primary-nav { display: none !important; position: absolute; left: 0; right: 0; top: 78px; margin: 0; padding: 12px 22px 20px; background: var(--gs-white) !important; border-top: 1px solid var(--gs-silver); box-shadow: 0 18px 35px rgba(7,20,38,.1); }
  .gs-site-header.gs-menu-open .gs-primary-nav { display: block !important; }
  .gs-nav-list { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .gs-nav-list a { min-height: 50px; display: flex; align-items: center; color: var(--gs-navy); border-bottom: 1px solid var(--gs-silver-light); }
  .gs-site-start-journey { display: inline-flex !important; margin: 14px 0 0; justify-content: center; }
  .gs-header-actions { display: none; }
  .gs-v53-hero { min-height: 680px; }
  /* Rendered-QA remediation (v5.13.0): below ~900px the hero box turns
     taller-than-wide relative to the square IMG-09 source, so
     object-fit:cover flips from cropping top/bottom to cropping
     left/right. A 50% horizontal center then crops unevenly, because the
     product cluster in the source photo is NOT centered — it sits roughly
     33%-90% across (left ~0-32% is the deliberate empty text-safe zone),
     so a naive center-crop clips Magnesium Glycinate and especially NAD+
     before it clips empty background. object-fit:contain guarantees the
     full image (all three product labels) stays visible at every narrow
     width; the small cream letterbox bars this can add on the sides match
     the hero's own background so there is no visible seam. Priority 1
     (all three products readable) outranks the full-bleed crop look here. */
  .gs-v53-hero-media { object-fit: contain; object-position: 50% 58%; background: var(--gs-cream-soft); }
  .gs-v53-discover-grid { grid-template-columns: 1fr 1fr; }
  .gs-home-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .gs-wrap, .gs-header-inner { width: min(calc(100% - 36px), var(--gs-max)); }
  .gs-announcement { font-size: 8px; letter-spacing: .1em; }
  .gs-v53-hero-media { animation:none; transform:none; object-fit: contain; object-position:50% 58%; background: var(--gs-cream-soft); }
  .gs-v53-hero-arc { right:-42%; top:2%; width:92%; opacity:.48; animation:none; }
  .gs-brand-name { font-size: 11px; letter-spacing: .16em; }
  .gs-v53-hero { min-height: 690px; }
  /* P2 fix (v5.13.0 final verification pass), part 1: ramp to near-opaque
     cream earlier (55% down instead of 72%) so the shorter, bottom-anchored
     text block below sits on a stronger protective wash instead of the
     still-fairly-transparent (~35% opaque) zone the old 72% stop left at
     this height. Top of the hero (where the products read clearest) is
     unaffected — only the ramp's midpoint moved, the top (.12) and bottom
     (.96) values are unchanged. */
  .gs-v53-overlay { background: linear-gradient(180deg, rgba(248,244,236,.12) 0%, rgba(248,244,236,.96) 55%); }
  /* P2 fix, part 2: the content block below was tall enough (~554px in a
     690px-tall hero, even once bottom-anchoring itself was fixed) to still
     reach up into the product-label band. This is a pure sizing/spacing
     trim at this one breakpoint only — same copy, same hierarchy, same CTA,
     nothing removed. Heading clamp's max lowered so it stops maxing out at
     5.1rem/3 lines on a 620px-wide screen; margins and content padding
     tightened so the whole stack sits compactly against the bottom-anchored,
     near-opaque part of .gs-v53-overlay instead of spanning most of the
     hero's height. */
  .gs-v53-hero-content { align-self: end; padding-block: 16px 22px; }
  .gs-v53-hero-content .gs-kicker { margin-bottom: 6px; }
  .gs-v53-hero h1 { font-size: clamp(2rem, 9.4vw, 2.7rem); line-height: 1.05; margin: 4px 0 8px; }
  .gs-v53-hero-content > p:not(.gs-kicker) { margin: 0 0 6px; }
  .gs-v53-hero-content > p.gs-v53-hero-pillars { margin-top: 6px; margin-bottom: 0; }
  .gs-v53-actions { gap: 10px; margin-top: 12px; }
  .gs-v53-split-image { min-height: 350px; }
  .gs-v53-split-copy { padding: 54px 24px 64px; }
  .gs-v53-video-placeholder { min-height: 480px; }
  .gs-v53-section-heading { display:block; margin-bottom:28px; }
  .gs-v53-section-title h2 { font-size:clamp(40px, 12vw, 52px); }
  .gs-v53-brand-statement { display:none; }
  .gs-v53-discover-grid { grid-template-columns:1fr; gap:16px; }
  .gs-v53-card { min-height:260px; grid-template-columns:minmax(0,1fr) 39%; border-radius:20px; }
  .gs-v53-card-copy { padding:24px 8px 24px 24px; }
  .gs-v53-card h3 { margin-top:22px; font-size:1.55rem; }
  .gs-v53-card p { font-size:.86rem; }
  .gs-v53-card-art { min-height:260px; }
  .gs-home-shop-heading, .gs-home-shop-empty { display: block; }
  .gs-home-shop-heading .gs-text-link { margin-top: 24px; }
  .gs-home-product-grid { grid-template-columns: 1fr; }
  .gs-home-product-card { padding-inline: 18px; }
  .gs-home-product-image { margin-inline: -18px; }
  .gs-home-shop-empty .gs-btn { margin-top: 22px; }
  .single-product .gs-product-info form.cart { position: sticky; bottom: 10px; z-index: 20; padding: 12px; margin-inline: -12px; background: rgba(255,255,255,.97); border: 1px solid var(--gs-silver); box-shadow: 0 -8px 22px rgba(7,20,38,.16); }
  .single-product .gs-product-info form.cart .button { width: 100%; }
  .woocommerce-cart .wc-block-cart {
    display: block;
  }
  .woocommerce-cart .wc-block-cart__sidebar {
    margin-top: 22px;
    padding: 22px;
    border-radius: 20px;
  }
  .woocommerce-cart .wc-block-cart-items {
    display: block;
    border-radius: 20px;
  }
  .woocommerce-cart .wc-block-cart-items thead {
    display: none;
  }
  .woocommerce-cart .wc-block-cart-items tbody,
  .woocommerce-cart .wc-block-cart-items__row,
  .woocommerce-cart .wc-block-cart-item__image,
  .woocommerce-cart .wc-block-cart-item__product,
  .woocommerce-cart .wc-block-cart-item__total {
    display: block;
    width: 100%;
  }
  .woocommerce-cart .wc-block-cart-items__row {
    position: relative;
    padding: 20px;
  }
  .woocommerce-cart .wc-block-cart-item__image {
    margin-bottom: 14px;
  }
  .woocommerce-cart .wc-block-cart-item__image img {
    width: 96px;
    height: 96px;
  }
  .woocommerce-cart .wc-block-cart-item__total {
    margin-top: 16px;
    text-align: left;
  }
  .woocommerce-cart .wc-block-cart-item__quantity {
    margin-top: 14px;
  }
  .woocommerce-cart .wc-block-cart__submit-button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Sticky Scan CTA safety.
   The CTA is fixed to the bottom of the viewport at z-index 9999. It is withheld
   server-side on cart, checkout and account (gs_apex_allow_sticky_scan_cta), and
   these rules are the presentation-layer guarantee that it can never cover a
   commerce control if a cached page or plugin re-introduces it. */
.woocommerce-cart .gs-mobile-scan-cta,
.woocommerce-checkout .gs-mobile-scan-cta,
.woocommerce-account .gs-mobile-scan-cta,
.gs-bridge-payment-route .gs-mobile-scan-cta { display: none !important; }

/* Where the CTA does show, reserve space so it never sits on page-bottom content. */
@media (max-width: 700px) {
  body.gs-has-sticky-cta { padding-bottom: 64px; }
}

/* ==========================================================================
   WooCommerce Checkout Block, empty-cart block, and block notices.
   Modern WooCommerce renders Cart and Checkout as blocks, so the classic
   templates in /woocommerce are bypassed. Cart Block was already covered
   above; Checkout Block, the empty-cart state, validation errors and block
   notices had no APEX styling and fell back to WooCommerce defaults.
   Checkout is deliberately calmer than the storefront: no red surfaces except
   the primary action, quieter type, more white space.
   ========================================================================== */

.woocommerce-checkout .wp-block-woocommerce-checkout {
  width: 100%;
  max-width: var(--gs-max);
  margin-inline: auto;
}
.woocommerce-checkout .wc-block-checkout__form { gap: 30px; }

.woocommerce-checkout .wc-block-components-checkout-step {
  padding: 26px 28px;
  border: 1px solid var(--gs-silver-light);
  border-radius: 24px;
  background: var(--gs-white);
  box-shadow: 0 10px 30px rgba(7,20,38,.05);
}
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-components-title {
  color: var(--gs-navy);
  font-family: Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -.02em;
  text-transform: none;
}
.woocommerce-checkout .wc-block-components-checkout-step__description,
.woocommerce-checkout .wc-block-components-checkout-step__heading-content {
  color: var(--gs-text-muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* Form controls: 44px minimum target, calm borders, visible focus. */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-select__select,
.woocommerce-checkout .wc-block-components-combobox input,
.woocommerce-checkout .wc-block-components-textarea {
  min-height: 48px;
  border: 1px solid var(--gs-silver-dark);
  border-radius: var(--gs-radius);
  background: var(--gs-white);
  color: var(--gs-text);
}
.woocommerce-checkout .wc-block-components-text-input.is-active label,
.woocommerce-checkout .wc-block-components-text-input label { color: var(--gs-text-muted); }
.woocommerce-checkout .wc-block-components-text-input input:focus-visible,
.woocommerce-checkout .wc-block-components-select__select:focus-visible,
.woocommerce-checkout .wc-block-components-combobox input:focus-visible {
  outline: 2px solid var(--gs-navy);
  outline-offset: 1px;
}

/* Validation: state carried by colour AND an icon-weight label, not colour alone. */
.woocommerce-checkout .wc-block-components-validation-error,
.woocommerce-checkout .wc-block-components-validation-error p {
  color: var(--gs-red-dark);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
}
.woocommerce-checkout .has-error input,
.woocommerce-checkout .has-error .wc-block-components-select__select {
  border-color: var(--gs-red-dark);
  box-shadow: 0 0 0 1px var(--gs-red-dark);
}

/* Order summary sidebar. */
.woocommerce-checkout .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar {
  align-self: start;
  padding: 28px;
  border: 1px solid var(--gs-silver-light);
  border-radius: 24px;
  background: var(--gs-cream-soft);
  box-shadow: 0 12px 32px rgba(7,20,38,.06);
}
.woocommerce-checkout .wc-block-components-order-summary__button-text,
.woocommerce-checkout .wc-block-components-totals-item__label { color: var(--gs-text-muted); }
.woocommerce-checkout .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-order-summary-item__total-price { color: var(--gs-navy); font-weight: 800; }
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--gs-navy);
  font-size: 1.35rem;
  font-weight: 900;
}

/* Primary action: the single red surface on the page. */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  width: 100%;
  min-height: 56px;
  border-radius: var(--gs-radius);
  background: var(--gs-red);
  color: var(--gs-white);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible {
  background: var(--gs-red-dark);
  color: var(--gs-white);
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible {
  outline: 2px solid var(--gs-navy);
  outline-offset: 3px;
}
.woocommerce-checkout .wc-block-checkout__actions { margin-top: 8px; }
.woocommerce-checkout .wc-block-checkout__actions_row a { color: var(--gs-navy); }

/* Block notices (cart, checkout and add-to-cart confirmations). */
.wc-block-components-notice-banner {
  border-radius: var(--gs-radius);
  border-left: 3px solid var(--gs-navy);
  background: var(--gs-cream);
  color: var(--gs-text);
  font-size: .92rem;
}
.wc-block-components-notice-banner.is-error {
  border-left-color: var(--gs-red-dark);
  background: #fdf3f3;
  color: #6d1620;
}
.wc-block-components-notice-banner.is-success { border-left-color: var(--gs-navy); }
.wc-block-components-notice-banner a { color: var(--gs-navy); font-weight: 800; }

/* Empty cart block. */
.woocommerce-cart .wc-block-cart__empty-cart__title {
  color: var(--gs-navy);
  font-family: Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.03em;
  text-transform: none;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block p { color: var(--gs-text-muted); line-height: 1.6; }
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  min-height: 52px;
  border-radius: var(--gs-radius);
  background: var(--gs-red);
  color: var(--gs-white);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Coupon: keep the invalid state legible rather than a bare default. */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input { min-height: 46px; }
.wc-block-components-totals-coupon__button { min-height: 46px; }

@media (max-width: 900px) {
  .woocommerce-checkout .wc-block-components-checkout-step { padding: 20px 18px; border-radius: 18px; }
  .woocommerce-checkout .wc-block-components-sidebar,
  .woocommerce-checkout .wc-block-checkout__sidebar { padding: 20px; border-radius: 18px; }
  .woocommerce-cart .wc-block-cart__sidebar { padding: 20px; border-radius: 18px; }
  .woocommerce-cart .wc-block-cart-item__image img { width: 68px; height: 68px; border-radius: 14px; }
}

/* Generic page template (page.php). Pages without a dedicated APEX template
   previously rendered through index.php with no design system applied. */
.gs-page-body { padding: clamp(46px, 6vw, 84px) 0 clamp(58px, 8vw, 100px); background: var(--gs-white); }
.gs-page-content { max-width: 46rem; color: var(--gs-text); font-size: 1.02rem; line-height: 1.7; }
.gs-page-content > * + * { margin-top: 1.15em; }
.gs-page-content h2 { color: var(--gs-navy); font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; margin-top: 1.9em; }
.gs-page-content h3 { color: var(--gs-navy); font-size: 1.25rem; margin-top: 1.6em; }
.gs-page-content a { color: var(--gs-navy); text-decoration: underline; text-underline-offset: 3px; }
.gs-page-content ul, .gs-page-content ol { padding-left: 1.25em; }
.gs-page-content li + li { margin-top: .45em; }
.gs-page-content blockquote { margin-inline: 0; padding-left: 1.1em; border-left: 3px solid var(--gs-red); color: var(--gs-text-muted); }
.gs-page-content img { height: auto; }
.gs-page-content table { width: 100%; border-collapse: collapse; }
.gs-page-content th, .gs-page-content td { padding: 10px 12px; border: 1px solid var(--gs-silver-light); text-align: left; }
.gs-page-featured { background: var(--gs-cream); }
.gs-page-featured img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.gs-page-pagination { margin-top: 2em; display: flex; gap: 10px; font-weight: 800; }

/* PDP availability + story-panel link. */
.gs-product-availability { margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-text-muted); }
.gs-product-availability.out-of-stock { color: var(--gs-red-dark); }
.gs-product-sections .gs-text-link { display: inline-block; margin-top: 12px; }

/* Small-phone layer (430 / 414 / 390 / 375 / 360 / 320).
   The narrowest media query in the theme was 430px, so 320-390 inherited
   430px sizing. These rules address the two things that actually degrade
   there: the announcement bar was clipped mid-word by nowrap + overflow,
   and edge gutters were wider than the content could afford. */
@media (max-width: 400px) {
  .gs-wrap, .gs-header-inner { width: min(calc(100% - 28px), var(--gs-max)); }
  .gs-announcement { height: auto; min-height: 30px; }
  .gs-announcement .gs-wrap { white-space: normal; overflow: visible; flex-wrap: wrap; justify-content: center; gap: 5px; padding-block: 7px; text-align: center; }
  .gs-v53-hero-content h1, .gs-home-hero h1 { hyphens: none; overflow-wrap: break-word; }
  .gs-v53-discover-grid, .gs-home-product-grid { grid-template-columns: 1fr; }
  .gs-v53-card-art { min-height: 210px; }
  .gs-v53-card-art em { right: 12px; bottom: 12px; font-size: 12px; }
}
@media (max-width: 340px) {
  .gs-wrap, .gs-header-inner { width: min(calc(100% - 20px), var(--gs-max)); }
  .gs-announcement { font-size: 7px; letter-spacing: .06em; }
  .gs-brand-name { font-size: 15px; }
}

/* Nothing in the theme may introduce a horizontal scrollbar. */
html, body { overflow-x: hidden; }
img, video, table { max-width: 100%; }