/*
Theme Name:  Shin Bio
Theme URI:   https://shinbio.com.au
Author:      Shin Bio
Description: Custom theme for Shin Bio — reusable heat & cold therapy packs. Heritage Green palette.
Version:     173.4.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:     Proprietary
Text Domain: shinbio
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --paper:       #F3EDDE;
  --paper-2:     #FBF6E9;
  --ink:         #1A231D;
  --ink-2:       #43504A;
  --ink-3:       #75817B;
  --line:        rgba(26,35,29,0.10);
  --line-2:      rgba(26,35,29,0.18);
  --brand:       #4CBD99;
  --brand-soft:  #D6E2D5;
  --brand-deep:  #2A4E3C;
  --brand-text:  #3D6A52;   /* mid-green for pill / heading / label text on light grounds */
  --blue:        #0166AB;
  --blue-soft:   #D0E4F5;
  --ember:       #C8613B;
  --ember-soft:  #F0D5C2;
  --ice:         #6CA5B9;
  --ice-soft:    #D6E5E9;
  --sans:        "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:        "Menlo", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* 4px spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-30: 120px;

  /* Sticky header height (site-header__inner 80px + 1px border) */
  --header-h: 81px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01","ss02"; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }

/* ── Type scale — exact Figma values ───────────────────── */
.display-xl  { font-family: var(--sans); font-weight: 500; font-size: 128px; line-height: 115px; letter-spacing: -5.12px; text-wrap: balance; }
.display-lg  { font-family: var(--sans); font-weight: 500; font-size: 96px;  line-height: 88px;  letter-spacing: -3.36px; text-wrap: balance; }
.display-md  { font-family: var(--sans); font-weight: 500; font-size: 64px;  line-height: 61px;  letter-spacing: -1.92px; text-wrap: balance; }
.h1          { font-family: var(--sans); font-weight: 500; font-size: 48px;  line-height: 60px;  letter-spacing: -1.2px;  text-wrap: balance; }
.h2          { font-family: var(--sans); font-weight: 500; font-size: 36px;  line-height: 1.05;  letter-spacing: -0.02em; text-wrap: balance; }
.h3          { font-family: var(--sans); font-weight: 500; font-size: 24px;  line-height: 32px;  letter-spacing: 0; }
.body-lg     { font-family: var(--sans); font-weight: 400; font-size: 20px;  line-height: 29px;  color: var(--ink-2); text-wrap: pretty; }
.body        { font-family: var(--sans); font-weight: 400; font-size: 16px;  line-height: 26px;  color: var(--ink-2); }
.body-sm     { font-family: var(--sans); font-weight: 400; font-size: 14px;  line-height: 23px;  color: var(--ink-2); }
.eyebrow     { font-family: var(--mono); font-size: 11px;  line-height: 16px; letter-spacing: 0.275px; text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.mono        { font-family: var(--mono); font-size: 13px;  line-height: 20px; letter-spacing: 0.325px; text-transform: uppercase; color: var(--ink-2); }
.stat-num    { font-family: var(--mono); font-size: 46px;  line-height: 50px; font-weight: 400; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Layout ─────────────────────────────────────────────── */
.container      { max-width: 1560px; margin: 0 auto; padding: 0 var(--sp-10); width: 100%; box-sizing: border-box; }
.container-wide { max-width: 1560px; margin: 0 auto; padding: 0 var(--sp-10); width: 100%; box-sizing: border-box; }
/* Generic page.php shell (checkout, my-account, plain pages): vertical
   padding here, side padding inherited from .container so it shrinks to
   16px on mobile like the rest of the site (was a fixed inline 80px 40px). */
.container.page-shell { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
@media (max-width: 768px) { .container.page-shell { padding-top: var(--sp-12); padding-bottom: var(--sp-12); } }
/* Page title row: title left, optional action (e.g. Continue shopping) right;
   the action wraps below the title when there isn't room. */
.page-shell__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-8);
}
.page-shell__head h1 { margin: 0; }
/* On the order-received page, cap the header row to the order content's
   width (matches .woocommerce-order max-width: 780px) so the "Continue
   shopping" action right-aligns with the order details below, not the
   page edge. */
body.woocommerce-order-received .page-shell__head { max-width: 780px; }
/* Editor content on plain text pages (page.php). The global reset zeroes
   heading sizes, paragraph margins and list bullets, so restore them here. */
.page-prose { max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.page-prose > * + * { margin-top: var(--sp-4); }
.page-prose h2 { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-top: var(--sp-12); }
.page-prose h3 { font-size: 21px; line-height: 1.3; font-weight: 500; color: var(--ink); margin-top: var(--sp-8); }
.page-prose h4 { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink); margin-top: var(--sp-6); }
.page-prose > :first-child { margin-top: 0; }
.page-prose h2 + *, .page-prose h3 + *, .page-prose h4 + * { margin-top: var(--sp-3); }
.page-prose ul { list-style: disc; padding-left: 1.25em; }
.page-prose ol { list-style: decimal; padding-left: 1.25em; }
.page-prose li + li { margin-top: var(--sp-2); }
.page-prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
.page-prose a:hover { color: var(--ink); }
.page-prose strong, .page-prose b { font-weight: 600; color: var(--ink); }

/* ── Surfaces ───────────────────────────────────────────── */
.surface       { background: var(--paper-2); border: 1px solid var(--line); border-radius: 28px; }
.surface-brand { background: var(--brand); color: var(--paper-2); border-radius: 28px; }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 48px; padding: 0 var(--sp-6); border-radius: 999px; border: none; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; transition: transform .12s ease, opacity .12s ease; font-family: var(--sans); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn-brand   { background: var(--brand); color: #FBF6E9; }
.btn-ember   { background: var(--ember); color: #fff; }
.btn-ghost   { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-sm      { height: 36px; padding: 0 var(--sp-4); font-size: 13px; gap: var(--sp-2); }

/* ── Pills ──────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  width: auto;
  align-self: flex-start;
  flex-shrink: 0;
}
.pill-brand  { background: var(--brand-soft); color: var(--brand-text); }
.pill-ember  { background: var(--ember-soft); color: var(--ember); }
.pill-ice    { background: var(--ice-soft);   color: #1B6E91; }
.pill-peach  { background: var(--ember-soft); color: var(--ember); }
.product-card__special-pill { background: var(--blue); color: #fff; }

/* ── Rings SVG ──────────────────────────────────────────── */
.rings-svg { display: inline-block; flex-shrink: 0; }

/* Pulsing ripple — each ring scales out from centre and fades, staggered outward */
@keyframes ringsPulseOut {
  0%   { transform: scale(0.92); opacity: 0; }
  15%  { opacity: var(--ring-opacity, 0.6); }
  100% { transform: scale(1.06); opacity: 0; }
}
.rings-svg circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: ringsPulseOut 4s ease-out infinite;
}
/* Stagger rings outward by index — negative delays mean every ring starts
   already mid-cycle on load instead of sitting frozen until its turn */
.rings-svg circle:nth-child(1) { animation-delay: 0s; }
.rings-svg circle:nth-child(2) { animation-delay: -0.5s; }
.rings-svg circle:nth-child(3) { animation-delay: -1s; }
.rings-svg circle:nth-child(4) { animation-delay: -1.5s; }
.rings-svg circle:nth-child(5) { animation-delay: -2s; }
.rings-svg circle:nth-child(6) { animation-delay: -2.5s; }
.rings-svg circle:nth-child(7) { animation-delay: -3s; }
.rings-svg circle:nth-child(8) { animation-delay: -3.5s; }
.rings-svg circle:nth-child(9) { animation-delay: -4s; }

@media (prefers-reduced-motion: reduce) {
  .rings-svg circle { animation: none; }
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes ringPulse { 0% { transform: scale(0.6); opacity: 0; } 30% { opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }

.ring-pulse        { position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; animation: ringPulse 2.2s cubic-bezier(0.2,0.7,0.3,1) infinite; }
.ring-pulse.d1     { animation-delay: 0s; }
.ring-pulse.d2     { animation-delay: 0.55s; }
.ring-pulse.d3     { animation-delay: 1.1s; }

/* ── Focus ──────────────────────────────────────────────── */
button:focus-visible, a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ── Lift ───────────────────────────────────────────────── */
.lift { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(20,23,28,0.25); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar { background: var(--blue); color: #fff; overflow: hidden; height: 40px; display: flex; align-items: center; }
.announcement-bar__track { display: flex; gap: var(--sp-16); width: max-content; animation: marqueeScroll 36s linear infinite; font-size: 12px; font-weight: 500; }
.announcement-bar__item { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(243,237,222,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: 32px; }
/* ≤782px the WP admin bar is position:absolute (scrolls away), so the sticky header pins to 0, not 46px */
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 0; } }
/* Shop: nav + filter bar read as one frosted stack — drop the nav's divider so there's no hairline between them */
.woocommerce-shop .site-header { border-bottom-color: transparent; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: var(--sp-4); overflow: visible; }
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }
.site-header__logo svg, .site-header__logo img { height: 64px; width: auto; display: block; }
.site-header__nav { display: flex; gap: var(--sp-8); align-items: center; margin-left: auto; margin-right: var(--sp-6); }
.site-header__nav a { font-size: 14px; font-weight: 500; color: var(--ink); transition: color .12s; white-space: nowrap; }
.site-header__nav a:hover { color: var(--brand); }
.site-header__actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }

/* Label text inside header action buttons — hidden at narrow widths */
.site-header__btn-label { white-space: nowrap; }

/* Icon-only: hide label text + sep, square up buttons, push hamburger to end */
@media (max-width: 520px) {
  .site-header__inner { gap: var(--sp-3); }
  .site-header__btn-label { display: none; }
  /* Search becomes icon-only square */
  .site-header__search-btn { padding: 0; width: 36px; justify-content: center; }
}
.site-header__search-btn { gap: var(--sp-2); color: var(--ink-2); }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.search-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 104px; }
.search-overlay[hidden] { display: none; }
.search-overlay__backdrop { position: absolute; inset: 0; background: rgba(26,35,29,0.48); backdrop-filter: blur(4px); cursor: pointer; }
.search-overlay__panel { position: relative; z-index: 1; width: calc(100% - var(--sp-10)); max-width: 640px; max-height: calc(100vh - 160px); background: var(--paper-2); border-radius: 20px; border: 1px solid var(--line-2); overflow: hidden; box-shadow: 0 24px 64px -16px rgba(26,35,29,0.28); box-sizing: border-box; display: flex; flex-direction: column; }
.search-overlay__form { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); min-width: 0; }
.search-overlay__icon { flex-shrink: 0; color: var(--ink-3); }
.search-overlay__input { flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--sans); font-size: 18px; color: var(--ink); line-height: 1; padding: var(--sp-3) 0; outline: none; }
.search-overlay__input::-webkit-search-cancel-button,
.search-overlay__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-overlay__input::-ms-clear { display: none; }
.search-overlay__input::placeholder { color: var(--ink-3); }
.search-overlay__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink-3); cursor: pointer; flex-shrink: 0; transition: background .12s, color .12s; }
.search-overlay__close:hover { background: var(--line); color: var(--ink); }

.search-overlay__results { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); }
.search-overlay__results:empty { border-top: none; }
.search-overlay__message { margin: 0; padding: var(--sp-6) var(--sp-5); color: var(--ink-3); font-size: 14px; text-align: center; }
.search-overlay__grid { display: flex; flex-direction: column; padding: var(--sp-2); }

.search-result { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3); border-radius: 14px; text-decoration: none; color: inherit; transition: background .12s; }
.search-result:hover { background: var(--paper); }
.search-result__image { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--paper); }
.search-result__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-result__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.search-result__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result__name { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result__price { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }

.search-overlay__section + .search-overlay__section { border-top: 1px solid var(--line); }
.search-overlay__section-label { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.search-overlay__pages { display: flex; flex-direction: column; padding: 0 var(--sp-2) var(--sp-2); }

.search-page-result { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 14px; transition: background .12s; }
.search-page-result:hover { background: var(--paper); }
.search-page-result__icon { flex-shrink: 0; color: var(--ink-3); }
.search-page-result__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   HERO
   ============================================================ */
.hero-editorial { padding: var(--sp-16) 0 var(--sp-24); background: var(--paper); container-type: inline-size; container-name: hero-section; }
.hero-editorial__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy card" "stats card"; column-gap: 80px; row-gap: var(--sp-8); align-items: start; width: 100%; }
.hero-editorial__copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); min-width: 0; }
.hero-editorial__stats { grid-area: stats; align-self: start; display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.hero-editorial__stat-num   { font-family: var(--mono); font-size: clamp(26px, 2.1vw, 32px); line-height: 1.1; font-weight: 400; color: var(--ink); white-space: nowrap; letter-spacing: -0.02em; }
.hero-editorial__stat-label { font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: 0.275px; text-transform: uppercase; color: var(--ink-3); margin-top: var(--sp-1); }
.hero-editorial__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); width: 100%; }
.hero-editorial__actions { display: flex; flex-direction: column; gap: var(--sp-8); width: 100%; }
.hero-editorial__card { grid-area: card; align-self: center; display: block; text-decoration: none; color: inherit; position: relative; min-width: 0; transition: transform .25s ease; }
.hero-editorial__card:hover { transform: translateY(-3px); }
.hero-editorial__card-inner { display: flex; flex-direction: column; gap: 0; border-radius: 28px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.hero-editorial__card-top { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); }
.hero-editorial__card-top-name { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.hero-editorial__card-image { width: 100%; aspect-ratio: 1800 / 886; overflow: hidden; position: relative; padding: 0; background: #F4F0EC; }
.hero-editorial__card-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; border-radius: 12px; background: #F4F0EC; transition: opacity .3s ease; }
.hero-editorial__card-img.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-editorial__card-img { transition: none; } }
.hero-editorial__card-placeholder { width: 100%; height: 280px; border-radius: 12px; background: var(--ember-soft); color: var(--ember); display: flex; align-items: center; justify-content: center; }
.hero-editorial__card-bottom { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--sp-4) var(--sp-5) var(--sp-5); gap: var(--sp-3); }
.hero-editorial__card-bottom-left { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; min-width: 0; }
.hero-editorial__card-name { font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: -0.3px; color: var(--ink); }
.hero-editorial__card-subtitle { font-size: 13px; color: var(--ink-3); }
.hero-editorial__card-bottom-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.hero-editorial__card-aud { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.hero-editorial__card-price { font-family: var(--mono); font-size: 40px; line-height: 1; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; }
.hero-editorial__proof { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 16px; margin: 0 var(--sp-4) var(--sp-4); width: fit-content; max-width: calc(100% - var(--sp-8)); }
.activation-badge { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border-radius: 999px; background: var(--ember-soft); color: var(--ember); font-size: 12px; font-weight: 500; white-space: nowrap; align-self: flex-start; width: auto; }
.activation-badge__dot-wrap { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.activation-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hero-ctas { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.hero-ctas__secondary { display: flex; align-items: center; gap: var(--sp-2); }
.hero-ctas__secondary-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); display: inline-block; }

/* ============================================================
   ACTIVATION DEMO
   ============================================================ */
.activation-demo { padding: var(--sp-30) 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.activation-demo__grid { display: flex; flex-direction: row; align-items: center; gap: 80px; width: 100%; }
.activation-demo__stage { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; perspective: 900px; perspective-origin: center center; }
.activation-demo__rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); opacity: 0.2; pointer-events: none; }
.activation-demo__product { position: relative; z-index: 2; width: 88%; max-width: 520px; filter: drop-shadow(0 24px 48px rgba(26,35,29,0.14)); transform-style: preserve-3d; transition: transform 0.1s ease-out; will-change: transform; }
.activation-demo__product img { width: 100%; height: auto; display: block; }
.activation-demo__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); flex: 1 1 0; min-width: 0; }
.activation-demo__features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-8); padding-top: var(--sp-2); }
.activation-demo__feature { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.activation-demo__feature-title { font-size: 13px; color: var(--brand-text); margin-bottom: var(--sp-2); font-weight: 600; }
.activation-demo__feature-body { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ============================================================
   PRODUCT RANGE
   ============================================================ */
.product-range { padding: var(--sp-30) 0; background: var(--paper); }
.product-range__header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-8); gap: var(--sp-8); }
.product-range__header-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
/* Range peek-slider — cards fill the width, the next one bleeds off-screen,
   and both edges fade into the page so nothing looks hard-clipped. */
.product-range {
  --range-pad: var(--sp-10);            /* matches the container side padding */
  --range-cols: 4;                      /* full cards visible across the container */
  --range-gap: 20px;
  --range-gutter: max(var(--range-pad), calc(50vw - 780px + var(--range-pad))); /* viewport edge → content edge */
}
.product-range__slider {
  position: relative;
  /* Full-bleed to the viewport edges (body overflow-x is clipped → no h-scroll). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Gradient masks in the page colour, so cards melt out instead of hard-ending. */
/* Always-on paper masks: invisible over an empty gutter, covering any card that spills
   out of the content column. No opacity toggling → nothing fades in over the cards. */
.product-range__slider::before,
.product-range__slider::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: max(48px, var(--range-gutter));  /* covers the whole out-of-content gutter */
  pointer-events: none;
}
.product-range__slider::before { left: 0;  background: linear-gradient(to right, var(--paper) 50%, transparent); }
.product-range__slider::after  { right: 0; background: linear-gradient(to left,  var(--paper) 50%, transparent); }

.product-range__track {
  display: flex;
  align-items: stretch;                 /* equal-height cards → frame never jumps on scroll */
  gap: var(--range-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;               /* JS eases scrollLeft frame-by-frame; CSS snap would jump past the ease */
  scroll-behavior: auto;                /* JS owns the animation (smooth scrollBy is flaky next to snap) */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                /* Firefox */
  padding: 0 var(--range-gutter) 6px var(--range-gutter); /* symmetric gutters: first & last 4 cards align to the content column */
  scroll-padding: 0 var(--range-gutter);
}
.product-range__track::-webkit-scrollbar { display: none; }  /* WebKit */
.product-range__track > .product-card {
  /* Exactly a container-quarter → the visible cards fill the width, the next bleeds past the edge. */
  flex: 0 0 calc((min(100vw, 1560px) - 2 * var(--range-pad) - (var(--range-cols) - 1) * var(--range-gap)) / var(--range-cols));
  scroll-snap-align: start;
}
.product-range__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 24px; }
/* Cards outside the middle set sit under the gradient: not product links —
   a click just nudges the rail one spot (handled in theme.js). */
.product-range__track > .product-card.is-peek { cursor: pointer; }
.product-range__track > .product-card.is-peek a,
.product-range__track > .product-card.is-peek button,
.product-range__track > .product-card.is-peek [data-add-to-cart] { pointer-events: none; }
.product-range__track > .product-card.is-peek:hover .product-card__img { transform: none; }      /* no zoom under the fade */
.product-range__track > .product-card.is-peek:hover .product-card__name a { color: inherit; }

/* Foot row: "View full range" (left) + nav arrows (bottom-right) */
.product-range__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-top: var(--sp-8); }
.product-range__nav { display: flex; gap: var(--sp-3); }
.product-range__slider.is-static ~ .product-range__foot .product-range__nav { display: none; } /* everything fits — no arrows needed */
.range-nav-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease;
}
.range-nav-btn:hover:not(:disabled) { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); }
.range-nav-btn:disabled { opacity: 0.35; cursor: default; }
.range-nav-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.product-card { border-radius: 24px; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(20,23,28,0.22); border-color: var(--line-2); }
.product-card__top { display: flex; justify-content: space-between; align-items: center; }
.product-card__duration { font-size: 12px; color: var(--ink-3); text-align: right; margin-left: auto; }
.product-card__image { aspect-ratio: 1 / 1; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; background: var(--paper); }
/* Hover: image zooms + title goes brand blue, on one shared ease */
.product-card__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.product-card:hover .product-card__img { transform: scale(1.06); }
.product-card__name { font-size: 26px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: var(--sp-1); }
.product-card__name a { color: inherit; transition: color .45s cubic-bezier(.22,.61,.36,1); }
.product-card:hover .product-card__name a { color: var(--blue); }
.product-card__use { font-size: 13px; color: var(--ink-3); }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.product-card__size { font-size: 11px; margin-bottom: var(--sp-1); color: var(--ink-3); }
.product-card__price { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
/* Special-offer (multipack) cards — soft green tint to set them apart */
.product-card--special { background: #EDF3EE; background: color-mix(in srgb, var(--brand) 9%, var(--paper-2)); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.product-card--special .product-card__image { background: color-mix(in srgb, var(--brand) 6%, var(--paper)); }
.product-card--special .product-card__footer { border-top-color: color-mix(in srgb, var(--brand) 18%, var(--line)); }
/* Card add-to-cart: button, then a − qty + stepper once the product is in the cart */
.card-atc [hidden] { display: none; }
.card-qty {
  display: inline-flex; align-items: center; height: 36px; border-radius: 999px;
  background: var(--brand); color: #FBF6E9; font-size: 13px; font-weight: 500;
  transition: opacity .12s ease;
}
.card-qty__btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; background: transparent; color: inherit;
  font-size: 17px; line-height: 1; padding: 0; cursor: pointer; transition: background .12s ease;
}
.card-qty__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.card-qty__btn:disabled { opacity: 0.4; cursor: default; }
.card-qty__num { min-width: 24px; text-align: center; font-family: var(--mono); }
.card-atc.is-pending .card-qty,
.card-atc.is-updating .card-qty { opacity: 0.7; }
.card-atc.is-pending .card-qty__btn,
.card-atc.is-updating [data-add-to-cart] { pointer-events: none; }
.card-atc.is-added .card-qty { animation: card-qty-pop .35s ease; }
@keyframes card-qty-pop { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .card-atc.is-added .card-qty { animation: none; } }

/* ============================================================
   HOT / COLD
   ============================================================ */
.hot-cold { padding: 0 0 var(--sp-30); }
.hot-cold__grid { display: flex; flex-direction: row; gap: 20px; max-width: 1560px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.hot-cold__panel { flex: 1 1 0; padding: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-8); position: relative; overflow: hidden; min-height: 460px; border-radius: 28px; }
.hot-cold__panel--hot  { background: var(--ember-soft); color: #5C2A0E; }
.hot-cold__panel--cold { background: var(--ice-soft);   color: #1B4C61; }
.hot-cold__rings { position: absolute; opacity: 0.5; pointer-events: none; }
.hot-cold__panel--hot  .hot-cold__rings { right: -100px; top: -100px; color: var(--ember); }
.hot-cold__panel--cold .hot-cold__rings { left: -100px; bottom: -100px; color: var(--ice); }
.hot-cold__panel-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.hot-cold__title { position: relative; }
.hot-cold__body  { position: relative; max-width: 380px; line-height: 1.45; font-size: 16px; }
.hot-cold__panel--hot  .hot-cold__body { color: #5C2A0E; }
.hot-cold__panel--cold .hot-cold__body { color: #1B4C61; }
.hot-cold__list { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; margin-top: var(--sp-2); }
.hot-cold__list-item { display: flex; align-items: center; gap: var(--sp-3); font-size: 15px; }
.hot-cold__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hot-cold__panel--hot  .hot-cold__dot { background: var(--ember); }
.hot-cold__panel--cold .hot-cold__dot { background: var(--ice); }

/* Cold-pack "turned white in the freezer" info note */
.hot-cold__note { position: relative; z-index: 1; display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-5); padding: var(--sp-4); border-radius: 14px; background: rgba(108, 165, 185, 0.14); border: 1px solid rgba(108, 165, 185, 0.30); }
.hot-cold__note p { margin: 0; font-size: 14px; line-height: 1.5; color: #1B4C61; }
.hot-cold__note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ice); flex-shrink: 0; margin-top: 5px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-it-works { padding: var(--sp-30) 0; background: #2A4E3C; color: var(--paper-2); }
.how-it-works__header { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-14); gap: var(--sp-8); }
.how-it-works__header-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.how-it-works__header-nav { display: flex; gap: var(--sp-3); }
.how-it-works__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
/* Cool panel currently has 3 steps (only 3 cold photos) — 3 columns so it fills the row. Uses :where() to keep specificity at (0,1,0) so the responsive rules below still win. */
.how-it-works__grid:where([data-hiw-panel="cool"]) { grid-template-columns: repeat(3,1fr); }
/* Desktop only: cool cards are wider (3-col vs the hot 4-col), so square the media to keep the same card height as the hot cards. Tablet/mobile share the hot column count and keep the 3/4 media. */
@media (min-width: 1025px) {
  .how-it-works__grid[data-hiw-panel="cool"] .step-card__video { aspect-ratio: 1 / 1; }
}
.how-it-works__grid[hidden] { display: none; }
html { scroll-behavior: smooth; }
#how-it-works { scroll-margin-top: 96px; } /* clears the sticky header on anchor jump */
.hiw-toggle { cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.hiw-toggle:not(.hiw-toggle--active) { background: transparent; color: rgba(251,246,233,0.6); border: 1px solid rgba(255,255,255,0.22); }
.hiw-toggle[data-hiw-toggle="hot"].hiw-toggle--active  { background: var(--ember); color: #fff; border-color: var(--ember); }
.hiw-toggle[data-hiw-toggle="cool"].hiw-toggle--active { background: var(--blue);  color: #fff; border-color: var(--blue); }
.step-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.step-card__video { width: 100%; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; position: relative; background: #1B231F; background-image: repeating-linear-gradient(135deg,rgba(255,255,255,0.03) 0 14px,rgba(255,255,255,0.06) 14px 28px); }
.step-card__video-label { position: absolute; top: var(--sp-4); left: var(--sp-4); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; color: var(--paper-2); }
.step-card__play { position: absolute; left: var(--sp-5); bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); }
.step-card__play-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #14171C; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.step-card__num   { font-size: 13px; font-weight: 600; color: var(--ember-soft); }
.step-card__title { font-size: 22px; font-weight: 500; color: var(--paper-2); letter-spacing: -0.015em; }
.step-card__body  { font-size: 14px; color: rgba(251,246,233,0.75); line-height: 1.55; }

/* ============================================================
   USE CASES
   ============================================================ */
.use-cases { padding: var(--sp-30) 0; background: var(--paper); }
.use-cases__grid { display: flex; flex-direction: row; gap: 80px; width: 100%; }
.use-case { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); flex: 1 1 0; min-width: 0; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-teaser { padding: var(--sp-30) 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-teaser__grid { display: flex; flex-direction: row; gap: 80px; align-items: flex-start; width: 100%; }
.faq-teaser__intro { position: sticky; top: 100px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); flex: 1 1 0; min-width: 0; }
.faq-accordion { flex: 1 1 0; min-width: 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--sp-6) 0; background: transparent; border: none; text-align: left; cursor: pointer; }
.faq-item__question { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.faq-item__toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: var(--sp-4); transition: transform .2s; background: transparent; }
.faq-item__toggle.is-open { transform: rotate(45deg); }
.faq-item__answer { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.faq-item__answer.is-open { max-height: 300px; }
.faq-item__answer p { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 var(--sp-6); max-width: 560px; }

/* ── FAQ page (page-faq.php) ─────────────────────────────── */
.faq-page { padding: var(--sp-20) 0 var(--sp-30); background: var(--paper); }
.faq-page__header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); max-width: 640px; margin: 0 auto var(--sp-16); text-align: left; }
.faq-page__intro { color: var(--ink-2); margin: 0; }
.faq-page__list { max-width: 760px; margin: 0 auto; }
.faq-page__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; max-width: 480px; margin: var(--sp-20) auto 0; padding-top: var(--sp-16); border-top: 1px solid var(--line); }
.faq-page__cta p { color: var(--ink-2); margin: 0; }

@media (max-width: 768px) {
  .faq-page { padding: var(--sp-12) 0 var(--sp-20); }
  .faq-page__header { gap: var(--sp-4); margin-bottom: var(--sp-10); }
  .faq-item__question { font-size: 17px; }
  .faq-page__cta { margin-top: var(--sp-12); padding-top: var(--sp-10); }
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.bottom-cta { padding: var(--sp-28) 0; position: relative; overflow: hidden; background: var(--blue); }
.bottom-cta__rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.16); pointer-events: none; }
.bottom-cta__content { position: relative; text-align: center; color: #FBF6E9; display: flex; flex-direction: column; align-items: center; gap: var(--sp-7); }
.bottom-cta__badge { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: rgba(255,255,255,0.14); color: #FBF6E9; font-size: 12px; font-weight: 500; }
.bottom-cta__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); flex-shrink: 0; }
.bottom-cta__title { font-family: var(--sans); font-weight: 500; font-size: 120px; line-height: 108px; letter-spacing: -4.8px; text-align: center; color: #FBF6E9; margin: 0; }
.bottom-cta__body  { font-size: 18px; line-height: 1.55; color: rgba(251,246,233,0.85); max-width: 480px; }
.bottom-cta__ctas  { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--paper-2); padding: var(--sp-20) 0 var(--sp-10); border-top: 1px solid var(--line); }
.site-footer__grid { display: flex; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.site-footer__brand { flex: 0 1 380px; min-width: 0; }
.site-footer__nav-group { display: flex; gap: var(--sp-8); flex-shrink: 0; }
.site-footer__col { flex: 0 0 auto; min-width: 140px; }
.site-footer__brand p { margin: 0 0 var(--sp-6); max-width: 320px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.site-footer__col-heading { font-size: 13px; font-weight: 600; color: var(--brand-text); margin-bottom: var(--sp-4); }
.site-footer__col li + li { margin-top: var(--sp-3); }
.site-footer__col a { font-size: 14px; color: var(--ink-2); transition: color .12s; }
.site-footer__col a:hover { color: var(--brand); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.site-footer__legal { display: flex; gap: var(--sp-6); }
.site-footer__legal a { color: var(--ink-3); }

/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce-page .woocommerce { max-width: 1560px; margin: 0 auto; padding: var(--sp-16) var(--sp-10); width: 100%; box-sizing: border-box; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 0; padding: 0; }
.woocommerce ul.products li.product { margin: 0; }
.woocommerce .button, .woocommerce button.button { background: var(--brand); color: #FBF6E9; border-radius: 999px; border: none; padding: 0 var(--sp-6); height: 48px; font-family: var(--sans); font-size: 15px; font-weight: 500; transition: opacity .12s; }
.woocommerce .button:hover { background: var(--brand); opacity: 0.9; color: #FBF6E9; }
.woocommerce-cart .cart-collaterals, .woocommerce-checkout .col2-set { max-width: 1560px; margin: 0 auto; padding: 0 var(--sp-10); }

/* ══════════════════════════════════════════════════════════════
   WooCommerce notices — global across cart, checkout, shop, account.
   Success = teal, error = ember, info = blue. Paper card, rounded,
   coloured left accent + custom SVG icon, matching the brand form
   language. (Classic notices; the store doesn't use cart/checkout
   blocks.) Checkout-specific coupon/payment notices are styled more
   specifically elsewhere and keep their own look.
   ══════════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: relative;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-12);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  list-style: none;
}
/* clearfix for the floated action button */
.woocommerce-message::after,
.woocommerce-info::after { content: ""; display: block; clear: both; }
/* icon — overrides WooCommerce's icon-font ::before */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: "" !important;
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  width: 20px;
  height: 20px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Success (teal) */
.woocommerce-message { border-left-color: var(--brand); }
.woocommerce-message::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%234CBD99' stroke-width='1.6'/%3E%3Cpath d='M8 12.5l2.5 2.5 5.5-6' stroke='%234CBD99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Error (ember) */
.woocommerce-error { border-left-color: var(--ember); }
.woocommerce-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23C8613B' stroke-width='1.6'/%3E%3Cpath d='M12 7.5v5.5' stroke='%23C8613B' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.5' r='1' fill='%23C8613B'/%3E%3C/svg%3E");
}
/* Info (blue) */
.woocommerce-info { border-left-color: var(--blue); }
.woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%230166AB' stroke-width='1.6'/%3E%3Cpath d='M12 11v5' stroke='%230166AB' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.5' r='1' fill='%230166AB'/%3E%3C/svg%3E");
}
/* Error is a <ul><li> — reset list, keep the card look on the ul */
ul.woocommerce-error { margin: 0 0 var(--sp-5); }
.woocommerce-error li { margin: 0; padding: 0; }
.woocommerce-error li + li { margin-top: var(--sp-1); }
/* Action button inside a notice (e.g. "View cart"). Uses a.button to beat
   WooCommerce core's `.woocommerce a.button` (0,2,1). */
.woocommerce-message a.button,
.woocommerce-info a.button {
  float: right;
  margin: -2px 0 0 var(--sp-4);
  padding: 0 var(--sp-5);
  height: 40px;
  line-height: 40px;
  background-color: var(--ink);
  color: var(--paper-2);
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover { background-color: var(--ink); opacity: 0.85; color: var(--paper-2); }
/* Text links inside notices */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) { color: var(--brand); font-weight: 500; text-decoration: none; }
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   Order received (thank-you) + My Account "view order". Both render
   inside `.woocommerce-order`, so this styles both at once.
   ══════════════════════════════════════════════════════════════ */
/* The thank-you page shares the body.woocommerce-checkout class, so the
   checkout grid leaks onto its `.woocommerce` wrapper and squishes the
   receipt into one column. Reset it. */
body.woocommerce-order-received .woocommerce { display: block; }

.woocommerce-order { max-width: 780px; }
.woocommerce-thankyou-order-received {
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 var(--sp-8);
}

/* Order overview — number / date / email / total / payment as a card row */
ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-10);
  margin: 0 0 var(--sp-10);
  padding: var(--sp-6);
  list-style: none;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: inherit;
}
.woocommerce-order ul.woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

/* Section headings — Order details, Billing address */
.woocommerce-order h2,
.woocommerce-order .woocommerce-column__title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

/* Order details table — horizontal dividers only, no default box */
.woocommerce-order .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  /* !important beats WooCommerce core's .woocommerce table.shop_table box border */
  border: none !important;
  border-radius: 0 !important;
  margin: 0 0 var(--sp-10);
  font-size: 15px;
}
.woocommerce-order .woocommerce-table--order-details th,
.woocommerce-order .woocommerce-table--order-details td {
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: var(--sp-3) 0;
  text-align: left;
  color: var(--ink);
}
.woocommerce-order .woocommerce-table--order-details thead th {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.woocommerce-order .woocommerce-table--order-details th:last-child,
.woocommerce-order .woocommerce-table--order-details td:last-child { text-align: right; }
.woocommerce-order .woocommerce-table--order-details tfoot th { color: var(--ink-2); font-weight: 400; }
.woocommerce-order .woocommerce-table--order-details tfoot .order-total th,
.woocommerce-order .woocommerce-table--order-details tfoot .order-total td {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  padding-top: var(--sp-4);
}
.woocommerce-order .woocommerce-table--order-details a { color: var(--ink); text-decoration: none; }
.woocommerce-order .woocommerce-table--order-details a:hover { color: var(--brand); }

/* Customer / billing address block */
.woocommerce-customer-details address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--sp-6);
}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email { margin: var(--sp-3) 0 0; color: var(--ink); }

/* WooCommerce's clearfix ::before/::after on the overview ul become stray
   flex items and indent the first row (order number/date) — remove them
   (same issue as .col2-set) so everything left-aligns. */
.woocommerce-order .woocommerce-order-overview::before,
.woocommerce-order .woocommerce-order-overview::after { display: none !important; }

/* Continue-shopping button — sits beside the "Order received" title */
.sb-continue-shopping {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 var(--sp-8);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sb-continue-shopping:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-2);
}

/* ══════════════════════════════════════════════════════════════
   AJAX processing overlay (place order, cart/checkout update).
   WooCommerce's blockUI default is an opaque white box + spinner —
   replace with a translucent PAPER overlay that blends into the page,
   and the site's radiating ring-pulse instead of the spinner.
   ══════════════════════════════════════════════════════════════ */
.blockUI.blockOverlay {
  /* blockUI sets opacity:0.6 + white bg inline; override with a translucent
     paper tint (rgba so the ring-pulse on top stays crisp at full opacity). */
  opacity: 1 !important;
  background: rgba(243, 237, 222, 0.66) !important; /* --paper @ 66% */
  cursor: wait;
}
.blockUI.blockOverlay::before,
.blockUI.blockOverlay::after {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: none !important;
  animation: ringPulse 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.blockUI.blockOverlay::after { animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  .blockUI.blockOverlay::before,
  .blockUI.blockOverlay::after { animation: none; opacity: 0.5; }
}
/* If both billing + shipping columns are present, sit them side by side */
.woocommerce-order .woocommerce-columns--addresses { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.woocommerce-order .woocommerce-columns--addresses .woocommerce-column { flex: 1 1 260px; }

/* ══════════════════════════════════════════════════════════════
   My Account — sidebar nav + content, tables, forms, addresses.
   Fields scoped to `.woocommerce-account .woocommerce` (the content
   wrapper) so bare input selectors can't reach the WP admin toolbar.
   ══════════════════════════════════════════════════════════════ */
/* Layout: nav sidebar + content */
.woocommerce-account .woocommerce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-16);
  align-items: flex-start;
}
.woocommerce-account .woocommerce-notices-wrapper { flex: 0 0 100%; }
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 240px; flex: 0 0 240px; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; flex: 1 1 0; min-width: 0; }

/* Navigation menu */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li { margin: 0; border: none; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--paper-2); color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--ink); color: var(--paper-2); }

/* Content text + headings */
.woocommerce-MyAccount-content { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.woocommerce-MyAccount-content a:not(.button) { color: var(--brand); font-weight: 500; text-decoration: none; }
.woocommerce-MyAccount-content a:not(.button):hover { text-decoration: underline; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--sans); font-size: 20px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em; margin: var(--sp-8) 0 var(--sp-5);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }

/* Tables (orders, downloads) — clean row dividers, no default box */
.woocommerce-account table.shop_table {
  width: 100%; border-collapse: collapse;
  border: none !important; border-radius: 0 !important;
  margin: 0 0 var(--sp-6); font-size: 15px;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  border: none !important; border-bottom: 1px solid var(--line) !important;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; text-align: left; color: var(--ink); vertical-align: middle;
}
.woocommerce-account table.shop_table thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 500;
  padding-top: 0;
}
.woocommerce-account table.shop_table td:last-child,
.woocommerce-account table.shop_table th:last-child { text-align: right; }

/* Buttons (View, Save, etc.) — dark ink pill */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button {
  background: var(--ink) !important; color: var(--paper-2) !important;
  border: none !important; border-radius: 999px !important;
  padding: 0 var(--sp-5) !important; height: 44px; line-height: 44px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover { opacity: .85; }

/* Form fields (account details, address edit) — mirror checkout */
.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce-EditAccountForm p,
.woocommerce-account .edit-account p { margin: 0 0 var(--sp-4); }
.woocommerce-account .woocommerce label { display: block; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ink-3); margin: 0 0 var(--sp-2); }
.woocommerce-account .woocommerce .required { color: var(--ink-3) !important; border: none !important; text-decoration: none; }
.woocommerce-account .woocommerce .input-text,
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce select {
  width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  height: 50px; padding: var(--sp-3) var(--sp-4);
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 10px;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce-account .woocommerce textarea { height: auto; min-height: 110px; }
.woocommerce-account .woocommerce .input-text:hover,
.woocommerce-account .woocommerce select:hover,
.woocommerce-account .woocommerce textarea:hover { border-color: var(--ink-3); }
.woocommerce-account .woocommerce .input-text:focus,
.woocommerce-account .woocommerce select:focus,
.woocommerce-account .woocommerce textarea:focus {
  outline: none; border-color: var(--brand); background: var(--paper); box-shadow: 0 0 0 3px rgba(76,189,153,.18);
}
.woocommerce-account .woocommerce .input-text::placeholder,
.woocommerce-account .woocommerce textarea::placeholder { color: var(--ink-3); }
.woocommerce-account .woocommerce fieldset { border: 1px solid var(--line); border-radius: 14px; padding: var(--sp-5); margin: var(--sp-6) 0 0; }
.woocommerce-account .woocommerce fieldset legend { font-weight: 500; color: var(--ink); padding: 0 var(--sp-2); }
.woocommerce-account .woocommerce span.password-input { display: block; }
.woocommerce-account .woocommerce em { color: var(--ink-3); font-style: normal; font-size: 13px; }

/* Addresses page — billing/shipping cards */
.woocommerce-account .woocommerce-Addresses { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-4); }
.woocommerce-account .woocommerce-Address { flex: 1 1 280px; }
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; padding: 0; border: none; }
.woocommerce-account .woocommerce-Address address {
  font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-6);
}

/* Responsive: nav on top, full width on mobile */
@media (max-width: 720px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { flex: 0 0 100%; width: 100%; }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  /* Collapse the address form's paired first/last name to one column on
     phones (matches the checkout behaviour). */
  .woocommerce-account .woocommerce .form-row-first,
  .woocommerce-account .woocommerce .form-row-last { float: none; width: 100%; margin-right: 0; }
}

/* ── Cart icon + bubble badge ────────────────────────────── */
.site-header__cart-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  transition: color .12s;
}
.site-header__cart-icon-btn:hover { color: var(--brand); }

.site-header__cart-bubble {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ember);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  display: none;
  pointer-events: none;
  box-sizing: border-box;
}
.site-header__cart-bubble.is-visible { display: block; }

/* ── Branded cart page ───────────────────────────────────── */
.sb-cart {
  background: var(--paper);
  min-height: 60vh;
  padding: var(--sp-12) 0 var(--sp-30);
}
.sb-cart__heading-row {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-8);
}
.sb-cart__heading { margin: 0; }

/* Two-column layout */
.sb-cart__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-16);
  align-items: start;
}

/* ── Line items ──────────────────────────────────────────── */
.sb-cart__items-col { display: flex; flex-direction: column; gap: 0; }

.sb-cart__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.sb-cart__item-image {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
  flex-shrink: 0;
}
.sb-cart__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb-cart__item-image a { display: block; width: 100%; height: 100%; }

.sb-cart__item-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.sb-cart__item-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.sb-cart__item-name a { color: inherit; text-decoration: none; }
.sb-cart__item-name a:hover { color: var(--brand); }
.sb-cart__item-info .variation { margin: 0; }
.sb-cart__item-info .variation dt,
.sb-cart__item-info .variation dd { font-size: 13px; color: var(--ink-3); margin: 0; display: inline; }
.sb-cart__item-info .variation dt::after { content: ': '; }
.sb-cart__item-info .variation dd::after { content: ' '; }
.sb-cart__remove-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .12s;
}
.sb-cart__remove-link:hover { color: var(--ember); }

.sb-cart__item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  min-width: 120px;
}
.sb-cart__item-price {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}

/* WC quantity input inside cart items */
/* Quantity stepper: [−] n [+] as one pill */
.sb-cart__item-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; height: 36px; background: var(--paper-2); }
.sb-cart__item-qty .quantity { display: flex; align-items: center; border: none; height: auto; margin: 0; }
.sb-cart__item-qty .qty { width: 30px; text-align: center; border: none; background: transparent; font-family: var(--mono); font-size: 14px; color: var(--ink); -moz-appearance: textfield; padding: 0; height: 34px; }
.sb-cart__item-qty .qty::-webkit-outer-spin-button,
.sb-cart__item-qty .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-cart__qty-btn {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-2);
  cursor: pointer; font-size: 17px; line-height: 1; padding: 0;
  transition: background .12s ease, color .12s ease;
}
.sb-cart__qty-btn:hover:not(:disabled) { background: var(--line); color: var(--ink); }
.sb-cart__qty-btn:disabled { color: var(--line-2); cursor: default; }
.sb-cart__item.is-updating { opacity: 0.55; }
.sb-cart__item.is-updating .sb-cart__qty-btn { pointer-events: none; }
.sb-cart__item.is-removing { opacity: 0.25; pointer-events: none; transition: opacity .15s; }

/* Coupon + update row */
.sb-cart__form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0 0;
  flex-wrap: wrap;
}
.sb-cart__coupon { display: flex; gap: var(--sp-3); align-items: center; flex: 1; }
.sb-cart__coupon-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0 var(--sp-4);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-2);
  outline: none;
  transition: border-color .12s;
}
.sb-cart__coupon-input:focus { border-color: var(--brand); }
.sb-cart__coupon-input::placeholder { color: var(--ink-3); }
.sb-cart__update { color: var(--ink-3); border: 1px solid var(--line-2); background: transparent; }
.sb-cart__update:hover { color: var(--ink); border-color: var(--ink); }

/* ── Order summary panel ─────────────────────────────────── */
.sb-cart__summary {
  position: sticky;
  top: calc(80px + var(--sp-6));
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.sb-cart__summary-heading {
  color: var(--ink-3);
  margin-bottom: var(--sp-1);
}
.sb-cart__totals { display: flex; flex-direction: column; gap: 0; }
.sb-cart__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
}
.sb-cart__total-row:last-child { border-bottom: none; }
.sb-cart__total-row--grand {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  padding-top: var(--sp-4);
}
.sb-cart__total-row--grand .sb-cart__total-value {
  font-family: var(--mono);
  font-size: 22px;
}
.sb-cart__total-row[hidden] { display: none; }
/* GST sits under the total as a quiet note, so the grand row loses its rule. */
.sb-cart__total-row--grand:has(+ .sb-cart__total-row--gst:not([hidden])) { border-bottom: none; }
.sb-cart__total-row--gst {
  padding-top: 0;
  font-size: 13px;
  color: var(--ink-3);
}
.sb-cart__total-row--gst .sb-cart__total-value { font-family: var(--mono); }

/* WC checkout button override */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; margin: 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 999px;
  background: var(--ink) !important;
  color: var(--paper-2) !important;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .12s;
  padding: 0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════
   CLASSIC CHECKOUT — field language matched to the /contact/ form
   (paper-2 fields, 1px --line-2 border, 10px radius, muted labels
   above, dark pill place-order button). Form on the left, order
   summary in a sticky card on the right (mirrors the cart layout).
   Checkout page is the classic [woocommerce_checkout] shortcode.
   ══════════════════════════════════════════════════════════════ */

/* ── Layout: form column + sticky order-summary sidebar ─────── */
/* Tighter top gutter on checkout so the form sits above the fold */
/* The checkout page (page.php) already sits inside `.container`, which
   provides the site's side gutter. The WooCommerce wrapper's own side
   padding is therefore a double gutter — drop it so the form aligns with
   the h1 and the rest of the site. Keep the top/bottom padding. */
body.woocommerce-checkout .woocommerce { padding-top: var(--sp-8); padding-inline: 0; }
/* (Title spacing now handled by .page-shell__head margin-bottom.) */

/* The coupon (`.woocommerce-form-coupon-toggle` + `form.checkout_coupon`)
   is a sibling rendered AFTER form.checkout, so it can't be nested in the
   form. To place it directly above the order summary, we make the .woocommerce
   WRAPPER the grid and dissolve the form with `display: contents` — that
   promotes #customer_details and .sb-checkout__summary to grid items sitting
   next to the coupon. The billing column (col 1) spans all rows; a trailing
   1fr filler row absorbs its extra height so the right column (coupon →
   order box) stays packed at the top. */
/* Two matching grids. The OUTER grid (.woocommerce) puts the coupon in the
   right column, rows 2-3 — above the form — with col-1 rows 2-3 empty (that's
   the billing column's top spacing). The form itself (row 4, full width) is
   its OWN matching 2-col grid (billing | order summary), so Billing Details
   and Your Order start together at the top of row 4 and sit inline. Crucially
   the form is a real grid box (NOT display:contents), so the order summary's
   position:sticky works — display:contents breaks sticky in Chromium. */
.woocommerce-checkout .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto auto auto auto;
  column-gap: var(--sp-16);
}
.woocommerce-checkout .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
.woocommerce-checkout .woocommerce-form-coupon-toggle { grid-column: 2; grid-row: 2; margin-bottom: var(--sp-5); }
.woocommerce-checkout form.checkout_coupon { grid-column: 2; grid-row: 3; }
.woocommerce-checkout form.checkout {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: var(--sp-16);
  align-items: start;
}
.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout .sb-checkout__summary {
  grid-column: 2;
  align-self: start;
  position: sticky;
  top: var(--sp-8);
}
.woocommerce-checkout #order_review_heading { margin-top: 0; }

/* Billing + additional stack within the form column */
.woocommerce-checkout .col2-set {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: none;
  padding: 0;
}
/* WooCommerce's float clearfix on .col2-set (content:" "; display:table)
   becomes stray flex items here — the empty ::before picks up the column
   `gap` and adds phantom space above Billing details. Remove them; flexbox
   needs no clearfix. (.woocommerce wrapper raises specificity to beat the
   core 0,2,1 clearfix rule regardless of stylesheet order.) */
.woocommerce-checkout .woocommerce .col2-set::before,
.woocommerce-checkout .woocommerce .col2-set::after { display: none; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout .woocommerce-additional-fields { margin-top: var(--sp-4); }

/* ── Section headings ──────────────────────────────────────── */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

/* ── Field rows + labels ───────────────────────────────────── */
.woocommerce-checkout .form-row { margin: 0 0 var(--sp-4); padding: 0; }

/* Billing / shipping fields as a clean 2-column grid. Paired rows
   sit side by side; wide fields span the full width. Grid gap is
   the single source of gutter spacing — consistent horizontally
   and vertically, no per-field width hacks. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  /* Reset WooCommerce's core .form-row-first/last floats + 47% widths
     so each row fills its grid cell; the grid gap is the only gutter. */
  margin: 0;
  width: auto;
  float: none;
}
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #billing_address_1_field,
.woocommerce-checkout #billing_address_2_field,
.woocommerce-checkout #billing_email_field,
.woocommerce-checkout #shipping_country_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_address_2_field { grid-column: 1 / -1; }

/* `.woocommerce` wrapper added purely to raise specificity to 0,3,1 so
   line-height:1 beats WooCommerce core's `.woocommerce form .form-row label`
   { line-height: 2 } (0,2,2) without relying on stylesheet source order. */
.woocommerce-checkout .woocommerce .form-row label {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-3);
  margin: 0 0 var(--sp-2);
}
.woocommerce-checkout .form-row .required,
.woocommerce-checkout label .required,
.woocommerce-checkout abbr.required {
  color: var(--ink-3) !important;
  border: none !important;
  text-decoration: none;
}
.woocommerce-checkout .optional { color: var(--ink-3); }

/* ── Text inputs + textarea (mirror of the contact form) ───── */
/* NOTE: selectors are limited to WooCommerce's `.input-text` class (and
   `textarea`) on purpose. `.woocommerce-checkout` is the <body> class, so a
   bare `input[type="text"]` here would also match the WP admin-bar search
   box (#adminbar-search) inside #wpadminbar — and because these rules use
   !important, they'd override WP's own theme-leak guard (core ticket #40313)
   and restyle the toolbar. Every real checkout field carries .input-text,
   so scoping to it keeps styling intact without touching the toolbar. */
.woocommerce-checkout .input-text,
.woocommerce-checkout textarea {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  padding: var(--sp-3) var(--sp-4) !important;
  height: 50px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.woocommerce-checkout textarea {
  height: auto !important;
  min-height: 110px !important;
  resize: vertical;
  line-height: 1.5;
}
.woocommerce-checkout .input-text:hover,
.woocommerce-checkout textarea:hover { border-color: var(--ink-3) !important; }
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout textarea:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  background: var(--paper) !important;
  box-shadow: 0 0 0 3px rgba(76, 189, 153, 0.18) !important;
}
.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder { color: var(--ink-3); }
/* WooCommerce validation states — keep them subtle, not red boxes */
.woocommerce-checkout .woocommerce-invalid .input-text { border-color: var(--line-2); }
.woocommerce-checkout .woocommerce-validated .input-text { border-color: var(--line-2); }

/* ── Country / State select2 (styled to match fields) ──────── */
.woocommerce .select2-container { width: 100% !important; }
.woocommerce .select2-container--default .select2-selection--single {
  height: 50px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px;
  /* selectWoo adds its own top/bottom padding here — zero it so the text
     centres in the 48px content box instead of sitting low. */
  padding: 0 var(--sp-10) 0 var(--sp-4);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
}
/* Hide select2's default triangle and use the SAME chevron as the
   contact-page selects (ink-3, turns brand when open) so both forms
   share one dropdown language. */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
/* NB: the chevron below is a SECOND rule on the same selector, placed AFTER the
   `background: var(--paper-2)` shorthand above on purpose — that shorthand resets
   background-image, so this block must stay below it (or be merged in) or the chevron vanishes. */
.woocommerce .select2-container--default .select2-selection--single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2375817B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  cursor: pointer;
}
.woocommerce .select2-container--default .select2-selection--single:hover { border-color: var(--ink-3); }
.woocommerce .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce .select2-container--focus .select2-selection--single {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(76, 189, 153, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234CBD99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.woocommerce .select2-selection__placeholder { color: var(--ink-3); }

/* Native <select> fallback (JS off): same field + chevron treatment */
.woocommerce-checkout select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 50px;
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2375817B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0 var(--sp-10) 0 var(--sp-4);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
}
.woocommerce-checkout select:hover { border-color: var(--ink-3); }
.woocommerce-checkout select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(76, 189, 153, 0.18); }

/* select2 dropdown panel — detached, rounded, branded. select2 is only
   used on checkout/my-account (WPForms uses native selects), so scoping
   by select2 classes is safe. */
.select2-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  overflow: hidden;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(26, 35, 29, 0.10);
}
.select2-container--open .select2-dropdown--above { margin-top: 0; margin-bottom: 4px; }
.select2-container--default .select2-results__option {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-2);
  padding: var(--sp-2) var(--sp-4);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--brand);
  color: #FBF6E9;
}
.select2-container--default .select2-search--dropdown { padding: var(--sp-3); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--sans);
  font-size: 15px;
  background: var(--paper);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(76, 189, 153, 0.18);
}
/* Long dropdown lists (country) — subtle, themed scrollbar */
.select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.select2-results__options::-webkit-scrollbar { width: 10px; }
.select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-results__options::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
  border: 3px solid var(--paper-2);
}
.select2-results__options::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ── Coupon — placed at the top of the right column (above the order box)
   by the .woocommerce grid above; the grid handles its spacing. ─ */
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-top: 0; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--paper-2);
  border: 1px solid var(--brand);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-2);
  font-size: 13px;
  margin: 0;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-info a.showcoupon { color: var(--brand); font-weight: 500; }
.woocommerce-checkout form.checkout_coupon {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.woocommerce-checkout form.checkout_coupon p:first-child { margin-top: 0; font-size: 13px; color: var(--ink-2); }
.woocommerce-checkout form.checkout_coupon .button {
  background: var(--ink);
  color: var(--paper-2);
  width: 100%;
  height: 50px;
}
.woocommerce-checkout form.checkout_coupon .button:hover {
  background: var(--ink);
  color: var(--paper-2);
  opacity: 0.85;
}
.woocommerce-checkout form.checkout_coupon .form-row { margin-bottom: 0; }

/* ── Order summary card (sidebar) ──────────────────────────── */
.woocommerce-checkout #order_review {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--sp-6);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-5);
  font-size: 15px;
  /* Kill WooCommerce core's outer .shop_table box border + rounding;
     keep only the horizontal row dividers (cell border-bottoms below). */
  border: none !important;
  border-radius: 0 !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  border-left: none !important;
  border-right: none !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-align: left;
  padding: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child { text-align: right; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody th {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td { text-align: right; color: var(--ink); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { color: var(--ink); }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  padding: var(--sp-3) 0;
  border: none;
  color: var(--ink-2);
  font-weight: 400;
  text-align: left;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; color: var(--ink); }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}

/* ── Payment methods box ───────────────────────────────────── */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  margin-top: var(--sp-5);
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 var(--sp-2); }
/* Payment method label (e.g. "Cash on delivery") */
.woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  display: inline;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--brand); margin-right: var(--sp-2); }
.woocommerce-checkout #payment .woocommerce-info,
.woocommerce-checkout #payment .woocommerce-notice {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-2);
  font-size: 14px;
}
.woocommerce-checkout #payment .woocommerce-info::before { display: none; }
/* Payment description box — div.payment_box to beat WooCommerce core's
   `div.payment_box` (kill its lavender bg + triangle pointer). */
.woocommerce-checkout #payment div.payment_box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px;
  color: var(--ink-2);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box p { margin: 0; }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 13px; color: var(--ink-3); }
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 var(--sp-4); }

/* ── Place order button (dark pill, matches cart CTA) ──────── */
.woocommerce-checkout #payment .form-row.place-order,
.woocommerce-checkout .place-order { padding: 0; margin: 0; }
.woocommerce-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .12s;
}
.woocommerce-checkout #place_order:hover { background: var(--ink); opacity: 0.85; color: var(--paper-2); }

/* ── Checkbox rows (ship to different address, notes toggle) ─ */
.woocommerce-checkout .woocommerce-account-fields label.checkbox,
.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.woocommerce-checkout input[type="checkbox"] { accent-color: var(--brand); width: 18px; height: 18px; }

/* ── Responsive: stack as a single flex column, keeping the same order
   (billing → coupon → order summary). form stays display:contents so its
   children join the flex flow; `order` overrides DOM order. ──────── */
@media (max-width: 900px) {
  .woocommerce-checkout .woocommerce { display: flex; flex-direction: column; }
  /* dissolve the form so billing, summary and coupon become flex siblings we
     can reorder; sticky is desktop-only so display:contents is safe here. */
  .woocommerce-checkout form.checkout { display: contents; }
  .woocommerce-checkout #customer_details { order: 1; }
  .woocommerce-checkout .woocommerce-form-coupon-toggle { order: 2; margin-top: var(--sp-10); }
  .woocommerce-checkout form.checkout_coupon { order: 3; }
  .woocommerce-checkout .sb-checkout__summary { order: 4; position: static; margin-top: 0; }
}
@media (max-width: 560px) {
  /* Collapse ALL paired rows (First|Last, Suburb|State, Postcode|Phone)
     to a single column on phones by making the field grid one column. */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Free shipping progress nudge */
.sb-cart__shipping-nudge {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sb-cart__nudge-text {
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sb-cart__nudge-text strong { color: var(--ink); }
.sb-cart__nudge-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.sb-cart__nudge-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width .4s ease;
}
.sb-cart__shipping-nudge--achieved .sb-cart__nudge-text { color: var(--brand); }
.sb-cart__shipping-nudge--achieved .rings-svg { flex-shrink: 0; }

/* Trust line */
.sb-cart__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-3);
  justify-content: center;
}
.sb-cart__trust svg { flex-shrink: 0; color: var(--brand); }

/* Empty cart — editorial treatment */
.sb-cart__empty { display: flex; flex-direction: column; gap: var(--sp-20); }

.sb-cart__empty-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.sb-cart__empty-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.sb-cart__empty-heading { margin: 0; color: var(--ink); }
.sb-cart__empty-sub { color: var(--ink-2); max-width: 420px; margin: 0; }
.sb-cart__empty-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.sb-cart__empty-motif {
  flex-shrink: 0;
  color: var(--brand);
  opacity: 0.18;
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

/* Popular picks strip */
.sb-cart__empty-products { display: flex; flex-direction: column; gap: var(--sp-5); }
.sb-cart__empty-products-heading { color: var(--ink-3); }
.sb-cart__empty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 900px) {
  .sb-cart__empty-motif { width: 220px; right: -40px; }
  .sb-cart__empty-heading { font-size: 48px; line-height: 46px; }
}
@media (max-width: 600px) {
  .sb-cart__empty-hero { padding: var(--sp-10) 0; }
  .sb-cart__empty-motif { display: none; }
  .sb-cart__empty-grid { grid-template-columns: 1fr; }
  .sb-cart__empty-heading { font-size: 40px; line-height: 40px; }
}

/* ── Cart responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .sb-cart__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .sb-cart__summary { position: static; }
}
@media (max-width: 600px) {
  .sb-cart { padding: var(--sp-8) 0 var(--sp-20); }
  .sb-cart__item { grid-template-columns: 60px 1fr; grid-template-rows: auto auto; }
  .sb-cart__item-right { flex-direction: row-reverse; align-items: center; grid-column: 1 / -1; justify-content: space-between; min-width: 0; }
  .sb-cart__summary { border-radius: 16px; padding: var(--sp-5); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-editorial { padding: var(--sp-4) 0 var(--sp-4); }
  .hero-editorial__copy {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-10);
  }
  .hero-editorial__intro { flex: 1 1 0; min-width: 0; gap: var(--sp-4); }
  .hero-editorial__intro p { max-width: none; }
  .hero-editorial__actions {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: var(--sp-8);
    border-left: 1px solid var(--line);
    gap: var(--sp-4);
  }
  .hero-editorial__actions .hero-ctas { flex-wrap: wrap; gap: var(--sp-2); }
  .hero-editorial__actions .btn { white-space: nowrap; }
  .hero-editorial__stats {
    grid-template-columns: repeat(2, 1fr);
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    gap: var(--sp-5) var(--sp-4);
  }

  /* Card padding — 16px base across the site at tablet width */
  .hero-editorial__card-top { padding: var(--sp-4); }
  .hero-editorial__card-bottom { padding: var(--sp-4); }
  .hero-editorial__card-image { padding: 0; }
  .hero-editorial__proof { padding: var(--sp-4); margin: 0 var(--sp-4) var(--sp-4); }
  .product-card { padding: var(--sp-4); }
  .hot-cold__panel { padding: var(--sp-4); min-height: 380px; }
  .product-pairing { padding: var(--sp-4); }
  .product-pairing__item { padding: var(--sp-4); }
}
@media (max-width: 1440px) and (min-width: 1025px) {
  /* Card padding — 20px (sp-5) base across the site at laptop width */
  .hero-editorial__card-top { padding: var(--sp-5); }
  .hero-editorial__card-bottom { padding: var(--sp-5); }
  .hero-editorial__card-image { padding: 0; }
  .hero-editorial__proof { padding: var(--sp-5); margin: 0 var(--sp-5) var(--sp-5); }
  .product-card { padding: var(--sp-5); }
  .hot-cold__panel { padding: var(--sp-5); min-height: 420px; }
  .product-pairing { padding: var(--sp-5); }
  .product-pairing__item { padding: var(--sp-5); }
}
@media (max-width: 1024px) {
  .display-xl { font-size: 80px; line-height: 72px; letter-spacing: -3.2px; }
  .display-lg { font-size: 64px; line-height: 61px; letter-spacing: -1.92px; }
  .display-md { font-size: 48px; line-height: 46px; letter-spacing: -1.44px; }
  .hero-editorial__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "card" "stats"; row-gap: var(--sp-8); }
  .hero-editorial__copy { width: 100%; }
  .hero-editorial__card { width: 100%; }
  .hero-editorial__card-image { aspect-ratio: 1800 / 886; }
  .hero-editorial__proof { display: none; }
  .product-range { --range-cols: 2; --range-gap: 16px; }  /* 2 full cards + a bleed on tablet */
  .how-it-works__grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .site-footer__grid { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
  .site-footer__brand { flex: 0 0 auto; width: 100%; }
  .site-footer__nav-group { width: 100%; justify-content: flex-end; }
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .container, .container-wide { padding: 0 var(--sp-4); }
  .display-xl { font-size: 56px; line-height: 50px; letter-spacing: -2.24px; }
  .display-lg { font-size: 48px; line-height: 46px; letter-spacing: -1.44px; }
  .display-md { font-size: 36px; line-height: 34px; letter-spacing: -1.08px; }
  .h1 { font-size: 32px; line-height: 40px; }
  .bottom-cta__title { font-size: 64px; line-height: 58px; letter-spacing: -2.56px; }
  .stat-num { font-size: 32px; line-height: 36px; }
  .activation-demo__grid, .use-cases__grid, .faq-teaser__grid { flex-direction: column; }
  .hot-cold__grid { flex-direction: column; }
  .activation-demo__stage { width: 100%; min-height: 340px; aspect-ratio: auto; }
  .activation-demo__copy { flex: 0 0 auto; width: 100%; }
  .use-case { flex: 0 0 auto; width: 100%; }
  .faq-teaser__intro { flex: 0 0 auto; width: 100%; position: static; }
  .faq-accordion { flex: 0 0 auto; width: 100%; }
  .how-it-works__grid { grid-template-columns: 1fr; }
  /* Mobile: no slider — stack the first four cards with the button centred below */
  .product-range__slider { margin-left: 0; margin-right: 0; }
  .product-range__slider::before, .product-range__slider::after { display: none; } /* no edge fades */
  .product-range__track {
    display: flex; flex-direction: column; gap: var(--sp-4);
    overflow: visible; padding: 0; scroll-snap-type: none;
  }
  .product-range__track > .product-card { flex: 0 0 auto; width: 100%; scroll-snap-align: none; }
  .product-range__track > .product-card:nth-child(n+5) { display: none; } /* show ~4, rest via "View full range" */
  .product-range__foot { justify-content: center; }
  .product-range__nav { display: none; }  /* no arrows on mobile */
  .site-footer__grid { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
  .site-footer__nav-group { flex-direction: column; width: 100%; gap: var(--sp-6); }
  .hero-editorial__stats { grid-template-columns: repeat(2,1fr); }
  .product-range__header, .how-it-works__header { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .how-it-works__header-nav { width: 100%; flex-wrap: wrap; }
  .how-it-works__header-nav .btn { flex: 1 1 0; justify-content: center; }
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .hero-editorial { padding: var(--sp-10) 0 var(--sp-16); }
  .activation-demo, .product-range, .hot-cold, .how-it-works, .use-cases, .faq-teaser { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
  .hot-cold__panel { padding: var(--sp-5); flex: 0 0 auto; min-height: 0; }
}

/* ============================================================
   ADDITIONS
   ============================================================ */

/* GST suffix */
.price-suffix { font-size:11px; font-weight:400; color:var(--ink-3); letter-spacing:0; font-family:var(--sans); }

/* Screen reader only */
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Mobile nav drawer ───────────────────────────────────── */
/* NB: .site-header stays position:sticky (defined in the header block);
   the drawer/backdrop use position:fixed so they sit above it regardless. */
.site-header__mobile-toggle { display: none; }

/* Backdrop — sits behind the drawer, covers the whole viewport */
.nav-drawer__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(26,35,29,0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-drawer__backdrop.is-open {
  display: block;
  opacity: 1;
}

/* Drawer panel — slides in from right */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(360px, 85vw);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open {
  transform: translateX(0);
}

/* Drawer header row: logo area + close button */
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.nav-drawer__head-logo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.nav-drawer__close:hover { background: var(--line); color: var(--ink); }

/* Nav links */
.nav-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-6);
  gap: 0;
  flex: 1;
}
.nav-drawer__nav a {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.12s;
}
.nav-drawer__nav a:last-child { border-bottom: none; }
.nav-drawer__nav a:hover { color: var(--brand); }

/* Drawer footer — cart + social links */
.nav-drawer__footer {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.nav-drawer__cta {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.nav-drawer__cta .btn { flex: 1 1 0; justify-content: center; }

/* Hamburger → ✕ morph */
.site-header__mobile-toggle .icon-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.site-header__mobile-toggle { display: none; flex-direction: column; gap: 4px; padding: 0 var(--sp-3); background: transparent; border: none; cursor: pointer; color: var(--ink); margin-right: calc(-1 * var(--sp-3)); }
.site-header__mobile-toggle[aria-expanded="true"] .icon-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-header__mobile-toggle[aria-expanded="true"] .icon-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-header__mobile-toggle[aria-expanded="true"] .icon-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Product card placeholder (rings) */
.product-card__placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--brand); }
.product-card:hover .product-card__placeholder { color:var(--ember); }

/* WooCommerce sale badge override */
.woocommerce span.onsale { background:var(--ember); color:#fff; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:500; font-family:var(--sans); min-height:auto; min-width:auto; line-height:1.4; }

/* Footer social */
.site-footer__social { display:flex; gap:var(--sp-4); margin-top:var(--sp-5); }

/* Footer logo */
.site-footer__logo svg, .site-footer__logo img { height: 64px; width: auto; display: block; }
.site-footer__logo { display: inline-flex; align-items: center; margin-bottom: var(--sp-5); }

@media (max-width: 900px) {
  .site-header__nav { display: none; }
  .site-header__mobile-toggle { display: flex; }
}

/* ============================================================
   SHOP ARCHIVE
   ============================================================ */

/* Shop header — minimal like Yucca */
.shop-header { padding: var(--sp-12) 0 var(--sp-8); background: var(--paper); border-bottom: 1px solid var(--line); }
.shop-header__heading { font-family: var(--sans); font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -1.2px; color: var(--ink); margin: 0; }

/* Filter bar */
.shop-filters { position: sticky; top: var(--header-h); z-index: 20; background: rgba(243,237,222,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* Clear the WP admin bar for logged-in users (customers logged out sit flush at top:0) */
.admin-bar .shop-filters { top: calc(32px + var(--header-h)); }
@media screen and (max-width: 782px) { .admin-bar .shop-filters { top: var(--header-h); } }
.shop-blurb { padding: var(--sp-10) 0 var(--sp-6); background: var(--paper); }
.shop-blurb__inner { max-width: 680px; }
.shop-blurb__heading { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--sp-2); }
.shop-blurb__body { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.shop-blurb { opacity: 1; transition: opacity .18s ease; }
.shop-blurb--visible { opacity: 1; }
.shop-filters__inner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) 0; flex-wrap: wrap; }
.shop-filters__cats { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.shop-filters__sort { position: relative; display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.shop-filters__sort-label { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-3); white-space: nowrap; }
/* Custom sort dropdown — trigger matches the header "Find a product" pill; menu is on-brand */
.shop-sort { position: relative; }
.shop-sort__trigger {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; box-sizing: border-box;
  padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
  cursor: pointer; white-space: nowrap; transition: border-color .18s ease, background-color .18s ease;
}
.shop-sort__trigger:hover { border-color: var(--ink-3); background-color: rgba(26,35,29,0.03); }
.shop-sort__trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.shop-sort__chevron { color: var(--ink-2); flex-shrink: 0; transition: transform .2s ease; }
.shop-sort__trigger[aria-expanded="true"] .shop-sort__chevron { transform: rotate(180deg); }
.shop-sort__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 100%; z-index: 40;
  margin: 0; padding: var(--sp-2); list-style: none;
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 18px 40px -20px rgba(20,23,28,0.35);
  display: flex; flex-direction: column; gap: 2px;
}
.shop-sort__menu[hidden] { display: none; }
.shop-sort__option {
  padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.shop-sort__option:hover { background: var(--brand-soft); color: var(--ink); }
.shop-sort__option[aria-selected="true"] { color: var(--ink); background: rgba(76,189,153,0.14); }
.shop-sort__option:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.shop-filter-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-4); border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s; white-space: nowrap; }
.shop-filter-pill:hover { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-text); }
.shop-filter-pill--active { background: var(--ink); border-color: var(--ink); color: var(--paper-2); }

/* Grid */
.shop-grid-wrap { padding: var(--sp-10) 0 var(--sp-20); }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.shop-grid--loading { opacity: 0.5; pointer-events: none; transition: opacity .2s; }
.shop-grid__empty { grid-column: 1/-1; text-align: center; padding: var(--sp-20) 0; font-size: 18px; color: var(--ink-2); }

/* Interstitial banners — full-width section breaking the grid */
.shop-banner { width: 100%; padding: var(--sp-20) 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.shop-banner__inner { max-width: 1560px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: var(--sp-10); width: 100%; }
.shop-banner__icon { flex-shrink: 0; opacity: 0.8; }
.shop-banner__copy { position: relative; z-index: 1; }
.shop-banner__heading { font-size: 48px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--sp-3); }
.shop-banner__body { font-size: 18px; line-height: 1.55; opacity: 0.85; max-width: 480px; }
.shop-banner__rings { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0.12; pointer-events: none; }

/* Scroll-reveal animation */
.shop-banner { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease; }
.shop-banner.is-visible { opacity: 1; transform: translateY(0); }
.shop-banner__icon { opacity: 0; transform: translateX(-20px); transition: opacity .6s ease .15s, transform .6s ease .15s; }
.shop-banner.is-visible .shop-banner__icon { opacity: 0.8; transform: translateX(0); }
.shop-banner__heading { opacity: 0; transform: translateY(16px); transition: opacity .6s ease .2s, transform .6s ease .2s; }
.shop-banner.is-visible .shop-banner__heading { opacity: 1; transform: translateY(0); }
.shop-banner__body { opacity: 0; transform: translateY(12px); transition: opacity .6s ease .32s, transform .6s ease .32s; }
.shop-banner.is-visible .shop-banner__body { opacity: 0.85; transform: translateY(0); }

/* Load more */
.shop-load-more { display: flex; justify-content: center; padding: var(--sp-10) 0 0; }

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */

/* Breadcrumb */
.product-breadcrumb { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.product-breadcrumb nav { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--ink-3); }
.product-breadcrumb a { color: var(--ink-2); transition: color .12s; }
.product-breadcrumb a:hover { color: var(--brand); }
.product-breadcrumb span[aria-current] { color: var(--ink); font-weight: 500; }

/* Main layout */
.product-layout { padding: var(--sp-12) 0; background: var(--paper); }
.product-layout__grid { display: flex; flex-direction: row; gap: 80px; align-items: start; width: 100%; }

/* Gallery */
.product-gallery { display: flex; flex-direction: column; gap: var(--sp-4); flex: 1 1 0; min-width: 0; }
.product-gallery__main { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: var(--paper-2); }
.product-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .26s ease; }
.product-gallery__img.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .product-gallery__img { transition: none; } }
.product-gallery__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--brand); }
.product-gallery__badge { position: absolute; top: var(--sp-5); left: var(--sp-5); }
.product-gallery__thumbs { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.product-gallery__thumb { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--paper-2); padding: 0; display: flex; align-items: center; justify-content: center; transition: border-color .15s; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.is-active, .product-gallery__thumb:hover { border-color: var(--brand); }

/* Purchase panel */
.product-purchase { position: sticky; top: calc(80px + var(--sp-6)); flex: 1 1 0; min-width: 0; }
.product-purchase__inner { display: flex; flex-direction: column; gap: var(--sp-6); }
.product-purchase__header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.product-purchase__pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.product-purchase__name { font-family: var(--sans); font-weight: 500; font-size: 40px; line-height: 1.0; letter-spacing: -1.2px; color: var(--ink); }
.product-purchase__use { font-size: 16px; color: var(--ink-3); }
.product-purchase__short-desc { color: var(--ink-2); }
.product-purchase__price { font-family: var(--mono); font-size: 36px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; }
.product-purchase__price .woocommerce-Price-amount { font-size: inherit; }

/* Trust badges */
.product-trust { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-trust__item { display: flex; align-items: center; gap: var(--sp-3); font-size: 14px; color: var(--ink-2); }
.product-trust__item svg { color: var(--brand); flex-shrink: 0; }

/* ATC row */
.product-purchase__atc { display: flex; gap: var(--sp-3); align-items: stretch; }
.product-qty { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; height: 48px; }
.product-qty__btn { width: 44px; height: 100%; border: none; background: transparent; font-size: 18px; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; flex-shrink: 0; }
.product-qty__btn:hover { background: var(--line); }
.product-qty__input { width: 44px; text-align: center; border: none; background: transparent; font-family: var(--mono); font-size: 15px; color: var(--ink); -moz-appearance: textfield; }
.product-qty__input::-webkit-outer-spin-button, .product-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.btn-atc { flex: 1; justify-content: center; }

/* Pairing guide */
.product-pairing { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--paper-2); border-radius: 20px; border: 1px solid var(--line); }
.product-pairing__heading { color: var(--ink-3); margin-bottom: var(--sp-1); }
.product-pairing__note { color: var(--ink-3); margin: 0; }
.product-pairing__items { display: flex; flex-direction: column; gap: var(--sp-3); }
.product-pairing__item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3); border-radius: 16px; border: 1px solid var(--line); background: var(--paper-2); transition: border-color .15s; text-decoration: none; color: inherit; }
.product-pairing__item:hover { border-color: var(--brand); }
.product-pairing__item svg { margin-left: auto; color: var(--ink-3); flex-shrink: 0; }
.product-pairing__item-img { width: 52px; height: 52px; border-radius: 10px; background: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.product-pairing__item-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.product-pairing__item-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.product-pairing__item-label { color: var(--ink-3); }
.product-pairing__item-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.product-pairing__item-price { font-size: 13px; color: var(--ink-2); }

/* Delivery info */
.product-delivery { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--paper-2); border-radius: 20px; border: 1px solid var(--line); }
.product-delivery__row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.product-delivery__row svg { flex-shrink: 0; color: var(--ink-3); margin-top: 2px; }
.product-delivery__line { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* Accordion */
.product-accordion-wrap { padding: var(--sp-12) 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-accordion { max-width: 720px; }
.product-acc-body { padding: 0 0 var(--sp-6); font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.product-acc-body p { margin: 0 0 var(--sp-4); }
.product-acc-body ul { list-style: disc; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.product-acc-body strong { color: var(--ink); font-weight: 600; }

/* Related products */
.product-related { padding: var(--sp-16) 0; background: var(--paper); }
.product-related__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.product-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .product-related__grid { grid-template-columns: repeat(2, 1fr); } }

/* Product FAQs */
.product-faqs { padding: var(--sp-20) 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.product-faqs__grid { display: flex; flex-direction: row; gap: 80px; align-items: flex-start; width: 100%; }
.product-faqs__intro { position: sticky; top: 100px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); flex: 1 1 0; min-width: 0; }
.product-faqs__list { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }

/* ============================================================
   SHOP + PRODUCT RESPONSIVE
   ============================================================ */

/* ── Tablet: 1025px → 768px ─────────────────────────────── */
@media (max-width: 1024px) {
  /* Shop */
  .shop-grid { grid-template-columns: repeat(2, 1fr); }

  /* Product layout: stack to single column, gap tightened */
  .product-layout { padding: var(--sp-10) 0; }
  .product-layout__grid {
    flex-direction: column;
    gap: var(--sp-8);
  }
  /* On tablet purchase panel goes below gallery — no reorder needed */
  .product-purchase { position: static; flex: 0 0 auto; width: 100%; }
  .product-gallery { flex: none; width: 100%; }

  /* FAQs: stack */
  .product-faqs__grid {
    flex-direction: column;
    gap: var(--sp-8);
  }
  .product-faqs__intro { position: static; flex: 0 0 auto; width: 100%; }
  .product-faqs__list { flex: 0 0 auto; width: 100%; }
}

/* ── Mobile: ≤ 768px ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Shop */
  .shop-header__heading { font-size: 28px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .shop-filters__inner { flex-wrap: wrap; }
  .shop-banner__heading { font-size: 32px; }

  /* Product cards: tighter padding on mobile */
  .product-card { padding: var(--sp-4); border-radius: 20px; }
  /* Stack footer when cards are narrow (2-col on mobile) */
  .product-card__footer { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .product-card__footer .btn { width: 100%; justify-content: center; }
  .product-card__footer .card-atc { width: 100%; }
  .product-card__footer .card-qty { width: 100%; justify-content: space-between; }

  /* Product layout: gallery first, purchase below — matches HTML source order */
  .product-layout { padding: var(--sp-6) 0; }
  .product-layout__grid { gap: var(--sp-6); }

  /* Gallery: smaller thumbnails, tighter gap */
  .product-gallery__main { border-radius: 20px; }
  .product-gallery__thumbs { gap: var(--sp-2); }
  .product-gallery__thumb { width: 60px; height: 60px; border-radius: 12px; }

  /* Purchase panel typography */
  .product-purchase__name { font-size: 28px; letter-spacing: -0.8px; }
  .product-purchase__price { font-size: 28px; }
  .product-purchase__inner { gap: var(--sp-4); }

  /* ATC row: full-width button on narrow screens */
  .product-purchase__atc { flex-direction: row; gap: var(--sp-2); }
  .btn-atc { flex: 1 1 0; }

  /* Accordion section */
  .product-accordion-wrap { padding: var(--sp-8) 0; }

  /* Related products heading row */
  .product-related__header { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  /* FAQs */
  .product-faqs { padding: var(--sp-12) 0; }
  .product-faqs__grid { gap: var(--sp-6); }
}

/* ── Small mobile: ≤ 480px ───────────────────────────────── */
@media (max-width: 480px) {
  /* 16px page margin on all containers */
  .container, .container-wide { padding: 0 var(--sp-4); }
  .shop-banner__inner { padding: 0 var(--sp-4); }
  .woocommerce-page .woocommerce { padding-left: var(--sp-4); padding-right: var(--sp-4); }

  /* Shop */
  .shop-grid { grid-template-columns: 1fr; }
  .shop-banner__heading { font-size: 26px; }
  .shop-banner__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }

  /* Product: tighter container padding */
  .product-breadcrumb nav { font-size: 12px; }
  .product-layout { padding: var(--sp-5) 0; }
  .product-layout__grid { gap: var(--sp-5); }

  /* Gallery: full bleed feel, even tighter radius */
  .product-gallery__main { border-radius: 16px; }
  .product-gallery__thumb { width: 52px; height: 52px; border-radius: 10px; }

  /* Purchase panel */
  .product-purchase__name { font-size: 24px; letter-spacing: -0.6px; }
  .product-purchase__price { font-size: 24px; }
  .product-purchase__inner { gap: var(--sp-3); }

  /* ATC: stepper + button full width */
  .product-purchase__atc { gap: var(--sp-2); }
  .product-qty { flex-shrink: 0; }
  .btn-atc { font-size: 15px; padding: 0 var(--sp-4); }

  /* Delivery + pairing: tighter padding */
  .product-delivery { padding: var(--sp-4); }
  .product-pairing { padding: var(--sp-4); }
}

/* ── Product image lightbox ───────────────────────────────── */
#product-lightbox { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
#product-lightbox.is-open { display: flex; }
.product-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); cursor: zoom-out; }
.product-lightbox__img { position: relative; max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 12px; z-index: 1; }
.product-lightbox__close { position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 2; background: rgba(255,255,255,0.15); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.product-lightbox__close:hover { background: rgba(255,255,255,0.25); }

/* ── Contact page ──────────────────────────────────────────── */
.contact-page { background: var(--paper); }

.contact-page__hero { position: relative; overflow: hidden; padding: var(--sp-20) 0 var(--sp-16); }
.contact-page__hero-rings { position: absolute; top: 50%; right: -120px; transform: translateY(-50%); color: var(--brand-soft); opacity: 0.5; pointer-events: none; }
.contact-page__hero .container { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.contact-page__intro { color: var(--ink-2); max-width: 560px; margin: 0; }

.contact-page__grid { display: flex; gap: var(--sp-12); align-items: flex-start; padding-bottom: var(--sp-20); }
.contact-page__form-col { flex: 1 1 0; min-width: 0; }
.contact-page__sidebar { flex: 0 0 340px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: var(--sp-8); }

.contact-page__sidebar-heading { margin: 0; }
.contact-page__sidebar-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); width: 100%; }
.contact-page__sidebar-label { color: var(--ink-3); }
.contact-page__sidebar-value { color: var(--ink); font-size: 16px; line-height: 1.5; text-decoration: none; }
a.contact-page__sidebar-value:hover { color: var(--brand); }
.contact-page__sidebar-response { display: inline-flex; align-items: center; gap: var(--sp-2); width: auto; align-self: flex-start; flex-shrink: 0; padding: var(--sp-2) var(--sp-4); background: var(--brand-soft); border-radius: 999px; font-size: 13px; color: var(--brand-text); white-space: nowrap; }
.contact-page__sidebar-response-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

.contact-page__faq { padding-bottom: var(--sp-24); }
.contact-page__faq-heading { margin: 0 0 var(--sp-8); }
.contact-page__faq-list { max-width: 760px; }
.contact-page__faq-link { margin: var(--sp-8) 0 0; }

/* ── WPForms style overrides — Yucca-inspired bordered-field aesthetic,
   adapted to Shin Bio's design tokens ── */
.contact-page__form-card { background: transparent; border: none; border-radius: 0; padding: 0; }
.contact-page__form-missing { text-align: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: var(--sp-8); }
.contact-page__form-missing p { color: var(--ink-2); margin: 0; }

/* WPForms Modern Markup drives field appearance through CSS custom
   properties (--wpforms-field-border-radius, --wpforms-field-background-color,
   --wpforms-field-border-color, etc.) which are scoped with high specificity
   via #wpforms-{form_id}. Confirmed via live DevTools inspection: individual
   property overrides lose to these variables even with !important, because
   WPForms' own rules also consume the variables with matching/higher
   specificity. Overriding the variables themselves is the correct fix. */
.contact-page__form-card .wpforms-container {
  --wpforms-field-border-radius: 10px !important;
  --wpforms-field-border-size: 1px !important;
  --wpforms-field-border-style: solid !important;
  --wpforms-field-background-color: var(--paper-2) !important;
  --wpforms-field-border-color: var(--line-2) !important;
  --wpforms-field-text-color: var(--ink) !important;
  --wpforms-field-size-font-size: 15px !important;
  --wpforms-field-size-input-height: 50px !important;
  --wpforms-field-size-padding-h: var(--sp-4) !important;
  --wpforms-label-color: var(--ink-3) !important;
  --wpforms-label-sublabel-color: var(--ink-3) !important;
  --wpforms-button-border-radius: 999px !important;
  --wpforms-button-background-color: var(--brand) !important;
  --wpforms-button-border-color: var(--brand) !important;
  --wpforms-button-text-color: #FBF6E9 !important;
}

.contact-page__form-card .wpforms-container { margin: 0 !important; font-family: var(--sans); }
/* Grid layout driven by CSS classes set on each field in the WPForms
   Builder (Advanced tab → CSS Classes): contact-enquiry-type-field,
   contact-name-field, contact-email-field, contact-phone-field,
   contact-message-field. Replaces the old approach of a JS-inserted
   wrapper div around Email+Phone (theme.js initContactFormPairing,
   removed) — that depended on Email/Phone being adjacent siblings in
   the DOM and broke silently if field order changed. Named classes are
   stable regardless of source order or how many fields sit between them. */
.contact-page__form-card .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.contact-page__form-card .contact-enquiry-type-field,
.contact-page__form-card .contact-name-field,
.contact-page__form-card .contact-email-field,
.contact-page__form-card .contact-phone-field,
.contact-page__form-card .contact-message-field {
  grid-column: 1 / -1;
}
.contact-page__form-card .wpforms-field { padding: 0 !important; margin: 0 !important; }
/* Hide all field labels — placeholder text does the job.
   Covers above-field labels (.wpforms-field-label),
   alternate label class (.wpforms-field-label-inline),
   First/Last sublabels under Name (.wpforms-field-sublabel),
   and orphaned required asterisks (.wpforms-required-label). */
.contact-page__form-card .wpforms-field-label,
.contact-page__form-card .wpforms-field-label-inline,
.contact-page__form-card .wpforms-field-sublabel,
.contact-page__form-card .wpforms-required-label { display: none !important; }
/* With all labels gone the Name field needs no extra bottom clearance. */
.contact-page__form-card .wpforms-field-name { padding-bottom: 0 !important; }

.contact-page__form-card input[type="text"],
.contact-page__form-card input[type="email"],
.contact-page__form-card input[type="tel"],
.contact-page__form-card input[type="number"],
.contact-page__form-card textarea,
.contact-page__form-card select,
.contact-page__form-card input.wpforms-field-small,
.contact-page__form-card input.wpforms-field-medium,
.contact-page__form-card input.wpforms-field-large,
.contact-page__form-card select.wpforms-field-small,
.contact-page__form-card select.wpforms-field-medium,
.contact-page__form-card select.wpforms-field-large,
.contact-page__form-card textarea.wpforms-field-small,
.contact-page__form-card textarea.wpforms-field-medium,
.contact-page__form-card textarea.wpforms-field-large {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 100% !important;
  /* WPForms' own CSS sets .wpforms-field-medium to max-width: 60% (and
     other size classes to their own percentages) — width:100% alone
     doesn't override that, since max-width independently caps the
     rendered width below it. Root cause of fields/selects rendering
     at ~60% of their container instead of filling it, confirmed via
     live cascade inspection of wpforms-full.min.css. */
  max-width: 100% !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
  border-color: var(--line-2) !important;
  border-radius: 10px !important;
  padding: var(--sp-3) var(--sp-4) !important;
  height: 50px !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, background .15s ease;
}
.contact-page__form-card textarea { height: auto !important; min-height: 120px !important; resize: vertical; padding-top: var(--sp-3) !important; }
/* Placeholders were rendering invisible (unset colour + low opacity) — force the muted caption tone */
.contact-page__form-card input::placeholder,
.contact-page__form-card textarea::placeholder { color: var(--ink-3) !important; opacity: 1 !important; }
.contact-page__form-card select:has(option[value=""]:checked),
.contact-page__form-card select.wpforms-field-required-invalid,
.contact-page__form-card select:invalid { color: var(--ink-3) !important; }
.contact-page__form-card input:hover,
.contact-page__form-card textarea:hover,
.contact-page__form-card select:hover { border-color: var(--ink-3); }
.contact-page__form-card input:focus,
.contact-page__form-card input:focus:invalid,
.contact-page__form-card textarea:focus,
.contact-page__form-card textarea:focus:invalid,
.contact-page__form-card select:focus,
.contact-page__form-card select:focus:invalid {
  outline: none !important;
  border-color: var(--brand) !important;
  border-width: 1px !important;
  background: var(--paper) !important;
  box-shadow: 0 0 0 3px rgba(76, 189, 153, 0.18) !important;
}
.contact-page__form-card input::placeholder,
.contact-page__form-card textarea::placeholder { color: var(--ink-3); }

/* Native select: custom chevron, no default browser arrow */
.contact-page__form-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2375817B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}
.contact-page__form-card select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234CBD99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-page__form-card .wpforms-field-checkbox ul,
.contact-page__form-card .wpforms-field-radio ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-page__form-card .wpforms-field-checkbox li,
.contact-page__form-card .wpforms-field-radio li { display: flex; align-items: center; gap: var(--sp-2); }
.contact-page__form-card .wpforms-field-checkbox input,
.contact-page__form-card .wpforms-field-radio input { width: auto; flex-shrink: 0; accent-color: var(--brand); }

/* Name field's First/Last sub-row — separate from the Email/Phone grid
   pairing above, since WPForms renders Name's First/Last as a nested
   row inside one field rather than two separate grid items. */
.contact-page__form-card .wpforms-field-name .wpforms-field-row,
.contact-page__form-card .wpforms-field-row {
  display: flex; gap: var(--sp-4);
  width: 100% !important; max-width: 100% !important;
  padding: 0 !important; margin: 0 !important;
  box-sizing: border-box;
  /* This row wrapper shares the .wpforms-field-medium class with real
     inputs (WPForms reuses size classes on the row div), which used to
     pull it into the input box-styling rule above and create a visible
     outer box around the First/Last inputs. Explicitly neutralized here
     now that the input rule is scoped to actual form-control tags only. */
  border: none !important;
  background: transparent !important;
  height: auto !important;
}
.contact-page__form-card .wpforms-field-row .wpforms-field-row-block {
  flex: 1 1 0; min-width: 0; padding: 0 !important; margin: 0 !important;
}
/* WPForms injects clearfix :before/:after pseudo-elements on .wpforms-field-row
   with display:table. In a block context these are invisible; inside a flex
   container they become real flex items and each consume a gap slot, producing
   a phantom 16px inset at both the left and right edges of the First/Last row.
   Setting display:none removes them from flex layout entirely. */
.contact-page__form-card .wpforms-field-row::before,
.contact-page__form-card .wpforms-field-row::after {
  display: none !important;
}

.contact-page__form-card button[type="submit"],
.contact-page__form-card .wpforms-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 48px; padding: 0 var(--sp-8); border-radius: 999px; border: none;
  background: var(--brand); color: #FBF6E9; font-family: var(--sans);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  width: auto; align-self: flex-start; flex-shrink: 0; white-space: nowrap;
  margin-top: var(--sp-2);
  transition: transform .12s ease, opacity .12s ease;
}
.contact-page__form-card button[type="submit"]:hover,
.contact-page__form-card .wpforms-submit:hover { transform: translateY(-1px); opacity: 0.92; }

.contact-page__form-card .wpforms-error,
.contact-page__form-card .wpforms-field-description.wpforms-error { color: var(--ember); font-size: 13px; margin-top: var(--sp-1); }
.contact-page__form-card .wpforms-confirmation-container-full { background: var(--brand-soft); border-radius: 16px; padding: var(--sp-6); color: var(--brand-text); }

@media (max-width: 1024px) and (min-width: 769px) {
  .contact-page__grid { gap: var(--sp-8); }
  .contact-page__sidebar { flex: 0 0 300px; padding: var(--sp-6); }
}

@media (max-width: 768px) {
  .contact-page__hero { padding: var(--sp-12) 0 var(--sp-10); }
  .contact-page__grid { flex-direction: column; gap: var(--sp-8); padding-bottom: var(--sp-16); }
  .contact-page__form-col { width: 100%; flex: none; }
  .contact-page__sidebar { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
  .contact-page__form-card { padding: 0; min-width: 0; width: 100%; box-sizing: border-box; }
  .contact-page__form-card .wpforms-field-row { flex-direction: column; gap: var(--sp-3); }
  .contact-page__form-card .wpforms-field-row .wpforms-field-row-block { flex: none; width: 100%; }
  /* WPForms sets .wpforms-one-half { width: 50% } — needs !important to override */
  .contact-page__form-card .wpforms-field-row .wpforms-one-half,
  .contact-page__form-card .wpforms-field-row .wpforms-three-sixths,
  .contact-page__form-card .wpforms-field-row .wpforms-two-fourths { width: 100% !important; }
  .contact-page__faq { padding-bottom: var(--sp-16); }
}

/* ============================================================
   Custom enquiry-type dropdown  (.sb-select-*)
   JS in theme.js builds this overlay on top of the native
   <select> inside .contact-enquiry-type-field. The native
   select is hidden visually but kept for form submission.
   ============================================================ */

/* Wrapper — positions the listbox absolutely below the trigger */
/* Wrapper needs position:relative so the absolute listbox anchors to it.
   Scoped to .contact-page__form-card to beat any WPForms resets. */
.contact-page__form-card .sb-select-wrapper {
  position: relative !important;
  width: 100%;
}

/* Hide the native <select> in CSS as a belt-and-suspenders on top of the JS
   inline style. Prevents the native select's scrollbar bleeding into the
   wrapper on mobile. Needs !important on overflow to beat WPForms' wildcard:
   div.wpforms-container-full, div.wpforms-container-full * { overflow: visible }
   
   The field div (.contact-enquiry-type-field) also gets overflow:hidden auto from
   WPForms — this clips the absolutely-positioned listbox and causes a scrollbar.
   Force overflow:visible on the field div so the listbox can escape it. */
.contact-page__form-card .contact-enquiry-type-field {
  overflow: visible !important;
}
.contact-page__form-card .contact-enquiry-type-field select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* Trigger button — WPForms resets ALL button styles inside its container:
   div.wpforms-container-full button { background:none; border:0; padding:0; height:auto }
   We must out-specificity that rule. Scoping to .contact-page__form-card
   gives us the extra specificity layer needed without !important on everything. */
.contact-page__form-card .sb-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 50px !important;
  padding: var(--sp-3) var(--sp-4) !important;
  box-sizing: border-box !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink-3) !important;   /* placeholder colour when nothing selected */
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  gap: var(--sp-3) !important;
}
.contact-page__form-card .sb-select-trigger:hover { border-color: var(--ink-3) !important; }
.contact-page__form-card .sb-select-wrapper.is-open .sb-select-trigger {
  border-color: var(--brand) !important;
  background: var(--paper) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* When a real value is selected, use ink colour */
.contact-page__form-card .sb-select-trigger.has-value { color: var(--ink) !important; }

/* Trigger text — grows to fill available width, chevron pushed to far right */
.sb-select-trigger-text {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron arrow — fixed to right edge, rotates 180° when open */
.sb-select-chevron {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--ink-3);
  transition: transform .2s ease;
}
.sb-select-wrapper.is-open .sb-select-chevron {
  transform: rotate(180deg);
  color: var(--brand);
}

/* Listbox — WPForms resets position/background/border on all children,
   so scope everything to .contact-page__form-card and use !important.
   position:absolute is critical — without it the open listbox flows
   inline and pushes the rest of the form down.
   padding:0 on listbox so options fill edge-to-edge (no inset gap). */
.contact-page__form-card .sb-select-listbox {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--paper) !important;
  border: 1px solid var(--brand) !important;
  border-top: none !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(26,35,29,0.10) !important;
  overflow: hidden !important;
  display: none !important;
}
.contact-page__form-card .sb-select-wrapper.is-open .sb-select-listbox {
  display: block !important;
}

/* Individual option — fixed height so all rows are equal.
   No border-radius: overflow:hidden on listbox handles corner clipping.
   Hover: --blue background with paper-2 cream text (matches site's
   blue CTA treatment). */
.contact-page__form-card .sb-select-option {
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 0 var(--sp-4) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  color: var(--ink-2) !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  transition: background .12s ease, color .12s ease;
  outline: none;
}
.contact-page__form-card .sb-select-option:hover,
.contact-page__form-card .sb-select-option:focus {
  background: var(--blue) !important;
  color: var(--paper-2) !important;
}
.contact-page__form-card .sb-select-option.is-selected {
  color: var(--ink) !important;
  font-weight: 500 !important;
  background: var(--brand-soft) !important;
}
/* Divider between options */
.contact-page__form-card .sb-select-option + .sb-select-option {
  border-top: 1px solid var(--line) !important;
}
/* WPForms resets: div.wpforms-container-full ul li { margin-bottom: 15px }
   kills equal row height — zero it out. */
.contact-page__form-card .sb-select-listbox .sb-select-option {
  margin-bottom: 0 !important;
}



/* ============================================================
   SHARED MOTION PRIMITIVES
   yab- word-reveal / fade-up / section-reveal / parallax
   (used by the How It Works page reveal + parallax effects)
   ============================================================ */

/* Line-mask word reveal — .yab-line clips, .yab-line-inner slides up */
.yab-line {
  display: block;
  overflow: hidden;
}
.yab-line-inner {
  display: block;
  transform: translateY(105%);
  transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}
.yab-word-reveal.is-revealed .yab-line-inner {
  transform: translateY(0);
}
.yab-word-reveal.is-revealed .yab-line:nth-child(1) .yab-line-inner { transition-delay: 0ms; }
.yab-word-reveal.is-revealed .yab-line:nth-child(2) .yab-line-inner { transition-delay: 85ms; }
.yab-word-reveal.is-revealed .yab-line:nth-child(3) .yab-line-inner { transition-delay: 170ms; }
.yab-word-reveal.is-revealed .yab-line:nth-child(4) .yab-line-inner { transition-delay: 255ms; }

/* Fade + translateY reveal */
.yab-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 320ms;
}
.yab-fade-up.is-revealed { opacity: 1; transform: translateY(0); }

/* Section reveal (staggered via --reveal-delay) */
.yab-section-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.yab-section-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Parallax inner (the wrapper that receives the scroll transform) */
.yab-parallax-inner { will-change: transform; width: 100%; height: 100%; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .yab-line-inner,
  .yab-fade-up,
  .yab-section-reveal {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .yab-parallax-inner { transform: none !important; will-change: auto; }
}

/* Rule 9 note (in Project Rules doc): WPForms wildcard overflow — see Shin-Bio-Project-Rules.md */

/* ============================================================
   HOW IT WORKS PAGE
   ============================================================ */
.hiw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hiw-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex-shrink: 0; }

/* Hero */
.hiw-hero { background: var(--paper); padding: var(--sp-24) 0 var(--sp-16); }
.hiw-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.hiw-hero__title {
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.hiw-hero__intro {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 620px;
}

/* The science */
.hiw-science { background: var(--paper); padding: var(--sp-16) 0; }
.hiw-science__inner { display: flex; flex-direction: row; align-items: center; gap: 80px; }
.hiw-science__copy { flex: 0 0 calc(7 / 12 * 100% - 40px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); min-width: 0; }
.hiw-science__title { font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: var(--sp-2) 0 0; }
.hiw-science__body { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 560px; }
.hiw-science__visual { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; color: var(--brand); }
.hiw-science__rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.55; pointer-events: none; }
.hiw-science__rings .yab-parallax-inner { display: flex; align-items: center; justify-content: center; }
/* line-mask reveal — give each heading line room so the clip doesn't crop glyphs */
.hiw-hero__title .yab-line { line-height: 1.05; }
.hiw-science__title .yab-line,
.hiw-mode__title .yab-line,
.hiw-facts__title .yab-line,
.hiw-faq__title .yab-line { line-height: 1.14; }
.hiw-science__figure { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.hiw-science__figure-num { font-family: var(--mono); font-size: clamp(48px, 5vw, 76px); font-weight: 400; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.hiw-science__figure-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }

/* Using it — heat (ember) & cold (blue) letterbox banners with step cards */
.hiw-mode { padding: var(--sp-6) 0; background: var(--paper); }
.hiw-mode__banner { border-radius: 24px; overflow: hidden; padding: clamp(32px, 4vw, 64px); color: var(--paper-2); }
.hiw-mode--heat .hiw-mode__banner { background: var(--ember); }
.hiw-mode--cold .hiw-mode__banner { background: var(--blue); }
.hiw-mode__note { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: 14px; background: rgba(251, 246, 233, 0.12); border: 1px solid rgba(251, 246, 233, 0.24); }
.hiw-mode__note p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--paper-2); }
.hiw-mode__note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-2); flex-shrink: 0; margin-top: 5px; }
.hiw-mode__head { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); margin-bottom: var(--sp-14); }
.hiw-mode__head-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.hiw-mode .hiw-eyebrow { color: rgba(251, 246, 233, 0.85); }
.hiw-mode .hiw-eyebrow__dot { background: var(--paper-2); }
.hiw-mode__title { font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; color: var(--paper-2); margin: 0; }
.hiw-mode__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 14px; font-weight: 500; color: var(--paper-2); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid rgba(251, 246, 233, 0.4); white-space: nowrap; transition: border-color .2s ease; }
.hiw-mode__link:hover { border-color: var(--paper-2); }

.hiw-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.hiw-mode--cold .hiw-cards { grid-template-columns: repeat(3, 1fr); }
.hiw-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid rgba(251, 246, 233, 0.28);
  border-radius: 16px;
  background: rgba(251, 246, 233, 0.05);
}
.hiw-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(251, 246, 233, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hiw-card__media-icon { width: 30px; height: 30px; color: rgba(251, 246, 233, 0.45); }
.hiw-card__num {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--paper-2);
  background: rgba(26, 35, 29, 0.30);
  padding: 3px 9px;
  border-radius: 999px;
}
.hiw-card__text { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-1) var(--sp-1); }
.hiw-card__title { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--paper-2); margin: 0; }
.hiw-card__body { font-size: 14px; line-height: 1.55; color: rgba(251, 246, 233, 0.78); margin: 0; }

/* Good to know — facts */
.hiw-facts { background: var(--paper); padding: var(--sp-24) 0; }
.hiw-facts__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-12); }
.hiw-facts__title { font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.hiw-facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10) var(--sp-8); }
.hiw-fact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--line-2); }
.hiw-fact__num { font-family: var(--mono); font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.hiw-fact__label { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* FAQ */
.hiw-faq { background: var(--paper-2); padding: var(--sp-24) 0; border-top: 1px solid var(--line); }
.hiw-faq__title { font-size: clamp(28px, 3vw, 44px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--sp-10); }
.hiw-faq__list { max-width: 880px; }

/* Responsive */
@media (max-width: 1024px) {
  .hiw-science__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
  .hiw-science__copy { flex: none; }
  .hiw-science__visual { flex: none; width: 100%; min-height: 300px; }
  .hiw-cards, .hiw-mode--cold .hiw-cards { grid-template-columns: repeat(2, 1fr); }
  .hiw-facts__grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-mode__head { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
}
@media (max-width: 768px) {
  .hiw-hero { padding: var(--sp-16) 0 var(--sp-12); }
  .hiw-facts, .hiw-faq, .hiw-science { padding: var(--sp-16) 0; }
  .hiw-mode { padding: var(--sp-3) 0; }
  .hiw-mode__banner { padding: var(--sp-6); border-radius: 20px; }
  .hiw-cards, .hiw-mode--cold .hiw-cards { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hiw-card { min-height: 0; gap: var(--sp-6); }
  .hiw-facts__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}