/* =====================================================================
   MÜLLWOOD v2 — luxury curl-care, aligned to the real brand
   Palette extracted from mullwood.lk: bright turquoise + deep teal,
   warm ivory light surfaces, soft charcoal ink. Real product photography.
   ===================================================================== */

:root{
  /* ===== STRICT MÜLLWOOD TOKENS — sourced from mullwood.lk =====
     Turquoise   #25C1B2 (site CSS) / cyan labels  -> --turq family
     Deep teal   #0F847F (site CSS) / gift box       -> --turq-deep / dark surfaces
     Logo/ivory  cream brand mark                    -> --cream / --on-dark
     Charcoal    #1F1E1E / #212121 (site text)       -> --ink (text)
     Everything below maps to these; no gold, no off-brand luxury tones. */

  /* Brand turquoise */
  --turq:        #15AEC0;   /* PRIMARY — buttons, links, active accents */
  --turq-bright: #34CDD9;   /* highlight / hover / on-dark accent */
  --turq-deep:   #0F7E7A;   /* deep teal — eyebrows, secondary, badges */
  --turq-ink:    #0B524E;   /* darkest teal — chip text on light */
  --page-blue:   #25C4D1;   /* approved page canvas — hero CTA blue */
  --page-blue-hi:#34CDD9;
  --page-blue-lo:#15AEC0;

  /* Packaging-led silver: jar lids, polished borders and secondary actions. */
  --silver-hi:   #F7FAFA;
  --silver:      #D8DEE1;
  --silver-mid:  #B9C3C7;
  --silver-deep: #879499;
  --silver-grad: linear-gradient(125deg,#F7FAFA 0%,#C7D0D3 34%,#EEF2F3 62%,#AEB9BD 100%);

  /* Dark surfaces = deep TEAL (brand), not black */
  --ink:    #16302D;        /* primary dark text + darkest surface */
  --ink-2:  #123F39;        /* deep teal panel (motion band) */
  --ink-3:  #0E2A27;        /* deepest teal */
  --muted:  #295550;        /* muted body text — contrast-safe on page blue */

  /* Warm light surfaces (brand leans light + warm ivory, never clinical white) */
  --cream:  #F4EFE3;        /* warm ivory — matches the cream logo */
  --paper:  #FBF9F3;        /* lightest surface */
  --mist:   #E7F3F1;        /* pale turquoise wash */
  --sand:   #ECE4D5;        /* warm border/section tone */

  --on-dark:     #EDF5F2;   /* text on dark teal */
  --on-dark-mut: #A8C5C0;

  /* Borders — subtly teal-tinted so they read as brand, not generic grey */
  --line:      rgba(15,126,122,.18);
  --line-soft: rgba(15,126,122,.09);
  --line-dark: rgba(237,245,242,.14);

  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --pad-x: clamp(20px, 6vw, 110px);
  --sec-y: clamp(70px, 10vw, 140px);
  --radius: 20px;

  --shadow-card: 0 26px 60px -34px rgba(15,60,56,.42);
  --shadow-soft: 0 30px 70px -40px rgba(15,60,56,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  /* Founder-approved saturated cyan-blue, matching the primary CTA. */
  background:
    radial-gradient(110% 70% at 88% -10%, rgba(109,238,244,.42), transparent 58%),
    radial-gradient(90% 55% at 4% 95%, rgba(8,126,142,.18), transparent 62%),
    linear-gradient(165deg, var(--page-blue-hi) 0%, var(--page-blue) 48%, var(--page-blue-lo) 100%);
  line-height:1.62; letter-spacing:.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.05; letter-spacing:-.012em; }
::selection{ background:var(--turq); color:#fff; }

.section{ padding:var(--sec-y) var(--pad-x); position:relative; }
.eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--turq-deep); margin:0 0 20px;
}
.eyebrow.light{ color:var(--turq-bright); }
.section-head{ max-width:760px; margin:0 auto clamp(44px,6vw,76px); text-align:center; }
.section-title{ font-size:clamp(2rem,5.2vw,3.8rem); color:var(--ink); }
.section-title.light{ color:var(--on-dark); }
.section-lede{ margin:20px auto 0; max-width:560px; color:var(--muted); font-size:1.05rem; }
.section-lede.light{ color:var(--on-dark-mut); }

/* buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.92rem; letter-spacing:.04em;
  padding:.95em 1.9em; border-radius:100px;
  transition:transform .4s var(--ease), background .35s, color .35s, box-shadow .4s, border-color .35s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-sm{ padding:.68em 1.3em; font-size:.82rem; }
.btn-turq{
  background:var(--ink); color:var(--on-dark);
  border:1px solid var(--turq-bright);
  box-shadow:0 16px 32px -14px rgba(8,28,26,.65), 0 0 0 1px rgba(52,205,217,.18) inset;
}
.btn-turq:hover{
  background:#04363a; border-color:var(--turq-bright); transform:translateY(-3px);
  box-shadow:0 22px 44px -14px rgba(8,28,26,.75), 0 0 20px rgba(52,205,217,.45);
}
.btn-solid{ background:var(--ink); color:var(--on-dark); }
.btn-solid:hover{ background:var(--turq-deep); transform:translateY(-3px); }
.btn-line{
  border:1px solid rgba(15,126,122,.35); color:var(--turq-ink); background:var(--paper);
  box-shadow:0 12px 28px -18px rgba(22,48,45,.5);
}
.btn-line:hover{
  border-color:var(--turq-deep); color:var(--turq-deep); background:var(--cream);
  transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(22,48,45,.65);
}
.btn-line-light{ border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn-line-light:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-3px); }
.btn-mini{
  font-size:.78rem; padding:.6em 1.1em; border-radius:100px;
  border:1px solid var(--silver-mid); color:var(--ink); letter-spacing:.04em; background:linear-gradient(125deg,rgba(247,250,250,.9),rgba(199,208,211,.72));
}
.btn-mini:hover{ background:var(--turq-deep); color:#fff; border-color:var(--turq-deep); transform:translateY(-2px); }
/* Product-card "Add to cart" (archive-product.php / parts/collection.php):
   was .btn-mini's neutral grey, sharing a row with the price mid-card.
   The push-to-bottom now lives on .card-foot (see the card redesign
   below) so price, instalment text, Compare/Wishlist and this button
   travel down together as one footer group — putting margin-top:auto
   here too would split that single block of free space across two
   elements instead of keeping the footer visually intact. Recoloured to
   the theme's own primary accent (--turq is literally documented as
   "PRIMARY — buttons, links, active accents" in the colour tokens)
   instead of looking like a disabled/secondary action, with a bag icon
   for a clearer call to action. Scoped to this class, not .btn-mini
   itself, so the blog "Read more" card button (index.php) is untouched. */
.card-add-to-cart{
  width:100%; justify-content:center; margin-top:14px;
  background:var(--turq); color:#fff; border-color:var(--turq);
}
.card-add-to-cart::before{
  content:""; width:16px; height:16px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12l-1 13H7L6 7zM9 7a3 3 0 0 1 6 0' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.card-add-to-cart:hover{ background:var(--turq-deep); border-color:var(--turq-deep); color:#fff; transform:translateY(-2px); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .5s, box-shadow .5s, backdrop-filter .5s; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px var(--pad-x); transition:padding .4s; }
.site-header.scrolled{ background:linear-gradient(110deg,rgba(248,251,251,.94),rgba(207,216,219,.92),rgba(246,249,249,.95)); backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 1px 0 var(--silver-mid); }
.site-header.scrolled .header-inner{ padding-top:13px; padding-bottom:13px; }

.brand{ display:flex; align-items:center; gap:10px; color:#fff; transition:color .4s; }
.site-header.scrolled .brand{ color:var(--ink); }
.brand-mark{ width:30px; height:30px; }
.brand-word{ font-family:var(--serif); font-size:1.55rem; letter-spacing:.005em; }

.nav{ display:flex; }
.nav .menu{ display:flex; gap:34px; list-style:none; margin:0; padding:0; }
.nav .menu li{ position:relative; }
.nav a{ display:inline-block; color:#fff; font-size:.9rem; letter-spacing:.03em; position:relative; padding:4px 0; transition:color .3s, opacity .3s; opacity:.92; }
.site-header.scrolled .nav a{ color:var(--ink); }
.nav > .menu > li > a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--turq); transition:width .35s var(--ease); }
.nav > .menu > li > a:hover::after{ width:100%; }

/* Dropdown submenus (e.g. Shop → Curly Hair Products / Curl Creams / Curl Gels / Hair Mists) */
.nav .sub-menu{
  position:absolute; top:100%; left:-14px; min-width:220px; margin:10px 0 0; padding:10px;
  list-style:none; background:var(--paper); border-radius:14px; box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* The 10px margin-top above creates a real gap between the "Shop" link
   and the dropdown — since the dropdown only stays open via :hover on
   the parent <li>, moving the mouse straight down through that gap
   exits every hoverable box before the cursor ever reaches the dropdown,
   closing it before an option can be clicked. Two things that look like
   fixes but aren't:
   - A bridge pseudo-element on .sub-menu itself doesn't work: .sub-menu
     is pointer-events:none until the <li> is already :hover'd, so
     hit-testing in the gap falls through to the page behind it instead
     of landing on the bridge.
   - Padding-bottom on the <li> (to extend its own hit-box) doesn't work
     either: .sub-menu is positioned with top:100%, which is relative to
     the <li>'s own height — inflating that height with padding pushes
     the dropdown down by the exact same amount, so the gap you're
     trying to close re-opens one-for-one and nothing changes.
   The fix: an absolutely-positioned pseudo-element on the <li>. Being
   out of normal flow, it doesn't contribute to the <li>'s layout height
   (so .sub-menu's top:100% is unaffected), while still being a real
   descendant box with default pointer-events:auto — always interactive,
   not dependent on any hover-triggered state toggle — that physically
   covers the screen gap between the link and the dropdown's visible
   top (10px margin + a comfortable overlap buffer). */
.nav .menu-item-has-children{ position:relative; }
.nav .menu-item-has-children::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:24px;
}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.site-header .nav .sub-menu a{ display:block; padding:9px 12px; border-radius:8px; color:var(--ink); opacity:1; white-space:nowrap; }
.nav .sub-menu a::after{ display:none; }
.nav .sub-menu a:hover{ background:var(--mist); color:var(--turq-deep); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.cart-btn{ position:relative; display:flex; align-items:center; gap:7px; color:#fff; font-size:.84rem; transition:color .4s; }
.site-header.scrolled .cart-btn{ color:var(--ink); }
.cart-btn .cart-count{
  position:absolute; top:-8px; right:-10px; min-width:17px; height:17px; padding:0 4px;
  background:var(--turq); color:#04363a; border-radius:100px; font-size:.62rem; font-weight:600;
  display:grid; place-items:center; transform:scale(0); transition:transform .35s var(--ease);
}
.cart-btn .cart-count.show{ transform:scale(1); }

.nav-toggle{ display:none; width:30px; height:20px; position:relative; }
.nav-toggle span{ position:absolute; left:0; height:1.6px; width:100%; background:#fff; transition:transform .4s var(--ease), opacity .3s, background .4s; }
.site-header.scrolled .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:1px; } .nav-toggle span:nth-child(2){ top:9px; } .nav-toggle span:nth-child(3){ top:17px; }
.nav-toggle.open span{ background:var(--ink); }
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:4px; padding:0 var(--pad-x);
  background:linear-gradient(145deg,rgba(248,251,251,.98),rgba(211,219,222,.98)); backdrop-filter:blur(14px);
  max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height .5s var(--ease), padding .5s var(--ease), visibility .5s;
}
.mobile-nav .mobile-menu{ list-style:none; margin:0; padding:0; }
.mobile-nav a{ display:block; color:var(--ink); font-size:1.25rem; font-family:var(--serif); padding:13px 0; border-bottom:1px solid var(--line); }
.mobile-nav .mobile-cta{ margin-top:16px; font-family:var(--sans); font-size:.95rem; border-bottom:none; }
.mobile-nav .sub-menu{ list-style:none; margin:0 0 6px; padding-left:18px; }
.mobile-nav .sub-menu a{ font-size:1.02rem; font-family:var(--sans); padding:10px 0; opacity:.78; }
.site-header.menu-open .mobile-nav{ display:flex; visibility:visible; max-height:85vh; padding-top:8px; padding-bottom:30px; }

/* =====================================================================
   HERO — full-bleed real photography
   ===================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 var(--pad-x) clamp(54px,8vh,90px); overflow:hidden; color:#fff;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,30,28,.42) 0%, rgba(8,30,28,0) 30%, rgba(8,30,28,.12) 55%, rgba(7,26,24,.82) 100%),
    radial-gradient(80% 60% at 18% 92%, rgba(15,90,88,.5), transparent 60%);
}
.hero-inner{ position:relative; z-index:2; max-width:1240px; margin:0 auto; width:100%; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:#fff; margin-bottom:22px;
}
.hero-eyebrow::before{ content:""; width:26px; height:1px; background:var(--turq-bright); }
.hero-title{
  font-size:clamp(2.9rem, 8vw, 6.4rem); letter-spacing:-.02em; max-width:14ch; text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.3);
}
.hero-title em{ font-style:italic; color:var(--turq-bright); }
.hero-lede{ max-width:460px; margin:24px 0 0; font-size:1.12rem; color:rgba(255,255,255,.92); }
.hero-cta{ display:flex; gap:14px; margin:32px 0 0; flex-wrap:wrap; }

/* =====================================================================
   TRUST BAR
   ===================================================================== */
.trust{ background:var(--ink); color:var(--on-dark); padding:22px var(--pad-x); }
.trust-inner{
  max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:14px 40px;
  align-items:center; justify-content:center; text-align:center;
}
.trust-item{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-mut); display:flex; align-items:center; gap:10px; }
.trust-item b{ color:var(--on-dark); font-weight:500; }
.trust-dot{ width:5px; height:5px; border-radius:50%; background:var(--turq); }

/* =====================================================================
   ROUTINE — 3 steps with real product photos
   ===================================================================== */
.routine{ background:transparent; }
.ritual-grid{ list-style:none; padding:0; margin:0 auto; max-width:1200px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.ritual-step{
  position:relative; background:linear-gradient(145deg,#F7F5EE 0%,#EEF0EF 68%,#D9DFE1 100%); border:1px solid var(--silver-mid); border-radius:var(--radius);
  padding:30px 30px 36px; transition:transform .5s var(--ease), box-shadow .5s, border-color .5s; overflow:hidden;
}
.ritual-step::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--silver-grad); }
.ritual-step:hover{ transform:translateY(-8px); box-shadow:var(--shadow-card); border-color:rgba(21,174,192,.4); }
.ritual-photo{ position:relative; height:200px; border-radius:14px; overflow:hidden; margin-bottom:22px; background:radial-gradient(75% 72% at 50% 38%,#FBFCFC 0%,#DCE3E5 62%,#B7C2C6 100%); border:1px solid rgba(135,148,153,.32); }
.ritual-photo img{ width:100%; height:100%; object-fit:contain; padding:16px; transition:transform .6s var(--ease); }
.ritual-step:hover .ritual-photo img{ transform:scale(1.05); }
.ritual-index{ position:absolute; top:18px; left:20px; font-family:var(--serif); font-size:1.5rem; color:var(--turq-deep); }
.ritual-step h3{ font-size:1.45rem; margin-bottom:4px; }
.ritual-prod{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--turq); margin:0 0 14px; }
.ritual-step p:last-child{ color:var(--muted); font-size:.96rem; margin:0; }
.routine-foot{ display:flex; gap:14px; justify-content:center; margin-top:clamp(40px,5vw,60px); flex-wrap:wrap; }

/* =====================================================================
   COLLECTION — real product cards
   ===================================================================== */
.collection{ background:linear-gradient(180deg, rgba(9,112,124,.10) 0%, rgba(52,205,217,.08) 100%); }
.sub-eyebrow{ text-align:center; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--turq-deep); margin:0 0 26px; }
.product-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
/* When the product count isn't a multiple of 3, a lone card left over on the
   last row sat flush left with two empty columns beside it (e.g. 7 products
   = 2 full rows + 1 orphan). :nth-child(3n+1) only matches a row-starting
   position, so combined with :last-child it only ever targets a genuinely
   solo last card — full rows are untouched. Scoped to the homepage: the
   shop page below overrides .product-grid to a 4-column layout, where this
   3-based formula would misfire on an unrelated row position. */
body.home .product-grid > :last-child:nth-child(3n+1){ grid-column:2; }

/* Shop page + product category archives (curl cream / curl gel / hair
   mist — all archive-product.php, same markup as the Shop page) — the
   full catalogue views, not the homepage's 3-up showcase: smaller cards,
   4 per row, and the grid itself flush with the page's own gutter
   (--pad-x, same as the header) instead of the homepage's narrower
   max-width:1240px centered block — that extra centering left the grid
   visibly indented past the header/logo's left edge on wide viewports. */
body.woocommerce-shop .product-grid,
body.tax-product_cat .product-grid{
  max-width:none; margin:0; grid-template-columns:repeat(4,1fr);
}
/* =====================================================================
   PRODUCT CARD — full redesign (was a flat grey-gradient card with a
   badge/price/button all crammed mid-body and no visual hierarchy).
   New structure: photo sits in a soft tinted stage with a drop-shadow
   under the product, a "Best for" badge floats half-on/half-off the
   photo like a shelf label, price and the (otherwise unavoidable, two
   separate BNPL plugins') instalment text are compacted into one quiet
   block, Compare/Wishlist become small icon pills instead of bare links,
   and Add to cart is the one unmissable call to action anchored to the
   bottom (sizing/position handled separately in .card-add-to-cart).
   ===================================================================== */
.card{
  position:relative; background:var(--paper); border:1px solid var(--line-soft); border-radius:24px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(15,60,56,.05);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto; z-index:3; height:3px;
  background:linear-gradient(90deg,var(--turq-bright),var(--turq) 50%,var(--turq-deep));
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.card:hover{ transform:translateY(-9px); box-shadow:0 40px 64px -32px rgba(15,60,56,.38); border-color:rgba(21,174,192,.35); }
.card:hover::before{ opacity:1; }
.card-media{
  position:relative; aspect-ratio:1/1; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 100%, var(--mist) 0%, #fff 72%);
}
.card-media img{
  width:76%; height:76%; object-fit:contain; transition:transform .6s var(--ease);
  filter:drop-shadow(0 22px 20px rgba(15,60,56,.14));
}
.card:hover .card-media img{ transform:scale(1.07) translateY(-5px); }
.leaf{ position:absolute; width:120px; opacity:.16; color:var(--turq); pointer-events:none; }
.leaf.tl{ top:-12px; left:-16px; transform:rotate(-18deg); }
.leaf.br{ bottom:-18px; right:-18px; transform:rotate(150deg); }
.card-body{ position:relative; padding:0 22px 24px; display:flex; flex-direction:column; flex:1; }
.tag{ display:inline-block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--turq-deep); border:1px solid rgba(15,130,126,.3); padding:5px 11px; border-radius:100px; margin-bottom:14px; }
/* Product-card badge only (index.php's blog-card date reuses the plain
   .tag above and is untouched) — floats as a shelf label straddling the
   photo/body seam instead of sitting flush at the top of a padded body. */
.card-badge{
  position:relative; z-index:2; align-self:flex-start;
  margin:-16px 0 14px; background:var(--paper);
  box-shadow:0 10px 22px -12px rgba(15,60,56,.3);
  max-width:calc(100% - 4px);
}
.card-name{ font-family:var(--serif); font-size:1.45rem; line-height:1.15; color:var(--ink); margin-bottom:4px; }
.card-size{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.card-desc{ color:var(--muted); font-size:.92rem; margin:0 0 16px; flex:1; }
.card-result{ font-size:.82rem; color:var(--ink); margin:0 0 18px; padding-top:14px; border-top:1px dashed var(--line); }
.card-result span{ display:inline-block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq-deep); margin-right:8px; }
.card-foot{ display:block; padding:14px 0; margin-top:auto; border-top:1px solid var(--line-soft); }
.card .price{ display:block; font-family:var(--serif); font-size:1.5rem; color:var(--ink); }
.card .price s{ font-size:.78rem; color:var(--muted); opacity:.7; margin-left:5px; }
.save-pill{ display:inline-block; margin-left:6px; font-family:var(--sans); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--turq-deep); background:var(--mist); padding:3px 7px; border-radius:100px; vertical-align:middle; }
/* The two installment plugins (Mintpay/Koko) each print their own line
   directly inside .price with no theme hooks to merge them — compact
   both into one quiet, same-size strip under the price instead of two
   loose grey paragraphs at browser-default size/spacing. */
.card .product-price-installments-not-in-variation{
  display:flex !important; align-items:center; flex-wrap:wrap; gap:4px;
  font-size:.72rem !important; line-height:1.5 !important; color:var(--muted) !important;
  margin-top:3px !important;
}
.card .product-price-installments-not-in-variation + br{ display:none; }
.card .product-price-installments-not-in-variation b{ color:var(--ink); font-weight:600; }
.card .mintpay-logo,.card .koko-logo{ height:11px !important; }
.card .mintpay-info-icon,.card .koko-info{ height:10px !important; }

/* bundles strip */
.bundles{ max-width:1240px; margin:60px auto 0; }
.bundle-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.bundle-card{
  position:relative; display:flex; gap:18px; align-items:center; padding:18px;
  background:var(--paper); border:1px solid var(--line-soft); border-radius:16px;
  transition:transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.bundle-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:rgba(21,174,192,.4); }
.bundle-thumb{ width:92px; height:92px; flex-shrink:0; border-radius:12px; overflow:hidden; background:var(--mist); display:grid; place-items:center; }
.bundle-thumb img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.bundle-info h4{ font-family:var(--serif); font-size:1.12rem; margin:0 0 3px; }
.bundle-info .b-sub{ font-size:.78rem; color:var(--muted); margin:0 0 9px; }
.bundle-info .b-foot{ display:flex; align-items:center; gap:10px; }
.bundle-info .price{ font-size:1rem; }
.b-add{ font-size:.7rem; letter-spacing:.06em; color:var(--turq-deep); border-bottom:1px solid transparent; transition:border-color .3s; }
.bundle-card:hover .b-add{ border-color:var(--turq-deep); }

/* =====================================================================
   PRODUCT DETAIL
   ===================================================================== */
.detail{ background:rgba(9,112,124,.08); }
/* .section's default --sec-y (up to 140px) bottom padding + the tabs
   below leaves a huge dead gap on the product page specifically —
   the summary/CTA area doesn't need that much breathing room before
   the tabs start. */
section.detail.section{ padding-bottom:20px; }
.detail-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,6vw,84px); align-items:center; }
.detail-visual{ position:relative; border-radius:24px; overflow:hidden; background:radial-gradient(70% 60% at 50% 40%, var(--mist), var(--paper)); display:grid; place-items:center; padding:40px; aspect-ratio:4/5; }
.detail-visual img{ width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 30px 40px rgba(15,60,56,.25)); }
.detail-visual .leaf{ width:180px; opacity:.18; }
.detail-lede-wrap{ max-width:480px; margin:18px 0 28px; }
.detail-lede{
  color:var(--muted); font-size:1.1rem; max-height:8.6em; overflow:hidden;
  position:relative; transition:max-height .4s var(--ease), -webkit-mask-image .3s;
  /* Fade the text itself to transparent instead of painting an opaque
     overlay in an approximated background colour — .detail sits on the
     page's diagonal gradient wash (plus its own translucent tint), so the
     true colour at this exact spot varies with viewport size/position and
     a hardcoded flat colour never quite matched it, leaving a visible seam
     where the clamp ended. Masking reveals whatever's actually there. */
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent 100%);
}
.detail-lede-wrap.expanded .detail-lede{
  max-height:800px;
  -webkit-mask-image:none; mask-image:none;
}
.detail-lede p{ margin:0 0 16px; }
.detail-lede p:last-child{ margin-bottom:0; }
.detail-lede strong{ display:block; margin-bottom:2px; color:var(--turq-deep); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.detail-lede-toggle{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--turq-deep);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.detail-lede-toggle:hover{ border-color:var(--turq-deep); }
.detail-lede-toggle::after{
  content:"↓"; font-size:.8em; transition:transform .3s;
}
.detail-lede-wrap.expanded .detail-lede-toggle::after{ transform:rotate(180deg); }
.detail-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.tab{ font-size:.8rem; padding:.55em 1.05em; border-radius:100px; border:1px solid var(--line); color:var(--muted); transition:all .3s; }
.tab:hover{ color:var(--ink); border-color:var(--turq-deep); }
.tab.active{ background:var(--turq-deep); color:#fff; border-color:var(--turq-deep); }
.detail-panels{ min-height:190px; margin-bottom:28px; }
.panel{ display:none; animation:fade .5s var(--ease); }
.panel.active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:28px; color:var(--ink); }
.ticks li::before{ content:""; position:absolute; left:0; top:7px; width:15px; height:8px; border-left:2px solid var(--turq); border-bottom:2px solid var(--turq); transform:rotate(-45deg); }
.steps-list{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.steps-list b{ color:var(--turq-deep); margin-right:12px; font-family:var(--serif); font-size:1.05rem; }
.ingredients-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ingredients-list li{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:baseline; }
.ingredients-list .ing-name{ font-family:var(--serif); color:var(--ink); font-size:1.02rem; min-width:120px; }
.ingredients-list .ing-desc{ color:var(--muted); font-size:.9rem; }
.finish-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{ font-size:.74rem; padding:.42em .95em; border-radius:100px; background:var(--mist); color:var(--turq-ink); border:1px solid rgba(15,130,126,.2); }
.pair-row{ display:grid; gap:12px; margin:14px 0 18px; }
.pair-item{ padding:13px 17px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.pair-item b{ display:block; color:var(--turq-deep); margin-bottom:2px; }
.pair-item span{ color:var(--muted); font-size:.9rem; }
.placeholder-note{ display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--turq-deep); background:var(--mist); border:1px solid rgba(15,130,126,.3); padding:5px 12px; border-radius:100px; margin-bottom:14px; }
.detail-cta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.out-of-stock-badge{ display:inline-flex; align-items:center; padding:.7em 1.3em; border-radius:100px; background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.25); color:#9b3232; font-size:.9rem; font-weight:600; }

/* This whole column sits directly on the teal wash (.detail has no paper
   card of its own). Mintpay/Koko's installment line ships a hardcoded
   inline color:#8e8e8e — fine on a white card, too close to the wash's
   own teal to read clearly here. (.btn-turq itself is now dark-ink by
   default, so it no longer needs a local override to stand out.) */
.detail-cta .product-price-installments-not-in-variation{ color:var(--ink) !important; }
/* Mintpay and Koko are two separate, independently-installed installment
   plugins that both hook their own line onto the price — each is a real,
   distinct payment option, not a duplicate, but stacked with the browser's
   default line-height gap they read as repeated/glitched info. Tighten the
   rhythm and line them up on a shared left edge so they read as "two ways
   to pay in installments" instead. */
.detail-cta .product-price-installments-not-in-variation{ display:flex !important; align-items:center; gap:6px; line-height:1.3 !important; margin-top:4px; }
.detail-cta .product-price-installments-not-in-variation + br{ display:none; }
.detail-cta .ajax_add_to_cart{
  background:var(--ink); color:#fff;
  box-shadow:0 16px 32px -14px rgba(8,28,26,.55);
}
.detail-cta .ajax_add_to_cart:hover{ background:#04363a; box-shadow:0 20px 38px -14px rgba(8,28,26,.7); }

/* WPC Product Tabs / Smart Compare content ships "free from" trust-badge
   icons as full-resolution uploads (native 266x262px) with no size
   constraint — each renders at full size, turning 7 small badges into
   ~1800px of vertical space (x3 more inside the comparison table). They're
   always wrapped in <figure>, unlike genuine content photos in the same
   tab (those use plain <p><img></p>), so this only touches the badges. */
.woocommerce-Tabs-panel figure,
.woosc_table figure{ margin:0 0 4px; text-align:center; }
.woocommerce-Tabs-panel figure img,
.woosc_table figure img{ max-width:84px; height:auto; margin:0 auto; }
/* The badge artwork itself is pure white on a transparent background (built
   to sit on the page's teal wash, where the tab above renders it fine) —
   confirmed by sampling the actual PNG pixels. The comparison table's cells
   are white, so the same badge is literally invisible there without a
   colored backdrop of its own. */
.woosc_table figure{
  background:var(--turq); border-radius:50%; width:84px; height:84px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px;
}
.woosc_table figure img{ max-width:60px; margin:0; }
.price-lg{ font-size:1.55rem; }

/* =====================================================================
   QUIZ
   ===================================================================== */
.quiz{ background:linear-gradient(180deg, rgba(52,205,217,.04) 0%, rgba(8,112,126,.12) 100%); }
.quiz-card{ max-width:760px; margin:0 auto; background:var(--paper); border:1px solid var(--line-soft); border-radius:26px; padding:clamp(28px,4vw,46px); box-shadow:var(--shadow-card); }
.quiz-progress{ height:3px; background:var(--sand); border-radius:3px; margin-bottom:28px; overflow:hidden; }
.quiz-progress span{ display:block; height:100%; width:33%; background:linear-gradient(90deg,var(--turq),var(--turq-deep)); transition:width .6s var(--ease); }
.quiz-step{ display:none; animation:fade .5s var(--ease); }
.quiz-step.active{ display:block; }
.quiz-count{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq-deep); margin:0 0 12px; }
.quiz-q{ font-size:clamp(1.5rem,3.2vw,2.1rem); color:var(--ink); margin-bottom:24px; }
.quiz-options{ display:grid; gap:12px; }
.quiz-opt{ text-align:left; padding:17px 21px; border:1px solid var(--line); border-radius:15px; background:var(--paper); transition:all .35s var(--ease); display:flex; flex-direction:column; gap:3px; }
.quiz-opt b{ font-size:1.02rem; color:var(--ink); font-weight:500; }
.quiz-opt span{ font-size:.85rem; color:var(--muted); }
.quiz-opt:hover{ transform:translateY(-3px); border-color:var(--turq-deep); box-shadow:0 16px 32px -22px rgba(15,130,126,.5); }
.quiz-opt.chosen{ border-color:var(--turq); background:var(--mist); }
.result-desc{ color:var(--muted); margin:0 0 20px; }
.result-list{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; }
.result-list li{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--mist); border:1px solid var(--line-soft); border-radius:14px; }
.result-list .rl-thumb{ width:50px; height:50px; border-radius:10px; background:var(--paper); display:grid; place-items:center; flex-shrink:0; }
.result-list .rl-thumb img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.result-list .rl-name{ font-weight:500; color:var(--ink); }
.result-list .rl-why{ display:block; font-size:.83rem; color:var(--muted); }
.result-list .rl-price{ margin-left:auto; font-family:var(--serif); color:var(--turq-deep); }
.result-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.quiz-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
.quiz-back{ color:var(--muted); font-size:.86rem; transition:color .3s; }
.quiz-back:hover:not(:disabled){ color:var(--ink); }
.quiz-back:disabled{ opacity:.3; cursor:default; }
.quiz-skip-note{ font-size:.72rem; color:var(--muted); }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews{ background:var(--ink); color:var(--on-dark); }
.ph-pill{ display:inline-block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--turq-bright); border:1px solid rgba(56,206,218,.4); padding:4px 11px; border-radius:100px; margin-right:10px; }
.review-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card{ position:relative; background:rgba(255,255,255,.04); border:1px solid var(--line-dark); border-radius:var(--radius); padding:32px 28px; transition:transform .5s, border-color .5s; }
.review-card:hover{ transform:translateY(-6px); border-color:rgba(56,206,218,.4); }
.ph-tag{ position:absolute; top:15px; right:15px; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); border:1px solid var(--line-dark); padding:3px 9px; border-radius:100px; }
.stars{ color:var(--turq-bright); letter-spacing:3px; font-size:1rem; margin-bottom:16px; }
.review-card blockquote{ margin:0 0 20px; font-family:var(--serif); font-size:1.18rem; line-height:1.45; color:var(--on-dark); }
.rv-name{ color:var(--on-dark); font-size:.9rem; } .rv-meta{ color:var(--on-dark-mut); font-size:.78rem; }
.ig-ready{ max-width:1180px; margin:34px auto 0; text-align:center; padding:24px; border:1px dashed var(--line-dark); border-radius:16px; color:var(--on-dark-mut); font-size:.86rem; }
.ig-ready b{ color:var(--on-dark); }

/* =====================================================================
   STOCKISTS
   ===================================================================== */
.stockists{ background:linear-gradient(180deg,rgba(244,239,227,.16),rgba(15,126,122,.12)),var(--page-blue); }
.stockists-inner{ max-width:1240px; margin:0 auto; }
.stockists-mark{ width:72px; height:72px; object-fit:contain; margin:0 auto 20px; filter:drop-shadow(0 10px 24px rgba(11,82,78,.18)); }
.stockists-intro{ max-width:760px; margin:0 auto clamp(36px,5vw,64px); text-align:center; color:var(--muted); font-size:1.05rem; }
.stockist-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.stockist-card{ min-height:390px; padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; background:linear-gradient(150deg,var(--paper),var(--silver-hi)); border:1px solid var(--silver-mid); border-radius:var(--radius); box-shadow:var(--shadow-card); }
.stockist-card-top{ min-height:58px; display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; }
.stockist-status,.stockist-partner{ display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border:1px solid var(--line); border-radius:100px; font-size:.68rem; font-weight:600; text-transform:uppercase; }
.stockist-status{ color:var(--turq-ink); background:rgba(52,205,217,.2); }
.stockist-status-opening{ color:var(--ink); background:var(--silver-grad); border-color:var(--silver-mid); }
.stockist-partner{ color:var(--muted); background:rgba(244,239,227,.72); }
.stockist-card h3{ margin:26px 0 18px; font-size:clamp(1.7rem,2.6vw,2.25rem); }
.stockist-card address{ min-height:58px; color:var(--muted); font-style:normal; line-height:1.55; }
.stockist-hours{ margin:16px 0 24px; color:var(--muted); font-size:.88rem; }
.stockist-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.stockist-actions .btn{ min-height:44px; }
.stockists-note{ max-width:880px; margin:clamp(32px,5vw,58px) auto 0; text-align:center; color:var(--muted); }
.stockists-note p{ margin:0 0 18px; }
.stockists-note strong{ color:var(--ink); }
.stockists-note .text-link{ color:var(--turq-ink); font-weight:600; }
.stockists-hero{ padding-bottom:clamp(48px,7vw,86px); }
.stockists-page{ padding-top:clamp(40px,6vw,72px); }

/* =====================================================================
   STORY
   ===================================================================== */
.story{ background:rgba(9,112,124,.10); }
.story-grid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,80px); align-items:center; }
.story-photo{ border-radius:24px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-soft); }
.story-photo img{ width:100%; height:100%; object-fit:cover; }
.story-copy p{ color:var(--muted); margin:0 0 18px; font-size:1.05rem; }
.story-copy .section-title{ margin-bottom:22px; }
.story-value{ display:inline-flex; align-items:center; gap:10px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq-deep); margin-bottom:8px; }
.story-value::before{ content:""; width:22px; height:1px; background:var(--turq); }
.story-sign{ font-family:var(--serif); font-style:italic; color:var(--ink) !important; font-size:1.12rem; }

/* =====================================================================
   JOURNAL
   ===================================================================== */
.journal{ background:linear-gradient(180deg, rgba(7,103,116,.12), rgba(52,205,217,.03)); }
.journal-grid{ max-width:900px; margin:0 auto; display:grid; gap:13px; }
.journal-item{ border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; background:var(--cream); transition:border-color .4s; }
.journal-item:hover{ border-color:rgba(21,174,192,.4); }
.journal-head{ width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:24px 28px; text-align:left; }
.journal-kicker{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--turq-deep); border:1px solid rgba(15,130,126,.3); padding:5px 11px; border-radius:100px; white-space:nowrap; }
.journal-head h3{ font-size:clamp(1.1rem,2.3vw,1.5rem); color:var(--ink); }
.journal-plus{ font-family:var(--serif); font-size:1.7rem; color:var(--turq-deep); transition:transform .4s var(--ease); }
.journal-item.open .journal-plus{ transform:rotate(45deg); }
.journal-body{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.journal-body p{ padding:0 28px 26px; margin:0; color:var(--muted); max-width:680px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--ink); color:var(--on-dark); padding:clamp(60px,8vw,92px) var(--pad-x) 28px; }
.footer-top{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px; }
.footer-word{ font-family:var(--serif); font-size:1.9rem; }
.footer-brand p{ color:var(--on-dark-mut); max-width:280px; margin:14px 0 20px; font-size:.92rem; }
.footer-social{ display:flex; flex-direction:column; gap:6px; }
.social-link{ display:inline-flex; align-items:center; gap:9px; color:var(--on-dark); width:max-content; transition:color .3s; }
.social-link:hover{ color:var(--turq-bright); }
.footer-col h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq-bright); margin-bottom:16px; font-weight:600; }
.footer-col a{ display:block; color:var(--on-dark-mut); font-size:.92rem; padding:7px 0; transition:color .3s, padding-left .3s; }
.footer-col a:hover{ color:var(--on-dark); padding-left:5px; }
.footer-signup p{ color:var(--on-dark-mut); font-size:.9rem; margin:0 0 14px; }
.signup{ display:flex; gap:8px; }
.signup input{ flex:1; padding:.85em 1.1em; border-radius:100px; border:1px solid var(--line-dark); background:rgba(255,255,255,.05); color:var(--on-dark); font-family:inherit; font-size:.9rem; transition:border-color .3s; }
.signup input::placeholder{ color:var(--on-dark-mut); }
.signup input:focus{ outline:none; border-color:var(--turq); }
.signup-msg{ font-size:.82rem; color:var(--turq-bright); margin:12px 0 0; min-height:1em; }
.footer-bottom{ max-width:1200px; margin:54px auto 0; padding-top:22px; border-top:1px solid var(--line-dark); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--on-dark-mut); }
.footer-policies{ display:flex; gap:20px; }
.footer-policies a:hover{ color:var(--on-dark); }

/* =====================================================================
   MINI-CART DRAWER
   ===================================================================== */
body.cart-open{ overflow:hidden; }
.cart-overlay{ position:fixed; inset:0; background:rgba(8,28,26,.5); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; z-index:90; backdrop-filter:blur(2px); }
.cart-overlay.open{ opacity:1; visibility:visible; }
.cart-drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,90vw); background:var(--paper); z-index:100; transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; box-shadow:-30px 0 70px -40px rgba(0,0,0,.5); }
.cart-drawer.open{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-size:1.3rem; }
.cart-close{ font-size:1.4rem; color:var(--muted); line-height:1; transition:color .3s; }
.cart-close:hover{ color:var(--ink); }
.cart-items{ flex:1; overflow-y:auto; padding:10px 26px; }
.cart-empty{ color:var(--muted); text-align:center; padding:50px 10px; font-size:.95rem; }
.cart-line{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); align-items:center; }
.cart-line-thumb{ width:58px; height:58px; border-radius:10px; background:var(--mist); display:grid; place-items:center; flex-shrink:0; }
.cart-line-thumb img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.cart-line-info{ flex:1; min-width:0; } .cart-line-info b{ font-weight:500; font-size:.95rem; display:block; }
.cart-line-info span{ font-size:.82rem; color:var(--muted); }
.cart-line-info em{ display:block; color:#9b3232; font-size:.75rem; font-style:normal; font-weight:600; }
.cart-line.unavailable{ opacity:.66; }
.cart-qty{ display:flex; align-items:center; gap:8px; margin-top:7px; }
.cart-qty button{ width:25px; height:25px; border:1px solid var(--silver-mid); border-radius:50%; display:grid; place-items:center; color:var(--ink); background:var(--silver-grad); font-size:1rem; line-height:1; }
.cart-qty span{ min-width:18px; text-align:center; color:var(--ink); font-weight:600; }
.cart-line-remove{ color:var(--muted); font-size:.8rem; transition:color .3s; }
.cart-line-remove:hover{ color:var(--turq-deep); }
.cart-foot{ padding:22px 26px; border-top:1px solid var(--line); }
/* Scoped to .cart-foot — "cart-subtotal" is also WooCommerce's own class on
   the checkout/cart review table's <tr class="cart-subtotal">. Unscoped,
   this rule was hijacking that table row too: display:flex on a <tr> pulls
   its <th>/<td> out of table layout entirely, breaking border-collapse and
   column alignment for that row (the "broken border lines" bug). */
.cart-foot .cart-subtotal{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.cart-foot .cart-subtotal b{ font-family:var(--serif); font-size:1.3rem; }
.cart-note{ font-size:.74rem; color:var(--muted); margin:0 0 16px; }
.cart-foot .btn{ width:100%; }
.btn:disabled,.add-to-cart.is-unavailable{ cursor:not-allowed; opacity:.55; transform:none; box-shadow:none; }
.cart-items.busy{ opacity:.5; pointer-events:none; transition:opacity .2s; }
.cart-qty button:disabled{ opacity:.35; cursor:not-allowed; }
.cart-errors{ background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.22); color:#9b3232; font-size:.82rem; line-height:1.4; padding:10px 14px; border-radius:10px; margin:0 0 14px; }
.cart-line-badge{ display:inline-block; margin-top:4px; font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--turq-deep); }

/* =====================================================================
   CHECKOUT REVIEW — local integration proof
   ===================================================================== */
.checkout-page{ min-height:100vh; padding:clamp(52px,7vw,90px) var(--pad-x) var(--sec-y); }
.checkout-shell{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:clamp(26px,5vw,64px); align-items:start; }
.checkout-intro{ grid-column:1/-1; max-width:700px; }
.checkout-intro h1{ font-size:clamp(2.4rem,5vw,4.3rem); margin-bottom:12px; }
.checkout-intro p{ color:var(--muted); margin:0; }
.checkout-panel{ background:var(--silver-grad); border:1px solid var(--silver-mid); border-radius:var(--radius); padding:clamp(22px,4vw,38px); box-shadow:var(--shadow-card); }
.checkout-form{ display:grid; gap:22px; }
.checkout-form fieldset{ border:0; padding:0; margin:0; display:grid; gap:14px; }
.checkout-form legend{ font-family:var(--serif); font-size:1.45rem; margin-bottom:12px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:grid; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--turq-ink); }
.field input,.field select,.field textarea{ width:100%; padding:13px 14px; border:1px solid var(--silver-mid); border-radius:8px; background:rgba(251,249,243,.9); color:var(--ink); font:inherit; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid rgba(21,174,192,.28); border-color:var(--turq-deep); }
.payment-options{ display:grid; gap:8px; }
.payment-option{ display:flex; align-items:center; gap:10px; border:1px solid var(--silver-mid); border-radius:8px; padding:13px 14px; background:rgba(251,249,243,.72); cursor:pointer; }
.payment-option input{ accent-color:var(--turq-deep); }
.checkout-mode{ font-size:.78rem; color:var(--muted); border-left:3px solid var(--turq); padding-left:12px; }
.checkout-status{ min-height:1.4em; color:var(--turq-ink); font-weight:600; }
.checkout-summary h2{ font-size:1.65rem; margin-bottom:18px; }
.checkout-line{ display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid rgba(22,48,45,.12); }
.checkout-line img{ width:58px; height:58px; object-fit:contain; padding:5px; background:rgba(251,249,243,.7); border-radius:8px; }
.checkout-line b,.checkout-line small{ display:block; }
.checkout-line b{ font-size:.9rem; font-weight:500; }
.checkout-line small{ color:var(--muted); }
.checkout-line strong{ font-family:var(--serif); font-weight:500; }
.checkout-totals{ display:grid; gap:9px; padding-top:18px; }
.checkout-total-row{ display:flex; justify-content:space-between; gap:18px; }
.checkout-total-row.total{ border-top:1px solid var(--silver-deep); padding-top:14px; margin-top:5px; font-family:var(--serif); font-size:1.35rem; }
.checkout-empty{ text-align:center; padding:30px 10px; }
.result-list li.unavailable{ opacity:.58; }
.result-list li.unavailable .rl-why,.result-list li.unavailable .rl-price{ color:#8b3131; }

/* =====================================================================
   TOAST + REVEAL
   ===================================================================== */
.toast{ position:fixed; left:50%; bottom:32px; transform:translate(-50%,120px); background:var(--ink); color:var(--on-dark); border:1px solid var(--line-dark); padding:13px 22px; border-radius:100px; font-size:.9rem; z-index:200; box-shadow:var(--shadow-soft); transition:transform .55s var(--ease), opacity .4s; opacity:0; display:flex; align-items:center; gap:10px; }
.toast.show{ transform:translate(-50%,0); opacity:1; }
.toast::before{ content:"✦"; color:var(--turq-bright); }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =====================================================================
   BACK TO TOP — hidden until the visitor has scrolled a page or so, then
   fades/lifts in bottom-right. Sits above ordinary content (z-index:60 on
   the header) but below the cart drawer/popups/toast so it never blocks
   or gets stranded above an open overlay.
   ===================================================================== */
.back-to-top{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:70;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-soft);
  background:var(--paper); color:var(--turq-deep); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow-soft);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s, color .3s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--turq); color:#04363a; }
.back-to-top svg{ width:20px; height:20px; fill:currentColor; }
@media (max-width:640px){
  .back-to-top{ width:42px; height:42px; }
}

/* =====================================================================
   HOW TO USE (Sade videos)
   ===================================================================== */
.how-to{ background:linear-gradient(180deg, rgba(52,205,217,.04), rgba(8,112,126,.11)); }
.how-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.how-card{ display:flex; flex-direction:column; }
.how-step{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq-deep); margin-bottom:12px; }
.video-frame{
  position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  background:var(--ink-3); box-shadow:var(--shadow-card); margin-bottom:18px;
}
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-play{
  position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:50%;
  background:rgba(252,250,245,.92); color:var(--turq-deep); display:grid; place-items:center;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); transition:transform .35s var(--ease), background .3s;
}
.video-play svg{ margin-left:3px; }
.video-frame.loading .video-play::after{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  border:2px solid rgba(8,30,28,.28);
  border-top-color:currentColor;
  border-radius:50%;
  animation:video-spin .8s linear infinite;
}
.video-frame.loading .video-play svg{ opacity:0; }
.video-frame.loading .video-play{ cursor:wait; }
@keyframes video-spin{ to{ transform:rotate(360deg); } }
.video-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,30,28,.12), rgba(8,30,28,.32)); pointer-events:none; transition:opacity .4s; }
.video-frame.playing::after{ opacity:0; }
.video-frame:hover .video-play{ transform:scale(1.08); background:#fff; }
.video-play.hidden{ opacity:0; visibility:hidden; transform:scale(.6); }
.how-card h3{ font-size:1.4rem; margin-bottom:6px; }
.how-card p{ color:var(--muted); font-size:.95rem; margin:0; }
.how-foot{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(36px,5vw,56px); flex-wrap:wrap; }
.how-credit{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* =====================================================================
   MOTION / TEXTURE BAND
   ===================================================================== */
.motion{ background:linear-gradient(160deg, var(--ink-2), var(--ink-3)); color:var(--on-dark); padding:clamp(40px,6vw,70px) var(--pad-x); }
.motion-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:.7fr 1fr; gap:clamp(34px,6vw,72px); align-items:center; }
.motion-video{ border-radius:20px; overflow:hidden; aspect-ratio:9/16; max-width:300px; box-shadow:var(--shadow-soft); justify-self:center; }
.motion-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.motion-copy p{ color:var(--on-dark-mut); margin:0 0 22px; font-size:1.05rem; max-width:420px; }
.motion-copy .section-title{ margin-bottom:18px; }

/* =====================================================================
   INSTAGRAM / COMMUNITY
   ===================================================================== */
.community{ background:rgba(9,112,124,.10); }
/* Every section uses the shared --sec-y (up to 140px) on both top and
   bottom, which is fine against a heading/hero but between two plain
   teal sections with little visual weight near their shared edge (the
   Instagram caption above, the story photo below) the two 140px
   paddings stack into a ~280px dead gap that reads as a layout gap, not
   breathing room. Halve just this one seam. */
.community{ padding-bottom:clamp(40px,5vw,70px); }
#story{ padding-top:clamp(40px,5vw,70px); }
.community-head{ max-width:1180px; margin:0 auto clamp(34px,4vw,52px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.community-head .eyebrow{ margin-bottom:14px; }
.community-handle{ display:inline-flex; align-items:center; gap:9px; color:var(--turq-deep); font-size:1.02rem; border:1px solid rgba(15,130,126,.3); padding:11px 20px; border-radius:100px; transition:all .35s var(--ease); }
.community-handle:hover{ background:var(--turq-deep); color:#fff; border-color:var(--turq-deep); transform:translateY(-3px); }
.ig-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.ig-cell{ position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:var(--paper); }
.ig-cell img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ig-cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(11,92,88,.35)); opacity:0; transition:opacity .4s; }
.ig-cell .ig-ico{ position:absolute; top:10px; right:12px; color:#fff; font-size:1.1rem; opacity:0; transform:translateY(-4px); transition:opacity .4s, transform .4s; z-index:2; }
.ig-cell:hover img{ transform:scale(1.07); }
.ig-cell:hover::after{ opacity:1; }
.ig-cell:hover .ig-ico{ opacity:1; transform:none; }
.community-note{ max-width:760px; margin:30px auto 0; text-align:center; font-size:.82rem; color:var(--muted); }

/* =====================================================================
   BRAND MARK / LOGO (real Müllwood roundel, recoloured via CSS mask)
   The mask uses the alpha of the real logo, so the mark inherits the brand
   colour via currentColor: cream on dark, deep teal/ink on light.
   ===================================================================== */
.brand-mark{
  width:34px; height:34px; flex-shrink:0; display:inline-block;
  background-color:currentColor;
  -webkit-mask:url(../images/mullwood-mark.png) center/contain no-repeat;
          mask:url(../images/mullwood-mark.png) center/contain no-repeat;
}
.brand-logo{
  display:inline-block; background-color:currentColor;
  -webkit-mask:url(../images/mullwood-logo.png) center/contain no-repeat;
          mask:url(../images/mullwood-logo.png) center/contain no-repeat;
}
.footer-logo{ width:168px; height:56px; color:var(--cream); margin-bottom:14px; }
/* header brand colour states */
.brand{ color:var(--cream); }                         /* hero: cream over photo */
.site-header.scrolled .brand{ color:var(--ink); }     /* scrolled: ink + teal mark */
body.subpage .brand{ color:var(--ink); }
.brand-word{ line-height:1; }

/* sub-page header = solid from the top (no full-bleed hero behind it) */
body.subpage .site-header{ background:linear-gradient(110deg,rgba(248,251,251,.96),rgba(207,216,219,.94),rgba(246,249,249,.97)); backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 1px 0 var(--silver-mid); }
body.subpage .nav a,
body.subpage .cart-btn{ color:var(--ink); }
body.subpage .nav-toggle span{ background:var(--ink); }
body.subpage main{ padding-top:74px; }
.nav a.active{ color:var(--turq-deep); }
.nav a.active::after{ width:100%; }

/* =====================================================================
   CENTRAL BRAND BAND (logo treatment, top-of-page brand moment)
   ===================================================================== */
.brand-band{ background:linear-gradient(160deg,var(--ink-2),var(--ink-3)); color:var(--on-dark); text-align:center; padding:clamp(52px,7vw,84px) var(--pad-x); }
.brand-band .brand-mark{ width:64px; height:64px; color:var(--cream); margin:0 auto 18px; }
.brand-band .brand-logo{ width:210px; height:90px; color:var(--cream); margin:0 auto 10px; }
.brand-band p{ max-width:540px; margin:14px auto 0; color:var(--on-dark-mut); font-size:1.05rem; }
.brand-band .band-line{ display:inline-flex; align-items:center; gap:12px; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--turq-bright); }
.brand-band .band-line::before,.brand-band .band-line::after{ content:""; width:30px; height:1px; background:var(--turq); opacity:.6; }

/* =====================================================================
   INGREDIENTS — "Ingredients that do something" (homepage preview)
   ===================================================================== */
.ingredients{ background:rgba(9,112,124,.09); }
.ing-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ing-card{ position:relative; background:var(--paper); border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s, border-color .5s; }
.ing-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:rgba(15,126,122,.4); }
.ing-card:hover .ing-photo img{ transform:scale(1.06); }
.ing-photo{ aspect-ratio:16/10; overflow:hidden; background:var(--mist); }
.ing-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.ing-card-body{ padding:22px 26px 28px; }
.ing-emblem{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); color:var(--turq-deep); margin-top:-36px; margin-bottom:12px;
  position:relative; z-index:1; box-shadow:0 4px 14px -4px rgba(8,28,26,.35);
}
.ing-emblem svg{ width:22px; height:22px; }
.ing-card h3{ font-size:1.3rem; margin-bottom:5px; }
.ing-card .ing-in{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--turq-deep); margin:0 0 12px; }
.ing-card p{ color:var(--muted); font-size:.93rem; margin:0; }
.ing-foot{ text-align:center; margin-top:clamp(34px,4vw,52px); }

/* =====================================================================
   SUB-PAGE HERO + BREADCRUMB
   ===================================================================== */
.page-hero{ background:linear-gradient(180deg, rgba(91,224,232,.48), rgba(21,174,192,.04)); text-align:center; padding:clamp(46px,6vw,82px) var(--pad-x) clamp(30px,4vw,46px); }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{ font-size:clamp(2.2rem,5.4vw,3.8rem); color:var(--ink); }
.page-hero p{ max-width:560px; margin:18px auto 0; color:var(--muted); font-size:1.05rem; }
.crumbs{ max-width:1180px; margin:0 auto; padding:0 var(--pad-x); font-size:.78rem; letter-spacing:.04em; color:var(--muted); }
.crumbs a:hover{ color:var(--turq-deep); }
.crumbs span{ color:var(--turq-deep); }

/* =====================================================================
   BLOG POST — single.php. There was no single-post template at all before
   this, so every post fell through to index.php's generic else-branch: a
   bare the_content() dump with no max-width or typography, floating
   directly on the teal body wash for its whole scroll length.
   ===================================================================== */
.post-article{
  max-width:1000px; margin:80px auto; background:var(--paper);
  border:1px solid var(--line-soft); border-radius:20px;
  padding:clamp(28px,5vw,56px); box-shadow:var(--shadow-soft);
}
.post-header{ text-align:center; max-width:640px; margin:0 auto 32px; }
.post-header .eyebrow{ margin-bottom:14px; }
.post-header .section-title{ font-size:clamp(1.9rem,4vw,2.6rem); }
.post-meta{
  margin-top:16px; color:var(--muted); font-size:.86rem;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.post-featured{ margin:0 0 36px; border-radius:16px; overflow:hidden; }
.post-featured img{ width:100%; height:auto; display:block; }

.post-content{ max-width:800px; margin:0 auto; color:var(--ink); font-size:1.02rem; line-height:1.75; }
.post-content > *:first-child{ margin-top:0; }
.post-content h2{
  font-family:var(--serif); font-size:clamp(1.35rem,2.6vw,1.6rem); color:var(--ink);
  margin:44px 0 16px; line-height:1.3;
}
.post-content h3{
  font-family:var(--sans); font-weight:600; font-size:1.08rem; color:var(--turq-deep);
  margin:30px 0 12px;
}
.post-content p{ margin:0 0 18px; color:var(--ink); }
.post-content ul,
.post-content ol{ margin:0 0 20px; padding-left:1.3em; display:grid; gap:8px; }
.post-content li{ padding-left:.3em; }
.post-content ul{ list-style:none; margin-left:0; padding-left:0; }
.post-content ul li{ position:relative; padding-left:1.6em; }
.post-content ul li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--turq);
}
.post-content ol{ list-style:decimal; }
.post-content ol li::marker{ color:var(--turq-deep); font-weight:600; }
.post-content strong{ color:var(--ink); font-weight:700; }
.post-content a{ color:var(--turq-deep); text-decoration:underline; text-underline-offset:2px; }
.post-content a:hover{ color:var(--turq-bright); }
.post-content blockquote{
  margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--turq);
  color:var(--muted); font-style:italic;
}
.post-content img{ max-width:100%; height:auto; border-radius:14px; margin:12px 0; }
@media (max-width:640px){
  .post-header{ text-align:left; }
  .post-meta{ justify-content:flex-start; }
}

/* =====================================================================
   LEGAL PAGES — Privacy Policy / Terms & Conditions / Return Policy.
   page.php's plain the_content() dump had no paper background or
   typography at all, so long h2/ul/hr-heavy policy text was floating
   directly on the teal body wash for the whole page — the same wall-of-
   text problem single.php fixed for blog posts, applied here via a
   .legal-content flag class (see page.php) instead of a template fork,
   since this is one small addition to an otherwise-generic template.
   ===================================================================== */
.legal-content{
  background:var(--paper) !important; border:1px solid var(--line-soft); border-radius:20px;
  padding:clamp(28px,5vw,56px) !important; box-shadow:var(--shadow-soft);
  margin-bottom:80px !important;
}
/* page.php's inline max-width + margin:0 auto only centers — once the
   card is already as wide as the viewport (anything under ~1100px plus
   gutter) that leaves no side gutter at all, so it touches both screen
   edges. Scoped to narrower widths only so it doesn't fight the auto
   centering once there's room to spare on desktop. */
@media (max-width:1180px){
  .legal-content{ margin-left:var(--pad-x) !important; margin-right:var(--pad-x) !important; }
}
.legal-content > *:first-child{ margin-top:0; }
.legal-content h2{
  font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.55rem); color:var(--ink);
  margin:38px 0 14px; line-height:1.3;
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{ margin:0 0 16px; color:var(--ink); line-height:1.7; }
.legal-content ul{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; }
.legal-content li{ position:relative; padding-left:1.6em; line-height:1.6; }
.legal-content li::before{
  content:""; position:absolute; left:0; top:.6em; width:7px; height:7px;
  border-radius:50%; background:var(--turq);
}
.legal-content strong{ color:var(--ink); font-weight:700; }
.legal-content a:not(.btn){ color:var(--turq-deep); text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover{ color:var(--turq-bright); }
.legal-content hr{ border:none; border-top:1px solid var(--line-soft); margin:30px 0; }

/* =====================================================================
   ABOUT US — editorial redesign
   The page's real CMS content (page-about-us.php, the correctly-slugged
   template — page-about.php also exists in this theme but doesn't match
   the actual "about-us" slug and is dead code) is a flat stack: a
   portrait figure, 3 founding-story paragraphs, an "Founders' Note" h2
   and a blockquote. Rather than parsing/restructuring that content,
   grid-template-areas repositions the SAME elements (plus a credential
   row and CTA the template adds after the_content()) into a two-column
   story layout + stat row + dark pull-quote panel — editing the story
   text in wp-admin keeps working normally since the DOM/content itself
   is untouched, only its visual placement. */
.about-content{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(32px,5vw,64px); row-gap:28px; align-items:start;
  grid-template-areas:
    "photo p1"
    "photo p2"
    "stats stats"
    "p3 p3"
    "label label"
    "quote quote"
    "cta cta";
}
.about-content .about-portrait{ grid-area:photo; margin:0; align-self:start; }
.about-content .about-portrait img{
  /* The <img> carries width="647" height="810" HTML attributes; with
     both a definite CSS width (below) and that attribute-derived height
     present, aspect-ratio is ignored per spec (it only resolves a
     dimension left as auto) — explicit height:auto is required to free
     the height back up so aspect-ratio can actually compute it. */
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:22px;
  box-shadow:var(--shadow-card);
}
.about-content p:nth-of-type(1){ grid-area:p1; align-self:center; font-size:1.08rem; }
.about-content p:nth-of-type(2){ grid-area:p2; }
.about-content p:nth-of-type(3){
  grid-area:p3; font-family:var(--serif); font-size:1.3rem; line-height:1.5; color:var(--ink);
  max-width:46ch; margin:6px auto 0; text-align:center;
}
.about-stats{
  grid-area:stats; display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  padding:22px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
}
.about-stat{
  display:inline-flex; align-items:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--turq-deep); border:1px solid rgba(15,130,126,.3); padding:8px 16px; border-radius:100px;
}
.about-content h2{
  grid-area:label; text-align:center; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--turq-deep); font-family:var(--sans); margin:0;
}
.about-content blockquote{
  grid-area:quote; position:relative; margin:0; padding:clamp(32px,5vw,52px);
  background:linear-gradient(160deg,var(--ink-2),var(--ink-3)); border-radius:26px; text-align:center;
}
.about-content blockquote p{
  font-family:var(--serif); font-style:italic; color:#fff; margin:0 auto; max-width:56ch;
  font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.6;
}
.about-cta{ grid-area:cta; text-align:center; padding-top:6px; }
@media (max-width:1040px){
  .about-content{
    grid-template-columns:1fr;
    grid-template-areas:"photo" "p1" "p2" "stats" "p3" "label" "quote" "cta";
  }
  .about-content .about-portrait img{ aspect-ratio:1/1; max-width:420px; margin:0 auto; }
  .about-content p:nth-of-type(1){ text-align:left; }
}

/* FAQ page's schema-faq-* markup — a separate SEO/schema.org FAQ block
   (its own <strong>/<p> pair per question, not real headings) sitting
   after the page's own hand-written h2 FAQ list. Gets its own quieter
   accordion-style treatment so it reads as a distinct list of quick
   answers rather than unstyled bold text the same weight as a paragraph. */
.faq-content .schema-faq-section{
  display:block; padding:18px 0; border-top:1px solid var(--line-soft);
}
.faq-content .schema-faq-section:first-of-type{ margin-top:36px; border-top:2px solid var(--line); }
.faq-content .schema-faq-question{
  display:block; font-family:var(--sans); font-weight:700; font-size:1rem;
  color:var(--ink); margin-bottom:8px;
}
.faq-content .schema-faq-answer{ margin:0; color:var(--muted); line-height:1.7; }

/* =====================================================================
   WISHLIST — WPC Smart Wishlist's default output on the dedicated
   /wishlist/ page (both the empty-state message and the populated
   table) had no theme styling at all: bare text on the teal wash, then
   a raw unstyled HTML table with a default grey "Add to cart" button.
   ===================================================================== */
.wishlist-content{ max-width:1000px !important; }
.wishlist-content .woosw-popup-content-mid-message{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center; padding:clamp(40px,6vw,64px) 20px; background:var(--paper);
  border:1px solid var(--line-soft); border-radius:20px; box-shadow:var(--shadow-soft);
  color:var(--muted); font-size:1.02rem;
}
.wishlist-content .woosw-popup-content-mid-message::before{
  content:"♡"; font-size:2.2rem; color:var(--turq-deep); line-height:1;
}
.wishlist-content .woosw-items{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line-soft); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-soft); }
.wishlist-content .woosw-item{ border-bottom:1px solid var(--line-soft); }
.wishlist-content .woosw-item:last-child{ border-bottom:none; }
.wishlist-content .woosw-item > td{ padding:18px; vertical-align:middle; }
.wishlist-content .woosw-item--remove{ width:36px; padding-right:0 !important; }
.wishlist-content .woosw-item--remove span{
  display:block; width:22px; height:22px; border-radius:50%; cursor:pointer; position:relative;
  color:var(--muted); transition:background .3s, color .3s;
}
/* The plugin's own icon-font glyph (.woosw-item--remove span:before, its
   "woosw" icon font) out-specifies a plain 2-class override — match its
   3-class chain so our plain X actually replaces the icon-font glyph
   instead of rendering behind/alongside it. */
.wishlist-content .woosw-items .woosw-item .woosw-item--remove span::before,
.wishlist-content .woosw-items .woosw-item .woosw-item--remove span::after{
  content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; background:currentColor;
  font-size:0;
}
.wishlist-content .woosw-items .woosw-item .woosw-item--remove span::before{ transform:translate(-50%,-50%) rotate(45deg); }
.wishlist-content .woosw-items .woosw-item .woosw-item--remove span::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.wishlist-content .woosw-item--remove span:hover{ background:var(--mist); color:#9b3232; }
.wishlist-content .woosw-item--image img{ width:64px; height:64px; object-fit:cover; border-radius:12px; display:block; }
.wishlist-content .woosw-item--name a{ color:var(--ink); font-weight:600; font-size:1rem; }
.wishlist-content .woosw-item--name a:hover{ color:var(--turq-deep); }
.wishlist-content .woosw-item--price{ color:var(--ink); font-weight:500; margin-top:4px; }
.wishlist-content .woosw-item--time{ color:var(--muted); font-size:.78rem; margin-top:6px; }
.wishlist-content .woosw-item--note{ color:var(--turq-deep); font-size:.8rem; margin-top:6px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.wishlist-content .woosw-item--actions{ text-align:right; }
.wishlist-content .woosw-item--actions .add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.86rem; letter-spacing:.03em;
  padding:.7em 1.5em; border-radius:100px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--turq-bright), var(--turq)); color:#04363a;
  box-shadow:0 14px 28px -14px rgba(21,174,192,.7); transition:transform .3s var(--ease), box-shadow .3s;
}
.wishlist-content .woosw-item--actions .add_to_cart_button:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(21,174,192,.85); color:#04363a; }
.wishlist-content .woosw-actions{ margin-top:20px; }
.wishlist-content .woosw-copy{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--mist); border:1px solid var(--line-soft); border-radius:14px; padding:14px 18px;
}
.wishlist-content .woosw-copy-label{ color:var(--muted); font-size:.86rem; white-space:nowrap; }
.wishlist-content #woosw_copy_url{
  flex:1 1 220px; min-width:0; padding:.6em .9em; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); font-size:.86rem; color:var(--ink);
}
.wishlist-content .woosw-copy-btn .button{
  padding:.6em 1.3em; border-radius:100px; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font-size:.86rem; font-weight:500; cursor:pointer; transition:background .3s;
}
.wishlist-content .woosw-copy-btn .button:hover{ background:var(--turq); border-color:var(--turq); color:#04363a; }
@media (max-width:640px){
  .wishlist-content .woosw-item{ display:flex; flex-wrap:wrap; }
  .wishlist-content .woosw-item > td{ padding:10px; }
  .wishlist-content .woosw-item--actions{ width:100%; text-align:left; padding-left:82px !important; margin-top:-10px; }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
/* Full redesign: was a single flat #d3e3e5 card with the form and a much
   shorter info column side by side — visually flat, and the submit
   button (plain .btn-turq, inline style="justify-self:start") had no
   width/alignment rule of its own so it just sat at whatever size its
   text produced, flush left under the textarea. Now a genuine two-tone
   split panel (dark brand panel + light form, edge to edge, each side
   filling its own column with its own padding/background instead of
   sharing one flat card) and the button is an explicit full-width CTA
   matching the product-card "Add to cart" treatment used elsewhere. */
.contact-grid{
  max-width:1080px; margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr;
  background:var(--paper); border-radius:32px; overflow:hidden; box-shadow:var(--shadow-soft);
}
.contact-panel{
  position:relative; overflow:hidden; background:linear-gradient(160deg,var(--ink-2),var(--ink-3));
  color:var(--on-dark); padding:clamp(40px,5vw,56px); display:flex; flex-direction:column; justify-content:center;
}
.contact-panel::before{
  content:""; position:absolute; top:-90px; right:-70px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(52,205,217,.28), transparent 70%); pointer-events:none;
}
.contact-mark{ width:44px; height:44px; color:var(--turq-bright); margin-bottom:20px; }
.contact-panel h3{ position:relative; font-family:var(--serif); font-size:1.7rem; color:#fff; margin:0 0 12px; }
.contact-panel p{ position:relative; color:var(--on-dark-mut); line-height:1.65; margin:0 0 26px; max-width:30ch; }
.contact-ig{
  position:relative; display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  color:#fff; font-size:.9rem; border:1px solid rgba(255,255,255,.32); padding:10px 18px; border-radius:100px;
  transition:background .35s var(--ease), border-color .35s, transform .35s;
}
.contact-ig:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

.contact-form{ display:grid; align-content:start; gap:14px; padding:clamp(36px,5vw,56px); }
.contact-form label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--turq-deep); margin-bottom:-6px; }
.contact-form input,.contact-form textarea{
  width:100%; padding:.95em 1.15em; border-radius:14px; border:1px solid var(--line); background:var(--mist);
  font-family:inherit; font-size:.95rem; color:var(--ink); transition:border-color .3s, background .3s, box-shadow .3s;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none; border-color:var(--turq); background:var(--paper); box-shadow:0 0 0 4px rgba(21,174,192,.16);
}
.contact-submit{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:8px; }
.contact-msg{ font-size:.86rem; color:var(--turq-deep); min-height:1em; }
@media (max-width:1040px){ .contact-panel{ text-align:center; align-items:center; } .contact-panel p{ max-width:none; } }

/* =====================================================================
   WOOCOMMERCE ORDER-RECEIVED / THANK YOU PAGE
   Entirely unstyled default WooCommerce markup until now — no theme CSS
   targeted any of it. The billing/shipping address columns in particular
   used WC's default layout, which left the two columns starting at
   different vertical positions (one ~30px lower than the other) with no
   card background to frame them; flex + align-items:flex-start fixes the
   offset outright instead of patching around it, and matching card
   styling (same tokens as .pair-item/.legal-content elsewhere) makes the
   two sit as a deliberate pair instead of loose text.
   ===================================================================== */
.woocommerce-order{ color:var(--ink); }
.woocommerce-order > .woocommerce-notice{ font-size:1.1rem; margin:0 0 28px; }
.woocommerce-order-overview{
  display:flex; flex-wrap:wrap; gap:28px; list-style:none; margin:0 0 32px; padding:18px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.woocommerce-order-overview li{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.woocommerce-order-overview li strong{
  display:block; margin-top:4px; font-size:1rem; letter-spacing:normal; text-transform:none; color:var(--ink);
}
.woocommerce-table.order_details{
  width:100%; border-collapse:collapse; margin:0 0 40px;
  border:1px solid var(--line-soft); border-radius:16px; overflow:hidden;
}
.woocommerce-table.order_details th,
.woocommerce-table.order_details td{ padding:16px 20px; border-bottom:1px solid var(--line-soft); text-align:left; }
.woocommerce-table.order_details th:last-child,
.woocommerce-table.order_details td:last-child{ text-align:right; }
.woocommerce-table.order_details thead th{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--turq-deep); background:var(--mist);
}
.woocommerce-table.order_details tfoot th,
.woocommerce-table.order_details tfoot td{ font-weight:700; }
.woocommerce-table.order_details tr:last-child th,
.woocommerce-table.order_details tr:last-child td{ border-bottom:none; }
.woocommerce-customer-details > h2{ font-size:1.3rem; margin:0 0 20px; }
.woocommerce-columns--addresses{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:24px; list-style:none; margin:0; padding:0;
}
.woocommerce-column{
  flex:1 1 280px; padding:22px 24px; background:var(--paper);
  border:1px solid var(--line); border-radius:16px;
}
/* A plugin/Elementor default rule targeting .col-2 specifically (higher
   specificity than a bare .woocommerce-column) was adding margin-top:30px
   to the shipping column only, so the two never lined up however the
   flex container was aligned — this has to win on specificity, not just
   declaration order. */
body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column,
body.woocommerce-order-received .woocommerce-columns--addresses .col-1,
body.woocommerce-order-received .woocommerce-columns--addresses .col-2{
  margin:0 !important;
}
.woocommerce-column h2{ font-size:1.05rem; margin:0 0 10px; }
.woocommerce-column address{ font-style:normal; color:var(--muted); line-height:1.6; }
@media (max-width:640px){ .woocommerce-order-overview{ gap:18px 28px; } }

/* link styling for cards that navigate to product pages */
.card-link{ color:inherit; }
.card .card-name a:hover{ color:var(--turq-deep); }

/* =====================================================================
   PLUGIN INTEGRATION — wishlist/compare/bought-together buttons injected
   via WooCommerce hooks (woocommerce_after_shop_loop_item,
   woocommerce_single_product_summary). Unstyled by default, so give
   them a minimal treatment matching the rest of the card/detail chrome.
   Product-card instances (.woosc-btn/.woosw-btn) get small icon pills
   instead of bare text links — the plugins ship no icon markup of their
   own, so the icon is a background-image swapped on hover (safer across
   browsers than mask-image luminance/alpha quirks for a plain two-tone
   icon like this).
   ===================================================================== */
.card-plugin-actions{ display:flex; gap:14px; margin-top:10px; }
.card-plugin-actions button,.card-plugin-actions a{
  background:none; border:none; padding:0; font-family:var(--sans); font-size:.78rem; font-weight:500;
  color:var(--muted); cursor:pointer; transition:color .3s;
}
.card-plugin-actions button:hover,.card-plugin-actions a:hover{ color:var(--turq-deep); }

.card-body .card-plugin-actions{ gap:8px; margin:0; }
.card-body .card-plugin-actions button,
.card-body .card-plugin-actions a{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--mist); border:1px solid transparent; border-radius:100px;
  padding:7px 13px 7px 9px; font-size:.72rem; color:var(--ink);
  transition:background .3s, color .3s, transform .3s;
}
.card-body .card-plugin-actions button::before,
.card-body .card-plugin-actions a::before{
  content:""; width:13px; height:13px; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-size:contain;
}
.card-body .card-plugin-actions .woosc-btn::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h13M14 4l3 4-3 4M20 16H7M10 12l-3 4 3 4' fill='none' stroke='%2316302D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.card-body .card-plugin-actions .woosw-btn::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.3-9.3-8.7C1.3 8 2.8 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.2 0 4.7 3 3.3 6.3C15 15.7 12 20 12 20z' fill='none' stroke='%2316302D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.card-body .card-plugin-actions button:hover,
.card-body .card-plugin-actions a:hover{ background:var(--turq); color:#fff; transform:translateY(-1px); }
.card-body .card-plugin-actions .woosc-btn:hover::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h13M14 4l3 4-3 4M20 16H7M10 12l-3 4 3 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.card-body .card-plugin-actions .woosw-btn:hover::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.3-9.3-8.7C1.3 8 2.8 5 6 5c2 0 3.3 1 4 2.3C10.7 6 12 5 14 5c3.2 0 4.7 3 3.3 6.3C15 15.7 12 20 12 20z' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.detail-plugin-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.detail-plugin-actions button,.detail-plugin-actions a{
  background:none; border:1px solid var(--line); border-radius:100px; padding:.6em 1.2em;
  font-family:var(--sans); font-size:.84rem; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color .3s, color .3s;
}
.detail-plugin-actions button:hover,.detail-plugin-actions a:hover{ border-color:var(--turq); color:var(--turq-deep); }

/* Contains wide plugin markup (e.g. Smart Compare's fixed-width quick
   comparison table) to a horizontal scrollbar instead of letting it stretch
   the whole page/header on tablet and mobile — and gives the tabs below
   the same max-width/gutter as the rest of the page's sections. */
/* Wraps BOTH the tabs card and the comparison table below it (they share
   one woocommerce_after_single_product_summary hook). overflow-x:auto used
   to live here, which meant scrolling the wide table sideways dragged the
   whole tabs card along with it — scoped down to .woosc-quick-table-products
   below instead, so only the table itself scrolls. */
.plugin-hook-scroll{ max-width:1180px; margin:0 auto; padding:0 var(--pad-x); }
/* overflow-x:auto alone wasn't enough: with 5+ products in a visitor's
   compare list, the plugin's <table> (no max-width, one 300px column per
   product) paints past this box's right edge instead of clipping/scrolling
   — visible on both GPU and software rendering, so it's a real paint bug,
   not a headless quirk. contain:paint forces the clip; the border + bigger
   scrollbar make it visibly scrollable instead of looking cut off. */
.woosc-quick-table-products{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; contain:paint;
  border:1px solid var(--line-soft); border-radius:12px;
  scrollbar-width:thin;
}
.woosc-quick-table-products::-webkit-scrollbar{ height:10px; }
.woosc-quick-table-products::-webkit-scrollbar-thumb{ background:var(--silver-mid); border-radius:100px; }
.woosc-quick-table-products::-webkit-scrollbar-track{ background:transparent; }

/* WooCommerce's own tab markup (Product details / Shipping and Returns /
   Reviews) had zero theme styling and was rendering as a bare bullet list —
   the theme never expected real WC tabs to reach the page before the hooks
   were wired up. Style it as a proper underline tab bar. */
/* Product details / Shipping / Reviews tab content had no card of its own
   — long ingredient lists and "Free From" badge grids floated directly on
   the teal body wash for their whole height, the one place on the product
   page that never got the "card floating on the wash" treatment used
   everywhere else (cart, checkout, account, blog posts, legal pages). */
.woocommerce-tabs{
  max-width:1000px; margin:0 auto; background:var(--paper);
  border:1px solid var(--line-soft); border-radius:20px;
  padding:clamp(28px,4vw,48px); box-shadow:var(--shadow-soft);
}
.woocommerce-tabs ul.tabs{
  display:flex; gap:clamp(20px,3vw,36px); flex-wrap:wrap; list-style:none;
  margin:0 0 30px; padding:0 0 0; border-bottom:1px solid var(--line);
}
.woocommerce-tabs ul.tabs li{ margin:0; }
.woocommerce-tabs ul.tabs li a{
  display:inline-block; padding:4px 2px 14px; font-family:var(--sans);
  font-size:.95rem; font-weight:500; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .3s, border-color .3s;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover{ color:var(--turq-deep); border-color:var(--turq); }
.woocommerce-tabs .woocommerce-Tabs-panel{ max-width:100%; }
.woocommerce-tabs .woocommerce-Tabs-panel h2:first-child{ display:none; } /* redundant with the tab label itself */
/* The "Key Ingredients" / "Free From" content wraps every line — both
   ingredient names AND their full description sentences — in <h2>, so with
   the site's default h2 styling (large serif, margin:0) it reads as an
   unbroken wall of identically huge headings. Can't reliably tell name from
   description apart (both are literally the same tag), but scoping h2 down
   to a modest sub-heading size with real spacing turns it back into a
   scannable list instead of a wall of shouting text. */
.woocommerce-Tabs-panel h2,
.woosc_table h2{
  font-family:var(--sans); font-size:1rem; font-weight:600; line-height:1.5;
  letter-spacing:0; color:var(--ink); margin:22px 0 4px;
}
.woocommerce-Tabs-panel h2:first-of-type,
.woosc_table h2:first-of-type{ margin-top:0; }

/* "Free From" badges and "Key Ingredients" — functions.php's the_content
   filter (is_product() only) regroups the author's flat figure+h3 / h2+h2
   sequences into these two grids server-side; this is purely their visual
   treatment. Icon images come in at their raw upload size (~266px) with no
   sizing of their own, which is what made the original list so sprawling. */
.pd-freefrom-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:22px; margin:18px 0 36px;
}
.pd-freefrom-item{ text-align:center; }
/* Same pure-white-on-transparent badge artwork as .woosc_table figure
   above (built for the teal wash) — needs the same colored circle backdrop
   here, since this grid sits on the light card background too. */
.pd-freefrom-item figure{
  margin:0 auto 10px; background:var(--turq); border-radius:50%;
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
}
.pd-freefrom-item img{ width:34px; height:34px; object-fit:contain; margin:0; }
.pd-freefrom-item h3{
  font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--ink);
  margin:0; letter-spacing:.01em;
}
.pd-freefrom-item p{
  font-family:var(--sans); font-size:.76rem; color:var(--muted); margin:4px 0 0; line-height:1.4;
}
.pd-ingredient-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:18px; margin:18px 0 36px;
}
.pd-ingredient-item{
  padding:18px 20px; background:var(--mist); border:1px solid var(--line-soft); border-radius:14px;
}
.pd-ingredient-item h4{
  font-family:var(--sans); font-size:.92rem; font-weight:700; color:var(--turq-deep); margin:0 0 6px;
}
.pd-ingredient-item p{ font-size:.86rem; color:var(--ink); margin:0; line-height:1.55; }
/* The stray full-width photo some products' content ends with (pasted
   between "Free From" and "Key Ingredients") — cap it instead of letting
   it run at its raw upload width past the card's padding. */
.woocommerce-Tabs-panel > p > img{ max-width:100%; height:auto; border-radius:14px; }
/* One product's "Free From" list was authored with inline checkmark SVGs
   (icon-list style) instead of plain bullets like the others — the raw SVG
   has no width/height, so it renders at its default ~130px block size
   instead of a small bullet icon. */
.woocommerce-Tabs-panel li svg,
.woosc_table li svg{
  width:16px; height:16px; flex-shrink:0; vertical-align:-3px; margin-right:6px; fill:var(--turq-deep);
}
/* The comparison table's "Read more" / "Add to cart" buttons use
   WooCommerce's generic .button class — plain grey pills that read as an
   unstyled default next to the rest of the branded page. Give purchasable
   items the same solid-teal CTA treatment as .btn-turq, and out-of-stock
   "Read more" the same muted treatment as .btn-mini, for consistency. */
.woosc_table a.button{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.04em;
  padding:.65em 1.2em; border-radius:100px; border:1px solid var(--silver-mid);
  color:var(--ink); background:linear-gradient(125deg,rgba(247,250,250,.9),rgba(199,208,211,.72));
  transition:background .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.woosc_table a.button:hover{ background:var(--turq-deep); color:#fff; border-color:var(--turq-deep); transform:translateY(-2px); }
.woosc_table a.button.add_to_cart_button{
  background:linear-gradient(135deg, var(--turq-bright), var(--turq)); color:#04363a;
  border-color:transparent; box-shadow:0 12px 24px -12px rgba(21,174,192,.7);
}
.woosc_table a.button.add_to_cart_button:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(21,174,192,.85); }
section.woosc-quick-table.label-column-yes{ margin:80px auto; }
.woosc-quick-table .woosc-quick-table-products table th,
.woosc-quick-table .woosc-quick-table-products table td{ padding:10px; }

/* =====================================================================
   CART / CHECKOUT — page.php's plain <section class="section"> has no
   background of its own (by design — most page.php content is short text
   that reads fine directly on the body wash), so WooCommerce's Cart/
   Checkout blocks were floating raw form fields and tables directly on
   the saturated teal body background for their whole height, instead of
   the "card floating on the wash" treatment every other content block on
   the site uses. Give just these two page types that same card treatment.
   ===================================================================== */
body.woocommerce-checkout main > .section,
body.woocommerce-cart main > .section,
body.woocommerce-account main > .section{
  /* page.php (the generic template these pages route through) sets an
     inline max-width:840px on this same element for plain text pages —
     an inline style attribute beats any non-!important external rule, so
     max-width here needs !important or these three page types stay stuck
     at 840px regardless of what's set below. */
  max-width:1100px !important; margin:0 auto; background:var(--paper);
  border:1px solid var(--line-soft); border-radius:20px;
  padding:clamp(28px,4vw,48px); box-shadow:var(--shadow-soft);
}
body.woocommerce-checkout main > .section{
  max-width:1220px !important; padding:50px !important; margin-bottom:80px !important;
}
body.woocommerce-cart main > .section{
  padding:50px !important; margin-bottom:80px !important;
}

/* =====================================================================
   MY ACCOUNT — the default WooCommerce markup here was completely
   unstyled: a bare bullet-point nav list, no card treatment on the
   content area, default grey buttons/inputs, plain bulleted notices.
   Nav + content are siblings (WC's own my-account.php template, no
   wrapping div), so laid out here as two columns inside the shared card
   added above rather than needing a template override.
   ===================================================================== */
body.woocommerce-account main > .section{
  display:flex; align-items:flex-start; gap:clamp(30px,4vw,56px);
  padding:50px !important; margin-bottom:80px !important;
}
.woocommerce-MyAccount-navigation{ flex:0 0 240px; position:sticky; top:100px; }
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.woocommerce-MyAccount-navigation-link a{
  display:flex; align-items:center; gap:12px; padding:.72em 1.1em; border-radius:14px;
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  color:var(--muted); background:transparent; transition:background .3s, color .3s;
}
.woocommerce-MyAccount-navigation-link a:hover{ background:var(--mist); color:var(--turq-deep); }
.woocommerce-MyAccount-navigation-link.is-active a{
  background:linear-gradient(135deg, var(--turq-bright), var(--turq)); color:#04363a;
  box-shadow:0 14px 26px -16px rgba(21,174,192,.7);
}
.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
.acct-nav-icon{ display:inline-flex; width:19px; height:19px; flex:0 0 19px; }
.acct-nav-icon svg{ width:100%; height:100%; display:block; }
.acct-nav-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.woocommerce-MyAccount-content{ flex:1; min-width:0; }
.woocommerce-MyAccount-content > p:first-child{ margin-top:0; }
.woocommerce-MyAccount-content h3{ font-size:1.3rem; margin:28px 0 14px; }
.woocommerce-MyAccount-content h3:first-child{ margin-top:0; }

/* Notices (email confirm / no orders / saved changes / errors).
   WooCommerce's own base rule reserves 3.5em of left padding for an
   absolutely-positioned icon (::before, WooCommerce icon font) — our
   smaller padding here no longer leaves room for it, so it was
   overlapping the notice text instead of sitting in its own gutter.
   Simplest correct fix: this flex layout doesn't need that icon at all. */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:0 0 18px; padding:16px 20px; border-radius:14px; background:var(--mist);
  border:1px solid var(--line-soft); color:var(--ink); font-size:.92rem;
}
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-error::before{ display:none !important; }
.woocommerce-MyAccount-content .woocommerce-error{ background:rgba(192,57,43,.08); border-color:rgba(192,57,43,.22); color:#9b3232; }
.woocommerce-MyAccount-content .woocommerce-error li{ list-style:none; }
.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-info .button{ margin-left:auto; }

/* Buttons + inputs throughout the account area. WooCommerce's own core
   CSS targets these as ".woocommerce a.button" etc. (class+element), which
   out-specifies a plain ".woocommerce-MyAccount-content .button" rule
   (class+class) despite loading first — match its element-qualified
   selectors so the theme's styling actually wins. */
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button,
.woocommerce-MyAccount-content input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.9rem; letter-spacing:.04em;
  padding:.8em 1.7em; border-radius:100px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--turq-bright), var(--turq)); color:#04363a;
  box-shadow:0 14px 28px -14px rgba(21,174,192,.7);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content input.button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(21,174,192,.85); color:#04363a; }
.woocommerce-MyAccount-content a.woocommerce-Button--previous,
.woocommerce-MyAccount-content a.cancel{
  background:var(--mist); color:var(--ink); box-shadow:none; border:1px solid var(--line);
}
.woocommerce-MyAccount-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea{
  /* WC core's own compound selectors (e.g. ".woocommerce form .form-row
     input.input-text") out-specify a single-class override here, so the
     handful of properties that actually matter visually are !important. */
  width:100%; padding:.85em 1.1em; border-radius:14px !important; border:1px solid var(--line) !important;
  background:var(--paper) !important; font-family:inherit; font-size:.95rem; color:var(--ink);
  transition:border-color .3s;
}
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus{ outline:none; border-color:var(--turq); }
.woocommerce-MyAccount-content label{ display:block; font-size:.86rem; color:var(--ink); margin-bottom:6px; }
.woocommerce-MyAccount-content fieldset{
  border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin:22px 0 0;
}
.woocommerce-MyAccount-content fieldset legend{ padding:0 8px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--turq-deep); }
.woocommerce-MyAccount-content .form-row{ margin:0 0 16px; }
.woocommerce-LostPassword{ margin-top:14px; font-size:.86rem; }

/* =====================================================================
   DASHBOARD — welcome header, stat tiles, recent-order + quick-link cards.
   Markup from the theme's own woocommerce/myaccount/dashboard.php override.
   ===================================================================== */
.acct-dash{ display:flex; flex-direction:column; gap:28px; }
.acct-welcome{ display:flex; align-items:center; gap:18px; }
.acct-avatar{
  flex:0 0 56px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--turq-bright), var(--turq-deep)); color:#fff;
  font-family:var(--serif); font-size:1.5rem;
}
.acct-welcome-text{ flex:1; min-width:0; }
.acct-eyebrow{ margin:0 0 2px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq-deep); }
.acct-welcome h2{ margin:0; font-size:1.6rem; }
.acct-welcome-email{ margin:4px 0 0; color:var(--muted); font-size:.88rem; }
.acct-logout-link{
  flex:0 0 auto; font-family:var(--sans); font-size:.86rem; font-weight:500; color:var(--muted);
  padding:.65em 1.2em; border-radius:100px; border:1px solid var(--line); transition:border-color .3s, color .3s;
}
.acct-logout-link:hover{ color:var(--turq-deep); border-color:var(--turq); }

.acct-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.acct-stat{
  background:var(--mist); border:1px solid var(--line-soft); border-radius:16px;
  padding:18px 20px; display:flex; flex-direction:column; gap:4px;
}
.acct-stat-value{ font-family:var(--serif); font-size:1.65rem; color:var(--ink); }
.acct-stat-label{ font-size:.78rem; color:var(--muted); letter-spacing:.02em; }

.acct-dash-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start; }
.acct-card{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:18px; padding:22px 24px;
}
.acct-card h3{ margin:0 0 16px; font-size:1.08rem; }
.acct-order-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.acct-order-row-main{ display:flex; flex-direction:column; gap:2px; }
.acct-order-number{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); }
.acct-order-row-main time{ font-size:.78rem; color:var(--muted); }
.acct-order-summary{ margin:10px 0 18px; color:var(--muted); font-size:.9rem; }
.acct-empty-copy{ color:var(--muted); font-size:.92rem; margin:0 0 18px; }
.acct-ghost-btn{
  display:inline-flex; align-items:center; gap:.4em; font-family:var(--sans); font-size:.84rem; font-weight:500;
  color:var(--turq-deep); padding:.6em 1.3em; border-radius:100px; border:1px solid var(--turq);
  transition:background .3s, color .3s;
}
.acct-ghost-btn:hover{ background:var(--turq); color:#04363a; }
.acct-ghost-btn--small{ padding:.4em 1em; font-size:.76rem; }

.acct-status-pill{
  flex:0 0 auto; font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:.4em .9em; border-radius:100px; background:var(--mist); color:var(--turq-deep); white-space:nowrap;
}
.acct-status-completed,.acct-status-processing{ background:rgba(21,174,192,.16); color:var(--turq-deep); }
.acct-status-on-hold,.acct-status-pending{ background:rgba(201,151,38,.16); color:#8a6914; }
.acct-status-cancelled,.acct-status-failed,.acct-status-refunded{ background:rgba(192,57,43,.1); color:#9b3232; }

.acct-quicklink-grid{ display:flex; flex-direction:column; gap:8px; }
.acct-quicklink{
  display:flex; align-items:center; gap:12px; padding:.75em 1em; border-radius:12px;
  font-family:var(--sans); font-size:.9rem; color:var(--ink); background:var(--mist);
  transition:background .3s, color .3s;
}
.acct-quicklink:hover{ background:var(--turq); color:#04363a; }
.acct-quicklink .acct-nav-icon{ color:var(--turq-deep); }
.acct-quicklink:hover .acct-nav-icon{ color:#04363a; }

/* Orders table — desktop stays a table; mobile collapses each <tr> into a
   labeled card using the data-title attribute WooCommerce already renders
   on every <td> (shop_table_responsive), no markup changes needed. */
.woocommerce-MyAccount-content table.shop_table{
  width:100%; border-collapse:collapse; margin:0 0 20px; font-size:.9rem;
}
.woocommerce-MyAccount-content table.shop_table th{
  text-align:left; padding:12px 14px; font-weight:600; color:var(--turq-deep);
  border-bottom:2px solid var(--line); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
}
.woocommerce-MyAccount-content table.shop_table td{ padding:14px; border-bottom:1px solid var(--line-soft); }
.woocommerce-MyAccount-content table.shop_table .button{ padding:.5em 1.1em; font-size:.78rem; }
.woocommerce-orders-table__cell-order-status{ font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status{ color:var(--turq-deep); }
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status{ color:#8a6914; }
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status{ color:#9b3232; }
.woocommerce-orders-table__cell-order-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Addresses */
.acct-lede{ color:var(--muted); }
.acct-address-grid{ display:flex; flex-wrap:wrap; gap:24px; }
.woocommerce-Addresses .woocommerce-Address,
.acct-address-card{
  flex:1 1 260px; background:var(--mist); border:1px solid var(--line-soft);
  border-radius:16px; padding:22px 24px;
}
.woocommerce-Address-title{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.woocommerce-Address-title .acct-nav-icon{ color:var(--turq-deep); }
.woocommerce-Address-title h2{ margin:0; font-size:1.1rem; flex:1; font-family:var(--serif); font-weight:400; }
.woocommerce-Address-title .edit{ flex:0 0 auto; }
.woocommerce-Address address{ font-style:normal; color:var(--muted); line-height:1.6; }
.acct-address-empty{ font-style:italic; opacity:.8; }

/* Account details / edit-address forms — WC's own float-based form-row-
   first/last layout, switched to a CSS grid so the two columns line up
   cleanly without relying on float clearing. */
.woocommerce-EditAccountForm,
.woocommerce-address-fields__field-wrapper{
  display:grid; grid-template-columns:1fr 1fr; gap:0 20px;
}
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last,
.woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-address-fields__field-wrapper .form-row-last{
  /* WC core's own "form .form-row-first/last{width:47%;float:...}" rule
     (woocommerce-layout.css) carries an element-qualified selector that
     out-specifies a plain two-class override — needs !important here,
     same reasoning as the input/select rules below. Without it the address
     form's first/last-name fields render at the browser's intrinsic input
     width instead of filling their grid column. */
  float:none !important; width:auto !important;
}
.woocommerce-EditAccountForm .form-row-wide,
.woocommerce-EditAccountForm fieldset,
.woocommerce-EditAccountForm > p:last-child,
.woocommerce-address-fields__field-wrapper .form-row-wide{ grid-column:1/-1; float:none; width:auto; }
.woocommerce-EditAccountForm .clear{ display:none; }
.woocommerce-EditAccountForm span#account_display_name_description{ display:block; margin-top:6px; font-size:.78rem; color:var(--muted); }

/* Country/state field (woocommerce_form_field's country_to_state--single
   select). WC core deliberately strips this one down to plain bold text —
   appearance:none, no border, pointer-events:none — presumably meant to be
   dressed up by a theme's own form chrome, which this theme's generic
   select rule above doesn't reach (core's own rule is written to beat a
   plain-class override, same specificity pattern as form-row-first/last
   above) and which never got pointer-events restored, so it was also
   unclickable. */
.woocommerce-MyAccount-content select.country_to_state--single{
  pointer-events:auto !important; appearance:auto !important; -webkit-appearance:menulist !important;
  font-weight:400 !important; width:100% !important;
  padding:.85em 1.1em !important; border-radius:14px !important; border:1px solid var(--line) !important;
  background:var(--paper) !important;
}

/* The logged-out login/register form is NOT wrapped in
   .woocommerce-MyAccount-content at all (that div only exists once a
   session is logged in) — style it directly so a guest visiting
   /my-account/ gets the same branded inputs/buttons as everywhere else. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register{
  border:1px solid var(--line); border-radius:16px; padding:24px; margin:0;
}
body.woocommerce-account .woocommerce-form-row{ margin:0 0 16px; }
body.woocommerce-account .woocommerce-form-row label{ display:block; font-size:.86rem; color:var(--ink); margin-bottom:6px; }
body.woocommerce-account .woocommerce-Input,
body.woocommerce-checkout .woocommerce-Input,
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea{
  /* Checkout's billing/shipping fields (woocommerce_form_field()) only get
     the plain .input-text class, not .woocommerce-Input like the account
     forms — needed a second selector, not just a specificity fix. */
  width:100%; padding:.85em 1.1em; border-radius:14px !important; border:1px solid var(--line) !important;
  background:var(--paper) !important; font-family:inherit; font-size:.95rem; color:var(--ink);
  transition:border-color .3s;
}
body.woocommerce-account .woocommerce-Input:focus,
body.woocommerce-checkout .woocommerce-Input:focus,
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus{ outline:none; border-color:var(--turq) !important; }
body.woocommerce-account a.button,
body.woocommerce-account button.button,
body.woocommerce-account input.button,
body.woocommerce-account input[type="submit"],
body.woocommerce-checkout a.button,
body.woocommerce-checkout button.button,
body.woocommerce-checkout input.button,
body.woocommerce-checkout input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.9rem; letter-spacing:.04em;
  padding:.8em 1.7em; border-radius:100px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--turq-bright), var(--turq)); color:#04363a;
  box-shadow:0 14px 28px -14px rgba(21,174,192,.7);
  transition:transform .3s var(--ease), box-shadow .3s;
}
body.woocommerce-account a.button:hover,
body.woocommerce-account button.button:hover,
body.woocommerce-account input.button:hover,
body.woocommerce-account input[type="submit"]:hover,
body.woocommerce-checkout a.button:hover,
body.woocommerce-checkout button.button:hover,
body.woocommerce-checkout input.button:hover,
body.woocommerce-checkout input[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(21,174,192,.85); color:#04363a; }
body.woocommerce-account .woocommerce-LostPassword{ margin-top:14px; font-size:.86rem; }

/* =====================================================================
   CHECKOUT — coupon toggle, coupon form, order review table, payment
   methods. All classic-template markup (checkout uses the
   [woocommerce_checkout] shortcode, not blocks), styled directly.
   ===================================================================== */
body.woocommerce-checkout .woocommerce-info{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 24px; padding:14px 18px; border-radius:14px; background:var(--mist);
  border:1px solid var(--line-soft); color:var(--ink); font-size:.92rem;
}
body.woocommerce-checkout .woocommerce-info::before{ display:none !important; } /* see MY ACCOUNT notices note above — same icon/padding collision */
body.woocommerce-checkout .woocommerce-info a{ color:var(--turq-deep); font-weight:500; text-decoration:underline; }
body.woocommerce-checkout .checkout_coupon{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  background:var(--mist); border:1px solid var(--line-soft); border-radius:14px;
  padding:18px; margin:0 0 24px;
}
body.woocommerce-checkout .checkout_coupon .form-row{ flex:1 1 220px; margin:0; }
body.woocommerce-checkout .checkout_coupon .form-row-last{ flex:0 0 auto; }

/* Billing / shipping columns in the checkout FORM (#customer_details,
   WC's classic .col2-set). WC's own layout floats .col-1/.col-2 at 48%
   width — our global box-sizing and image/input resets break that float,
   so both columns were rendering at full width, stacked, instead of side
   by side. Flex replaces it.
   Scoped to #customer_details specifically (not just body.woocommerce-
   checkout .col2-set) because the order-received "thank you" page reuses
   the exact same .col2-set/.col-1/.col-2 classes for its billing/shipping
   *summary* columns, and carries the same woocommerce-checkout body class
   (it's a sub-endpoint of the checkout page) — the unscoped selector was
   matching there too, adding this margin-top to a column it was never
   meant for and leaving the two summary columns visibly unaligned. */
body.woocommerce-checkout #customer_details.col2-set{
  display:flex; flex-wrap:wrap; width:auto;
}
body.woocommerce-checkout #customer_details.col2-set .col-1,
body.woocommerce-checkout #customer_details.col2-set .col-2{
  flex:1 1 320px; width:auto; float:none;
}
body.woocommerce-checkout #customer_details.col2-set .col-2{ margin-top:30px !important; }
@media (max-width:640px){
  body.woocommerce-checkout #customer_details.col2-set .col-1,
  body.woocommerce-checkout #customer_details.col2-set .col-2{ flex-basis:100%; }
}

/* Same float-vs-reset problem one level down: WC's own First name / Last
   name pair uses .form-row-first/.form-row-last at 47% float, which was
   overflowing its container at narrow widths (each field wide enough to
   push past the edge of the card instead of shrinking or stacking).
   Flex again, so it shrinks and wraps like everything else here. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
  display:flex; flex-wrap:wrap; gap:0 16px;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row{
  flex:1 1 100%; width:auto; float:none;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-first,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-last{
  flex:1 1 180px;
}

/* Order-summary table can still be tighter than its 3 columns want at very
   narrow widths — scroll it horizontally instead of blowing out the page. */
body.woocommerce-checkout #order_review{ overflow-x:auto; }

body.woocommerce-checkout table.shop_table{
  width:100%; border-collapse:collapse; margin:0; font-size:.9rem;
}
body.woocommerce-checkout table.shop_table th{
  text-align:left; padding:12px 14px; font-weight:600; color:var(--turq-deep);
  border-bottom:2px solid var(--line); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
}
body.woocommerce-checkout table.shop_table td{ padding:14px; border-bottom:1px solid var(--line-soft); }
body.woocommerce-checkout table.shop_table tfoot th,
body.woocommerce-checkout table.shop_table tfoot td{ border-bottom:none; }

.mintpay-info-icon{ margin-top:20px; margin-bottom:20px !important; }

body.woocommerce-checkout ul.wc_payment_methods{ list-style:none; margin:24px 0 0; padding:0; }
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method{
  border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:0 0 10px; background:var(--paper);
}
body.woocommerce-checkout ul.wc_payment_methods label{ display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--ink); margin:0; cursor:pointer; }
body.woocommerce-checkout ul.wc_payment_methods label img{ height:20px; width:auto; display:inline-block; }
body.woocommerce-checkout ul.wc_payment_methods input.input-radio{ accent-color:var(--turq); width:16px; height:16px; }
body.woocommerce-checkout .payment_box{
  margin-top:10px; padding:14px 16px 0; border-top:1px solid var(--line-soft);
  color:var(--muted); font-size:.86rem; background:none !important;
}
body.woocommerce-checkout .payment_box::before{ display:none !important; } /* kills WC's default speech-bubble arrow (its own rule uses #payment, an ID — needs !important to beat) */
body.woocommerce-checkout #place_order{ margin-top:20px; }

/* =====================================================================
   CHECKOUT LAYOUT — billing details on the left, order summary + payment
   on the right, matching the two-column layout used elsewhere in
   WooCommerce (and by the requested reference). Needs the theme's
   woocommerce/checkout/form-checkout.php override (wraps #customer_details
   and the order-review block in .mw-checkout-col--details/--summary) —
   those two divs don't exist in WC's own default markup.
   ===================================================================== */
body.woocommerce-checkout .mw-checkout-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0 clamp(32px,5vw,64px); align-items:start;
}
body.woocommerce-checkout .mw-checkout-col--summary{ position:sticky; top:100px; }
body.woocommerce-checkout .mw-checkout-col--details .woocommerce-billing-fields > h3,
body.woocommerce-checkout .mw-checkout-col--summary #order_review_heading{
  font-family:var(--sans); font-size:1.2rem; font-weight:600; color:var(--ink);
  margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line-soft);
}
@media (max-width:900px){
  /* minmax(0,1fr), not bare 1fr — a bare fr track still grows to fit its
     item's min-content (here, the billing/order-summary column's own
     nested flex rows), which was pushing the column ~60px past the card's
     edge and clipping it against the body's overflow-x:hidden below. */
  body.woocommerce-checkout .mw-checkout-grid{ grid-template-columns:minmax(0,1fr); }
  body.woocommerce-checkout .mw-checkout-col--summary{ position:static; margin-top:40px; }
}

/* Order-summary product thumbnails (woocommerce/checkout/review-order.php
   override adds this column — core's table has no image column at all). */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail{
  width:56px; padding-right:14px !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-thumbnail img{
  width:56px; height:56px; object-fit:cover; border-radius:10px; display:block;
  border:1px solid var(--line-soft);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead .product-thumbnail{ padding:0 14px 12px 0 !important; }

/* =====================================================================
   CART — the Gutenberg Cart block (not a classic template at all — this
   page's content is literally <!-- wp:woocommerce/cart -->, rendered by
   WooCommerce Blocks' own JS/PHP render callback). No theme template can
   touch it; every property here targets the block's own stable CSS
   classes instead.
   ===================================================================== */
.wc-block-cart-items{ width:100%; border-collapse:collapse; font-size:.9rem; }
.wc-block-cart-items__header th{
  text-align:left; padding:0 0 12px; font-weight:600; color:var(--turq-deep);
  border-bottom:2px solid var(--line); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
}
.wc-block-cart-items__row td{ padding:18px 0; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.wc-block-cart-item__product a{ color:var(--ink); font-weight:500; }
.wc-block-cart-item__product a:hover{ color:var(--turq-deep); }

.wc-block-components-quantity-selector{
  display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:100px;
  overflow:hidden; height:36px;
}
.wc-block-components-quantity-selector__button{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--ink); background:var(--mist); border:none; font-size:1rem; cursor:pointer;
  transition:background .3s, color .3s;
}
.wc-block-components-quantity-selector__button:hover{ background:var(--turq); color:#04363a; }
.wc-block-components-quantity-selector__input{
  width:40px; text-align:center; border:none; background:none; font-size:.92rem; color:var(--ink); padding:0;
}
.wc-block-cart-item__remove-link{
  color:var(--muted); font-size:.82rem; text-decoration:none; margin-top:10px; display:inline-block;
  transition:color .3s;
}
.wc-block-cart-item__remove-link:hover{ color:#9b3232; }

.wc-block-cart__totals-title{ font-size:1.2rem; margin:0 0 16px; }
.wc-block-components-totals-item{ font-size:.92rem; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.wc-block-components-totals-item__label{ color:var(--muted); }
.wc-block-components-totals-item__value{ color:var(--ink); font-weight:500; }
.wc-block-cart__totals-title ~ .wc-block-components-totals-item:last-of-type,
.wc-block-components-totals-footer-item{ border-bottom:none; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--serif); font-size:1.25rem; color:var(--ink); font-weight:400;
}
/* WC core sets margin-bottom:3em on the block itself (inside a container
   query, ≥700px) — that's extra space stacking on top of the card wrapper's
   own padding-bottom below, so the cart card ends up with a visible gap
   before its own bottom edge. Zero it out; our page section owns that space. */
.wc-block-cart{ margin-bottom:0 !important; }

a.wc-block-cart__submit-button.wc-block-components-button{
  display:flex; align-items:center; justify-content:center; width:100%;
  font-family:var(--sans); font-weight:500; font-size:.92rem; letter-spacing:.04em;
  padding:.95em 1.9em; border-radius:100px; border:none;
  background:linear-gradient(135deg, var(--turq-bright), var(--turq)); color:#04363a !important;
  box-shadow:0 16px 32px -14px rgba(21,174,192,.7);
  transition:transform .4s var(--ease), box-shadow .4s;
}
a.wc-block-cart__submit-button.wc-block-components-button:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -14px rgba(21,174,192,.85); }
.wc-block-cart__submit-button .wc-block-components-button__text{ color:inherit; }

.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button{ color:var(--turq-deep); font-weight:500; }
.wc-block-components-totals-coupon .wc-block-components-text-input input,
.wc-block-components-totals-coupon input[type="text"]{
  border-radius:14px !important; border:1px solid var(--line) !important; background:var(--paper) !important;
}
.wc-block-components-totals-coupon-link ~ * .wc-block-components-button{
  border-radius:100px !important; font-family:var(--sans);
}

/* My Account — stacked nav once the sidebar no longer has room, as a
   horizontally-scrollable icon tab strip rather than a wrapped pill list. */
@media (max-width:1040px){
  /* Base rule sets align-items:flex-start for the side-by-side desktop
     layout; once stacked to a column that leaves every child (nav,
     content) sized to its own max-content width instead of the viewport —
     e.g. the content column stretching as wide as the stat-tile grid
     "wants" to be, overflowing the page horizontally. Stretch instead. */
  body.woocommerce-account main > .section{
    flex-direction:column; align-items:stretch; padding:clamp(24px,5vw,36px) !important;
    /* margin:0 auto on the base rule only centers — with no width limit
       narrower than the viewport the card still touches both edges once
       max-width:1100px no longer binds. Give it the site's standard side
       gutter here instead of running edge-to-edge. */
    width:auto; margin-left:var(--pad-x) !important; margin-right:var(--pad-x) !important;
  }
  .woocommerce-MyAccount-navigation{
    flex:none; width:100%; position:static;
    margin:0 calc(-1 * clamp(24px,5vw,36px)) 8px; padding:0 clamp(24px,5vw,36px) 14px;
    border-bottom:1px solid var(--line-soft);
  }
  .woocommerce-MyAccount-navigation ul{
    flex-direction:row; flex-wrap:nowrap; gap:8px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
  .woocommerce-MyAccount-navigation-link{ flex:0 0 auto; }
  .woocommerce-MyAccount-navigation-link a{ padding:.6em 1em; white-space:nowrap; }
  .woocommerce-MyAccount-navigation-link--customer-logout{ margin-top:0; padding-top:0; border-top:none; }

  .acct-dash-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .acct-welcome{ flex-wrap:wrap; }
  .acct-logout-link{ margin-left:auto; }
  .acct-stats{ grid-template-columns:1fr 1fr; }
  .acct-stats .acct-stat:last-child{ grid-column:1/-1; }
  /* flex-basis:260px (set for the desktop row) applies to the main axis —
     once this switches to flex-direction:column that axis is height, not
     width, stretching each card to a 260px-tall minimum regardless of its
     actual content. */
  .acct-address-grid{ flex-direction:column; }
  .acct-address-grid .woocommerce-Address{ flex-basis:auto; }
  .woocommerce-EditAccountForm,
  .woocommerce-address-fields__field-wrapper{ grid-template-columns:1fr; }

  /* Orders table -> stacked cards. Each <tr> becomes a card; each <td>'s
     own data-title attribute (already rendered by WC core) is promoted to
     a visible label since the table header row is hidden at this width. */
  .woocommerce-MyAccount-content table.shop_table thead{ display:none; }
  .woocommerce-MyAccount-content table.shop_table,
  .woocommerce-MyAccount-content table.shop_table tbody,
  .woocommerce-MyAccount-content table.shop_table tr{ display:block; width:100%; }
  .woocommerce-MyAccount-content table.shop_table tr{
    margin:0 0 14px; border:1px solid var(--line-soft); border-radius:14px; padding:6px 16px; background:var(--paper);
  }
  .woocommerce-MyAccount-content table.shop_table td,
  .woocommerce-MyAccount-content table.shop_table th{
    display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
    padding:10px 0; border-bottom:1px solid var(--line-soft); text-align:right;
  }
  .woocommerce-MyAccount-content table.shop_table tr > :last-child{ border-bottom:none; }
  /* WC core's own responsive-table CSS (.shop_table_responsive tbody th)
     unconditionally hides the row-header cell — here that's the order
     number, genuinely useful info, not a redundant label — and its
     3-element selector out-specifies the card-row rule above. */
  .woocommerce-MyAccount-content table.shop_table tbody th{ display:flex !important; }
  .woocommerce-MyAccount-content table.shop_table td::before,
  .woocommerce-MyAccount-content table.shop_table th::before{
    content:attr(data-title); flex:0 0 auto; font-size:.72rem; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color:var(--turq-deep); text-align:left;
  }
  .woocommerce-orders-table__cell-order-actions{ justify-content:flex-end; }
}

/* =====================================================================
   PAGINATION (blog archive, etc.)
   ===================================================================== */
.pagination{ margin:clamp(40px,5vw,64px) auto 0; max-width:1180px; padding:0 var(--pad-x); }
.pagination .nav-links{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 .9em;
  border-radius:100px; background:var(--paper); border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-size:.9rem; font-weight:500; transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.pagination .page-numbers:hover{ border-color:var(--turq); color:var(--turq-deep); transform:translateY(-2px); }
.pagination .page-numbers.current{ background:var(--turq); border-color:var(--turq); color:#04363a; }
.pagination .page-numbers.dots{ background:none; border:none; }
.pagination .prev,.pagination .next{ font-weight:600; }

/* =====================================================================
   HEADER ICON BUTTONS (search, account)
   ===================================================================== */
.icon-btn{ display:flex; align-items:center; color:#fff; transition:color .4s; }
.site-header.scrolled .icon-btn,body.subpage .icon-btn{ color:var(--ink); }

/* =====================================================================
   POPUP — search + sign in/up (centered modal, shares the cart drawer's
   overlay pattern but as a fixed centered card instead of a side panel)
   ===================================================================== */
.popup-overlay{ position:fixed; inset:0; background:rgba(8,28,26,.55); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; z-index:150; backdrop-filter:blur(2px); }
.popup-overlay.open{ opacity:1; visibility:visible; }
.popup{
  position:fixed; top:8vh; left:50%; width:min(480px,92vw); max-height:84vh; overflow-y:auto;
  background:var(--paper); border-radius:22px; z-index:160; box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  transform:translate(-50%,-16px); opacity:0; visibility:hidden; transition:transform .4s var(--ease), opacity .35s, visibility .4s;
}
.popup.open{ transform:translate(-50%,0); opacity:1; visibility:visible; }
.popup-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.popup-head h3{ font-size:1.2rem; }
.popup-close{ font-size:1.3rem; color:var(--muted); line-height:1; transition:color .3s; }
.popup-close:hover{ color:var(--ink); }
.popup-body{ padding:22px 24px 26px; }

/* Search popup */
.search-form{ display:flex; gap:10px; }
.search-form input{ flex:1; padding:.9em 1.1em; border-radius:14px; border:1px solid var(--line); background:#fff; font-family:inherit; font-size:.95rem; color:var(--ink); }
.search-form input:focus{ outline:none; border-color:var(--turq); }
.search-results{ margin-top:18px; display:grid; gap:4px; }
.search-result{ display:flex; align-items:center; gap:14px; padding:10px 6px; border-radius:12px; transition:background .25s; }
.search-result:hover{ background:var(--mist); }
.search-result img{ width:52px; height:52px; object-fit:cover; border-radius:10px; background:var(--mist); flex-shrink:0; }
.search-result-info{ flex:1; min-width:0; }
.search-result-info b{ display:block; font-size:.95rem; color:var(--ink); }
.search-result-info span{ font-size:.86rem; color:var(--turq-deep); }
.search-empty,.search-hint{ text-align:center; color:var(--muted); font-size:.92rem; padding:20px 0; }

/* Auth popup */
.auth-tabs{ display:flex; gap:6px; padding:0 24px; margin-top:18px; }
.auth-tab{ flex:1; padding:.8em 1em; border-radius:100px; font-size:.86rem; font-weight:500; color:var(--muted); background:var(--mist); transition:background .3s, color .3s; }
.auth-tab.active{ background:var(--turq); color:#04363a; }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; }
.auth-panel label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--turq-deep); margin-bottom:-6px; display:block; margin-top:14px; }
.auth-panel input{ width:100%; padding:.9em 1.1em; border-radius:14px; border:1px solid var(--line); background:#fff; font-family:inherit; font-size:.95rem; color:var(--ink); margin-top:6px; }
.auth-panel input:focus{ outline:none; border-color:var(--turq); }
.auth-panel .btn{ width:100%; margin-top:18px; }
.auth-msg{ font-size:.86rem; color:var(--turq-deep); min-height:1em; margin-top:10px; }
.auth-lost{ display:block; text-align:center; font-size:.84rem; color:var(--muted); margin-top:14px; }
.auth-lost:hover{ color:var(--turq-deep); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1040px){
  .nav{ display:none; } .nav-toggle{ display:block; } .mobile-nav{ display:flex; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid > :last-child:nth-child(3n+1){ grid-column:auto; } /* undo the 3-col centering rule at this breakpoint */
  .product-grid > :last-child:nth-child(2n+1){ grid-column:1/-1; max-width:calc(50% - 13px); margin:0 auto; }
  /* The shop/category 4-column override (body.woocommerce-shop/.tax-
     product_cat .product-grid) has higher specificity than the bare
     .product-grid rule above, so without this it kept rendering 4
     cramped columns straight through to mobile instead of collapsing —
     needs its own same-specificity override at each breakpoint. */
  body.woocommerce-shop .product-grid,
  body.tax-product_cat .product-grid{ grid-template-columns:repeat(2,1fr); }
  .bundle-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-grid{ grid-template-columns:1fr; } .detail-visual{ max-width:440px; margin:0 auto; width:100%; }
  .story-grid{ grid-template-columns:1fr; } .story-photo{ max-width:440px; margin:0 auto; }
  .review-grid{ grid-template-columns:1fr; }
  .stockist-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stockist-card:last-child{ grid-column:1/-1; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .motion-grid{ grid-template-columns:1fr; text-align:center; }
  .motion-copy p{ margin-left:auto; margin-right:auto; }
  .ig-grid{ grid-template-columns:repeat(3,1fr); }
  .ing-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .checkout-shell{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .ritual-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:1fr; }
  body.woocommerce-shop .product-grid,
  body.tax-product_cat .product-grid{ grid-template-columns:1fr; }
  /* Undo the 1040px breakpoint's orphan-centering rule: in a single-column
     grid every card is already alone in its row, so the last card no
     longer needs the half-width/centered treatment — without this it
     stayed squeezed to ~50% width down to mobile. */
  .product-grid > :last-child:nth-child(2n+1){ grid-column:auto; max-width:none; margin:0; }
  .bundle-grid{ grid-template-columns:1fr; }
  .how-grid{ grid-template-columns:1fr; max-width:380px; margin-inline:auto; }
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
  .ing-grid{ grid-template-columns:1fr; }
  .stockist-grid{ grid-template-columns:1fr; }
  .stockist-card,.stockist-card:last-child{ min-height:0; grid-column:auto; }
  .stockist-card address{ min-height:0; }
  .stockist-actions{ display:grid; }
  .stockist-actions .btn{ width:100%; }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .trust-inner{ gap:10px 22px; }
  .community-head{ align-items:flex-start; }
  .field-grid{ grid-template-columns:1fr; }
  .field.full{ grid-column:auto; }
  .checkout-page{ padding-top:38px; }
  .checkout-line{ grid-template-columns:50px 1fr; }
  .checkout-line img{ width:50px; height:50px; }
  .checkout-line strong{ grid-column:2; }
  .popup{ top:4vh; max-height:92vh; width:94vw; }
  .search-form{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } }

/* =====================================================================
   ULTRA PASS — cinematic hero ritual, sticky product story, filters,
   routine scenarios, community reels, FAQ. All reduced-motion safe.
   ===================================================================== */

/* hero: floating product ritual strip */
.hero-ritual{ position:absolute; right:clamp(16px,5vw,90px); bottom:clamp(90px,14vh,150px); z-index:3; display:flex; gap:14px; align-items:flex-end; }
.hero-chip{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 14px 12px;
  background:rgba(244,239,227,.16); border:1px solid rgba(244,239,227,.3); border-radius:16px;
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  color:#fff; text-decoration:none; transition:transform .5s var(--ease), background .4s;
  animation:chipfloat 7s ease-in-out infinite;
}
.hero-chip:nth-child(2){ animation-delay:1.1s; } .hero-chip:nth-child(3){ animation-delay:2.2s; }
.hero-chip:hover{ transform:translateY(-8px); background:rgba(244,239,227,.28); }
.hero-chip img{ width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.hero-chip span{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; }
@keyframes chipfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* glass panel utility */
.glass{ background:rgba(251,249,243,.55); border:1px solid rgba(15,126,122,.14); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15); border-radius:var(--radius); }

/* sticky product storytelling (Apple-like) */
.sticky-story{ background:linear-gradient(180deg, rgba(18,63,57,.97), rgba(14,42,39,.99)); color:var(--on-dark); }
.sticky-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:start; }
.sticky-visual{ position:sticky; top:110px; align-self:start; display:grid; place-items:center; padding:30px 0; }
.sticky-visual .sv-aura{ position:absolute; width:76%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(52,205,217,.3), transparent 62%); filter:blur(14px); }
.sticky-visual img{
  position:relative; width:min(74%,380px); filter:drop-shadow(0 40px 50px rgba(0,0,0,.5));
  transition:transform .2s linear; will-change:transform;
}
.sticky-steps{ display:grid; gap:clamp(60px,12vh,130px); padding:8vh 0 12vh; }
.s-step{ opacity:.28; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.s-step.live{ opacity:1; transform:none; }
.s-step .s-index{ font-family:var(--serif); font-size:1.2rem; color:var(--turq-bright); display:block; margin-bottom:10px; }
.s-step h3{ font-size:clamp(1.5rem,3vw,2.2rem); color:var(--on-dark); margin-bottom:12px; }
.s-step p{ color:var(--on-dark-mut); max-width:400px; margin:0; font-size:1.02rem; }

/* shop segmented filter */
.shop-filter{ display:flex; justify-content:center; gap:8px; margin:0 auto clamp(30px,4vw,46px); flex-wrap:wrap; }
.filter-pill{ font-size:.82rem; letter-spacing:.06em; padding:.62em 1.5em; border-radius:100px; border:1px solid var(--line); color:var(--muted); transition:all .3s var(--ease); background:rgba(251,249,243,.5); }
.filter-pill:hover{ color:var(--turq-deep); border-color:var(--turq-deep); }
.filter-pill.active{ background:var(--turq-deep); color:#fff; border-color:var(--turq-deep); }

/* routine scenario cards */
.scenarios{ max-width:1180px; margin:clamp(46px,6vw,70px) auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.scenario{ position:relative; border-radius:var(--radius); padding:30px 28px 32px; overflow:hidden; background:linear-gradient(165deg, rgba(21,174,192,.12), rgba(244,239,227,.7)); border:1px solid var(--line-soft); transition:transform .5s var(--ease), box-shadow .5s; }
.scenario:hover{ transform:translateY(-7px); box-shadow:var(--shadow-card); }
.scenario .sc-kicker{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq-deep); display:block; margin-bottom:12px; }
.scenario h3{ font-size:1.45rem; margin-bottom:12px; }
.scenario ol{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.scenario ol li{ font-size:.92rem; color:var(--muted); padding-left:26px; position:relative; }
.scenario ol li b{ color:var(--turq-ink); font-weight:500; }
.scenario ol li::before{ content:""; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--turq); opacity:.7; }

/* community reels */
.reel-row{ max-width:1180px; margin:0 auto clamp(26px,3vw,40px); display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.reel-card{ position:relative; aspect-ratio:9/14; border-radius:18px; overflow:hidden; background:var(--ink-3); box-shadow:var(--shadow-card); }
.reel-card video,.reel-card img{ width:100%; height:100%; object-fit:cover; }
.reel-card .reel-tag{ position:absolute; left:12px; bottom:12px; z-index:2; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(14,42,39,.55); border:1px solid rgba(255,255,255,.22); padding:6px 12px; border-radius:100px; backdrop-filter:blur(8px); }
.reel-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(14,42,39,.5)); pointer-events:none; }

/* FAQ accordion (reuses journal-item skeleton, lighter) */
.faq-list{ max-width:840px; margin:0 auto; display:grid; gap:12px; }
.faq-item{ border:1px solid var(--line-soft); border-radius:14px; background:rgba(251,249,243,.72); overflow:hidden; transition:border-color .35s; }
.faq-item:hover{ border-color:rgba(21,174,192,.4); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; padding:18px 22px; font-size:1.02rem; color:var(--ink); font-weight:500; }
.faq-q .journal-plus{ font-size:1.4rem; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-a p{ margin:0; padding:0 22px 20px; color:var(--muted); font-size:.95rem; max-width:640px; }
.faq-item.open .journal-plus{ transform:rotate(45deg); }

/* upsell strip on product pages */
.upsell{ max-width:1180px; margin:clamp(40px,5vw,60px) auto 0; }
.upsell .bundle-grid{ grid-template-columns:repeat(2,1fr); }

/* journal article previews */
.article-grid{ max-width:1180px; margin:0 auto clamp(40px,5vw,60px); display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.article-card{ border-radius:var(--radius); overflow:hidden; background:rgba(251,249,243,.75); border:1px solid var(--line-soft); display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s; }
.article-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-card); }
.article-card .ac-media{ aspect-ratio:16/10; overflow:hidden; }
.article-card .ac-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.article-card:hover .ac-media img{ transform:scale(1.05); }
.article-card .ac-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.article-card h3{ font-size:1.3rem; }
.article-card p{ color:var(--muted); font-size:.92rem; margin:0; flex:1; }
.article-card .ac-link{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--turq-deep); }

@media (max-width:1040px){
  .sticky-grid{ grid-template-columns:1fr; }
  .sticky-visual{ position:relative; top:0; }
  .scenarios{ grid-template-columns:1fr; max-width:520px; }
  .reel-row{ grid-template-columns:repeat(3,1fr); }
  .article-grid{ grid-template-columns:1fr; max-width:520px; }
  .hero-ritual{ display:none; }
}
@media (max-width:680px){
  .reel-row{ grid-template-columns:1fr; max-width:340px; }
  .upsell .bundle-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .hero-chip{ animation:none; }
  .sticky-visual img{ transition:none; }
}

/* =====================================================================
   HOMEPAGE AMBIENT VIDEO — hero reel + ritual texture loop
   (palette-agnostic: inherits current theme vars)
   ===================================================================== */
.hero-reel{
  position:relative; width:clamp(140px,13vw,190px); aspect-ratio:9/16;
  border-radius:18px; overflow:hidden; flex-shrink:0;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.65);
}
.hero-reel video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-reel .reel-tag{
  position:absolute; left:10px; bottom:10px; font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:rgba(10,30,28,.55);
  border:1px solid rgba(255,255,255,.25); padding:5px 10px; border-radius:100px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ritual-motion{
  position:absolute; top:clamp(60px,8vw,110px); right:clamp(24px,7vw,110px);
  width:clamp(96px,10vw,150px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:1px solid var(--line, rgba(0,0,0,.12)); box-shadow:var(--shadow-card, 0 20px 50px -25px rgba(0,0,0,.35));
  animation:chipfloat 8s ease-in-out infinite; z-index:2; pointer-events:none;
}
.ritual-motion video{ width:100%; height:100%; object-fit:cover; }
@media (max-width:1040px){ .ritual-motion{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ritual-motion{ animation:none; } }

/* ---------- video hero background (vertical footage, cover-cropped) ---------- */
.hero-bg .hero-bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
}
/* photo fallback stays underneath; honoured when motion is reduced */
@media (prefers-reduced-motion:reduce){ .hero-bg .hero-bg-video{ display:none; } }