/* ==========================================================================
   STEEPWELL — design system
   Warm cream · deep tea-brown · soft sage · charcoal · one gold accent
   Mobile-first. System fonts (zero font bytes, zero CLS). WCAG 2.2 AA.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* palette */
  --cream:        #F6F0E6;   /* page */
  --cream-2:      #FBF7F0;   /* raised surfaces */
  --cream-3:      #EDE4D6;   /* dividers / wells */
  --linen:        #E4D9C7;
  --navy:         #1D2B33;   /* logo navy — primary dark */
  --navy-2:       #152128;   /* hover / text on cream */
  --navy-3:       #0F181D;
  --sage:         #8FA189;
  --sage-2:       #56684F;   /* AA text on cream (5.3:1) */
  --sage-tint:    #E9EEE5;
  --ink:          #241F1A;   /* body text (14:1) */
  --ink-soft:     #5C534B;   /* secondary text (6.9:1) */
  --ink-mute:     #857A70;   /* meta (3.9:1 — large text/decorative only) */
  --gold:         #7F5E1C;   /* accent for text (5:1 on cream) */
  --honey:        #B5651D;   /* amber accent */
  --honey-deep:   #7A3E0F;
  --gold-2:       #D4AC54;   /* logo gold — on dark + decorative */
  --error:        #9B3B2C;
  --success:      #3E6B3A;

  /* type — refined serif for voice, clean sans for UI */
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-xl:   clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-2xl:  clamp(2.375rem, 1.7rem + 3vw, 4.25rem);
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  /* spacing — 4px base */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;  --s-8: 4rem;    --s-9: 6rem; --s-10: 8rem;
  --section: clamp(3.5rem, 6vw + 1rem, 7.5rem);
  --gutter:  clamp(1rem, 4vw, 2.5rem);
  --wrap:    72rem;
  --wrap-narrow: 44rem;
  --wrap-prose:  40rem;

  /* shape + depth */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(36 31 26 / .06), 0 2px 8px rgb(36 31 26 / .05);
  --shadow-2: 0 4px 14px rgb(36 31 26 / .08), 0 12px 32px rgb(36 31 26 / .08);
  --shadow-3: 0 18px 50px rgb(36 31 26 / .16);
  --ring: 0 0 0 2px var(--cream), 0 0 0 4px var(--gold-2);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 240ms;
  --header-h: 4rem;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--fs-base)/var(--lh-body) var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: var(--lh-tight); color: var(--navy-2); text-wrap: balance; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
p + p { margin-top: 1em; }
a { color: var(--navy); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-3); }
ul, ol { margin: 0; padding-left: 1.25rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: var(--linen); color: var(--navy-3); }
hr { border: 0; border-top: 1px solid var(--cream-3); margin: var(--s-6) 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* View transitions — cross-page image continuity (progressive enhancement) */
@view-transition { navigation: auto; }
.vt-hero { view-transition-name: hero-jar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }

/* ---------- 3. Layout primitives ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); margin-inline: auto; }
.wrap--prose  { width: min(100% - 2 * var(--gutter), var(--wrap-prose));  margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .55); }
.section--well { background: var(--cream-2); }
.section--dark { background: var(--navy-3); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark a { color: var(--gold-2); }
.section--sage { background: var(--sage-tint); }
.stack > * + * { margin-top: var(--flow, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 52em) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .split--reverse > :first-child { order: 2; } }
.center { text-align: center; }
.measure { max-width: 34em; }
.measure--wide { max-width: 44em; }
.mx-auto { margin-inline: auto; }

/* ---------- 4. Typography helpers ---------- */
.eyebrow { font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lede { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.55; text-wrap: pretty; }
.serif { font-family: var(--serif); }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.price { font-family: var(--serif); font-size: var(--fs-md); color: var(--navy-2); font-variant-numeric: tabular-nums; }
.price s { color: var(--ink-mute); font-size: .85em; margin-left: .35em; }
.section-head { margin-bottom: var(--s-6); }
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head p { margin-top: var(--s-3); }

/* Long-form prose (journal + policies) */
.prose { font-size: var(--fs-base); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-lg); margin-top: 2.2em; }
.prose h3 { font-size: var(--fs-md); font-family: var(--serif); margin-top: 1.8em; }
.prose h2 + p, .prose h3 + p { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin: 1.5em 0; padding: .25em 0 .25em 1.25em; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: var(--fs-md); color: var(--navy-2); }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .6em; }
.prose img, .prose svg { border-radius: var(--r-md); }
.prose table { font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: .6em .75em; border-bottom: 1px solid var(--cream-3); vertical-align: top; }
.prose th { font-weight: 600; color: var(--navy-2); }
.prose .callout { background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-md); padding: var(--s-5); }
.prose .updated { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: .8em 1.4em; border-radius: var(--r-pill);
  font: 500 var(--fs-sm)/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy); color: var(--cream-2); }
.btn--primary:hover { background: var(--navy-2); color: var(--cream-2); }
.btn--ghost { background: transparent; color: var(--navy-2); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--cream-2); }
.btn--soft { background: var(--cream-3); color: var(--navy-2); }
.btn--soft:hover { background: var(--linen); }
.btn--link { min-height: 0; padding: 0; border-radius: var(--r-sm); color: var(--navy); text-decoration: underline; text-underline-offset: .2em; }
.btn--sm { min-height: 2.5rem; padding: .6em 1.1em; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--on-dark { background: var(--cream-2); color: var(--navy-3); }
.btn--on-dark:hover { background: var(--cream); }

/* Express wallets — feel native, not skinned */
.btn--apple-pay {
  background: #000; color: #fff; border-radius: 8px; min-height: 3.125rem; font-size: 1.0625rem;
  font-family: var(--sans); font-weight: 500; letter-spacing: -.01em;
}
.btn--apple-pay:hover { background: #1a1a1a; color: #fff; }
.btn--apple-pay svg { height: 1.25rem; width: auto; }
.btn--gpay { background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 8px; min-height: 3.125rem; font-weight: 500; }
.btn--gpay:hover { background: #f8f9fa; color: #202124; }
.btn--shop-pay { background: #5A31F4; color: #fff; border-radius: 8px; min-height: 3.125rem; font-weight: 600; font-style: italic; letter-spacing: -.02em; }
.btn--shop-pay:hover { background: #4b27d3; color: #fff; }
.express { display: grid; gap: var(--s-3); }
.express__or { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-soft); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; }
.express__or::before, .express__or::after { content: ""; flex: 1; height: 1px; background: var(--cream-3); }
.express__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* ---------- 6. Forms — one column, no clutter ---------- */
.form { display: grid; gap: var(--s-5); }
.form--tight { gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field > label, .field__label { font: 500 var(--fs-sm)/1.3 var(--sans); color: var(--navy-2); }
.field .help { font-size: var(--fs-xs); color: var(--ink-soft); }
.field .error { font-size: var(--fs-xs); color: var(--error); display: none; }
.field[data-invalid] .error { display: block; }
.field[data-invalid] .input { border-color: var(--error); }
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: .7em .95em; background: var(--cream-2);
  border: 1px solid var(--linen); border-radius: var(--r-md); color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231D2B33' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95em center; padding-right: 2.6em; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--sage); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--navy); box-shadow: 0 0 0 3px rgb(29 43 51 / .12); outline: none; }
.input::placeholder { color: var(--ink-mute); }
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 30em) { .field-row { grid-template-columns: 1fr 1fr; } .field-row--3 { grid-template-columns: 2fr 1fr 1fr; } }
.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.check input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--navy); flex: none; }
.form__foot { font-size: var(--fs-sm); color: var(--ink-soft); }
.form-card { background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-1); }
.form-msg { display: none; padding: var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); }
.form-msg[data-show] { display: block; }
.form-msg--ok { background: #E7EFE3; color: var(--success); }
.form-msg--err { background: #F6E4E0; color: var(--error); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--linen); border-radius: var(--r-pill); background: var(--cream-2); }
.qty button { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; color: var(--navy); border-radius: var(--r-pill); }
.qty button:hover { background: var(--cream-3); }
.qty input { width: 2.5rem; text-align: center; border: 0; background: none; font-weight: 500; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { appearance: none; }

/* Radio "option cards" (shipping rates, payment methods) */
.opt { display: grid; gap: var(--s-3); }
.opt label { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-4); border: 1px solid var(--linen); border-radius: var(--r-md); background: var(--cream-2); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.opt label:hover { border-color: var(--sage); }
.opt input { width: 1.15rem; height: 1.15rem; accent-color: var(--navy); margin: 0; }
.opt label:has(input:checked) { border-color: var(--navy); background: #fff; }
.opt__title { font-weight: 500; color: var(--navy-2); }
.opt__meta { font-size: var(--fs-xs); color: var(--ink-soft); }
.opt__price { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- 7. Header ---------- */
.skip { position: absolute; left: var(--s-4); top: -3rem; z-index: 100; background: var(--navy); color: var(--cream-2); padding: .6em 1em; border-radius: var(--r-md); text-decoration: none; transition: top .15s; }
.skip:focus { top: var(--s-4); }
.announce { background: var(--navy-3); color: var(--cream); font-size: var(--fs-xs); letter-spacing: .04em; text-align: center; padding: .55em var(--gutter); }
.announce a { color: var(--gold-2); }
.header { position: sticky; top: 0; z-index: 50; background: rgb(246 240 230 / .86); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid rgb(29 43 51 / .08); }
.header__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: var(--header-h); gap: var(--s-4); }
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--navy-2); font-family: var(--serif); font-size: 1.375rem; letter-spacing: .12em; text-transform: uppercase; }
.logo svg { width: 1.75rem; height: 1.75rem; }
.nav { display: none; justify-content: center; gap: clamp(1rem, 3vw, 2.25rem); }
.nav a { text-decoration: none; color: var(--ink); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .02em; padding: .5em 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__tools { display: flex; align-items: center; gap: var(--s-2); justify-self: end; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); color: var(--navy-2); text-decoration: none; position: relative; transition: background var(--dur) var(--ease); }
.icon-btn:hover { background: var(--cream-3); }
.icon-btn svg { width: 1.375rem; height: 1.375rem; }
.cart-count { position: absolute; top: .3rem; right: .2rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: var(--r-pill); background: var(--gold); color: #fff; font: 600 .65rem/1.15rem var(--sans); text-align: center; transform: scale(0); transition: transform .2s var(--ease); }
.cart-count[data-show] { transform: scale(1); }
.menu-btn { display: inline-flex; }
@media (min-width: 52em) { .nav { display: flex; } .menu-btn { display: none; } }
.mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--cream); padding: var(--s-6) var(--gutter); display: flex; flex-direction: column; gap: var(--s-6); transform: translateX(100%); transition: transform .3s var(--ease); visibility: hidden; }
.mobile-nav[data-open] { transform: none; visibility: visible; }
.mobile-nav__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-nav nav { display: grid; gap: var(--s-2); }
.mobile-nav nav a { font-family: var(--serif); font-size: var(--fs-lg); text-decoration: none; padding: .35em 0; border-bottom: 1px solid var(--cream-3); }
.mobile-nav__foot { margin-top: auto; display: grid; gap: var(--s-3); font-size: var(--fs-sm); }

/* ---------- 8. Hero ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(2rem, 5vw, 4rem) 0; }
.hero__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56em) { .hero__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s-8); min-height: min(calc(100svh - var(--header-h) - 6rem), 46rem); } }
.hero__copy .eyebrow { margin-bottom: var(--s-4); }
.hero__copy h1 { max-width: 12ch; }
.hero__copy .lede { margin-top: var(--s-5); max-width: 30em; }
.hero__ctas { margin-top: var(--s-6); }
.hero__meta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); font-size: var(--fs-sm); color: var(--ink-soft); }
.hero__meta span { display: inline-flex; align-items: center; gap: .45em; }
.hero__meta svg { width: 1rem; height: 1rem; color: var(--sage-2); }
.hero__art { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3); aspect-ratio: 4 / 5; background: #E8DCC8; }
@media (min-width: 56em) { .hero__art { aspect-ratio: 5 / 6; } }
.hero__art svg, .hero__art img { width: 100%; height: 100%; object-fit: cover; }
.hero__tag { position: absolute; left: var(--s-5); bottom: var(--s-5); background: rgb(251 247 240 / .92); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-1); font-size: var(--fs-sm); display: grid; gap: .1rem; }
.hero__tag strong { font-family: var(--serif); font-size: var(--fs-md); font-weight: 400; color: var(--navy-2); }

/* ---------- 9. Product cards + grids ---------- */
.products { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(2, 1fr); container-type: inline-size; }
@media (min-width: 40em) { .products { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-5); } }
@media (min-width: 64em) { .products { grid-template-columns: repeat(4, 1fr); } }
.products--featured { grid-template-columns: 1fr; }
@media (min-width: 40em) { .products--featured { grid-template-columns: repeat(3, 1fr); } }
.pcard { display: grid; gap: var(--s-3); container-type: inline-size; position: relative; }
.pcard__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: #E9DFCF; box-shadow: var(--shadow-1); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pcard__media svg, .pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.pcard:hover .pcard__media svg, .pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard__badge { position: absolute; top: var(--s-3); left: var(--s-3); background: var(--cream-2); color: var(--navy-2); font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .45em .7em; border-radius: var(--r-pill); }
.pcard__badge--low { background: var(--gold); color: #fff; }
.pcard__badge--out { background: var(--ink); color: var(--cream); }
.pcard__body { display: grid; gap: .2rem; }
.pcard__title { font-family: var(--serif); font-size: var(--fs-md); line-height: 1.25; }
.pcard__title a { text-decoration: none; color: var(--navy-2); }
.pcard__title a::after { content: ""; position: absolute; inset: 0; }
.pcard__sub { font-size: var(--fs-sm); color: var(--ink-soft); }
.pcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: .15rem; }
.pcard__add { position: relative; z-index: 1; }
@container (max-width: 14rem) { .pcard__row { flex-direction: column; align-items: flex-start; } .pcard__add { width: 100%; } }
.pcard--soldout .pcard__media { filter: saturate(.7) brightness(1.02); }
.wish-btn { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); background: rgb(251 247 240 / .9); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.wish-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wish-btn[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }

/* ---------- 10. PDP ---------- */
.pdp { display: grid; gap: var(--s-6); padding-top: var(--s-5); }
@media (min-width: 56em) { .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-8); align-items: start; } .pdp__gallery { position: sticky; top: calc(var(--header-h) + 1rem); } }
.gallery { display: grid; gap: var(--s-3); }
.gallery__main { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: #E9DFCF; box-shadow: var(--shadow-2); }
.gallery__main svg, .gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.gallery__thumbs button { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; border: 2px solid transparent; background: #E9DFCF; transition: border-color var(--dur) var(--ease); }
.gallery__thumbs button[aria-current="true"] { border-color: var(--navy); }
.gallery__thumbs svg, .gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__buy { display: grid; gap: var(--s-5); }
.pdp__title h1 { font-size: var(--fs-xl); }
.pdp__title .sub { color: var(--ink-soft); margin-top: .4rem; font-size: var(--fs-md); font-family: var(--serif); }
.rating { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.stars { display: inline-flex; gap: .1rem; color: var(--gold); }
.stars svg { width: .95rem; height: .95rem; }
.pdp__price { display: flex; align-items: baseline; gap: var(--s-3); }
.pdp__price .price { font-size: var(--fs-lg); }
.stock { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: .5em; }
.stock::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--success); }
.stock--low { color: var(--gold); }
.stock--low::before { background: var(--gold); }
.stock--out { color: var(--error); }
.stock--out::before { background: var(--error); }
.pdp__actions { display: grid; gap: var(--s-3); grid-template-columns: auto 1fr; align-items: center; }
.pdp__actions .btn--primary { min-height: 3.125rem; }
.ship-snippet { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-md); font-size: var(--fs-sm); }
.ship-snippet div { display: flex; gap: .6em; align-items: flex-start; }
.ship-snippet svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--sage-2); margin-top: .1rem; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.notes div { background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.notes small { display: block; font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.notes strong { font-family: var(--serif); font-weight: 400; color: var(--navy-2); }
.acc { border-top: 1px solid var(--cream-3); }
.acc details { border-bottom: 1px solid var(--cream-3); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) 0; font-weight: 500; color: var(--navy-2); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--serif); font-size: 1.4rem; color: var(--gold); transition: transform var(--dur) var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc__body { padding: 0 0 var(--s-5); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.65; }
.acc__body > * + * { margin-top: .75em; }
.brew { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); text-align: center; }
.brew div { padding: var(--s-4) var(--s-2); border-radius: var(--r-md); background: var(--sage-tint); }
.brew strong { display: block; font-family: var(--serif); font-size: var(--fs-lg); color: var(--navy-2); font-weight: 400; }
.brew small { font-size: var(--fs-xs); color: var(--sage-2); text-transform: uppercase; letter-spacing: .08em; }

/* Sticky buy bar (mobile) */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgb(251 247 240 / .96); backdrop-filter: blur(10px); border-top: 1px solid var(--cream-3); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); transform: translateY(110%); transition: transform .3s var(--ease); }
.buybar[data-show] { transform: none; }
.buybar__info { display: grid; line-height: 1.2; }
.buybar__info strong { font-family: var(--serif); font-weight: 400; font-size: var(--fs-base); color: var(--navy-2); }
.buybar__info span { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (min-width: 56em) { .buybar { display: none; } }
body:has(.buybar[data-show]) { padding-bottom: 5.5rem; }
@media (min-width: 56em) { body:has(.buybar[data-show]) { padding-bottom: 0; } }

/* ---------- 11. Cart drawer + cart page ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(15 24 29 / .4); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(100%, 27rem); background: var(--cream); box-shadow: var(--shadow-3); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s var(--ease); }
body:has(.drawer[data-open]) .drawer-backdrop { opacity: 1; visibility: visible; }
.drawer[data-open] { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--cream-3); }
.drawer__head h2 { font-size: var(--fs-md); }
.drawer__body { flex: 1; overflow: auto; padding: var(--s-4) var(--s-5); }
.drawer__foot { padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--cream-3); display: grid; gap: var(--s-3); background: var(--cream-2); }
.free-ship { font-size: var(--fs-xs); color: var(--ink-soft); display: grid; gap: .4rem; }
.free-ship__bar { height: 4px; background: var(--cream-3); border-radius: 2px; overflow: hidden; }
.free-ship__bar i { display: block; height: 100%; background: var(--sage-2); width: 0; transition: width .4s var(--ease); }
.free-ship strong { color: var(--sage-2); }
.line { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--cream-3); }
.line__media { aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: hidden; background: #E9DFCF; }
.line__media svg, .line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__body { display: grid; gap: .35rem; align-content: start; }
.line__title { font-family: var(--serif); color: var(--navy-2); text-decoration: none; }
.line__meta { font-size: var(--fs-xs); color: var(--ink-soft); }
.line__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: .25rem; }
.line__row .qty button { width: 2.25rem; height: 2.25rem; }
.line__remove { font-size: var(--fs-xs); color: var(--ink-soft); text-decoration: underline; }
.line__remove:hover { color: var(--error); }
.totals { display: grid; gap: .5rem; font-size: var(--fs-sm); }
.totals div { display: flex; justify-content: space-between; gap: var(--s-3); }
.totals .grand { font-size: var(--fs-md); font-family: var(--serif); color: var(--navy-2); border-top: 1px solid var(--cream-3); padding-top: .6rem; margin-top: .2rem; }
.totals .discount { color: var(--success); }
.empty { text-align: center; padding: var(--s-8) var(--s-4); color: var(--ink-soft); display: grid; gap: var(--s-4); justify-items: center; }
.empty svg { width: 3rem; height: 3rem; color: var(--sage); }
.promo { display: flex; gap: var(--s-2); }
.promo .input { min-height: 2.75rem; }
.promo .btn { min-height: 2.75rem; }
.promo-msg { font-size: var(--fs-xs); min-height: 1.2em; }
.promo-msg[data-ok] { color: var(--success); }
.promo-msg[data-err] { color: var(--error); }
.cart-layout { display: grid; gap: var(--s-6); }
@media (min-width: 56em) { .cart-layout { grid-template-columns: 1.4fr .9fr; gap: var(--s-8); align-items: start; } .cart-layout__side { position: sticky; top: calc(var(--header-h) + 1rem); } }
.summary { background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-4); }
.summary h2 { font-size: var(--fs-md); }
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); z-index: 90; background: var(--navy-3); color: var(--cream); padding: .8em 1.2em; border-radius: var(--r-pill); font-size: var(--fs-sm); box-shadow: var(--shadow-2); opacity: 0; transition: opacity .25s, transform .25s var(--ease); pointer-events: none; }
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 12. Checkout ---------- */
.checkout { display: grid; gap: var(--s-6); }
@media (min-width: 60em) { .checkout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); gap: var(--s-9); align-items: start; } .checkout__side { position: sticky; top: calc(var(--header-h) + 1rem); order: 2; } }
.steps { display: flex; gap: var(--s-3); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: .04em; margin-bottom: var(--s-5); flex-wrap: wrap; }
.steps span[aria-current] { color: var(--navy-2); font-weight: 600; }
.steps span:not(:last-child)::after { content: "›"; margin-left: var(--s-3); color: var(--ink-mute); }
.co-section { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-top: 1px solid var(--cream-3); }
.co-section:first-of-type { border-top: 0; padding-top: 0; }
.co-section h2 { font-size: var(--fs-lg); }
.co-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.co-section__head .small a { color: var(--navy); }
.ship-calc { display: grid; gap: var(--s-4); }
.ship-calc__result { display: grid; gap: var(--s-2); }
.card-fields { display: grid; gap: var(--s-4); }
.card-fields .input { font-family: var(--mono); letter-spacing: .06em; }
.card-icons { display: flex; gap: .4rem; }
.card-icons span { width: 2.1rem; height: 1.4rem; border-radius: 3px; border: 1px solid var(--linen); background: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 .55rem/1 var(--sans); color: var(--ink-soft); }
.secure { display: flex; gap: .5em; align-items: center; font-size: var(--fs-xs); color: var(--ink-soft); }
.secure svg { width: .95rem; height: .95rem; color: var(--sage-2); }
.confirm-hero { text-align: center; padding-block: var(--section) var(--s-6); }
.confirm-hero .check-ring { width: 4.5rem; height: 4.5rem; margin: 0 auto var(--s-5); border-radius: 50%; background: var(--sage-tint); color: var(--sage-2); display: grid; place-items: center; }
.confirm-hero .check-ring svg { width: 2rem; height: 2rem; }
.order-no { font-family: var(--mono); letter-spacing: .08em; background: var(--cream-2); border: 1px dashed var(--linen); padding: .5em 1em; border-radius: var(--r-md); display: inline-block; }
.track-line { display: grid; gap: 0; position: relative; padding-left: 2rem; margin-top: var(--s-5); }
.track-line::before { content: ""; position: absolute; left: .5rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--cream-3); }
.track-step { position: relative; padding: 0 0 var(--s-5); }
.track-step::before { content: ""; position: absolute; left: -2rem; top: .35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--cream); border: 2px solid var(--linen); }
.track-step[data-done]::before { background: var(--sage-2); border-color: var(--sage-2); }
.track-step[data-now]::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgb(169 118 47 / .2); }
.track-step strong { display: block; color: var(--navy-2); font-weight: 500; }
.track-step span { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---------- 13. Account ---------- */
.auth { padding-block: var(--section); }
.auth .form-card { max-width: 27rem; margin-inline: auto; }
.auth h1 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--s-2); }
.auth .lede { text-align: center; margin-bottom: var(--s-6); font-size: var(--fs-base); }
.account { display: grid; gap: var(--s-6); }
@media (min-width: 52em) { .account { grid-template-columns: 14rem 1fr; gap: var(--s-8); align-items: start; } }
.account__nav { display: grid; gap: .25rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.account__nav a { text-decoration: none; padding: .7em 1em; border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-sm); }
.account__nav a:hover { background: var(--cream-3); }
.account__nav a[aria-current="page"] { background: var(--navy); color: var(--cream-2); }
.account__nav .signout { margin-top: var(--s-3); color: var(--ink-soft); }
.panel { background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-lg); padding: var(--s-5); }
.panel + .panel { margin-top: var(--s-4); }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.panel__head h2 { font-size: var(--fs-md); }
.order-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--cream-3); font-size: var(--fs-sm); }
.order-row:first-of-type { border-top: 0; padding-top: 0; }
.order-row strong { font-family: var(--mono); font-weight: 500; letter-spacing: .05em; color: var(--navy-2); }
.pill { display: inline-block; font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .4em .7em; border-radius: var(--r-pill); background: var(--sage-tint); color: var(--sage-2); }
.pill--gold { background: #F3E7D2; color: var(--gold); }
.addr { display: grid; gap: var(--s-3); }
.addr__card { border: 1px solid var(--linen); border-radius: var(--r-md); padding: var(--s-4); font-size: var(--fs-sm); display: grid; gap: .5rem; background: #fff; }
.addr__card address { font-style: normal; line-height: 1.5; }
.addr__card .cluster { gap: var(--s-2); }
.gated { text-align: center; padding: var(--s-8) var(--s-4); display: grid; gap: var(--s-4); justify-items: center; }

/* ---------- 14. Content components ---------- */
.ritual-steps { display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 40em) { .ritual-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .ritual-steps { grid-template-columns: repeat(4, 1fr); } }
.ritual-step { counter-increment: step; display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--linen); }
.ritual-step::before { content: "0" counter(step); font-family: var(--serif); font-size: var(--fs-lg); color: var(--gold); }
.ritual-step h3 { font-size: var(--fs-md); }
.ritual-step p { font-size: var(--fs-sm); color: var(--ink-soft); }
.review { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-lg); }
.review blockquote { margin: 0; font-family: var(--serif); font-size: var(--fs-md); color: var(--navy-2); line-height: 1.45; text-wrap: pretty; }
.review footer { font-size: var(--fs-sm); color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.review .verified { color: var(--sage-2); font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: .3em; }
.review .verified svg { width: .85rem; height: .85rem; }
.acard { display: grid; gap: var(--s-3); position: relative; }
.acard__media { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #E9DFCF; box-shadow: var(--shadow-1); }
.acard__media img, .acard__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.acard:hover .acard__media img, .acard:hover .acard__media svg { transform: scale(1.03); }
.acard h3 { font-size: var(--fs-md); }
.acard h3 a { text-decoration: none; color: var(--navy-2); }
.acard h3 a::after { content: ""; position: absolute; inset: 0; }
.acard p { font-size: var(--fs-sm); color: var(--ink-soft); }
.acard .meta { font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: .04em; }
.article-head { padding-block: var(--s-7) var(--s-6); text-align: center; }
.article-head .meta { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--s-4); }
.article-hero { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: #E9DFCF; box-shadow: var(--shadow-2); margin-bottom: var(--s-7); }
.article-hero img, .article-hero svg { width: 100%; height: 100%; object-fit: cover; }
.related { border-top: 1px solid var(--cream-3); padding-top: var(--s-7); margin-top: var(--s-8); }
.tag { display: inline-block; font-size: var(--fs-xs); color: var(--sage-2); background: var(--sage-tint); padding: .35em .7em; border-radius: var(--r-pill); text-decoration: none; }
.pull { font-family: var(--serif); font-size: var(--fs-lg); color: var(--navy-2); line-height: 1.3; text-wrap: balance; }
.fact-list { display: grid; gap: var(--s-4); }
.fact { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.fact svg { width: 1.4rem; height: 1.4rem; color: var(--sage-2); margin-top: .1rem; }
.fact strong { display: block; color: var(--navy-2); font-weight: 500; }
.fact span { font-size: var(--fs-sm); color: var(--ink-soft); }
.stat { display: grid; gap: .25rem; }
.stat strong { font-family: var(--serif); font-size: var(--fs-xl); color: var(--navy-2); font-weight: 400; line-height: 1; }
.stat span { font-size: var(--fs-sm); color: var(--ink-soft); }
.marquee-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--shadow-2); background: #E9DFCF; }
.marquee-photo img { width: 100%; height: 100%; object-fit: cover; }
.faq-list details { border-bottom: 1px solid var(--cream-3); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font-family: var(--serif); font-size: var(--fs-md); color: var(--navy-2); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold); flex: none; transition: transform var(--dur) var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-a { padding: 0 0 var(--s-5); color: var(--ink-soft); max-width: 60ch; }
.faq-list .faq-a > * + * { margin-top: .6em; }
.breadcrumbs { font-size: var(--fs-xs); color: var(--ink-soft); padding-top: var(--s-4); }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.breadcrumbs li + li::before { content: "/"; margin-right: .5em; color: var(--ink-mute); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; }
.page-head { padding-block: var(--s-7) var(--s-6); }
.page-head .lede { margin-top: var(--s-4); }
.page-head--center { text-align: center; }
.page-head--center .lede { margin-inline: auto; }
.rate-table th, .rate-table td { text-align: left; padding: .75em .5em; border-bottom: 1px solid var(--cream-3); font-size: var(--fs-sm); vertical-align: top; }
.rate-table th { color: var(--navy-2); font-weight: 600; }
.rate-table td:last-child, .rate-table th:last-child { text-align: right; white-space: nowrap; }
.contact-grid { display: grid; gap: var(--s-6); }
@media (min-width: 52em) { .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--s-8); align-items: start; } }
.contact-card { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-top: 1px solid var(--cream-3); font-size: var(--fs-sm); }
.contact-card strong { color: var(--navy-2); font-weight: 500; }
.cta-band { border-radius: var(--r-lg); background: var(--navy-3); color: var(--cream); padding: clamp(2rem, 5vw, 4rem); display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 52em) { .cta-band { grid-template-columns: 1.4fr 1fr; } .cta-band__actions { justify-self: end; } }
.cta-band h2 { color: var(--cream); }
.cta-band p { color: rgb(246 240 230 / .78); }
.gift-tiers { display: grid; gap: var(--s-5); }
@media (min-width: 52em) { .gift-tiers { grid-template-columns: repeat(3, 1fr); } }
.gift-tier { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--cream-2); border: 1px solid var(--cream-3); border-radius: var(--r-lg); }
.gift-tier .eyebrow { color: var(--sage-2); }
.gift-tier ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.gift-tier li::before { content: "—"; color: var(--gold); margin-right: .5em; }

/* ---------- 15. Footer ---------- */
.footer { background: var(--navy-3); color: rgb(246 240 230 / .82); margin-top: var(--section); }
.footer a { color: rgb(246 240 230 / .82); text-decoration: none; }
.footer a:hover { color: var(--gold-2); }
.footer__news { padding-block: var(--s-8) var(--s-7); border-bottom: 1px solid rgb(246 240 230 / .12); display: grid; gap: var(--s-5); }
@media (min-width: 52em) { .footer__news { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-8); } }
.footer__news h2 { color: var(--cream); font-size: var(--fs-lg); }
.footer__news p { margin-top: var(--s-2); font-size: var(--fs-sm); }
.news-form { display: grid; gap: var(--s-3); }
@media (min-width: 30em) { .news-form { grid-template-columns: 1fr auto; } }
.news-form .input { background: rgb(246 240 230 / .06); border-color: rgb(246 240 230 / .18); color: var(--cream); }
.news-form .input::placeholder { color: rgb(246 240 230 / .5); }
.news-form .input:focus-visible { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgb(200 154 78 / .25); }
.news-form .small { grid-column: 1 / -1; color: rgb(246 240 230 / .55); }
.footer__grid { padding-block: var(--s-7); display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52em) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s-8); } }
.footer__brand { grid-column: 1 / -1; display: grid; gap: var(--s-4); }
@media (min-width: 52em) { .footer__brand { grid-column: auto; } }
.footer__brand .logo { color: var(--cream); }
.footer__brand p { font-size: var(--fs-sm); max-width: 28em; }
.footer h3 { font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); margin-bottom: var(--s-4); }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: var(--fs-sm); }
.footer__promise { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.footer__promise div { display: flex; gap: .6em; align-items: flex-start; }
.footer__promise svg { width: 1.1rem; height: 1.1rem; color: var(--gold-2); flex: none; margin-top: .15rem; }
.footer__bottom { padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid rgb(246 240 230 / .12); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-4) var(--s-5); font-size: var(--fs-xs); color: rgb(246 240 230 / .55); }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__bottom a { color: rgb(246 240 230 / .55); }
.pay-marks { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; align-self: center; }
.pay-marks span { display: inline-block; padding: .45em .6em; border: 1px solid rgb(246 240 230 / .22); border-radius: var(--r-pill); font: 600 .6rem/1 var(--sans); letter-spacing: .06em; line-height: 1; }

/* Cookie notice */
.cookie { position: fixed; left: var(--s-4); right: var(--s-4); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); z-index: 80; background: rgb(251 247 240 / .97); backdrop-filter: blur(10px); border: 1px solid var(--linen); border-radius: var(--r-pill); box-shadow: var(--shadow-2); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5); display: none; gap: var(--s-3); align-items: center; font-size: var(--fs-xs); max-width: 38rem; margin-inline: auto; }
.cookie[data-show] { display: flex; flex-wrap: wrap; justify-content: center; }
.cookie p { margin: 0; }
.cookie .btn--sm { min-height: 2.25rem; padding: .5em .9em; font-size: var(--fs-xs); }
@media (max-width: 34em) { .cookie { border-radius: var(--r-lg); } }
.cookie .cluster { gap: var(--s-2); }

/* Reveal on scroll — progressive, no CLS (opacity/transform only) */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal[data-in] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Print */
@media print { .header, .footer, .announce, .drawer, .drawer-backdrop, .buybar, .cookie, .toast { display: none !important; } body { background: #fff; } }

/* ==========================================================================
   16. Motion layer — every animation is opacity/transform only (no CLS),
   and everything here is disabled under prefers-reduced-motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Page entrance: hero copy rises in sequence, art settles */
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
  .hero__copy > * { animation: rise .8s var(--ease) both; }
  .hero__copy > :nth-child(1) { animation-delay: .05s; }
  .hero__copy > :nth-child(2) { animation-delay: .15s; }
  .hero__copy > :nth-child(3) { animation-delay: .27s; }
  .hero__copy > :nth-child(4) { animation-delay: .39s; }
  .hero__copy > :nth-child(5) { animation-delay: .5s; }
  .hero__art { animation: settle 1.1s var(--ease) both .1s; }
  .hero__tag { animation: rise .8s var(--ease) both .7s; }

  /* Steam — three wisps rising on offset loops (SVG paths carry --i) */
  @keyframes steam { 0% { transform: translateY(14px) scaleX(1); opacity: 0; } 25% { opacity: .55; } 100% { transform: translateY(-46px) scaleX(1.12); opacity: 0; } }
  .steam path { transform-box: fill-box; transform-origin: 50% 100%; animation: steam 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.4s); }
  /* Window light — bokeh drifts, very slowly */
  @keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-14px, 10px); } }
  .bokeh circle { animation: drift 14s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.3s); }
  /* Glass highlight — a slow light sweep across the jar */
  @keyframes sweep { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
  .glass-sweep { animation: sweep 6s ease-in-out infinite; }

  /* Reveal stagger: cards inside a grid fan in */
  .reveal { transition-delay: var(--d, 0ms); }
  .grid > .reveal:nth-child(2), .products > .reveal:nth-child(2), .ritual-steps > .reveal:nth-child(2) { --d: 90ms; }
  .grid > .reveal:nth-child(3), .products > .reveal:nth-child(3), .ritual-steps > .reveal:nth-child(3) { --d: 180ms; }
  .grid > .reveal:nth-child(4), .products > .reveal:nth-child(4), .ritual-steps > .reveal:nth-child(4) { --d: 270ms; }

  /* Buttons — lift on hover, press on active, success pulse after add */
  .btn--primary:hover, .btn--ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  @keyframes added { 0% { transform: scale(1); } 40% { transform: scale(.96); } 100% { transform: scale(1); } }
  .btn[data-added] { animation: added .45s var(--ease); background: var(--sage-2); border-color: var(--sage-2); }
  /* Cart badge pop */
  @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
  .cart-count.pop { animation: pop .4s var(--ease); }
  /* Heart */
  @keyframes beat { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
  .wish-btn[aria-pressed="true"] svg { animation: beat .4s var(--ease); }

  /* Tasting-notes ribbon — continuous, pauses on hover */
  @keyframes ribbon { to { transform: translateX(-50%); } }
  .ribbon__track { animation: ribbon 38s linear infinite; }
  .ribbon:hover .ribbon__track { animation-play-state: paused; }

  /* Drawer contents slide in slightly after the panel */
  .drawer[data-open] .drawer__body, .drawer[data-open] .drawer__foot { animation: rise .45s var(--ease) both .12s; }

  /* Underline draw for prose links */
  .prose a, .lede a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; text-decoration: none; transition: background-size .35s var(--ease); border-bottom: 1px solid rgb(29 43 51 / .3); }
  .prose a:hover, .lede a:hover { background-size: 100% 1px; }
}
/* Ribbon layout (not motion-dependent) */
.ribbon { overflow: hidden; border-block: 1px solid var(--cream-3); padding-block: var(--s-4); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ribbon__track { display: flex; gap: var(--s-7); width: max-content; white-space: nowrap; }
.ribbon__track span { font-family: var(--serif); font-size: var(--fs-md); color: var(--navy-2); display: inline-flex; align-items: center; gap: var(--s-7); }
.ribbon__track span::after { content: "·"; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .ribbon__track { width: auto; flex-wrap: wrap; justify-content: center; } .ribbon__track > :nth-child(n+9) { display: none; } }

/* ---------- 17. Brand mark ---------- */
.logo { gap: .65rem; text-transform: none; letter-spacing: 0; }
.logo .fe-mark { width: 2.5rem; height: 2.5rem; flex: none; object-fit: contain; }
.footer .logo .fe-mark, .mobile-nav .logo .fe-mark { filter: drop-shadow(0 0 1px rgb(212 172 84 / .5)); }
.logo__word { display: grid; line-height: 1; font-family: var(--serif); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--navy-2); }
.logo__word span:last-child { font-size: .6rem; letter-spacing: .32em; color: var(--gold); margin-top: .22rem; }
.footer .logo__word { color: var(--cream); } .footer .logo__word span:last-child { color: var(--gold-2); }
.hero__art .scene, .gallery__main .scene, .pcard__media .scene { background: #E8DCC8; }
.btn--primary { background: var(--navy); }
.btn--primary:hover { background: var(--navy-2); }
.cart-count { background: var(--honey); }
.pcard__badge--low { background: var(--honey); }
.stock--low { color: var(--honey); } .stock--low::before { background: var(--honey); }
.eyebrow { color: var(--gold); }
.free-ship__bar i { background: var(--honey); }
.disclaimer { font-size: var(--fs-xs); color: rgb(246 240 230 / .5); max-width: 60ch; line-height: 1.5; }
.stripe-band { background: repeating-linear-gradient(90deg, #FAF4E4 0 10px, #F3E7B8 10px 20px); border-block: 1px solid var(--cream-3); }

/* ---------- 18. Softer geometry + continuous loops ---------- */
.section--well, .section--sage, .section--dark { border-radius: clamp(22px, 4vw, 44px); margin-inline: clamp(.5rem, 2vw, 1.5rem); }
.hero__art, .gallery__main, .article-hero, .marquee-photo, .cta-band { border-radius: var(--r-xl); }
.pcard__media, .acard__media, .form-card, .panel, .summary, .gift-tier, .review { border-radius: var(--r-lg); }
.gallery__thumbs button, .line__media, .addr__card, .ship-snippet, .notes div, .brew div, .opt label { border-radius: var(--r-md); }
.input, .select, .textarea { border-radius: 16px; }
.btn--apple-pay, .btn--gpay, .btn--shop-pay { border-radius: 14px; }
.scene { display: block; }
@media (prefers-reduced-motion: no-preference) {
  /* the jar breathes: a slow float with its shadow answering underneath */
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .8; } }
  .scene--live .float { transform-box: fill-box; transform-origin: 50% 100%; animation: float 6.5s ease-in-out infinite; }
  .scene--live .float-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: breathe 6.5s ease-in-out infinite; }
  /* slow push-in on the hero scene (Ken Burns), never more than 5% */
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.03); } }
  /* transform-box must be border-box: the default (view-box) applies the transform in
     SVG user units while transform-origin resolves in CSS px, which throws the scene off. */
  .scene--live { transform-box: border-box; transform-origin: 55% 62%; animation: kenburns 26s ease-in-out infinite alternate; }
  /* honey thread: a dash that keeps pouring */
  @keyframes drip { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
  .honey-drip { stroke-dasharray: 90 430; animation: drip 3.6s linear infinite; }
  /* lemon / ginger twinkle: light catching the cut face */
  @keyframes glint { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
  .glint { animation: glint 4s ease-in-out infinite; }
  /* hero tag nudges once in a while */
  @keyframes nudge { 0%, 90%, 100% { transform: translateY(0); } 95% { transform: translateY(-3px); } }
  .hero__tag { animation: rise .8s var(--ease) both .7s, nudge 9s ease-in-out 3s infinite; }
}
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   19. Selling layer — bundle tiers, urgency, proof band, sticky desktop bar
   ========================================================================== */
.tiers { display: grid; gap: var(--s-3); border: 0; padding: 0; margin: 0; }
.tiers__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-1); }
.tiers__head strong { font: 600 var(--fs-sm)/1 var(--sans); color: var(--navy-2); letter-spacing: .01em; }
.tiers__head span { font-size: var(--fs-xs); color: var(--ink-soft); }
.tier { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border: 1.5px solid var(--linen); border-radius: var(--r-md);
  background: var(--cream-2); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tier:hover { border-color: var(--sage); }
.tier input { width: 1.15rem; height: 1.15rem; accent-color: var(--navy); margin: 0; flex: none; }
.tier:has(input:checked) { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgb(29 43 51 / .07); }
.tier__main { display: grid; gap: .15rem; min-width: 0; }
.tier__qty { font-family: var(--serif); font-size: var(--fs-md); color: var(--navy-2); line-height: 1.15; }
.tier__meta { font-size: var(--fs-xs); color: var(--ink-soft); }
.tier__right { display: grid; justify-items: end; gap: .1rem; }
.tier__price { font-family: var(--serif); font-size: var(--fs-md); color: var(--navy-2); font-variant-numeric: tabular-nums; }
.tier__price s { color: var(--ink-mute); font-size: .8em; margin-right: .3em; }
.tier__each { font-size: var(--fs-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tier__save { position: absolute; top: -.6rem; right: var(--s-4); background: var(--honey); color: #fff;
  font: 700 var(--fs-xs)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .35em .6em; border-radius: var(--r-pill); white-space: nowrap; }
.tier__save--best { background: var(--navy); }
.tier--pop { border-color: var(--honey); }
@media (max-width: 26em) { .tier__save { right: var(--s-3); font-size: .6rem; } }

.urgency { display: flex; align-items: center; gap: .5em; font-size: var(--fs-sm); color: var(--sage-2); }
.urgency::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sage-2); flex: none; }
.urgency strong { color: var(--navy-2); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgb(86 104 79 / .5); } 70% { box-shadow: 0 0 0 6px rgb(86 104 79 / 0); } }
  .urgency::before { animation: pulse-dot 2.6s ease-out infinite; }
}

.proof { border-block: 1px solid var(--cream-3); background: var(--cream-2); }
.proof__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); padding-block: var(--s-5); text-align: center; }
@media (min-width: 48em) { .proof__in { grid-template-columns: repeat(4, 1fr); } }
.proof__item { display: grid; gap: .3rem; justify-items: center; }
.proof__item strong { font-family: var(--serif); font-size: var(--fs-lg); color: var(--navy-2); line-height: 1; font-weight: 400; }
.proof__item span { font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: .04em; }
.proof__item .stars { color: var(--gold); }

.hero__proof { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--ink-soft); }
.hero__proof .stars { color: var(--gold); }
.hero__proof svg { width: 1rem; height: 1rem; color: var(--sage-2); flex: none; vertical-align: -.15em; }
.hero__proof > span { display: inline-flex; align-items: center; gap: .4em; }
.hero__proof a { color: var(--ink-soft); }

.deskbar { position: fixed; left: 0; right: 0; top: 0; z-index: 45; background: rgb(251 247 240 / .97);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--cream-3); box-shadow: var(--shadow-1);
  transform: translateY(-110%); transition: transform .32s var(--ease); display: none; }
.deskbar[data-show] { transform: none; }
@media (min-width: 56em) { .deskbar { display: block; } }
.deskbar__in { display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-3); }
.deskbar__thumb { width: 3rem; height: 3rem; border-radius: var(--r-sm); overflow: hidden; background: #E9DFCF; flex: none; }
.deskbar__thumb svg, .deskbar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.deskbar__info { display: grid; line-height: 1.25; margin-right: auto; min-width: 0; }
.deskbar__info strong { font-family: var(--serif); font-weight: 400; color: var(--navy-2); }
.deskbar__info span { font-size: var(--fs-xs); color: var(--ink-soft); }
.deskbar__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.deskbar .btn--apple-pay { min-height: 2.75rem; padding-inline: 1.1em; }

.capture-backdrop { position: fixed; inset: 0; z-index: 85; background: rgb(15 24 29 / .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.capture { position: fixed; z-index: 86; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97);
  width: min(100% - 2rem, 30rem); background: var(--cream); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  padding: clamp(1.75rem, 5vw, 2.5rem); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; text-align: center; }
body:has(.capture[data-open]) .capture-backdrop { opacity: 1; visibility: visible; }
.capture[data-open] { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.capture__close { position: absolute; top: .6rem; right: .6rem; }
.capture .fe-mark { width: 3rem; height: 3rem; margin: 0 auto var(--s-4); display: block; }
.capture h2 { font-size: var(--fs-lg); }
.capture p { margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--fs-sm); }
.capture form { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.capture .tiny { color: var(--ink-mute); }
.capture__code { display: inline-block; font-family: var(--mono); font-size: var(--fs-md); letter-spacing: .12em;
  background: var(--cream-2); border: 1px dashed var(--gold-2); color: var(--navy-2); padding: .5em 1em; border-radius: var(--r-md); margin-top: var(--s-2); }

.value-bullets { display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.value-bullets div { display: flex; gap: .55em; align-items: flex-start; color: var(--ink); }
.value-bullets svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--sage-2); margin-top: .18rem; }

/* --- Named guarantee block --- */
.guarantee { border: 1px solid var(--sage); background: var(--sage-tint); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
.guarantee strong { display: flex; align-items: center; gap: .5em; font: 600 var(--fs-base)/1.3 var(--sans); color: var(--navy-2); }
.guarantee strong svg { width: 1.2rem; height: 1.2rem; color: var(--sage-2); flex: none; }
.guarantee p { margin-top: .5rem; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }
/* --- First-order offer nudge under the CTA --- */
.offer-nudge { font-size: var(--fs-sm); color: var(--ink); background: #FBF3E2; border: 1px dashed var(--gold-2); border-radius: var(--r-md); padding: .7em 1em; text-align: center; }
.offer-nudge code { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; color: var(--navy-2); }
.offer-nudge strong { color: var(--navy-2); }
/* --- Sample-review disclosure --- */
.sample-note { font-size: var(--fs-xs); color: var(--ink-mute); text-align: center; margin-top: var(--s-5); }
/* --- Objection answers beside the buy button --- */
.objections { display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }
.objections strong { color: var(--navy-2); font-weight: 600; }
.objections p { margin: 0; }
/* --- One-tap bundle upsell in the cart drawer --- */
.ship-upsell { display: grid; gap: .2rem; width: 100%; text-align: left; margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4); border: 1.5px solid var(--honey); border-radius: var(--r-md);
  background: #FBF3E2; color: var(--navy-2); font: 600 var(--fs-sm)/1.3 var(--sans); transition: background var(--dur) var(--ease); }
.ship-upsell:hover { background: #F7EAD2; }
.ship-upsell span { font-weight: 400; font-size: var(--fs-xs); color: var(--ink-soft); }

/* ==========================================================================
   20. Second motion pass — slow ambient loops. All opacity/transform, all
   disabled under prefers-reduced-motion, none of them block a click.
   ========================================================================== */
.scroll-cue { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--s-6); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.scroll-cue svg { width: 1rem; height: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  /* Primary CTAs — one slow specular pass, like light crossing glass. Long dwell, short sweep. */
  .hero__ctas .btn--primary, .pdp__actions .btn--primary, .deskbar .btn--primary, .cta-band .btn--on-dark { position: relative; overflow: hidden; isolation: isolate; }
  .hero__ctas .btn--primary::after, .pdp__actions .btn--primary::after, .deskbar .btn--primary::after, .cta-band .btn--on-dark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .22) 50%, transparent 62%);
    transform: translateX(-130%); animation: sheen 7s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes sheen { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

  /* "Most popular" badge — a gold shimmer that reads as foil, not neon */
  .tier__save { background-image: linear-gradient(100deg, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / .38) 50%, rgb(255 255 255 / 0) 66%); background-size: 220% 100%; background-repeat: no-repeat; animation: shimmer 5.5s ease-in-out infinite; }
  @keyframes shimmer { 0%, 62% { background-position: 220% 0; } 100% { background-position: -120% 0; } }

  /* The mark catches the light every so often */
  @keyframes markGlint { 0%, 93%, 100% { filter: brightness(1); } 96.5% { filter: brightness(1.14) saturate(1.06); } }
  .logo .fe-mark { animation: markGlint 14s ease-in-out infinite; }

  /* Free-shipping progress — honey flowing along the bar */
  .free-ship__bar i { background-image: linear-gradient(90deg, var(--honey), var(--gold-2), var(--honey)); background-size: 200% 100%; animation: flow 3.4s linear infinite; }
  @keyframes flow { to { background-position: -200% 0; } }

  /* Cart badge breathes while it holds something (the add-to-cart pop still wins — declared later) */
  @keyframes badgeIdle { 0%, 90%, 100% { transform: scale(1); } 95% { transform: scale(1.14); } }
  .cart-count[data-show] { animation: badgeIdle 8s ease-in-out infinite; }
  .cart-count.pop { animation: pop .4s var(--ease); }

  /* Scroll cue under the hero */
  @keyframes cue { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
  .scroll-cue svg { animation: cue 2.4s ease-in-out infinite; }

  /* Inside the scenes: the window light breathes, and a highlight crosses the label */
  @keyframes ambient { 0%, 100% { opacity: .46; } 50% { opacity: .72; } }
  .scene--live .window-glow { animation: ambient 11s ease-in-out infinite; }
  @keyframes labelSheen { 0%, 68% { opacity: 0; transform: translateX(-30px); } 78% { opacity: .5; } 100% { opacity: 0; transform: translateX(46px); } }
  .scene--live .label-sheen { transform-box: fill-box; animation: labelSheen 8.5s ease-in-out infinite; }
  .scene:not(.scene--live) .label-sheen { opacity: 0; }

  /* The urgency dot already pulses; give the offer nudge a matching slow breath */
  @keyframes nudgeGlow { 0%, 100% { border-color: var(--gold-2); } 50% { border-color: var(--honey); } }
  .offer-nudge { animation: nudgeGlow 5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .label-sheen { opacity: 0; } }

/* ==========================================================================
   21. Brightness + confidence pass
   The warm-beige grounds read dim next to real product photography. Lift the
   surfaces toward clean cream/white, sharpen the type contrast, and let the
   photograph carry the warmth instead of the background.
   ========================================================================== */
:root {
  --cream:   #FBF8F3;   /* page — was #F6F0E6 */
  --cream-2: #FFFFFF;   /* raised surfaces — clean white */
  --cream-3: #EDE7DD;   /* dividers */
  --linen:   #E2DACE;
  --ink:      #1F1B17;  /* body text, slightly deeper for crispness */
  --ink-soft: #565049;
}
/* Cards and panels lift off the page instead of blending into it */
.pcard__media, .acard__media { background: #F4EFE7; }
.form-card, .panel, .summary, .gift-tier, .review, .tier { box-shadow: 0 1px 2px rgb(31 27 23 / .04), 0 6px 20px rgb(31 27 23 / .05); }
.section--well { background: #F6F2EB; }
.section--sage { background: #EEF3EB; }
.proof { background: #FFFFFF; border-color: var(--cream-3); }
.header { background: rgb(251 248 243 / .88); }
.buybar, .deskbar { background: rgb(255 255 255 / .97); }
.cookie { background: rgb(255 255 255 / .97); }
/* Photography gets a crisp, neutral mount rather than a beige one */
.hero__art, .gallery__main, .article-hero, .marquee-photo, .pcard__media, .acard__media { background: #F4EFE7; box-shadow: 0 2px 6px rgb(31 27 23 / .06), 0 18px 44px rgb(31 27 23 / .10); }
.hero__art img, .gallery__main img { object-fit: cover; }
/* Type: a touch more contrast and a tighter, more assured headline */
h1, h2 { letter-spacing: -0.018em; }
.lede { color: #4A443D; }
.eyebrow { color: #8A6518; }
/* Buttons read a little more decisive */
.btn--primary { background: #17242B; }
.btn--primary:hover { background: #0F181D; }
.btn--ghost { border-color: rgb(23 36 43 / .35); }
.btn--ghost:hover { background: #17242B; border-color: #17242B; }

/* ==========================================================================
   22. Client mockup — bright white, gold, striped masthead, Cinzel display
   ========================================================================== */
:root {
  --stripe: #E9C84B;          /* label yellow */
  --gold-btn: #C9A227;        /* buttons, rules, icons (decorative) */
  --gold-text: #8F6E14;       /* gold used as text — 5:1 on white */
  --gold: var(--gold-text);
  --gold-2: var(--gold-btn);
  --cream:   #FFFFFF;
  --cream-2: #FFFFFF;
  --cream-3: #ECE7DD;
  --well:    #F8F6F1;
  --ink:     #1C1B19;
  --ink-soft:#4A463F;
  --display: "Cinzel", "Trajan Pro", "Iowan Old Style", Georgia, serif;
  --serif:   "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --header-h: 3.5rem;
}
body { background: #fff; }
.section--well { background: var(--well); }
.eyebrow { color: var(--gold-text); }

/* --- Stripes: alternating label-yellow and white bars --- */
.stripes { background: repeating-linear-gradient(90deg, var(--stripe) 0 3.25rem, #fff 3.25rem 6.5rem); }
@media (max-width: 40em) { .stripes { background: repeating-linear-gradient(90deg, var(--stripe) 0 1.75rem, #fff 1.75rem 3.5rem); } }

/* --- Masthead: stripes with a white centre panel holding the lockup --- */
.masthead { padding: 0; }
.masthead__panel { background: #fff; width: min(100%, 54rem); margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 3rem); text-align: center; }
@media (max-width: 40em) { .masthead__panel { width: min(100%, 22rem); } }
.lockup { display: inline-grid; justify-items: center; gap: .35rem; text-decoration: none; color: var(--ink); }
.lockup__bee { width: 2.25rem; height: 2.25rem; color: var(--gold-btn); display: block; }
.lockup__bee svg { width: 100%; height: 100%; }
.lockup__name { font: 700 clamp(1.35rem, 3.2vw, 2rem)/1.05 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #141311; }
.lockup__sub { font: 500 clamp(.62rem, 1.4vw, .8rem)/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #2A2824; margin-top: .25rem; }
.lockup__tag { font: 500 clamp(.55rem, 1.1vw, .66rem)/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #5A554C; margin-top: .55rem; }

/* --- Nav row --- */
.header--nav { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--cream-3); border-bottom: 1px solid var(--cream-3); }
.navbar__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: var(--header-h); gap: var(--s-4); }
.header--nav .nav { display: none; justify-content: center; gap: clamp(1.25rem, 3.4vw, 3rem); }
@media (min-width: 56em) { .header--nav .nav { display: flex; } .header--nav .menu-btn { visibility: hidden; } }
.header--nav .nav a { font: 500 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #1C1B19; padding: 1.1rem 0; position: relative; text-decoration: none; }
.header--nav .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .75rem; height: 2px; background: var(--gold-btn); transform: scaleX(0); transform-origin: center; transition: transform var(--dur) var(--ease); }
.header--nav .nav a:hover::after, .header--nav .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header--nav .header__tools .icon-btn { color: var(--gold-btn); }
.header--nav .header__tools .icon-btn:hover { color: #1C1B19; }

/* --- Type used by the mockup sections --- */
.mk-eyebrow { font: 500 .74rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); }
.mk-h1 { font: 700 clamp(2.1rem, 5.2vw, 3.9rem)/1.08 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #141311; margin-top: var(--s-4); }
.mk-h1--page { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-top: var(--s-3); }
.mk-h2 { font: 400 clamp(1.15rem, 2.4vw, 1.7rem)/1.25 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #141311; text-align: center; }
.mk-h3 { font: 600 clamp(1.05rem, 2vw, 1.35rem)/1.25 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #141311; }
.mk-rule { display: block; width: 3.25rem; height: 2px; background: var(--gold-btn); margin-top: var(--s-4); }
.mk-rule--center { margin-inline: auto; }
.mk-lede { font: 500 clamp(1.1rem, 1.6vw, 1.3rem)/1.5 var(--serif); color: #3C3934; max-width: 30ch; margin-top: var(--s-4); }
.btn--gold { background: var(--gold-btn); color: #141311; font: 700 .76rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 1.05em 2.3em; border-radius: 3px; min-height: 0; }
.btn--gold:hover { background: #B8921F; color: #141311; }
.mk-hero__copy .btn--gold { margin-top: var(--s-6); }

/* --- Hero --- */
.mk-hero { background: #fff; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); }
.mk-hero__in { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56em) { .mk-hero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); } }
.mk-hero__photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: #F4F1EA; box-shadow: 0 18px 44px rgb(20 19 17 / .10); }
.mk-hero__photo img, .mk-hero__photo svg { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
@media (min-width: 56em) { .mk-hero__photo { aspect-ratio: 5 / 4; } .mk-hero__photo img { object-position: center 45%; } }

/* --- Inspired by nature --- */
.mk-nature { background: var(--well); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mk-title { display: grid; justify-items: center; }
.mk-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 48em) { .mk-gallery { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
.mk-gallery figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: #E9E4D9; }
.mk-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.mk-gallery figure:hover img { transform: scale(1.04); }
.mk-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); margin-top: clamp(2.25rem, 5vw, 3.5rem); text-align: center; }
@media (min-width: 48em) { .mk-features { grid-template-columns: repeat(4, 1fr); gap: 0; } .mk-feature + .mk-feature { border-left: 1px solid #DDD6C8; } }
.mk-feature { padding-inline: var(--s-4); display: grid; justify-items: center; gap: .55rem; }
.mk-feature__icon { width: 2.9rem; height: 2.9rem; color: var(--gold-btn); display: block; }
.mk-feature__icon svg { width: 100%; height: 100%; }
.mk-feature h3 { font: 600 .74rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #1C1B19; margin-top: .25rem; }
.mk-feature p { font: 500 1.05rem/1.4 var(--serif); color: #4A463F; max-width: 20ch; }

/* --- Striped CTA band --- */
.stripes--band { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.mk-band { background: #fff; width: min(100%, 60rem); margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.75rem); display: grid; gap: var(--s-4); align-items: center; justify-items: center; text-align: center; }
@media (min-width: 48em) { .mk-band { grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; gap: var(--s-5); } }
.mk-band__bee { width: 3.4rem; height: 3.4rem; color: var(--gold-btn); display: block; }
.mk-band__bee svg { width: 100%; height: 100%; }
.mk-band__text p { font: 500 1.15rem/1.4 var(--serif); color: #3C3934; margin-top: .35rem; }

/* --- Trust strip --- */
.mk-trust { background: #fff; border-top: 1px solid var(--cream-3); }
.mk-trust__in { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) 0; padding-block: var(--s-5); }
.mk-trust__in span { display: inline-flex; align-items: center; gap: .6rem; font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #1C1B19; padding-inline: clamp(.9rem, 2.5vw, 1.75rem); }
.mk-trust__in span + span { border-left: 1px solid #DDD6C8; }
.mk-trust__in svg { width: 1.25rem; height: 1.25rem; color: #1C1B19; }
@media (max-width: 40em) { .mk-trust__in span { width: 50%; justify-content: center; border-left: 0 !important; padding-block: .25rem; } }

/* --- Recipes page --- */
.recipes { display: grid; gap: var(--s-5); margin-block: var(--s-6) var(--s-8); }
@media (min-width: 48em) { .recipes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .recipes { grid-template-columns: repeat(3, 1fr); } }
.recipe { background: #fff; border: 1px solid var(--cream-3); border-radius: 6px; padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: var(--s-4); align-content: start; }
.recipe__head { display: flex; gap: var(--s-4); align-items: center; }
.recipe__icon { width: 2.6rem; height: 2.6rem; color: var(--gold-btn); flex: none; }
.recipe__icon svg { width: 100%; height: 100%; }
.recipe__meta { font: 500 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.recipe h2 { font: 600 1.15rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #141311; margin-top: .4rem; }
.recipe__lede { font: 500 1.1rem/1.45 var(--serif); color: #3C3934; }
.recipe__body { display: grid; gap: var(--s-4); }
.recipe__body h3 { font: 600 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #1C1B19; margin-bottom: .5rem; }
.recipe__body ul, .recipe__body ol { padding-left: 1.1rem; font: 400 1rem/1.5 var(--serif); color: #3C3934; display: grid; gap: .25rem; }

/* --- Global chrome tuned to the new look --- */
.page-head h1 { font-family: var(--serif); }
.footer { background: #141311; }
.cookie { border-radius: 6px; }
.btn--primary { background: #141311; }
.btn--primary:hover { background: #000; }
/* the old hero animations targeted .hero__* — keep the photo still and calm here */
.mk-hero__photo .scene--live { animation: none; }

/* 22b. Mockup fidelity fixes */
.masthead__panel { width: min(100%, 40rem); }                             /* more stripe either side, like the comp */
@media (min-width: 56em) { .mk-hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } .mk-hero__photo { aspect-ratio: 1 / 1; } .mk-hero__photo img { object-position: center 36%; } }
.mk-hero__photo img { object-position: center 36%; }                      /* lid and label both in frame */
.stripes--band { padding-block: 0; }                                      /* stripes show only at the sides */
.mk-band { width: 100%; padding-block: clamp(1.5rem, 3.5vw, 2.25rem); }
.mk-feature p { max-width: 24ch; }

/* 22c. Product imagery on pure white; comp hero; About Us layout */
.mk-hero__photo { background: #fff; aspect-ratio: 1400 / 1129; box-shadow: none; }
@media (min-width: 56em) { .mk-hero__photo { aspect-ratio: 1400 / 1129; } }
.mk-hero__photo img { object-fit: cover; object-position: center; }
.pcard__media, .acard__media, .gallery__main, .gallery__thumbs button, .line__media, .deskbar__thumb, .mini-jar { background: #fff !important; box-shadow: none; }
.pcard__media { border: 1px solid var(--cream-3); }
.gallery__main { border: 1px solid var(--cream-3); }
.pcard__media img, .gallery__main img { object-fit: contain; background: #fff; }

.about-hero { background: #fff; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
.about-hero__in { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56em) { .about-hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); } }
.about-hero__photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: #F4F1EA; }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-story { background: var(--well); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.about-story__in { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 56em) { .about-story__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); } }
.about-story__text p { font: 500 clamp(1.1rem, 1.5vw, 1.25rem)/1.55 var(--serif); color: #3C3934; }
.about-story__text p + p { margin-top: 1.1em; }
.about-story__photo { margin: 0; }
.about-story__photo img { width: 100%; height: auto; display: block; border-radius: 6px; }
.about-story__photo figcaption { margin-top: .6rem; font: 500 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }
/* 22d. About Us — full-width nature band */
.about-nature { margin: 0; position: relative; height: clamp(16rem, 42vw, 30rem); overflow: hidden; }
.about-nature img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.about-nature figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.25rem, 4vw, 2.5rem) var(--gutter); display: grid; gap: .4rem; justify-items: center; text-align: center; background: linear-gradient(to top, rgb(0 0 0 / .55), rgb(0 0 0 / 0)); }
.about-nature .mk-eyebrow { color: var(--stripe); }
.about-nature__line { font: 500 clamp(1.15rem, 2.4vw, 1.6rem)/1.3 var(--serif); color: #fff; }

/* =========================================================================
   23. Polish pass — bees, the signature block, calmer stripes, tighter rhythm
   ========================================================================= */

/* --- 23a. Bees ------------------------------------------------------------
   A decorative layer only: it never takes pointer events, never affects layout,
   and every animation is transform/opacity so it stays off the main thread.
   The wings hinge at (32,20) in the SVG's own view-box coordinates. */
.bees { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.bee-drift {
  position: absolute; top: var(--top); left: 0; display: block;
  width: var(--size, 1.3rem); color: var(--gold-btn); opacity: 0;
  animation: bee-cross var(--dur, 34s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.bee-drift .bee { display: block; width: 100%; height: auto; animation: bee-bob calc(var(--dur, 34s) / 9) ease-in-out var(--delay, 0s) infinite alternate; }
.bee__wing { transform-box: view-box; transform-origin: 32px 20px; animation: bee-wing .17s ease-in-out infinite alternate; }
.bee__wing--r { animation-delay: .085s; }

@keyframes bee-wing { from { transform: rotate(0) scaleY(1); } to { transform: rotate(-14deg) scaleY(.68); } }
@keyframes bee-bob { from { transform: translateY(calc(var(--bob, 1.1rem) * -.5)) rotate(calc(var(--tilt, 8deg) * -1)); }
                     to   { transform: translateY(calc(var(--bob, 1.1rem) * .5)) rotate(var(--tilt, 8deg)); } }
/* fade in and out at the edges so a bee is never seen popping into existence */
@keyframes bee-cross {
  0%   { transform: translateX(var(--from)); opacity: 0; }
  8%   { opacity: .9; }
  92%  { opacity: .9; }
  100% { transform: translateX(var(--to)); opacity: 0; }
}

/* the CTA band's bee sits still and simply flutters */
.mk-band__bee .bee { width: 100%; height: 100%; }
.mk-band__bee .bee { animation: bee-hover 4.5s ease-in-out infinite alternate; }
@keyframes bee-hover { from { transform: translateY(-.18rem) rotate(-3deg); } to { transform: translateY(.18rem) rotate(3deg); } }

/* the masthead and “inspired by nature” bees wake up on hover/focus only */
.lockup:hover .lockup__bee svg, .lockup:focus-visible .lockup__bee svg { animation: bee-hover 2.4s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .bees { display: none; }
  .bee__wing, .mk-band__bee .bee, .bee-drift, .bee-drift .bee, .lockup:hover .lockup__bee svg { animation: none !important; }
}

/* --- 23b. Signature jar — the product, on the home page ------------------- */
.mk-signature { background: #fff; padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--cream-3); }
.mk-signature__in { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 56em) { .mk-signature__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5rem); } }
.mk-signature__photo { margin: 0; background: #fff; border: 1px solid var(--cream-3); border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; }
.mk-signature__photo img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .9s var(--ease); }
.mk-signature__photo:hover img { transform: scale(1.03); }
.mk-h2--left { text-align: left; }
.mk-notes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-5); padding: 0; list-style: none; }
.mk-notes li { font: 500 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #4A463F; border: 1px solid var(--cream-3); border-radius: 999px; padding: .55rem .85rem; }
.mk-price { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-top: var(--s-5); }
.mk-price__num { font: 500 clamp(1.5rem, 2.6vw, 1.9rem)/1 var(--serif); color: #141311; }
.mk-price__sub { font: 400 .95rem/1 var(--serif); color: #5A554C; }
.mk-signature__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-5); }
.mk-signature__note { display: flex; align-items: center; gap: .55rem; margin-top: var(--s-5); font: 500 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #5A554C; }
.mk-signature__note svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--gold-btn); }

/* --- 23c. Calmer stripes -------------------------------------------------
   The packaging pattern was running at full label-yellow across the full width,
   which reads as deck chairs rather than as the label it comes from. Same
   pattern, lower contrast and a narrower bar. */
.stripes { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--stripe) 55%, #fff) 0 2.5rem, #fff 2.5rem 5rem); }
@media (max-width: 40em) { .stripes { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--stripe) 55%, #fff) 0 1.4rem, #fff 1.4rem 2.8rem); } }
@supports not (background: color-mix(in srgb, red 50%, #fff)) {
  .stripes { background: repeating-linear-gradient(90deg, #F2E4AE 0 2.5rem, #fff 2.5rem 5rem); }
}
.masthead__panel { box-shadow: 0 0 0 1px rgb(20 19 17 / .04); }

/* --- 23d. Rhythm: the home page ended on a large patch of nothing --------- */
.mk-hero { position: relative; overflow: hidden; }
.mk-nature { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem); }
.mk-gallery { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .mk-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 47.99em) { .mk-gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }
.mk-gallery figure { aspect-ratio: 4 / 3; }
.mk-trust { border-bottom: 1px solid var(--cream-3); }
/* the footer's own top margin stacked on top of the last section's padding — a
   full-bleed closing band (the trust strip, a CTA band) should meet it flush */
.footer { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
main:has(> :last-child.mk-trust) + .footer,
main:has(> :last-child.stripes) + .footer,
main:has(> :last-child.cta-band) + .footer { margin-top: 0; }

/* 23e. The lifestyle set was three unrelated snapshots; a shared grade and a
   consistent focal point make them read as one commissioned series. */
.mk-gallery figure { position: relative; }
.mk-gallery img { filter: saturate(.82) contrast(1.03) sepia(.08); }
.mk-gallery figure::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(20 19 17 / .06); pointer-events: none; }
.mk-gallery figure:nth-child(1) img { object-position: center 62%; }
.mk-gallery figure:nth-child(2) img { object-position: center 70%; }
.mk-gallery figure:nth-child(3) img { object-position: 40% 60%; }

/* the signature frame read as an empty placeholder box; let the jar sit on white */
.mk-signature__photo { border: 0; background: transparent; }

/* the shop grid let long two-line descriptions push prices out of alignment */
.pcard { display: flex; flex-direction: column; }
.pcard__body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.pcard__row { margin-top: auto; padding-top: var(--s-3); }

/* 23f. Cormorant defaults to old-style figures, so prices came out with digits
   at different heights. Numbers that state a quantity get lining figures;
   anything in a column gets tabular ones so they align down the page. */
.mk-price, .mk-price__num, .mk-price__sub, .price, .pcard__price, .money,
.summary, .totals, .line__price, .brew strong, .stat strong, .qty__val {
  font-variant-numeric: lining-nums;
}
.summary, .totals, .line__price, .qty__val { font-variant-numeric: lining-nums tabular-nums; }

/* the signature lede was set to the hero's narrow measure and broke into four
   short lines in a column twice that wide */
.mk-signature .mk-lede { max-width: 42ch; }

/* 23g. The "How to enjoy it" facts row -------------------------------------
   Each cell stacked its value and label with no internal layout, so a value
   that wrapped to two lines ("8 oz warm", "Tea · oats · glazes") pushed its
   label down and the labels no longer lined up across the row. The value now
   takes the slack and the labels sit on one baseline whatever the value does. */
.brew div {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  min-height: 7.5rem;
}
.brew strong {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.05rem, 1.6vw, var(--fs-lg));
  line-height: 1.25;
  text-wrap: balance;          /* breaks "8 oz warm" evenly instead of orphaning a word */
  hyphens: none;
}
.brew small { display: block; }
@media (max-width: 44em) {
  .brew { grid-template-columns: repeat(2, 1fr); }
  .brew div { min-height: 6.5rem; }
}

/* 23h. Recipes hero photography ---------------------------------------------
   Three commissioned shots across the top of /recipes/. The first is given more
   width on desktop so the row reads as a composition rather than three equal
   tiles; all three share one frame ratio so the jar sits at a consistent size. */
.rcp-hero { display: grid; gap: var(--s-3); margin-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 48em) {
  .rcp-hero { grid-template-columns: 1.35fr 1fr 1fr; gap: var(--s-4); }
  /* one shared height, not a per-item ratio: with unequal columns an aspect-ratio
     makes the wide frame taller and the row ends up ragged along the bottom */
  .rcp-hero__shot { aspect-ratio: auto; height: clamp(17rem, 24vw, 24rem); }
}
.rcp-hero__shot { margin: 0; overflow: hidden; border-radius: 6px; background: var(--cream-3); aspect-ratio: 4 / 3; position: relative; }
@media (max-width: 47.99em) { .rcp-hero__shot:first-child { aspect-ratio: 16 / 10; } }
.rcp-hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.rcp-hero__shot:hover img { transform: scale(1.04); }
.rcp-hero__shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(20 19 17 / .06); pointer-events: none; border-radius: inherit; }

/* 23i. About Us — one section built around the family photograph -------------
   The portrait leads on desktop and the whole story sits beside it, rather than
   splitting into a hero and a second text block. */
.about-hero__in--story { align-items: center; }
@media (min-width: 56em) {
  .about-hero__in--story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5rem); }
}
.about-hero__photo--archive { aspect-ratio: auto; border-radius: 6px; background: var(--cream-3); }
.about-hero__photo--archive img { width: 100%; height: auto; display: block; border-radius: 6px; }
.about-hero__photo--archive figcaption {
  margin-top: .7rem; font: 500 .68rem/1 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-text); text-align: center;
}
.about-hero__prose { display: grid; gap: 1.1em; margin-top: var(--s-4); }
.about-hero__prose p { font: 400 clamp(1rem, 1.3vw, 1.12rem)/1.6 var(--serif); color: #3C3934; max-width: 46ch; }
.about-hero__prose .mk-lede { font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: #2A2824; max-width: 34ch; margin-top: 0; }

/* 23j. Shop with a single product -------------------------------------------
   A lone card in a four-column grid strands itself top-left against a large
   void. With one SKU the jar is presented instead of tiled. */
.shop-single { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; margin-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 56em) { .shop-single { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5rem); } }
.shop-single__photo { margin: 0; background: #fff; border-radius: 6px; overflow: hidden; aspect-ratio: 1 / 1; }
/* the source jpeg carries its own white margin; a centre crop trims that rather
   than the jar, so the product reads larger without a taller frame */
.shop-single__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .9s var(--ease); }
.shop-single__photo:hover img { transform: scale(1.03); }
.shop-single__name { font: 400 clamp(1.6rem, 3.2vw, 2.3rem)/1.15 var(--serif); color: #141311; margin-top: .35rem; }
.shop-single__sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .35rem; }
.shop-single__lede { font: 400 clamp(1.02rem, 1.4vw, 1.15rem)/1.55 var(--serif); color: #3C3934; max-width: 44ch; margin-top: var(--s-4); }
.shop-single__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.shop-single__acts .btn { min-height: 3.25rem; flex: 1 1 14rem; }
.shop-single__more { margin-top: var(--s-4); font-size: var(--fs-sm); }
.shop-single__promise { display: grid; gap: .6rem; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--cream-3); }
.shop-single__promise div { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.shop-single__promise svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--gold-btn); margin-top: .15rem; }

/* 23k. Trailing polish ------------------------------------------------------
   The footer grid still reserved four columns after the Shop column was
   removed, leaving a dead quarter on the right. */
@media (min-width: 52em) { .footer__grid { grid-template-columns: 1.5fr repeat(2, 1fr); gap: clamp(2rem, 6vw, 5rem); } }

/* The shop page head's bottom padding stacked on the feature block's top
   margin, opening a gap under the heading wide enough to read as a mistake. */
.page-head + .section--tight { padding-top: var(--s-4); }
.page-head + .section--tight .shop-single { margin-top: 0; }
.shop-single__sub { margin-top: .4rem; font-size: var(--fs-md); color: var(--ink); }

/* 23l. Shipping rate — one method doesn't warrant a table header row */
.rate-card { display: grid; gap: var(--s-4); margin-top: var(--s-4); padding: var(--s-5); border: 1px solid var(--cream-3); border-radius: var(--r-md); background: #fff; }
@media (min-width: 40em) { .rate-card { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.rate-card div { display: grid; gap: .25rem; }
.rate-card strong { font: 400 var(--fs-md)/1.2 var(--serif); color: var(--navy-2); }
.rate-card span { font-size: var(--fs-sm); color: var(--ink-soft); }

/* 23m. The ingredients page ran on the large default section padding with short
   blocks between, so the gaps read as missing content rather than as rhythm.
   Scoped to this page so other pages keep their spacing. */
.p-ingredients .section, .p-ingredients .section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.p-ingredients .split { align-items: start; }
.p-ingredients .hero__art { max-width: 26rem; }
.p-ingredients .prose > h2:first-child { margin-top: 0; }

/* 23n. More bees. The drift layer is absolutely positioned, so any section that
   hosts one needs a containing block and needs to clip the fly-in/out. */
.mk-nature, .shop-single-sec, .rcp-head-sec, .about-hero { position: relative; overflow: hidden; }

/* 23o. Mobile pass ----------------------------------------------------------
   The home signature photo used the same 4:5 contain frame the shop page had,
   so the jar sat small inside the jpeg's own white margin. Same square centre
   crop as /shop/ — trims the margin, not the jar. */
.mk-signature__photo { aspect-ratio: 1 / 1; }
.mk-signature__photo img { object-fit: cover; object-position: center; }

@media (max-width: 47.99em) {
  /* 5:4 was tried here and cropped the lid and the base off a 4:5 source; the
     square keeps the whole jar and still trims the jpeg's own white margin */
  .mk-signature__photo, .shop-single__photo { aspect-ratio: 1 / 1; }

  /* the add-to-cart row wrapped the button under a full-width stepper */
  .shop-single__acts { flex-wrap: nowrap; }
  .shop-single__acts .qty { flex: 0 0 auto; }
  .shop-single__acts .btn { flex: 1 1 auto; min-width: 0; }
}

/* 23p. Touch targets. The small button variant rendered at 36-40px, which clears
   WCAG 2.2 AA (24px) but is under the 44px the README claims and under what is
   comfortable on a phone. Raised on coarse pointers only, so desktop keeps the
   compact size the layouts were built around. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .qty button { min-width: 44px; min-height: 44px; }
  .btn--link { min-height: 44px; display: inline-flex; align-items: center; }
  .cookie .btn--sm { min-height: 44px; }
  label.check { min-height: 44px; display: flex; align-items: center; gap: .6rem; }
}

/* ---------- 23q. Honeypot ---------- */
/* Off-screen rather than display:none — some bots skip hidden fields, and screen
   readers are told to ignore it by aria-hidden on the wrapper. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }