/* Era Organics - shared stylesheet for every page.

   Palette and typography are taken from the live eraorganics.com theme tokens:
     --color-background 107,198,206  → brand teal  #6BC6CE
     --color-background-contrast 46,132,139 → deep teal #2E848B
     --color-background-contrast 23,35,81   → brand navy #172351
   Headings use Museo (the brand face, served from the Era Organics CDN);
   body copy uses Open Sans, matching --font-body-family. */

@font-face {
  font-family: "Museo";
  src: url("https://www.eraorganics.com/cdn/shop/files/museo300-regular-webfont.woff2") format("woff2"),
       url("https://www.eraorganics.com/cdn/shop/files/museo300-regular-webfont.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Museo";
  src: url("https://www.eraorganics.com/cdn/shop/files/museo500-regular-webfont.woff2") format("woff2"),
       url("https://www.eraorganics.com/cdn/shop/files/museo500-regular-webfont.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Museo";
  src: url("https://www.eraorganics.com/cdn/shop/files/museo700-regular-webfont.woff2") format("woff2"),
       url("https://www.eraorganics.com/cdn/shop/files/museo700-regular-webfont.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --aqua: #6bc6ce;
  --aqua-mid: #55b8c1;
  --aqua-dark: #2e848b;
  --aqua-deep: #226168;
  --navy: #172351;
  --ink: #1f2a4a;
  --muted: #5d6879;
  --paper: #ffffff;
  --mist: #ffffff;
  --soft: #e2f2f2;
  --line: #e3ecec;
  --line-strong: #c9dddd;
  --gold: #c7ba83;
  --star: #e5ae16;
  --font-head: "Museo", "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Arial, sans-serif;
  --shadow-sm: 0 4px 18px rgba(7, 22, 54, .06);
  --shadow: 0 22px 60px rgba(7, 22, 54, .1);
  --shadow-lg: 0 30px 80px rgba(7, 22, 54, .14);
  --radius-card: 16px;
  --radius-control: 8px;
  --max: 1280px;
  --header-h: 112px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
/* A `display` rule on a component would otherwise beat the hidden attribute's
   UA default, so enforce it globally - several panels rely on [hidden]. */
[hidden] { display: none !important; }
/* Smooth in-page scrolling is handled by Lenis (assets/motion.js) when it's
   active; native `scroll-behavior: smooth` would double-smooth every anchor
   jump against Lenis's own easing. Lenis falls back to plain jumps on tier
   3/4 and reduced-motion, so this stays the baseline for those cases. */
html { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}
body.drawer-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  color: var(--navy);
  font-family: var(--font-head);
  line-height: 1.16;
  letter-spacing: -.015em;
}
h1 { margin-bottom: 22px; font-size: clamp(2.3rem, 4.4vw, 3.9rem); font-weight: 700; }
h2 { margin-bottom: 16px; font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; }
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  padding: 10px 16px; color: #fff; background: var(--navy);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.section-shell { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.section-pad { padding-block: clamp(64px, 8vw, 110px); }
.eyebrow {
  margin-bottom: 16px; color: var(--aqua-deep);
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.section-heading { max-width: 760px; margin-bottom: 44px; }
.section-heading p { max-width: 640px; margin-bottom: 0; color: var(--muted); font-size: 1.06rem; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading.centered p { margin-inline: auto; }
.rule { width: 64px; height: 4px; margin: 0 0 22px; border-radius: 3px; background: var(--aqua); }
.section-heading.centered .rule { margin-inline: auto; }

.button {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius-control);
  font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.button:active { transform: translateY(1px) scale(.99); }
.button-dark { color: #fff; background: var(--navy); }
.button-dark:hover { background: var(--aqua-deep); }
.button-teal { color: #fff; background: var(--aqua-dark); }
.button-teal:hover { background: var(--aqua-deep); }
.button-ghost { border-color: var(--line-strong); color: var(--navy); background: #fff; }
.button-ghost:hover { border-color: var(--aqua-dark); color: var(--aqua-deep); }
.button-outline { border-color: rgba(255,255,255,.85); color: #fff; background: transparent; }
.button-outline:hover { border-color: #fff; background: rgba(255,255,255,.14); }
/* --gold (#C7BA83) only reaches 1.02:1 against the teal header and 1.95:1
   against the white page background - WCAG 2.2 SC 1.4.11 requires >=3:1 for a
   focus indicator against its surrounding colors. Navy clears both (7.59:1 and
   15.05:1) and is already the site's interactive-state color elsewhere. */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.text-link {
  color: var(--aqua-deep); font-weight: 800; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.stars, .rating { color: var(--star); letter-spacing: .06em; }

/* ------------------------------------------------------------- header */

.announcement {
  display: flex; min-height: 34px; align-items: center; justify-content: center;
  gap: 16px; padding: 6px 20px; color: var(--navy); background: #fff;
  font-size: .71rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.announcement-sep { color: var(--aqua); }

/* The header is pinned at every scroll position.
   `fixed` rather than `sticky`: the header is rendered inside a wrapper div and
   `body` uses overflow-x:hidden, either of which silently breaks sticky. Fixed
   is unconditional, so the nav is always reachable. The wrapper below reserves
   the space the header no longer occupies in flow. */
.site-header {
  position: fixed; top: 0; right: 0; left: 0; z-index: 60;
  background: var(--aqua);
  transition: top .2s var(--ease), background .2s ease, box-shadow .2s ease;
}
/* Holds the header's height open so page content never slides underneath it. */
[data-site-header] { position: relative; z-index: 60; }
.site-header.is-scrolled {
  background: rgba(107, 198, 206, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 22px rgba(23, 35, 81, .14);
}
.site-header.menu-open { box-shadow: 0 2px 22px rgba(23, 35, 81, .14); }
.nav-shell {
  display: grid; width: min(var(--max), calc(100% - 48px)); min-height: 78px;
  margin-inline: auto; grid-template-columns: 150px 1fr auto; align-items: center; gap: 24px;
}
.site-header.is-scrolled .nav-shell { min-height: 66px; }
.brand img { width: 104px; height: auto; }

.desktop-nav { justify-self: center; }
.nav-list { display: flex; margin: 0; padding: 0; align-items: center; gap: clamp(8px, 1.6vw, 22px); list-style: none; }
.nav-item { position: static; }
/* White-on-brand-teal only reaches 1.98:1 (WCAG AA needs 4.5:1 for 16px/800).
   Brand navy against the same teal is 7.59:1, so it both fixes the failure and
   stays inside the palette rather than introducing an off-brand color. */
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 27px 8px 24px;
  border-bottom: 3px solid transparent; color: var(--navy);
  font-size: 1.02rem; font-weight: 800; text-decoration: none;
  transition: border-color .2s ease, opacity .2s ease;
}
.site-header.is-scrolled .nav-link { padding-block: 21px 18px; }
.nav-link:hover, .nav-item.is-open .nav-link, .nav-link[aria-current="page"] { border-color: var(--navy); }
.chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav-item.is-open .chev { transform: rotate(180deg); }

.nav-actions { display: flex; align-items: center; gap: 6px; }
/* min-width/min-height hold the tap target at the 44px accessibility floor
   without inflating the visible icon - the icon itself stays 23px. */
.nav-actions button, .nav-actions a {
  display: inline-flex; min-width: 44px; min-height: 44px; padding: 6px;
  align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--navy); cursor: pointer;
}
.nav-actions svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-actions > button { position: relative; }
.cart-count {
  position: absolute; top: -2px; right: -6px;
  display: grid; min-width: 19px; height: 19px; place-items: center;
  border-radius: 50%; color: var(--navy); background: #fff;
  font-size: .68rem; font-weight: 800;
}
.cart-count.has-items { color: #fff; background: var(--navy); }

/* mega menu */
.mega-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 0 max(24px, calc((100vw - var(--max)) / 2)) 0;
  background: transparent;
}
.mega-inner {
  display: grid; max-width: var(--max); margin-inline: auto;
  grid-template-columns: 268px minmax(0, 1fr);
  overflow: hidden; border-radius: 0 0 4px 4px; box-shadow: var(--shadow-lg);
  animation: megaIn .22s var(--ease) both;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mega-sidebar { margin: 0; padding: 14px 0 34px; list-style: none; background: var(--aqua); }
.mega-topic {
  display: block; padding: 15px 26px; color: rgba(255, 255, 255, .92);
  font-size: .86rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: background .2s ease, color .2s ease;
}
.mega-topic:hover, .mega-topic.is-active { color: var(--navy); background: #fff; }

.mega-stage { padding: 34px 40px; background: #fff; }
.mega-cards { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4, 1fr); gap: 26px; list-style: none; }
.mega-card a { display: grid; gap: 14px; text-decoration: none; }
.mega-card-art {
  display: grid; height: 190px; place-items: center; padding: 8px;
}
.mega-card-art img { max-height: 100%; width: auto; object-fit: contain; transition: transform .3s var(--ease); }
.mega-card a:hover .mega-card-art img { transform: scale(1.05); }
.mega-card-label {
  color: var(--muted); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-align: center; text-transform: uppercase;
}
.mega-card a:hover .mega-card-label { color: var(--aqua-deep); }
.mega-viewall {
  display: inline-flex; margin-top: 4px; align-items: center; gap: 8px;
  color: var(--muted); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.mega-viewall:hover { color: var(--aqua-deep); }
.mega-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; }

.simple-panel {
  position: absolute; top: 100%; z-index: 5;
  min-width: 224px; padding: 10px 0;
  background: #fff; box-shadow: var(--shadow);
  animation: megaIn .2s var(--ease) both;
}
.simple-panel ul { margin: 0; padding: 0; list-style: none; }
.simple-panel a {
  display: block; padding: 11px 22px; color: var(--ink);
  font-size: .95rem; text-decoration: none; transition: background .2s ease, color .2s ease;
}
.simple-panel a:hover { color: var(--aqua-deep); background: var(--mist); }

/* `.nav-actions button` (below) matches this element too, since it is a plain
   <button> inside .nav-actions, and its 0,1,1 specificity beats .mobile-menu-button
   alone (0,1,0) regardless of source order - so display:none never actually
   applied above 980px. Scoping through the parent raises specificity to match. */
.nav-actions .mobile-menu-button {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-width: 44px; min-height: 44px; padding: 8px;
}
.mobile-menu-button span { display: block; width: 22px; height: 2px; background: var(--navy); transition: transform .2s ease, opacity .2s ease; }
.mobile-menu-button.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-button.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-button.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --aqua-dark gave white text only 4.38:1 (just under WCAG AA's 4.5:1);
   --aqua-deep is already in the palette and reaches 7.05:1. */
.mobile-navigation { display: none; padding: 10px 24px 24px; background: var(--aqua-deep); }
.mobile-navigation a, .mobile-navigation summary {
  display: block; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .2);
  color: #fff; font-weight: 700; text-decoration: none;
}
.m-group summary { cursor: pointer; list-style: none; }
.m-group summary::after { content: "+"; float: right; font-size: 1.2rem; }
.m-group[open] summary::after { content: "−"; }
.m-children { padding-left: 16px; }
.m-children a { font-weight: 600; opacity: .9; }

/* ------------------------------------------------------------- page head */

.page-hero { position: relative; padding-block: clamp(48px, 6vw, 84px); background: var(--mist); overflow: hidden; }
.page-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 70px); }
.page-hero.is-plain .page-hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
.page-hero.is-plain .breadcrumb { justify-content: center; }
.page-hero.is-plain .rule { margin-inline: auto; }
.page-hero p.lede { max-width: 620px; margin-bottom: 0; color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.18rem); }
.page-hero.is-plain p.lede { margin-inline: auto; }
/* Radial glow + ring behind the packshot gives a plain product photo some
   staging, echoing the homepage hero's aqua treatment without needing new
   photography for every collection. */
.page-hero-art {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background:
    radial-gradient(72% 72% at 50% 42%, rgba(107,198,206,.22), rgba(107,198,206,0) 68%),
    #fff;
  box-shadow: var(--shadow);
}
.page-hero-art::before {
  content: ""; position: absolute; inset: 12%; z-index: 0;
  border: 1px solid rgba(107,198,206,.35); border-radius: 50%;
}
/* Collection art is a mix of packshots and lifestyle photography, so contain
   rather than cover - cover crops tall bottles mid-label. */
.page-hero-art img {
  position: relative; z-index: 1; width: 100%; height: clamp(260px, 34vw, 420px);
  object-fit: contain; padding: 28px;
  filter: drop-shadow(0 22px 30px rgba(23,35,81,.16));
}

/* ------------------------------------------------- collection banner hero */
/* Full-width illustrated-style banner used on every "Shop" dropdown and
   "Skin Type" collection page, scattering that collection's own real product
   photography around a centered headline - replaces the boxed two-column
   hero for collection pages specifically without touching .page-hero, which
   other page types (about, blog, article, faq, product) still use. */
.collection-banner {
  position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 116px);
  background: linear-gradient(155deg, var(--aqua) 0%, var(--aqua-mid) 55%, var(--aqua-dark) 100%);
  text-align: center;
}
/* 820px matches the --edge: calc(50% - 410px) used by the scattered photos
   below, so a photo's placement is always guaranteed clear of this column
   regardless of how long a given collection's headline or breadcrumb runs.
   The column narrows to 640px between 940-1219px (matching the photo tier's
   own calc(50% + 320px...) below) so there is still real margin left for a
   photo at that width instead of the 820px column eating the whole banner. */
.collection-banner-inner { position: relative; z-index: 2; max-width: 820px; margin-inline: auto; }
@media (max-width: 1219px) {
  .collection-banner-inner { max-width: 640px; }
}
.collection-banner .breadcrumb { justify-content: center; color: rgba(255, 255, 255, .8); }
.collection-banner .breadcrumb a { color: rgba(255, 255, 255, .8); }
.collection-banner .breadcrumb a:hover { color: #fff; }
.collection-banner .breadcrumb span { color: rgba(255, 255, 255, .5); }
.collection-banner .eyebrow { color: rgba(255, 255, 255, .92); }
.collection-banner h1 { color: #fff; text-shadow: 0 2px 18px rgba(23, 35, 81, .25); }
.collection-banner .rule { background: rgba(255, 255, 255, .7); }

/* Scattered product photos - angled, floating photos framed in white cards,
   kept strictly in the side margins outside the centered 820px text column.
   Percentage offsets from the viewport edge cannot reliably clear a
   fixed-width centered column (a photo at "left: 6%" lands inside an 820px
   column on anything wider than ~1360px), so each slot is positioned from
   the column's actual edge instead: calc(50% + 410px + gap) is the column's
   half-width (410px) plus a clear gap, applied as `left` for a slot on the
   right of the column and as the equivalent `right` for a slot on the left
   (verified against an isolated test page, not derived by eye - the naive
   version of this formula silently swaps which side is "left"/"right" of
   the column if you are not careful, which is exactly what shipped broken
   the first time). Each tier below was confirmed clear of the column with
   an automated overlap measurement at its exact breakpoint boundaries. */
.collection-banner-scatter { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.collection-banner-photo {
  position: absolute; width: 78px; aspect-ratio: 1;
  padding: 8px; border-radius: 12px; background: #fff; box-shadow: var(--shadow);
  display: none;
}
.collection-banner-photo img { width: 100%; height: 100%; object-fit: contain; }

/* >=1700px: full four-photo scatter (slots 1/6 near the top corners of the
   column, 2/5 lower and further out), largest size. */
@media (min-width: 1700px) {
  .collection-banner-photo { width: 106px; }
  .collection-banner-photo:nth-of-type(1) { display: block; right: calc(50% + 410px + 30px); top: 8%; transform: rotate(-9deg); }
  .collection-banner-photo:nth-of-type(2) { display: block; right: calc(50% + 410px + 150px); bottom: 10%; transform: rotate(7deg); }
  .collection-banner-photo:nth-of-type(5) { display: block; left: calc(50% + 410px + 150px); bottom: 10%; transform: rotate(-8deg); }
  .collection-banner-photo:nth-of-type(6) { display: block; left: calc(50% + 410px + 30px); top: 8%; transform: rotate(10deg); }
}
/* 1220-1699px: margin is narrower - one photo per side, smaller, tucked
   near the top corners where the column has not started yet. */
@media (min-width: 1220px) and (max-width: 1699px) {
  .collection-banner-photo { width: 76px; }
  .collection-banner-photo:nth-of-type(1) { display: block; right: calc(50% + 410px + 20px); top: 12%; transform: rotate(-9deg); }
  .collection-banner-photo:nth-of-type(6) { display: block; left: calc(50% + 410px + 20px); top: 12%; transform: rotate(10deg); }
}
/* 940-1219px: .collection-banner-inner narrows to a 640px column at this
   tier (see its own rule above), so photos are positioned from that
   column's actual half-width (320px) instead of the 820px column's 410px
   used by the wider tiers - reusing that number here was the original bug:
   it placed a photo's edge past where the real, narrower column ends,
   confirmed by direct measurement before landing on this fix. */
@media (min-width: 940px) and (max-width: 1219px) {
  .collection-banner-photo { width: 54px; }
  .collection-banner-photo:nth-of-type(1) { display: block; right: calc(50% + 320px + 14px); top: 8%; transform: rotate(-9deg); }
  .collection-banner-photo:nth-of-type(6) { display: block; left: calc(50% + 320px + 14px); top: 8%; transform: rotate(10deg); }
}
/* Below 940px there is no reliable margin left outside even the narrower
   640px column - the 620px query further down hides the scatter container
   entirely once the column stops holding any fixed max-width at all. */

/* Intro copy sits full-width in a plain white section directly beneath the
   banner, matching the reference layout rather than sitting beside a photo. */
.collection-intro { padding-block: clamp(28px, 4vw, 44px); background: #fff; }
.collection-intro p { max-width: 900px; margin: 0 auto; color: var(--ink); font-size: 1.02rem; line-height: 1.7; }

/* -------------------------------------------------- skin-type banner
   Distinct illustrated treatment for the four Skin Type collections
   (reference: honey/citrus/leaf backdrop behind a centered headline, plus a
   pill row for switching between skin types). Built from layered inline SVG
   blobs rather than a stock photo - the site's product photos are studio
   shots on white, which clashed with the reference's flat illustration
   style, and no existing local asset matched it either. */
.skin-banner {
  position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 96px);
  background: linear-gradient(180deg, #fdf6e6 0%, #f7ecd3 55%, #f3e6c3 100%);
  text-align: center;
}
.skin-banner-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.skin-banner-art svg { position: absolute; }
.skin-banner-art .shape-leaf-l { left: 2%; top: 12%; width: clamp(70px, 9vw, 150px); opacity: .9; transform: rotate(-12deg); }
.skin-banner-art .shape-leaf-r { right: 3%; bottom: 10%; width: clamp(80px, 10vw, 170px); opacity: .9; transform: rotate(16deg); }
.skin-banner-art .shape-citrus { left: 8%; bottom: 8%; width: clamp(56px, 7vw, 110px); opacity: .85; }
.skin-banner-art .shape-honeycomb { right: 9%; top: 8%; width: clamp(60px, 7.5vw, 120px); opacity: .8; }
.skin-banner-art .shape-drop { left: 50%; top: 4%; width: clamp(30px, 3.5vw, 54px); opacity: .55; transform: translateX(-320px); }
.skin-banner-inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.skin-banner .breadcrumb { justify-content: center; color: var(--aqua-deep); }
.skin-banner .breadcrumb span { color: var(--muted); }
.skin-banner .eyebrow { color: var(--aqua-dark); }
.skin-banner h1 { color: var(--navy); }
.skin-banner .rule { background: var(--gold); margin-inline: auto; }
.skin-banner-jars { display: none; }

@media (min-width: 760px) {
  /* Small product jars scattered lower in the illustration, echoing the
     reference's product-among-the-botanicals composition - hidden below
     760px along with the rest of the decorative art for the same crowding
     reason the Shop banner hides its scatter on phones. */
  .skin-banner-jars { display: block; position: absolute; z-index: 1; bottom: 6%; width: 56px; aspect-ratio: 1; padding: 6px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
  .skin-banner-jars img { width: 100%; height: 100%; object-fit: contain; }
  .skin-banner-jars:nth-of-type(1) { left: calc(50% - 380px - 40px); transform: rotate(-8deg); }
  .skin-banner-jars:nth-of-type(2) { right: calc(50% - 380px - 40px); transform: rotate(8deg); }
}

@media (max-width: 620px) {
  .skin-banner-art { display: none; }
  .skin-banner { padding-block: 44px; }
}

/* Pill row for switching between the four skin-type collections, sitting
   directly under the banner subtitle per the reference. Reuses the intro's
   white section rather than a second background so the page does not stack
   three different background colors before the product grid. */
.skin-type-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding-block: clamp(20px, 3vw, 32px); background: #fff;
}
.skin-type-pill {
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font-size: .88rem; font-weight: 700;
  text-decoration: none; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.skin-type-pill:hover { border-color: var(--aqua-dark); color: var(--aqua-deep); }
.skin-type-pill[aria-current="page"] { background: var(--aqua-dark); border-color: var(--aqua-dark); color: #fff; }

@media (max-width: 620px) {
  /* Scattered photos crowd the headline badly at phone widths with no room
     to spread them - hide the decorative scatter and keep the plain banner. */
  .collection-banner-scatter { display: none; }
  .collection-banner { padding-block: 48px; }
}

.breadcrumb { display: flex; margin-bottom: 18px; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--aqua-deep); text-decoration: underline; }
.breadcrumb span { color: var(--line-strong); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------- shop layout */
/* Category rail + toolbar + grid, matching the storefront's collection
   template: a persistent sidebar for cross-shopping, a sort control, and a
   product count so the page reads as a real catalogue rather than a list. */
.shop-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.shop-sidebar { position: sticky; top: calc(var(--header-h) + 24px); }
.shop-sidebar-title { margin: 0 0 14px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.shop-sidebar ul { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 2px; list-style: none; }
.shop-sidebar a {
  display: block; padding: 9px 10px; border-radius: var(--radius-control);
  color: var(--muted); font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.shop-sidebar a:hover { color: var(--aqua-deep); background: var(--mist); }
.shop-sidebar a[aria-current="page"] { color: var(--navy); font-weight: 800; background: var(--soft); }

.shop-toolbar { display: flex; margin-bottom: 22px; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shop-count { margin: 0; color: var(--muted); font-size: .88rem; }
.shop-sort select {
  min-height: 44px; padding: 8px 34px 8px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); background: #fff; color: var(--navy);
  font-size: .88rem; font-weight: 700; cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23172351" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

/* Corner ribbon for a best-seller within a collection grid - distinct from the
   text .product-badge already used on the homepage's "Customer favorite" tag.
   Anchored inside .product-media (which clips overflow), so it stays a flat
   corner tag rather than a diagonal banner that would be cut off. */
.product-ribbon {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 5px 10px; border-radius: 5px;
  background: #c23b4a; color: #fff; font-size: .62rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(23,35,81,.22);
}

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-sidebar { position: static; }
  .shop-sidebar ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .shop-sidebar a { padding: 8px 14px; border: 1px solid var(--line); }
}

/* ---------------------------------------------------------- product grid */

.product-grid { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 24px; list-style: none; }
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.product-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.product-media { position: relative; display: grid; place-items: center; padding: 22px; background: #fff; overflow: hidden; }
.product-badge {
  position: absolute; top: 14px; right: -34px; z-index: 1;
  width: 130px; padding: 5px 0; transform: rotate(45deg);
  background: #c0392b; color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.product-media img { height: 216px; width: auto; object-fit: contain; transition: transform .4s var(--ease); }
.product-card:hover .product-media img { transform: scale(1.05); }
.product-copy { display: flex; padding: 0 20px 20px; flex: 1; flex-direction: column; }
.product-copy .rating { margin-bottom: 9px; font-size: .82rem; }
.product-copy .rating span { color: var(--muted); letter-spacing: 0; }
.product-copy h3 { margin-bottom: 6px; font-size: 1.03rem; }
.product-copy h3 a { text-decoration: none; }
.product-copy h3 a:hover { color: var(--aqua-deep); }
.product-copy p { margin-bottom: 18px; color: var(--muted); font-size: .88rem; }
.product-buy { display: flex; margin-top: auto; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; }
.product-buy .price { color: var(--navy); font-size: 1.02rem; }
.add-button {
  min-height: 44px; padding: 9px 16px; border: 1px solid var(--navy); border-radius: var(--radius-control);
  color: #fff; background: var(--navy); font-size: .8rem; font-weight: 800; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s var(--ease);
}
.add-button:hover { background: var(--aqua-deep); border-color: var(--aqua-deep); }
.add-button:active { transform: scale(.97); }

/* --------------------------------------------------------- article cards */

.article-grid { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; list-style: none; }
.article-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.article-card-art { overflow: hidden; background: var(--mist); }
.article-card-art img { width: 100%; height: 208px; object-fit: cover; transition: transform .5s var(--ease); }
.article-card:hover .article-card-art img { transform: scale(1.05); }
.article-card-body { display: flex; padding: 24px; flex: 1; flex-direction: column; gap: 10px; }
.article-meta { color: var(--aqua-deep); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.article-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { color: var(--aqua-deep); }
.article-card p { margin: 0; color: var(--muted); font-size: .91rem; }
.article-card .text-link { margin-top: auto; padding-top: 8px; font-size: .86rem; }

/* --------------------------------------------------------------- article */

/* Centered byline under the title, matching the reference's "Name | Date"
   pattern - a middle dot reads more consistently with the rest of the site's
   metadata punctuation (readTime eyebrow above it already uses one). */
.article-byline { margin: 10px 0 0; color: var(--muted); font-size: .92rem; font-weight: 600; }
.article-hero .rule { margin-top: 22px; }

/* Full-width, generously sized feature image directly above the body copy,
   in place of the smaller inline figure the body used to open with. */
.article-feature-image { max-width: 900px; margin: 0 auto 40px; }
.article-feature-image img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow); }

.article-body { max-width: 760px; margin-inline: auto; }
.article-body h2 { margin-top: 48px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.article-body h3 { margin-top: 32px; font-size: 1.2rem; }
.article-body p { margin-bottom: 20px; color: #33405a; font-size: 1.06rem; }
.article-body ul, .article-body ol { margin-bottom: 22px; padding-left: 22px; color: #33405a; }
.article-body li { margin-bottom: 10px; }
.article-body figure { margin: 36px 0; }
.article-body figure img { width: 100%; border-radius: var(--radius-card); }
.article-body figcaption { margin-top: 10px; color: var(--muted); font-size: .85rem; text-align: center; }

.callout {
  margin: 32px 0; padding: 24px 26px;
  border-left: 4px solid var(--aqua); border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--mist);
}
.callout strong { display: block; margin-bottom: 6px; color: var(--navy); }
.callout p { margin: 0; color: var(--muted); font-size: .96rem; }

/* -------------------------------------------------------------- FAQ */

.faq-tabs {
  display: flex; margin-bottom: 34px; gap: 6px; overflow-x: auto;
  border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.faq-tab {
  position: relative; padding: 15px 22px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--muted); font-size: .98rem; font-weight: 700;
  white-space: nowrap; cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.faq-tab[aria-selected="true"] { border-color: var(--aqua-dark); color: var(--aqua-deep); }
.faq-tab:hover { color: var(--aqua-deep); }

.faq-list-wrap { margin-top: 34px; }
.faq-list { display: grid; gap: 14px; }
.faq-item {
  border: 1px solid var(--line); border-bottom: 3px solid var(--aqua);
  border-radius: var(--radius-control); background: #fff; overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s ease;
}
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-item.is-open { box-shadow: var(--shadow-sm); }
.faq-trigger {
  display: flex; width: 100%; padding: 22px 24px; align-items: center; justify-content: space-between;
  gap: 20px; border: 0; background: transparent; color: var(--navy);
  font-size: 1rem; font-weight: 800; text-align: left; cursor: pointer;
}
.faq-marker {
  display: grid; flex: none; width: 26px; height: 26px; place-items: center;
  border-radius: 50%; color: #fff; background: var(--aqua);
  font-size: .7rem; transition: transform .3s var(--ease), background .2s ease;
}
.faq-item.is-open .faq-marker { background: var(--aqua-dark); transform: rotate(180deg); }
.faq-panel { padding: 0 24px 24px; overflow: hidden; }
.faq-panel p { margin: 0; color: var(--muted); }
.faq-more { margin-top: 24px; text-align: center; }

/* ------------------------------------------------------------ newsletter */

/* Full-bleed cherry-blossom photo band, centered white text over a dark
   scrim for contrast - the footer's visual signature on every page that
   includes this section, rather than the earlier plain teal band. */
.newsletter {
  position: relative; padding-block: clamp(64px, 9vw, 108px); text-align: center;
  background:
    linear-gradient(rgba(23, 35, 81, .45), rgba(23, 35, 81, .45)),
    url("https://images.unsplash.com/photo-1522383225653-ed111181a951?auto=format&fit=crop&w=1600&q=75") center/cover no-repeat;
  color: #fff;
}
.newsletter-inner { display: grid; width: min(560px, 100%); margin-inline: auto; justify-items: center; gap: clamp(20px, 3vw, 28px); }
.newsletter h2 { margin-bottom: 8px; color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.newsletter p { margin-bottom: 0; color: rgba(255, 255, 255, .92); }
.newsletter form { width: 100%; }
.newsletter label { display: block; margin-bottom: 7px; color: #fff; font-size: .82rem; font-weight: 800; }
.newsletter .form-status { color: #fff; }
.email-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.email-row input {
  min-width: 0; min-height: 50px; padding: 12px 15px;
  border: 2px solid var(--navy); border-radius: var(--radius-control);
  color: var(--navy); background: #fff;
}
.form-status { min-height: 1.3em; margin: 8px 0 0; font-size: .8rem; font-weight: 700; color: var(--navy); }

/* ---------------------------------------------------------------- footer */

.footer { padding-top: 68px; color: #dbe6ef; background: var(--navy); }
.footer h2 { margin-bottom: 16px; color: #fff; font-size: .9rem; letter-spacing: .04em; }
.footer-grid { display: grid; padding-bottom: 52px; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer a { color: #dbe6ef; font-size: .87rem; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 280px; color: #dbe6ef; font-size: .9rem; }
.footer-social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.footer-currency-row { display: flex; justify-content: flex-end; padding-bottom: 22px; }
.footer-currency select {
  min-height: 40px; padding: 7px 34px 7px 14px; border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; background-color: transparent; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23dbe6ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  color: #dbe6ef; font-size: .82rem; font-weight: 700; cursor: pointer; appearance: none;
}
.footer-currency select:hover { border-color: rgba(255, 255, 255, .55); }
.footer-currency select option { color: var(--ink); }
.footer-bottom { display: flex; padding-block: 22px; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255, 255, 255, .18); }
.footer-bottom p { margin: 0; color: #c5d0dd; font-size: .72rem; }
.footer-bottom p:first-child { max-width: 780px; }

/* --------------------------------------------------------- search & cart */

.search-dialog {
  width: min(720px, calc(100% - 32px)); padding: 28px; border: 0;
  border-radius: var(--radius-card); color: var(--ink); background: #fff; box-shadow: var(--shadow);
}
.search-dialog::backdrop { background: rgba(7, 22, 54, .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.dialog-head { display: flex; margin-bottom: 22px; align-items: center; justify-content: space-between; gap: 18px; }
.dialog-head h2 { margin: 0; font-size: 1.4rem; }
.dialog-head button {
  min-height: 44px; padding: 7px 12px; border: 0; background: transparent;
  color: var(--aqua-deep); font-weight: 800; cursor: pointer;
}
.search-dialog > label { display: block; margin-bottom: 8px; font-weight: 800; }
.search-dialog > input {
  width: 100%; min-height: 52px; padding: 12px 15px;
  border: 2px solid var(--navy); border-radius: var(--radius-control); color: var(--navy); background: #fff;
}
.search-results { display: grid; margin-top: 20px; gap: 10px; }
.search-result { display: grid; padding: 10px; grid-template-columns: 70px 1fr; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-control); text-decoration: none; }
.search-result:hover { border-color: var(--aqua); background: var(--mist); }
.search-result img { width: 70px; height: 70px; object-fit: contain; background: #fff; }
.search-result strong { display: block; color: var(--navy); }
.search-result span span { color: var(--muted); font-size: .84rem; }

.drawer-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 80; background: rgba(7, 22, 54, .55); }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; width: min(430px, 100%); padding: 26px; flex-direction: column;
  color: var(--ink); background: #fff; box-shadow: var(--shadow);
  transform: translateX(105%); transition: transform .35s var(--ease);
}
.cart-drawer.open { transform: translateX(0); }
.shipping-progress { height: 7px; overflow: hidden; border-radius: 5px; background: var(--soft); }
.shipping-progress span { display: block; width: 0; height: 100%; background: var(--aqua-dark); transition: width .35s var(--ease); }
.shipping-message { margin: 8px 0 22px; color: var(--muted); font-size: .78rem; }
.cart-items { display: grid; flex: 1 1 auto; align-content: start; gap: 14px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.empty-cart { padding: 60px 20px; color: var(--muted); text-align: center; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 13px; }
.cart-item img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; }
.cart-item h3 { margin-bottom: 3px; font-size: .9rem; }
.cart-item p { margin: 0; color: var(--muted); font-size: .8rem; }
.item-controls { display: flex; margin-top: 8px; align-items: center; gap: 9px; }
.item-controls button { width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; cursor: pointer; }
.item-remove { align-self: start; padding: 4px; border: 0; background: transparent; color: var(--muted); font-size: .74rem; text-decoration: underline; cursor: pointer; }
.cart-footer { display: grid; margin-top: auto; padding-top: 20px; gap: 15px; border-top: 1px solid var(--line); }
.cart-footer > div { display: flex; justify-content: space-between; font-weight: 800; }
.cart-footer .button { width: 100%; }
.cart-footer .button:disabled { opacity: .45; cursor: not-allowed; }

/* Checkout step: the bag view and the payment view share the drawer's flex
   height; only one is visible at a time ([hidden] is globally enforced). */
.cart-view { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pay-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pay-back {
  align-self: flex-start; margin-bottom: 14px; padding: 6px 10px 6px 4px; border: 0;
  background: transparent; color: var(--muted); font-size: .8rem; font-weight: 700; cursor: pointer;
}
.pay-back:hover { color: var(--aqua-deep); }
.pay-panel h2 { margin: 0 0 6px; font-size: 1.25rem; }
.pay-note { margin: 0 0 18px; color: var(--muted); font-size: .82rem; }
.pay-methods { display: grid; gap: 10px; }
.pay-method {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pay-method:hover { border-color: var(--aqua-dark); box-shadow: var(--shadow-sm); }
.pay-method strong { font-size: .95rem; }
.pay-method small { color: var(--muted); font-size: .78rem; }
.pay-secure { margin-top: auto; padding-top: 18px; max-width: 34ch; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.pay-confirm { display: flex; flex-direction: column; gap: 14px; }
.pay-confirm .pay-method-chosen { margin: 0; font-weight: 800; }
.pay-total { margin: 0; color: var(--muted); }
.pay-total strong { color: var(--ink); }
.pay-confirm .button { width: 100%; }
.pay-methods-switch {
  align-self: center; padding: 4px; border: 0; background: transparent;
  color: var(--muted); font-size: .78rem; text-decoration: underline; cursor: pointer;
}
.pay-methods-switch:hover { color: var(--aqua-deep); }
.pay-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pay-done h3 { margin: 0; font-size: 1.15rem; }
.pay-done p { margin: 0; color: var(--muted); }
.pay-done .button { min-width: 120px; }

/* Cart drawer additions: milestone tracker, line-item variant meta,
   discount code row, and the "People also bought" cross-sell rail. */
.cart-close {
  min-height: auto; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--muted); font-size: .72rem; font-weight: 700; background: #fff; cursor: pointer;
}
.cart-close:hover { border-color: var(--aqua-dark); color: var(--aqua-deep); }
.shipping-tracker { margin-bottom: 6px; }
.shipping-milestones { display: flex; margin-top: 8px; justify-content: space-between; gap: 10px; }
.shipping-milestone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted); font-size: .68rem; font-weight: 700; text-align: center; opacity: .6;
  transition: opacity .25s ease, color .25s ease;
}
.shipping-milestone i { font-style: normal; font-size: 1rem; }
.shipping-milestone.is-reached { color: var(--aqua-deep); opacity: 1; }
.cart-item-meta { margin: 0 0 2px !important; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.item-remove { font-size: 1rem; text-decoration: none; line-height: 1; }

.cart-upsell { margin-top: 4px; }
.cart-upsell-title { margin: 0 0 10px; color: var(--muted); font-size: .78rem; font-weight: 800; text-align: center; }
.cart-upsell-list { display: grid; gap: 10px; }
.cart-upsell-item { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.cart-upsell-item img { width: 52px; height: 52px; object-fit: contain; background: #fff; }
.cart-upsell-info p { margin: 0; font-size: .82rem; font-weight: 700; }
.cart-upsell-info span { color: var(--muted); font-size: .78rem; }
.cart-upsell-add {
  min-height: 32px; padding: 6px 16px; border: 1px solid var(--navy); border-radius: var(--radius-control);
  color: #fff; background: var(--navy); font-size: .74rem; font-weight: 800; cursor: pointer;
}
.cart-upsell-add:hover { background: var(--aqua-deep); border-color: var(--aqua-deep); }

.discount-row { display: flex; gap: 8px; }
.discount-row input {
  flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  color: var(--ink); background: #fff; font-size: .84rem;
}
.discount-row .button { min-height: 44px; padding: 0 18px; }
.discount-status { margin: 0; color: var(--aqua-deep); font-size: .78rem; }
.discount-status.is-error { color: #8a2b2b; }
.discount-line { display: flex; justify-content: space-between; color: var(--aqua-deep); font-weight: 800; }
.cart-footer [data-checkout] { display: flex; justify-content: center; gap: 6px; }
.continue-shopping {
  padding: 4px; border: 0; background: transparent; color: var(--muted); font-size: .8rem;
  font-weight: 700; text-decoration: underline; cursor: pointer; justify-self: center;
}
.continue-shopping:hover { color: var(--aqua-deep); }

/* ------------------------------------------------------------ quick view */

.quickview-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(7, 22, 54, .55); }
.quickview-drawer {
  position: fixed; top: 50%; left: 50%; z-index: 96;
  width: min(920px, calc(100% - 32px)); max-height: calc(100vh - 48px);
  overflow-y: auto; padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius-card); color: var(--ink); background: #fff; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, -48%) scale(.97);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.quickview-drawer.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
.quickview-close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: #fff; cursor: pointer;
}
.quickview-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.quickview-close:hover { border-color: var(--aqua-dark); color: var(--aqua-deep); }
.quickview-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 760px) { .quickview-body { grid-template-columns: minmax(0, 1fr); } }

.qv-media { position: relative; display: grid; place-items: center; padding: 20px; border-radius: var(--radius-control); background: var(--soft); }
.qv-media img { max-height: 340px; width: auto; object-fit: contain; }
.qv-ribbon {
  position: absolute; top: 16px; right: -32px; width: 130px; padding: 5px 0;
  transform: rotate(45deg); background: #c0392b; color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.qv-info { display: flex; flex-direction: column; }
.qv-info .rating { margin-bottom: 12px; font-size: .84rem; }
.qv-info .rating span { color: var(--muted); letter-spacing: 0; }
.qv-review {
  margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--mist); color: var(--ink); font-size: .86rem; font-style: italic; line-height: 1.5;
}
.qv-review footer { margin-top: 8px; color: var(--muted); font-size: .76rem; font-style: normal; font-weight: 700; }
.qv-info h2 { margin: 0 0 16px; font-size: clamp(1.2rem, 2vw, 1.5rem); }

.qv-field { margin: 0 0 16px; padding: 0; border: 0; }
.qv-field legend { margin-bottom: 8px; padding: 0; font-size: .84rem; font-weight: 800; }
.qv-size-options { display: flex; gap: 10px; }
.qv-size-btn {
  min-width: 90px; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-control);
  color: var(--ink); background: #fff; font-size: .86rem; font-weight: 700; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.qv-size-btn.is-selected { border-color: var(--navy); color: #fff; background: var(--navy); }

.qv-plan-option {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 14px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.qv-plan-option:last-child { margin-bottom: 0; }
.qv-plan-option.is-selected { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.qv-plan-option input { width: 18px; height: 18px; accent-color: var(--navy); }
.qv-plan-copy { flex: 1; font-size: .88rem; font-weight: 700; }
.qv-plan-price { font-weight: 800; }

.qv-add { width: 100%; min-height: 52px; margin-bottom: 12px; font-size: .92rem; }
.qv-secure { margin: 0 0 14px; color: var(--muted); font-size: .76rem; text-align: center; }
.qv-full-link { display: inline-flex; align-self: flex-start; margin-bottom: 20px; align-items: center; gap: 6px; }

.qv-trust { display: grid; margin: auto 0 0; padding: 18px 0 0; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; border-top: 1px solid var(--line); }
.qv-trust li { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: .68rem; font-weight: 700; text-align: center; }
.qv-trust-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%; }
.qv-trust-icon svg { width: 20px; height: 20px; stroke: var(--navy); stroke-width: 1.6; fill: none; }
@media (max-width: 520px) { .qv-trust { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- motion */

.is-revealed { will-change: auto; }

/* Motion is progressive enhancement. These hints keep Framer Motion's local
   card interactions on the compositor without changing the no-JS layout. */
[data-framer-card] { transform-origin: 50% 50%; will-change: transform; }
[data-framer-section] { transform-origin: 50% 20%; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .mega-inner { grid-template-columns: 232px minmax(0, 1fr); }
  .mega-cards { gap: 18px; }
  .mega-card-art { height: 150px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 980px) {
  :root { --header-h: 100px; }
  .desktop-nav { display: none; }
  .nav-actions .mobile-menu-button { display: flex; }
  .mobile-navigation { display: block; }
  .nav-shell { grid-template-columns: auto 1fr; }
  .nav-actions { justify-self: end; }
  .page-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero-art { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 620px) {
  .section-shell { width: calc(100% - 32px); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .product-media { padding: 14px; }
  .product-media img { height: 140px; }
  .product-copy { padding: 0 14px 16px; }
  .product-buy { flex-direction: column; align-items: stretch; gap: 8px; }
  .add-button { width: 100%; }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .email-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .faq-trigger { padding: 18px; font-size: .95rem; }
  .faq-panel { padding: 0 18px 18px; }
}

@media (max-width: 380px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product-media img { height: 120px; }
}

/* Shared utility classes used across page templates. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bg-mist { background: var(--mist); }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { color: var(--navy); font-size: .85rem; font-weight: 800; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); color: var(--ink); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--aqua-dark); box-shadow: 0 0 0 3px rgba(107, 198, 206, .25);
}
.field textarea { min-height: 150px; resize: vertical; }
.field-error { color: #8a2b2b; font-size: .78rem; font-weight: 700; min-height: 1em; }
.press-strip { padding: 25px 0 20px; text-align: center; border-bottom: 1px solid var(--line); }
.press-strip .trust-line { padding-inline: 24px; }
.trust-line { display: flex; margin: 0 auto 20px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 34px; }
.trust-line span { color: var(--navy); font-size: .78rem; font-weight: 800; }
.trust-line span::before { content: "✓"; margin-right: 8px; color: var(--aqua-deep); }
.press-strip p { margin-bottom: 14px; color: var(--muted); font-size: .71rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Seamless logo marquee. The track holds two identical copies of the strip;
   animating exactly -50% moves the first copy fully offscreen just as the
   second lands in its place, so the loop point is invisible. Pausing on
   hover/focus lets a visitor actually read a logo if they want to. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; width: max-content; align-items: center; gap: 0;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-copy { display: flex; flex: none; align-items: center; padding-inline: 48px; }
.marquee-copy img { width: auto; height: 60px; max-width: none; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion: no pinning, no transforms - opacity only, 200ms.
   The transform reset is global (`*:hover, *:focus-visible`) rather than an
   allowlist of selectors, so it also covers page-specific hover transforms
   declared in a page's own <style> block (hero art, concern cards, team cards,
   review tiles, mega-menu thumbnails) without needing to be kept in sync as
   those are added. */
/* ------------------------------------------------------- chat widget */
/* Brand teal throughout (header, avatar ring, send button, launcher) rather
   than the earlier navy - navy read as an unrelated dark UI system next to
   the rest of the site's teal/gold identity. */

.chat-widget { position: fixed; left: 20px; bottom: 20px; z-index: 85; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.chat-prompt {
  position: relative; width: min(320px, calc(100vw - 40px)); padding: 18px 20px 20px;
  border-radius: 18px 18px 18px 4px; background: var(--aqua); color: #fff;
  box-shadow: var(--shadow); animation: chatPromptIn .35s var(--ease) both;
}
.chat-prompt p { margin: 0 0 14px; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.chat-prompt-close {
  position: absolute; top: 8px; right: 10px; border: 0; background: transparent;
  color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: .8;
}
.chat-prompt-close:hover { opacity: 1; }
.chat-prompt-cta { min-height: 40px; padding: 8px 18px; font-size: .86rem; }
@keyframes chatPromptIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.chat-launcher {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px;
  padding: 10px 20px 10px 16px; border: 0; border-radius: 999px;
  background: var(--aqua-dark); color: #fff; font-size: .92rem; font-weight: 800;
  cursor: pointer; box-shadow: var(--shadow); position: relative;
  transition: background .2s ease, transform .15s var(--ease);
}
.chat-launcher:hover { background: var(--aqua-deep); }
.chat-launcher:active { transform: scale(.97); }
.chat-launcher.is-open { background: var(--aqua-deep); }
.chat-launcher-icon { display: inline-flex; width: 19px; height: 19px; }
.chat-launcher-icon svg { width: 100%; height: 100%; }
.chat-badge {
  position: absolute; top: -4px; right: -4px; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: #d34848; color: #fff;
  font-size: .68rem; font-weight: 800;
}

.chat-panel {
  display: flex; width: min(360px, calc(100vw - 40px)); height: min(560px, calc(100vh - 120px));
  max-height: min(560px, calc(100vh - 120px));
  flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff;
  box-shadow: var(--shadow-lg); animation: chatPromptIn .25s var(--ease) both;
}
.chat-panel-head {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  background: linear-gradient(135deg, var(--aqua), var(--aqua-dark)); color: #fff;
}
.chat-panel-brand { display: flex; align-items: center; gap: 10px; }
.chat-panel-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: rgba(255, 255, 255, .2); border: 1.5px solid rgba(255, 255, 255, .7);
}
.chat-panel-avatar svg { width: 18px; height: 18px; }
.chat-panel-head strong { display: block; font-family: var(--font-head); font-size: 1rem; }
.chat-panel-head button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; transition: background .2s ease; }
.chat-panel-head button:hover { background: rgba(255, 255, 255, .28); }
.chat-panel-head button svg { width: 16px; height: 16px; }

.chat-log { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; padding: 18px; overflow-y: auto; overscroll-behavior: contain; background: var(--mist); }
.chat-meta { display: flex; align-items: center; justify-content: space-between; margin: 0 0 2px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.chat-bubble { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.5; overflow-wrap: break-word; }
.chat-bubble p { margin: 0 0 8px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble-bot { align-self: flex-start; border-bottom-left-radius: 4px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.chat-bubble-visitor { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--aqua-dark); color: #fff; }
.chat-bubble.chat-product { max-width: 100%; }
.chat-cta { display: inline-flex; min-height: 38px; padding: 7px 16px; font-size: .82rem; }

/* Quick replies read as outlined pills stacked to the right, matching the
   reference, rather than a wrapped left-aligned row. */
.chat-quick-replies { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chat-quick-reply {
  min-height: 36px; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: .83rem; font-weight: 600; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.chat-quick-reply:hover { border-color: var(--aqua-dark); color: var(--aqua-deep); background: var(--soft); }

.chat-input-row { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; }
.chat-icon-button { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; background: transparent; color: var(--muted); border-radius: 50%; cursor: not-allowed; opacity: .55; }
.chat-icon-button svg { width: 19px; height: 19px; }
.chat-input-row input {
  min-width: 0; flex: 1; min-height: 40px; padding: 8px 4px; border: 0; background: transparent;
  color: var(--ink); font-size: .88rem;
}
.chat-input-row input:focus { outline: none; }
.chat-send {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
  background: var(--aqua-dark); color: #fff; cursor: pointer; transition: background .2s ease, transform .15s var(--ease);
}
.chat-send:hover { background: var(--aqua-deep); }
.chat-send:active { transform: scale(.94); }
.chat-send svg { width: 17px; height: 17px; }

/* Per-message timestamps give the log a live-chat feel. */
.chat-time { display: block; margin-top: 6px; color: var(--muted); font-size: .62rem; letter-spacing: .03em; }

/* Typing indicator: three pulsing dots in a bot bubble. */
.chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; }
.chat-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--aqua-dark);
  opacity: .35; animation: chat-dot-pulse 1.2s infinite ease-in-out;
}
.chat-dot:nth-child(2) { animation-delay: .18s; }
.chat-dot:nth-child(3) { animation-delay: .36s; }
@keyframes chat-dot-pulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }

/* Product cards inside bot bubbles (name, blurb, live price, actions). */
.chat-product h4 { margin: 0 0 3px; font-family: var(--font-head); font-size: .96rem; line-height: 1.3; }
.chat-product-meta { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.chat-product-price { margin-top: 6px; font-weight: 800; color: var(--ink); font-size: .92rem; }
.chat-product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Inline chat links (browsing / policy CTAs). */
.chat-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px;
  border: 1.5px solid var(--aqua-dark); border-radius: 999px; background: #fff;
  color: var(--aqua-deep); font-size: .8rem; font-weight: 700; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.chat-link:hover { background: var(--aqua-dark); color: #fff; }
.chat-link-add { border-color: var(--ink); color: var(--ink); }
.chat-link-add:hover { background: var(--ink); color: #fff; }

@media (max-width: 480px) {
  .chat-widget { left: 12px; bottom: 12px; }
  .chat-launcher span:not(.chat-launcher-icon):not(.chat-badge) { display: none; }
  .chat-launcher { padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    scroll-behavior: auto !important;
  }
  *:hover, *:focus-visible, *:active {
    transform: none !important;
  }
  /* An infinite animation clamped to .01ms still restarts every frame, which
     reads as a flicker rather than a still frame. Stop it outright and show
     one static copy of the strip instead. */
  .marquee-track { animation: none !important; transform: none !important; }
  .marquee-copy[aria-hidden="true"] { display: none; }
}