/* Mobile-first. Every rule starts at 390px and widens. Phone fixes must not reach tablet or desktop,
   so anything phone-only lives in a max-width query, never in the base. */
/* tokens.css is enqueued by functions.php rather than imported here. An @import carries no
   version query, so the file sat in browser and CDN caches indefinitely and a token change
   never reached anyone; it also forces a second, serial round trip before first paint. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-page); color: var(--c-ink);
  font-family: var(--f-body); font-size: var(--t-base); line-height: 1.6;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Type ---- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.12;
  text-wrap: balance; margin: 0 0 var(--s-4); color: var(--c-ink); }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
@media (min-width: 900px) { h1 { font-size: var(--t-4xl); } h2 { font-size: var(--t-3xl); } }
p { margin: 0 0 var(--s-4); max-width: 68ch; }
.eyebrow { font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: var(--s-2); display: block; }
/* The reference sets its section headings in an italic display face with an accented middle word.
   Reproduced here as a utility rather than hard-coded into each heading. */
.accent-word { color: var(--c-accent); font-style: italic; }

/* ---- Layout ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-7); }
@media (min-width: 900px) { .section { padding-block: var(--s-9); } }
.section--band { background: var(--c-band); }
.section--deep { background: var(--c-band-deep); }
.section__head { text-align: center; margin-bottom: var(--s-6); }
.section__head p { margin-inline: auto; }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2,1fr); }
  .grid--3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4,1fr); gap: var(--s-5); } }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: var(--s-3) var(--s-6); border-radius: var(--r-pill); border: 2px solid transparent;
  background: var(--c-accent); color: #fff; transition: background .18s, transform .18s, border-color .18s;
  min-height: 48px; /* thumb target */ }
.btn:hover { background: var(--c-accent-deep); }
.btn:active { transform: translateY(1px); }
.btn--outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-page); }
.btn--leaf { background: var(--c-leaf); }
.btn--leaf:hover { background: #3C5843; }
.btn--block { width: 100%; }

/* ---- Header ---- */
.site-header { background: var(--c-page); border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 60; }
.announce { background: var(--c-ink); color: var(--c-page); font-family: var(--f-ui);
  font-size: var(--t-xs); letter-spacing: .06em; text-align: center; padding: var(--s-2) var(--s-4); }
.header__bar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-3); }
.brand { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700;
  text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--c-accent); }
.nav { display: none; }
.nav ul { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav a { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; padding-block: var(--s-2); }
.nav a:hover { color: var(--c-accent); }
.header__tools { display: flex; align-items: center; gap: var(--s-3); }
.icon-btn { background: none; border: 0; cursor: pointer; color: var(--c-ink);
  min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; }
.cart-count { background: var(--c-accent); color: #fff; font-family: var(--f-ui);
  font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 6px; margin-left: -6px; }
@media (min-width: 1000px) { .nav { display: block; } .burger { display: none; } }

/* Mobile drawer */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); background: var(--c-page);
  transform: translateX(100%); transition: transform .25s ease; z-index: 80; padding: var(--s-5);
  overflow-y: auto; box-shadow: var(--shadow-lift); }
.drawer[data-open="true"] { transform: translateX(0); }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a { display: block; padding: var(--s-4) 0; font-family: var(--f-ui); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none; border-bottom: 1px solid var(--c-line); }
.scrim { position: fixed; inset: 0; background: rgba(68,56,42,.45); opacity: 0; pointer-events: none;
  transition: opacity .25s; z-index: 70; }
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ---- Hero ---- */
.hero { position: relative; background: var(--c-band); overflow: hidden; }
.hero__inner { display: grid; gap: var(--s-5); padding-block: var(--s-7); align-items: center; }
.hero__copy h1 { margin-bottom: var(--s-3); }
.hero__lede { font-size: var(--t-lg); color: var(--c-ink-soft); }
.hero__proof { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2);
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--c-ink-soft); }
.hero__proof li { padding-left: 1.5em; position: relative; }
.hero__proof li::before { content: "\2713"; position: absolute; left: 0; color: var(--c-accent); }
.stars { color: var(--c-accent); letter-spacing: 2px; }
/* The two hero buttons wrap onto separate lines on a phone and were touching. */
.hero__copy p:has(> .btn) { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__copy .btn { margin: 0 var(--s-3) var(--s-3) 0; }
@supports (selector(p:has(> .btn))) { .hero__copy .btn { margin: 0; } }
.hero__media img { width: 100%; border-radius: var(--r-md); }
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--s-8); padding-block: var(--s-9); }
}

/* ---- Category tiles (the reference's "Find Your Feel-Good" row) ---- */
.cat-tile { background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--s-5);
  text-align: center; display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }
.cat-tile__flag { font-family: var(--f-ui); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .1em; color: var(--c-accent); font-weight: 700; }
.cat-tile img { aspect-ratio: 1; object-fit: contain; margin-inline: auto; }
.cat-tile h3 { font-size: var(--t-lg); margin: 0; }
.cat-tile .btn { margin-top: auto; }

/* ---- Product card ---- */
.pcard { background: var(--c-surface); border: 1px solid var(--c-line); display: flex;
  flex-direction: column; height: 100%; transition: box-shadow .18s, transform .18s; position: relative; }
.pcard:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.pcard__media { position: relative; aspect-ratio: 1; background: var(--c-band); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__badges { position: absolute; top: var(--s-2); left: var(--s-2); display: flex;
  flex-direction: column; gap: var(--s-1); align-items: flex-start; }
.badge { font-family: var(--f-ui); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); background: var(--c-ink); color: #fff; }
.badge--spectrum { background: var(--c-accent); }
.badge--supp { background: var(--c-leaf); }
.badge--sale { background: var(--c-crit); }
.pcard__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.pcard__title { font-family: var(--f-body); font-size: var(--t-base); font-weight: 600;
  line-height: 1.3; margin: 0; }
.pcard__title a { text-decoration: none; }
.pcard__meta { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--c-ink-faint);
  text-transform: uppercase; letter-spacing: .06em; }
.pcard__rating { font-size: var(--t-sm); color: var(--c-ink-soft); display: flex; gap: var(--s-2); align-items: center; }
.pcard__price { font-family: var(--f-ui); font-size: var(--t-lg); font-weight: 700; margin-top: auto; }
.pcard__price del { color: var(--c-ink-faint); font-weight: 400; font-size: var(--t-sm); margin-right: var(--s-2); }
.pcard__permg { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--c-ink-faint); }

/* ---- Marquee band ---- */
.marquee { background: var(--c-ink); color: var(--c-band); overflow: hidden; padding-block: var(--s-4); }
.marquee__track { display: flex; gap: var(--s-7); white-space: nowrap; animation: slide 28s linear infinite;
  font-family: var(--f-display); font-size: var(--t-2xl); text-transform: uppercase; letter-spacing: .04em; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- Testimonials ---- */
.quote { background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }
.quote blockquote { margin: 0; font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.4; }
.quote footer { font-family: var(--f-ui); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-ink-faint); margin-top: auto; }

/* ---- Trust row ---- */
.trust { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-4); text-align: center; }
.trust__item { padding: var(--s-4); }
.trust__item strong { display: block; font-family: var(--f-ui); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: .08em; }
.trust__item span { font-size: var(--t-sm); color: var(--c-ink-soft); }
@media (min-width: 700px) { .trust { grid-template-columns: repeat(4,1fr); } }

/* ---- Footer ---- */
.site-footer { background: var(--c-ink); color: var(--c-band); margin-top: var(--s-8); }
.site-footer a { color: var(--c-band); text-decoration: none; opacity: .85; }
.site-footer a:hover { opacity: 1; color: var(--c-accent); }
.footer__cols { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-6);
  padding-block: var(--s-7); }
.footer__cols h4 { color: var(--c-page); font-family: var(--f-ui); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-3); }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer__cols li { font-size: var(--t-sm); }
.footer__bottom { border-top: 1px solid rgba(237,227,211,.18); padding-block: var(--s-4);
  font-size: var(--t-xs); color: rgba(237,227,211,.7); display: flex; flex-wrap: wrap;
  gap: var(--s-3); justify-content: space-between; }
.wordmark { font-family: var(--f-display); font-size: clamp(3rem, 14vw, 10rem); text-align: center;
  color: rgba(237,227,211,.10); line-height: .9; padding-bottom: var(--s-4); user-select: none; }
@media (min-width: 800px) { .footer__cols { grid-template-columns: repeat(4,1fr); } }

/* ---- Newsletter ---- */
.signup { background: var(--c-accent-soft); }
.signup form { display: grid; gap: var(--s-3); max-width: 520px; margin-inline: auto; }
.signup input[type="email"] { font-family: var(--f-body); font-size: var(--t-base);
  padding: var(--s-3) var(--s-4); border: 2px solid var(--c-ink); background: var(--c-page);
  border-radius: var(--r-pill); min-height: 48px; }
@media (min-width: 620px) { .signup form { grid-template-columns: 1fr auto; } }

/* ---- States: nothing ships without these ---- */
.state { text-align: center; padding: var(--s-8) var(--s-4); }
.state__icon { font-size: var(--t-3xl); margin-bottom: var(--s-3); opacity: .5; }
.state h3 { margin-bottom: var(--s-2); }
.state p { margin-inline: auto; color: var(--c-ink-soft); }
.skeleton { background: linear-gradient(90deg, var(--c-band) 25%, var(--c-band-deep) 37%, var(--c-band) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.notice { padding: var(--s-4); border-left: 4px solid var(--c-accent); background: var(--c-accent-soft);
  font-size: var(--t-sm); }
.notice--error { border-color: var(--c-crit); background: #F8E8E4; }
.notice--good { border-color: var(--c-good); background: var(--c-leaf-soft); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 100; background: var(--c-page);
  padding: var(--s-3) var(--s-4); border: 2px solid var(--c-accent); }

/* ===================================================================
   Header search, larger icons, page hero, larger footer type.
   =================================================================== */

/* Icons were 22px in a 44px target, which reads as timid next to 18px body text. */
.icon-btn { min-width: 48px; min-height: 48px; }
.icon-btn svg { width: 26px; height: 26px; }
.cart-count { font-size: 12px; padding: 2px 7px; }

/* Search sits in the bar between nav and tools on desktop, and at the top of the
   drawer on phones, which is where a thumb lands first. */
/* Qualified to div, because WordPress puts a "search" class on <body> for every results page.
   The bare .search selector hid the whole document below 1000px, so search results were a blank
   white screen on every phone and tablet. */
div.search { position: relative; flex: 1 1 auto; max-width: 320px; display: none; }
div.search form { display: flex; align-items: center; gap: var(--s-2);
  border: 2px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface);
  padding-inline: var(--s-3); transition: border-color .18s; }
div.search form:focus-within { border-color: var(--c-accent); }
div.search input[type="search"] { flex: 1; border: 0; background: none; outline: none;
  font-family: var(--f-body); font-size: var(--t-sm); padding: var(--s-3) 0; min-width: 0;
  color: var(--c-ink); }
div.search input[type="search"]::placeholder { color: var(--c-ink-faint); }
div.search button { background: none; border: 0; cursor: pointer; color: var(--c-ink-soft);
  display: grid; place-items: center; padding: var(--s-2); min-width: 40px; min-height: 40px; }
div.search button:hover { color: var(--c-accent); }
div.search button svg { width: 20px; height: 20px; }
@media (min-width: 1000px) { div.search { display: block; } }

.drawer .search { display: block; max-width: none; margin-bottom: var(--s-4); }
.drawer .search input[type="search"] { font-size: var(--t-base); }

.header__bar { gap: var(--s-5); }
@media (min-width: 1000px) { .nav ul { gap: var(--s-4); } }

/* ---- Page hero: every page gets one, so none of them open on a bare h1 ---- */
.page-hero { position: relative; background: var(--c-band); overflow: hidden;
  border-bottom: 1px solid var(--c-line); }
.page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center 65%;
  opacity: .55; }
.page-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--c-page) 8%, rgba(252,248,241,.80) 42%, rgba(252,248,241,.25) 78%); }
.page-hero__inner { position: relative; z-index: 2; padding-block: var(--s-7); }
.page-hero h1 { margin-bottom: var(--s-2); }
.page-hero p { color: var(--c-ink-soft); font-size: var(--t-lg); max-width: 54ch; margin-bottom: 0; }
.page-hero .crumbs { font-family: var(--f-ui); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .12em; color: var(--c-ink-faint); margin-bottom: var(--s-3); }
.page-hero .crumbs a { text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--c-accent); }
@media (min-width: 900px) { .page-hero__inner { padding-block: var(--s-8); } }

/* ---- Footer type was too small to read comfortably ---- */
.site-footer { font-size: var(--t-base); }
.footer__cols { gap: var(--s-7) var(--s-6); padding-block: var(--s-8); }
.footer__cols h4 { font-size: var(--t-sm); letter-spacing: .14em; margin-bottom: var(--s-4); }
.footer__cols ul { gap: var(--s-3); }
.footer__cols li { font-size: var(--t-base); line-height: 1.5; }
.footer__cols a { display: inline-block; padding-block: 2px; }
.footer__bottom { font-size: var(--t-sm); padding-block: var(--s-5); color: rgba(237,227,211,.82); }
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ===================================================================
   Pass 2: the reference's texture. Torn-paper dividers between bands,
   full-bleed photographic heroes with an overlay, and more colour
   variation so the page stops reading as a stack of beige boxes.
   =================================================================== */

/* ---- Section dividers ----
   The reference separates every band with a torn paper edge. Done as an inline SVG mask on a
   pseudo-element so it costs no markup and inherits whatever colour the next band is. */
.band { position: relative; }
.band::before,
.band::after { content: ""; position: absolute; left: 0; right: 0; height: 28px;
  background: inherit; -webkit-mask-size: 1200px 28px; mask-size: 1200px 28px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; pointer-events: none; }
.band::before { top: -27px;
  -webkit-mask-image: var(--tear-top); mask-image: var(--tear-top); }
.band::after  { bottom: -27px;
  -webkit-mask-image: var(--tear-bottom); mask-image: var(--tear-bottom); }
.band--no-top::before { content: none; }
.band--no-bottom::after { content: none; }
:root {
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V12c40-7 80 4 120 1s80-12 120-9 80 13 120 11 80-13 120-11 80 12 120 9 80-10 120-6 80 9 120 6 80-11 120-9 80 10 120 7v18z' fill='%23000'/%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='28' preserveAspectRatio='none'%3E%3Cpath d='M0 0v16c40 7 80-4 120-1s80 12 120 9 80-13 120-11 80 13 120 11 80-12 120-9 80 10 120 6 80-9 120-6 80 11 120 9 80-10 120-7V0z' fill='%23000'/%3E%3C/svg%3E");
}

/* Colour roles for the bands, so consecutive sections never share a ground. */
.band--cream { background: var(--c-page); }
.band--sand  { background: var(--c-band); }
.band--clay  { background: var(--c-band-deep); }
.band--ink   { background: var(--c-ink); color: var(--c-band); }
.band--ink h2, .band--ink h3 { color: var(--c-page); }
.band--ink .accent-word { color: var(--c-accent); }
.band--leaf  { background: var(--c-leaf-soft); }

/* ---- Full-bleed photographic hero ---- */
.hero--full { position: relative; min-height: 78vh; display: grid; align-items: center;
  background: var(--c-ink); overflow: hidden; }
.hero--full .hero__bg { position: absolute; inset: 0; background-size: cover;
  background-position: center 60%; }
/* Two overlays: a warm wash for mood, then a directional scrim so type stays legible
   wherever the photograph happens to be light. */
.hero--full::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(185deg, rgba(68,56,42,.34), rgba(68,56,42,.52)); }
.hero--full::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(95deg, rgba(26,20,14,.72) 0%, rgba(26,20,14,.46) 40%,
                                      rgba(26,20,14,.12) 70%, rgba(26,20,14,0) 100%); }
.hero--full .wrap { position: relative; z-index: 2; }
.hero--full .hero__copy { max-width: 42rem; padding-block: var(--s-8); }
/* The copy stayed at 42rem however wide the screen got, so it sat in the left third with half
   the hero empty beside it. 1600px was the wrong place to fix that: a 1853px display at 1.2
   scaling is a 1544px CSS viewport, so the common laptop never reached it. From 1200px up. */
@media (min-width: 1200px) {
  .hero--full .hero__copy { max-width: 52rem; }
  /* The scrim has to reach further right to stay behind the wider text. */
  .hero--full::after {
    background: linear-gradient(95deg, rgba(26,20,14,.72) 0%, rgba(26,20,14,.52) 46%,
                                        rgba(26,20,14,.16) 76%, rgba(26,20,14,0) 100%);
  }
}
.hero--full h1, .hero--full p, .hero--full .hero__proof { color: #FBF7EF; }
.hero--full h1 { font-size: clamp(2.5rem, 7.5vw, 5rem); line-height: 1.02; letter-spacing: -.015em;
  text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero--full .accent-word { color: #F0B96B; }
.hero--full .hero__lede { font-size: var(--t-lg); color: rgba(251,247,239,.92); max-width: 34rem; }
.hero--full .eyebrow { color: rgba(251,247,239,.70); }
.hero--full .btn--outline { color: #FBF7EF; border-color: rgba(251,247,239,.75); }
.hero--full .btn--outline:hover { background: #FBF7EF; color: var(--c-ink); }
.hero--full .hero__proof { color: rgba(251,247,239,.85); }

/* ---- Split feature: big photo one side, copy the other ---- */
.feature { display: grid; gap: var(--s-5); align-items: center; }
.feature__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__copy h2 { margin-bottom: var(--s-3); }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .feature--flip .feature__media { order: 2; }
  .feature__media { aspect-ratio: 1/1; }
}

/* ---- Badges row under the brand story ---- */
.stamps { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-4);
  margin-top: var(--s-5); }
.stamp { display: flex; align-items: center; gap: var(--s-3); font-family: var(--f-ui);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.stamp span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid currentColor; flex: 0 0 auto; font-size: 15px; }
@media (min-width: 700px) { .stamps { grid-template-columns: repeat(4,1fr); } }

/* ---- Category tiles: photo-led, rounder, warmer ---- */
.cat-tile { border-radius: var(--r-md); overflow: hidden; border-color: transparent;
  box-shadow: var(--shadow-card); padding: 0; }
.cat-tile__photo { aspect-ratio: 4/3; overflow: hidden; background: var(--c-band); }
.cat-tile__photo img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.cat-tile__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2);
  flex: 1; text-align: center; }
.cat-tile h3 { font-size: var(--t-lg); }

/* ---- Product cards: softer, to match ---- */
.pcard { border-radius: var(--r-md); overflow: hidden; border-color: transparent;
  box-shadow: var(--shadow-card); }
.woocommerce ul.products li.product .pcard { height: 100%; }

/* ---- Marquee: bigger, as the reference runs it ---- */
.marquee { padding-block: var(--s-5); }
.marquee__track { font-size: clamp(1.5rem, 4vw, 2.75rem); }
.marquee__track span { display: inline-flex; align-items: center; gap: var(--s-5); }
.marquee__track span::after { content: "·"; color: var(--c-accent); }

/* A card on a dark band must reassert its own text colour: the band sets a light ink for its
   own headings, and that light ink was being inherited onto white cards. */
.band--ink .quote,
.band--ink .pcard,
.band--ink .cat-tile { color: var(--c-ink); }
.band--ink .quote blockquote { color: var(--c-ink); }
.band--ink .quote footer { color: var(--c-ink-faint); }
.band--ink .section__head p { color: rgba(237,227,211,.82); }

/* Same trap on the mint band, where the ground is light but tinted. */
.band--leaf .feature__copy { color: var(--c-ink); }

/* The torn edge was too shallow to read at desktop width. */
.band::before, .band::after { height: 34px; -webkit-mask-size: 1200px 34px; mask-size: 1200px 34px; }
.band::before { top: -33px; }
.band::after  { bottom: -33px; }

/* ===================================================================
   Pass 3: density. The reference shops carry a full category grid with
   counts and blurbs, a trust row, an SEO copy block and a journal row.
   Thin sections are what made this read as a template.
   =================================================================== */

/* ---- Full category grid ---- */
.catgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); }
@media (min-width: 760px)  { .catgrid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); } }
.catcard { background: var(--c-surface); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.catcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.catcard__media { aspect-ratio: 16/10; background: var(--c-band); overflow: hidden; position: relative; }
.catcard__media img { width: 100%; height: 100%; object-fit: cover; }
.catcard__count { position: absolute; bottom: var(--s-2); right: var(--s-2); background: rgba(68,56,42,.88);
  color: var(--c-page); font-family: var(--f-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); }
.catcard__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.catcard h3 { font-size: var(--t-lg); margin: 0; }
.catcard p { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0; }
.catcard__go { margin-top: auto; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }

/* ---- Trust circles ---- */
.trustrow { display: grid; grid-template-columns: 1fr; gap: var(--s-6); text-align: center; }
@media (min-width: 760px) { .trustrow { grid-template-columns: repeat(3,1fr); } }
.trustrow__item { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.trustrow__ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--c-accent); background: var(--c-surface); font-size: 34px;
  color: var(--c-accent); flex: 0 0 auto; }
.trustrow h3 { font-family: var(--f-ui); font-size: var(--t-sm); text-transform: uppercase;
  letter-spacing: .12em; margin: 0; }
.trustrow p { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0; max-width: 30ch; }

/* ---- SEO copy block ---- */
.copyblock { background: var(--c-surface); border-radius: var(--r-md); padding: var(--s-6);
  box-shadow: var(--shadow-card); }
.copyblock h2 { font-size: var(--t-xl); }
/* The global 68ch measure left this copy in a narrow column with the right half of the card
   empty. Columns fill the card instead, and each one keeps a readable line length. */
.copyblock p { font-size: var(--t-sm); color: var(--c-ink-soft); max-width: none; }
.copyblock p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .copyblock { padding: var(--s-7) var(--s-8); }
  .copyblock { columns: 2; column-gap: var(--s-8); }
  .copyblock h2 { column-span: all; }
  .copyblock p { break-inside: avoid; }
}
@media (min-width: 1500px) { .copyblock { column-gap: var(--s-9); } }

/* ---- Journal cards ---- */
.jcard { background: var(--c-surface); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit; }
.jcard__media { aspect-ratio: 16/9; background: var(--c-band); overflow: hidden; }
.jcard__media img { width: 100%; height: 100%; object-fit: cover; }
.jcard__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.jcard h3 { font-size: var(--t-base); line-height: 1.35; margin: 0; }
.jcard time { font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ink-faint); }

/* ---- Star ratings on cards ---- */
.pcard__rating .stars { font-size: var(--t-sm); letter-spacing: 1px; }

/* ---- Shop-by-effect pills ---- */
.effects { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.effect { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: var(--s-3) var(--s-5);
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; text-decoration: none; color: inherit; transition: all .18s;
  min-height: 48px; }
.effect:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.effect span { font-size: 18px; }

/* The tear mask was tiled at a fixed 1200px width and the SVG path does not join seamlessly,
   so every repeat boundary showed as a solid rectangle punching out of the band. Stretching a
   single tear across the full width removes the seam entirely. */
.band::before, .band::after {
  -webkit-mask-size: 100% 34px; mask-size: 100% 34px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* The marquee sits between two bands and was being overlaid from both sides by their tears.
   It is a full-width rule, not a section, so it opts out of the treatment. */
.marquee { position: relative; z-index: 3; }
.band--cream.band--after-marquee::before,
.band--sand.band--before-marquee::after { content: none; }

/* ---- Brand mark ---- */
.brand { display: flex; align-items: center; line-height: 0; }
.brand img { height: 38px; width: auto; }
@media (min-width: 900px) { .brand img { height: 46px; } }
.footer__mark { display: grid; place-items: center; padding-bottom: var(--s-6); opacity: .14; }
.footer__mark img { height: 150px; width: auto; filter: brightness(0) invert(1); }
@media (min-width: 800px) { .footer__mark img { height: 220px; } }

/* ===================================================================
   Pass 4: navigation and page headers.
   The nav had no hover, no active state and read as plain links; the
   page header stretched a product photo across a banner, which is
   where "foolish" came from. Both rebuilt.
   =================================================================== */

/* ---- Nav ---- */
.nav ul { gap: var(--s-1); align-items: center; }
.nav > ul > li { position: relative; }
.nav > ul > li > a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  position: relative; transition: color .16s, background .16s;
}
/* The rule grows from the centre on hover and sits full width when the page is current. */
.nav > ul > li > a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px; height: 2px;
  background: var(--c-accent); transition: left .2s ease, right .2s ease;
}
.nav > ul > li > a:hover { color: var(--c-ink); background: rgba(173,136,68,.09); }
.nav > ul > li > a:hover::after { left: var(--s-4); right: var(--s-4); }
.nav > ul > li.is-current > a { color: var(--c-ink); }
.nav > ul > li.is-current > a::after { left: var(--s-4); right: var(--s-4); height: 3px; }
.nav > ul > li.has-menu > a::before {
  content: ""; order: 2; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
  opacity: .55; transition: transform .2s, opacity .2s;
}
.nav > ul > li.has-menu:hover > a::before,
.nav > ul > li.has-menu:focus-within > a::before { transform: rotate(225deg) translate(-3px,-3px); opacity: 1; }

/* ---- Dropdown ---- */
.subnav {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 460px; background: var(--c-page); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lift); padding: var(--s-5);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 70;
}
.nav > ul > li.has-menu:hover .subnav,
.nav > ul > li.has-menu:focus-within .subnav {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* A hit area bridging the gap, so the menu does not close as the pointer travels to it. */
.nav > ul > li.has-menu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.subnav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-5); }
.subnav a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) var(--s-2); border-radius: var(--r-sm); text-transform: none;
  letter-spacing: 0; font-size: var(--t-sm); font-weight: 500; }
.subnav a:hover { background: var(--c-band); color: var(--c-ink); }
.subnav a span { font-family: var(--f-ui); font-size: 11px; color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums; }
.subnav__foot { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.subnav__foot a { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); justify-content: flex-start; }

/* ---- Page header: a designed band, not a stretched photograph ----
   A product shot blown up to banner width is always going to look wrong. This is a deep
   ground with a quiet botanical texture, a gold rule and room for the type to breathe. */
.page-hero { background: var(--c-ink); color: var(--c-page); border-bottom: 0; }
.page-hero__bg { display: none; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 28%, rgba(173,136,68,.55) 0 2px, transparent 2px),
    radial-gradient(circle at 62% 72%, rgba(173,136,68,.40) 0 2px, transparent 2px),
    radial-gradient(circle at 86% 20%, rgba(173,136,68,.45) 0 2px, transparent 2px);
  background-size: 180px 180px, 240px 240px, 300px 300px;
}
.page-hero__inner { padding-block: var(--s-7); max-width: 60rem; }
.page-hero h1 { color: var(--c-page); font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--s-3); }
.page-hero p { color: rgba(243,239,230,.80); font-size: var(--t-lg); }
.page-hero .crumbs { color: rgba(243,239,230,.60); }
.page-hero .crumbs a:hover { color: var(--c-accent); }
/* A gold rule under the heading, the one piece of ornament on the band. */
.page-hero h1::after {
  content: ""; display: block; width: 72px; height: 3px; background: var(--c-accent);
  margin-top: var(--s-4); border-radius: 2px;
}
.page-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5);
  font-family: var(--f-ui); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .1em; color: rgba(243,239,230,.65); }
.page-hero__meta strong { color: var(--c-accent); font-weight: 700; }
@media (min-width: 900px) { .page-hero__inner { padding-block: var(--s-8); } }

/* ---- Long-form reading ---- */
.prose { max-width: 70ch; margin-inline: auto; }
.prose p { font-size: 1.1875rem; line-height: 1.68; }
.prose h2 { margin-top: var(--s-7); }
.prose strong { color: var(--c-ink); }
.prose a { color: var(--c-accent); text-underline-offset: 3px; }
.jcard__title { text-wrap: balance; }
.navigation.pagination { margin-top: var(--s-7); display: flex; justify-content: center; }
.navigation.pagination .nav-links { display: flex; gap: var(--s-2); }
.navigation.pagination a, .navigation.pagination span {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-sm); text-decoration: none;
  font-family: var(--f-ui); font-size: var(--t-sm); background: var(--c-surface); }
.navigation.pagination .current { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.navigation.pagination a:hover { background: var(--c-band); }

/* ---- Lab results ---- */
.lab-search { display: flex; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 560px; }
.lab-search input { flex: 1; min-height: 52px; padding: var(--s-3) var(--s-5);
  border: 2px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface);
  font-family: var(--f-body); font-size: var(--t-base); }
.lab-search input:focus { outline: none; border-color: var(--c-accent); }
.lab-table { background: var(--c-surface); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-card); }
.lab-row { display: grid; gap: var(--s-2); padding: var(--s-4); border-bottom: 1px solid var(--c-line);
  align-items: center; font-size: var(--t-sm); }
.lab-row:last-child { border-bottom: 0; }
.lab-row--head { display: none; }
.lab-row span { display: flex; justify-content: space-between; gap: var(--s-3); }
.lab-row span::before { content: attr(data-label); font-family: var(--f-ui); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-faint); }
.lab-row code { font-size: var(--t-xs); background: var(--c-band); padding: 2px 7px; border-radius: var(--r-sm); }
.lab-row.is-fail { background: #FBF0EC; }
.lab-flag { font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--c-leaf-soft); color: var(--c-leaf); }
.lab-flag--fail { background: #F6DED6; color: var(--c-crit); }
.lab-note { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--c-ink-soft); max-width: 70ch; }
@media (min-width: 860px) {
  .lab-row { grid-template-columns: 2.2fr 1fr 1fr 1fr 1.1fr 1fr; gap: var(--s-4); }
  .lab-row--head { display: grid; background: var(--c-band); font-family: var(--f-ui);
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
  .lab-row span { display: block; }
  .lab-row span::before { content: none; }
  .lab-row--head span { display: block; }
}

/* ---- Cart button ----
   .icon-btn is a grid, so the badge was being placed in its own row under the icon instead
   of on its corner. The link becomes the positioning context and the badge sits on it. */
.cart-link { position: relative; display: inline-grid; place-items: center;
  min-width: 48px; min-height: 48px; }
.cart-link svg { width: 26px; height: 26px; }
.cart-count {
  position: absolute; top: 4px; right: 2px; margin: 0;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--c-accent); color: #fff;
  font-family: var(--f-ui); font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: var(--r-pill); border: 2px solid var(--c-page);
  font-variant-numeric: tabular-nums;
}
.cart-link:hover { color: var(--c-accent); }
.cart-link-wrap { display: inline-flex; }

/* Quantity field: a proper stepper rather than a bare spinner. */
.quantity { display: inline-flex; align-items: stretch; border: 2px solid var(--c-line);
  border-radius: var(--r-pill); overflow: hidden; background: var(--c-surface); }
.quantity .qty { -moz-appearance: textfield; appearance: textfield;
  border: 0 !important; border-radius: 0 !important; background: none;
  width: 48px !important; min-height: 48px; text-align: center;
  font-family: var(--f-ui); font-size: var(--t-base); font-weight: 600;
  font-variant-numeric: tabular-nums; padding: 0 !important; }
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity .qty:focus { outline: none; }
.qty-step { background: none; border: 0; cursor: pointer; width: 40px; min-height: 48px;
  display: grid; place-items: center; color: var(--c-ink-soft); font-size: 18px;
  line-height: 1; transition: background .15s, color .15s; }
.qty-step:hover { background: var(--c-band); color: var(--c-ink); }
.qty-step:disabled { opacity: .35; cursor: default; }
.quantity:focus-within { border-color: var(--c-accent); }

/* ---- Contact ---- */
.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,0.7fr); } }
.contact-form__row { display: grid; gap: var(--s-4); }
@media (min-width: 620px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
.contact-form p { margin-bottom: var(--s-4); }
.contact-form label { display: block; font-family: var(--f-ui); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--c-ink-faint);
  margin-bottom: var(--s-2); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font-family: var(--f-body); font-size: var(--t-base);
  padding: var(--s-3) var(--s-4); border: 2px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-surface); min-height: 52px; }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--c-accent); }
.contact-side { background: var(--c-band); border-radius: var(--r-md); padding: var(--s-5); }
.contact-side h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.contact-side h2 + p { font-size: var(--t-sm); color: var(--c-ink-soft); }
.contact-links { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-2); }
.contact-links a { display: block; padding: var(--s-3); background: var(--c-surface);
  border-radius: var(--r-sm); text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
.contact-links a:hover { color: var(--c-accent); }

/* ---- Hero plate ----
   The product cluster sits in the right third and the left two thirds is empty, so the copy
   goes left and the image is anchored right. Measured contrast in that left box is 9.9:1 at
   worst against cream type, which clears AA and AAA. The lower-left stone looks dark but
   reads 1.9:1, so nothing sits below 60% height there.
   On a phone a 3:1 crop is 130px tall and the bottles vanish, so a right-weighted square
   plate is used instead and the copy moves beneath it. */
.hero--full .hero__bg { background-position: right center; }
.hero--full::after {
  background: linear-gradient(95deg, rgba(6,30,24,.88) 0%, rgba(6,30,24,.72) 34%,
                                      rgba(6,30,24,.30) 62%, rgba(6,30,24,.08) 100%);
}
.hero--full .hero__copy { padding-block: var(--s-8) var(--s-9); }
@media (max-width: 899px) {
  /* A 240px band of photograph above a flat green block read as two unrelated things stacked.
     The square plate goes behind the copy instead, with a vertical scrim doing the legibility
     work that the left-to-right one does on a wide screen. */
  .hero--full { min-height: 78vh; }
  .hero--full .hero__bg {
    position: absolute; inset: 0; height: auto;
    background-image: var(--hero-sq, none) !important;
    background-position: center 28%; background-size: cover;
  }
  .hero--full::before {
    inset: 0; height: auto;
    background: linear-gradient(180deg, rgba(6,30,24,.52) 0%, rgba(6,30,24,.74) 42%,
                                        rgba(6,30,24,.93) 100%);
  }
  .hero--full::after { inset: 0; height: auto; background: none; }
  .hero--full .hero__copy { padding-block: var(--s-7); }
  .hero--full h1, .hero--full p, .hero--full .hero__proof, .hero--full .eyebrow { color: #FBF7EF; }
}

/* Lab results pagination: the record runs to several pages, so it needs a way through. */
.lab-pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center;
  margin-top: var(--s-6); font-family: var(--f-ui); font-size: var(--t-sm); }
.lab-pagination a, .lab-pagination span { display: inline-flex; align-items: center;
  justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-sm); text-decoration: none;
  color: var(--c-ink); }
.lab-pagination a:hover { border-color: var(--c-ink); }
.lab-pagination .current { background: var(--c-ink); color: var(--c-page); border-color: var(--c-ink); }

/* ---- Control boundaries ----
   WCAG 1.4.11 asks 3:1 for the edge of anything you operate. The decorative divider colour
   measured 1.51:1 on these, so inputs, selects and the quantity box take the control token. */
div.search form,
#lab-q,
#coupon_code,
#min_price, #max_price,
.quantity,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.contact-form input, .contact-form textarea, .contact-form select,
select.orderby, .woocommerce-ordering select {
  border-color: var(--c-control-line);
}

/* A visible focus ring on text inputs. The only previous cue was a border recolour whose two
   states differed by 2.18:1, and on the search field the outline was removed outright. */
div.search form:focus-within,
#lab-q:focus, #coupon_code:focus, #min_price:focus, #max_price:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus,
.quantity .qty:focus {
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
  border-color: var(--c-ink);
}