/* ==========================================================================
   Saffron Global USA
   One stylesheet for every page. Tokens first, then base, shared components,
   the header and footer, the homepage sections, the inner pages, and motion.
   Desktop values are the design; each block ends with its own breakpoints
   (1199 laptop, 899 tablet, 639 phone).
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --color-navy: #000F1D;
  --color-ink: #001828;
  --color-orange: #983800;
  --color-orange-hover: #D06920;
  --color-gold: #C98A34;
  --color-gold-dark: #A9741F;
  --color-gold-light: #E0B25E;
  --color-gold-text: #E6C27A;
  --color-green: #1F7A3A;
  --color-green-dark: #0B4A34;
  --color-green-deep: #013224;
  --color-forest: #1B4A2A;
  --color-green-link: #063511;
  --color-cream: #FAF6F0;
  --color-cream-2: #F6EFE6;
  --color-sand: #F5ECE2;
  --color-panel: #F7F1E8;
  --color-paper: #FFFDF9;
  --color-white: #FFFFFF;
  --color-sky: #DCE8F0;
  --color-sky-2: #E4F0F8;
  --color-sky-3: #EEF2F4;
  --color-mint: #EDF3E3;
  --color-text: #111111;
  --color-text-2: #3B3B3D;
  --color-text-3: #5A544E;
  --color-text-4: #66625C;
  --color-text-5: #7A736D;
  --color-line: #E3D9CC;
  --color-line-2: #EFE4D6;
  --color-line-3: #EAE1D4;
  --color-line-soft: #F0E8DC;
  --color-line-cream: #EADFD2;
  --color-on-dark: #FEFEFE;
  --color-cream-text: #EDE4D3;

  --font-sans: 'Outfit', system-ui, sans-serif;
  --font-script: 'Caveat', cursive;

  --fs-h1: clamp(34px, 2.2vw + 22px, 52px);
  --fs-h2: clamp(27px, 1.1vw + 21px, 36px);
  --fs-h3: 24px;
  --fs-card: 22px;
  --fs-title: 20px;
  --fs-lede: 17px;
  --fs-body: 15px;
  --fs-meta: 14px;
  --fs-small: 13px;
  --fs-xs: 12px;
  --fs-tiny: 11px;
  --fs-price: 19px;
  --fs-product-title: clamp(26px, 2vw + 12px, 34px);

  --track-display: -.03em;
  --track-h: -.025em;
  --track-sub: -.02em;
  --track-card: -.01em;
  --lead-display: 1.02;
  --lead-h: 1.1;
  --lead-tight: 1.2;
  --lead-body: 1.6;
  --lead-relaxed: 1.7;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --section: clamp(48px, 6vw, 88px);
  --section-sm: clamp(32px, 4vw, 56px);
  --gutter: clamp(16px, 4vw, 60px);
  --container: 1560px;
  --container-narrow: 1440px;
  --container-tight: 1240px;

  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --shadow-modal: 0 20px 48px -12px rgba(0, 15, 29, .35);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur: 250ms;
  --dur-slow: 450ms;

  --rail-cols: 5;
  --rail-gap: 16px;

  --pk-ink: #1B4A2A;
  --pk-leaf: #7D9E5A;
  --pk-sage: #A8BE9A;
  --pk-pale: #CFE0BC;
  --pk-cream: #F5ECE2;
  --pk-warm: #E4B27E;
}

@media (max-width: 1199px) { :root { --rail-cols: 4; } }
@media (max-width: 899px) { :root { --rail-cols: 3; } }
@media (max-width: 639px) { :root { --rail-cols: 2; --rail-gap: 12px; } }

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; accent-color: var(--color-orange); caret-color: var(--color-orange); }
body { margin: 0; background: var(--color-cream); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lead-body); color: var(--color-text); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
body.is-locked { position: fixed; width: 100%; overflow: hidden; }
a { color: var(--color-green-link); text-decoration: none; text-underline-offset: .2em; transition: color var(--dur) ease; }
a:hover { color: var(--color-orange-hover); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
img, video, canvas, svg { display: block; }
img { max-width: 100%; height: auto; }
p { margin: 0; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
::selection { background: var(--color-orange); color: var(--color-white); }
:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; border-radius: var(--radius-sm); }
.accent { color: var(--color-orange); }
.amp { font: inherit; }

.container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--tight { max-width: var(--container-tight); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; top: -100px; left: var(--space-4); z-index: 100; padding: 10px 14px; background: var(--color-navy); color: var(--color-on-dark); font-weight: 600; }
.skip-link:focus { top: var(--space-4); color: var(--color-on-dark); }

.icon { width: 24px; height: 24px; flex: none; }
.icon-stroke { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Type styles ------------------------------------------------------- */
.page-title { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lead-display); letter-spacing: -.035em; color: var(--color-ink); margin: 0 0 14px; }
.breadcrumbs + .page-title { margin-top: 14px; }
.section-title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lead-h); letter-spacing: var(--track-h); color: var(--color-ink); }
.section-lede { max-width: 980px; margin-top: 10px; font-size: var(--fs-body); line-height: var(--lead-body); color: var(--color-text-2); }
.card-title { font-size: var(--fs-card); font-weight: 600; line-height: var(--lead-tight); letter-spacing: var(--track-card); color: var(--color-ink); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: 30px; }
.section-head__copy { flex: 1; min-width: 0; }
.section-head > .text-link, .section-head > .button { flex: none; margin-bottom: 4px; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-meta); color: var(--color-text-2); }
.breadcrumbs a { color: var(--color-text-2); }
.breadcrumbs a:hover { color: var(--color-orange); }
.breadcrumbs [aria-current] { color: var(--color-ink); font-weight: 500; }

@media (max-width: 639px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
  .section-head > .text-link, .section-head > .button { margin-bottom: 0; }
}

/* ---- Buttons, links, chips, controls ----------------------------------- */
.button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 13px 26px; border: 0; border-radius: var(--radius-sm); background: none; font-size: var(--fs-body); font-weight: 600; line-height: var(--lead-tight); color: inherit; white-space: nowrap; cursor: pointer; transition: color .35s ease, border-color .35s ease, transform var(--dur-fast) ease-out; --sweep: var(--color-orange); }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sweep); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-slow) var(--ease-in-out); }
.button:hover::before, .button:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.button:active { transform: scale(.97); }
.button svg { width: 16px; height: 16px; flex: none; transition: transform .3s ease; }
.button:hover svg { transform: translateX(3px); }
.button--primary { background: var(--color-navy); color: var(--color-on-dark); }
.button--primary:hover, .button--primary:focus-visible { color: var(--color-on-dark); }
.button--outline { border: 1.5px solid var(--color-navy); color: var(--color-navy); --sweep: var(--color-navy); }
.button--outline:hover, .button--outline:focus-visible { color: var(--color-on-dark); }
.button--warm { background: var(--color-orange); color: var(--color-on-dark); --sweep: var(--color-navy); }
.button--warm:hover, .button--warm:focus-visible { color: var(--color-on-dark); }
.button--small { padding: 10px 20px; font-size: var(--fs-meta); }
.button--block { display: flex; width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; }

.text-link { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1.5px solid var(--color-orange); font-size: var(--fs-meta); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.text-link svg { width: 15px; height: 15px; transition: transform .3s ease; }
.text-link:hover { color: var(--color-orange); }
.text-link:hover svg { transform: translateX(3px); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid #DCD2C5; border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--fs-body); color: var(--color-ink); cursor: pointer; transition: border-color var(--dur) ease, background var(--dur) ease, color var(--dur) ease, transform var(--dur-fast) ease-out; }
.chip:hover { border-color: var(--color-navy); color: var(--color-ink); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); font-weight: 500; }
.chip-row--segmented { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; }
.chip-row--segmented .chip { padding: 10px 8px; font-size: var(--fs-xs); font-weight: 500; border-color: #D9CFC2; }

.icon-button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur) ease, color var(--dur) ease, transform var(--dur-fast) ease-out; }
.icon-button svg { width: 22px; height: 22px; }
.icon-button:hover { background: #EFE6DA; }
.icon-button:active { transform: scale(.94); }

.dots { display: flex; justify-content: center; gap: 9px; min-height: 4px; }
.dot { width: 34px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: #E2D3C1; cursor: pointer; transition: background .3s ease; }
.dot.is-active { background: #014319; }
.dot:focus-visible { outline-offset: 5px; }

.rail-column { position: relative; display: flex; flex-direction: column; flex: 1 1 640px; min-width: 0; }
.rail-wrap { position: relative; min-width: 0; }
.rail-arrow { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; padding: 0; border: 2px solid var(--color-gold); border-radius: 50%; background: var(--color-cream); color: var(--color-gold-dark); display: flex; align-items: center; justify-content: center; transform: translateY(-50%); transition: border-color .2s ease, background .2s ease, opacity .2s ease, transform var(--dur-fast) ease-out; }
.rail-arrow svg { width: 15px; height: 15px; stroke-width: 1.8; }
.rail-arrow--prev { left: -17px; }
.rail-arrow--next { right: -17px; }
.rail-arrow:not([aria-disabled="true"]):hover { border-color: var(--color-gold-dark); background: #FBF2E2; color: #8A5D16; }
.rail-arrow:not([aria-disabled="true"]):active { transform: translateY(-50%) scale(.92); }
.rail-arrow[aria-disabled="true"] { opacity: .75; cursor: default; }
.rail-arrow.is-hidden { display: none; }
.rail-dots { margin-top: 18px; }

.input-field { position: relative; display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 16px; border: 1px solid #CFC6BA; border-radius: var(--radius-sm); background: var(--color-white); transition: border-color var(--dur) ease; }
.input-field:focus-within { border-color: var(--color-navy); }
.input-field svg { width: 18px; height: 18px; color: var(--color-ink); }
.input-field input, .input-field select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: var(--fs-body); color: var(--color-ink); }
.input-field input::placeholder { color: #8A8580; }
.input-field select { padding-right: 28px; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center / 16px; cursor: pointer; }

.stepper { display: flex; align-items: stretch; height: 50px; border: 1px solid #D9CFC2; border-radius: var(--radius-sm); background: var(--color-white); }
.stepper button { width: 40px; padding: 0; border: 0; background: none; color: var(--color-ink); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color var(--dur) ease; }
.stepper button:hover { color: var(--color-orange); }
.stepper button:active { color: var(--color-orange); }
.stepper button svg { width: 14px; height: 14px; }
.stepper output, .stepper input { flex: 1; min-width: 22px; border: 0; outline: 0; background: none; text-align: center; font-size: var(--fs-body); font-weight: 600; color: var(--color-ink); align-self: center; }
.stepper--input { height: 52px; }
.stepper--input button { width: 36px; }
.stepper--input input { font-weight: 500; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid #EDE6DC; border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--fs-xs); font-weight: 600; color: var(--color-ink); }
.badge img { width: 18px; height: 18px; object-fit: contain; }
.tag { display: inline-block; padding: 7px 20px; border-radius: var(--radius-sm); background: var(--color-sky); font-size: var(--fs-meta); color: var(--color-ink); }

.checkbox { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 6px 0; font-size: var(--fs-body); color: var(--color-ink); cursor: pointer; }
.checkbox input { position: absolute; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.checkbox__box { width: 22px; height: 22px; flex: none; border: 1.5px solid #8A8580; border-radius: var(--radius-md); background: var(--color-white); display: flex; align-items: center; justify-content: center; transition: background var(--dur) ease, border-color var(--dur) ease; }
.checkbox input:checked + .checkbox__box { background: var(--color-navy); border-color: var(--color-navy); }
.checkbox input:checked + .checkbox__box::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--color-on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--color-orange-hover); outline-offset: 2px; }
.checkbox input:disabled ~ * { opacity: .75; }

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--color-ink); }
.field__input { width: 100%; padding: 12px 14px; border: 1px solid #D9CFC2; border-radius: var(--radius-md); background: var(--color-white); font-size: var(--fs-small); color: var(--color-ink); outline: none; resize: vertical; transition: border-color var(--dur) ease; }
.field__input:focus { border-color: var(--color-navy); }
.field__input::placeholder { color: #A8A29B; }
textarea.field__input { min-height: 110px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form-note { margin-top: 14px; text-align: center; font-size: var(--fs-small); color: var(--color-text-2); }
.form-note.is-error { color: var(--color-orange); }
.form-note.is-sent, .form-note.is-ok { color: var(--color-green); font-weight: 600; }

.accordion-group { margin-top: 14px; border-top: 1px solid var(--color-line-3); }
.accordion { border-bottom: 1px solid var(--color-line-3); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 16px 0; font-size: 14.5px; font-weight: 500; color: var(--color-ink); cursor: pointer; transition: color var(--dur) ease; }
.accordion summary:hover { color: var(--color-orange); }
.accordion__sign { position: relative; width: 12px; height: 12px; flex: none; }
.accordion__sign::before, .accordion__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform var(--dur) ease; }
.accordion__sign::after { transform: rotate(90deg); }
.accordion[open] .accordion__sign::after { transform: rotate(0); }
.accordion__body { padding: 0 0 18px; font-size: var(--fs-meta); line-height: var(--lead-relaxed); color: #4A4540; }

.notice { display: flex; align-items: flex-start; gap: var(--space-4); padding: 20px 22px; border-radius: var(--radius-md); background: var(--color-sky-2); }
.notice svg { width: 26px; height: 26px; margin-top: 1px; color: var(--color-green-dark); }
.notice p { font-size: var(--fs-body); line-height: var(--lead-body); color: var(--color-ink); }

@media (max-width: 639px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Announcement bar -------------------------------------------------- */
.announcement { background: var(--color-navy); border-bottom: 1px solid #000A14; color: var(--color-cream-text); }
.announcement__inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; }
.announcement__offer { display: flex; align-items: center; gap: 9px; font-size: var(--fs-small); text-align: left; }
.announcement__offer svg { width: 18px; height: 18px; stroke: var(--color-gold-light); stroke-width: 1.6; }
.announcement__tagline { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--fs-lede); font-weight: 600; letter-spacing: .08em; white-space: nowrap; color: var(--color-gold-text); text-align: center; }
.announcement__links { display: flex; align-items: center; gap: 26px; font-size: 12.5px; }
.announcement__links a { display: flex; align-items: center; gap: 7px; color: var(--color-cream-text); }
.announcement__links a:hover { color: var(--color-white); }
.announcement__links svg { width: 15px; height: 15px; stroke: var(--color-gold-light); stroke-width: 1.6; }

@media (max-width: 1199px) {
  .announcement__links { gap: 18px; }
}
@media (max-width: 899px) {
  .announcement__inner { justify-content: center; height: 40px; }
  .announcement__offer, .announcement__links { display: none; }
  .announcement__tagline { position: static; transform: none; font-size: var(--fs-body); }
}

/* ---- Masthead ---------------------------------------------------------- */
.masthead { background: var(--color-cream); border-bottom: 1px solid #F4EDE7; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 96px; }
.masthead__menu { display: none; width: 44px; height: 44px; margin-left: -10px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-ink); align-items: center; justify-content: center; }
.masthead__menu svg { width: 24px; height: 24px; }
.masthead__menu:active { transform: scale(.94); }
.masthead__logo { display: block; flex: none; }
.masthead__logo img { height: 74px; width: auto; }
.site-search { flex: 1; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; padding: 10px 18px; border: 1px solid #EFE1D2; border-radius: var(--radius-sm); background: var(--color-cream-2); transition: border-color var(--dur) ease; }
.site-search:focus-within { border-color: var(--color-navy); }
.site-search .icon { width: 17px; height: 17px; }
.site-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-small); color: var(--color-text-2); }
.masthead__actions { display: flex; align-items: center; gap: 22px; flex: none; }
.masthead__action { position: relative; display: block; color: var(--color-ink); }
.masthead__action .icon { width: 23px; height: 23px; }
.masthead__action:active { transform: scale(.94); }
.cart-count { position: absolute; top: -6px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-orange); color: var(--color-on-dark); font-size: 9.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

@media (max-width: 1199px) {
  .masthead { position: sticky; top: 0; z-index: 40; }
  .masthead__inner { gap: var(--space-4); height: 72px; }
  .masthead__menu { display: flex; }
  .masthead__logo img { height: 56px; }
  .site-search { max-width: 360px; }
}
@media (max-width: 639px) {
  .masthead__inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 10px; }
  .masthead__logo { margin-right: auto; }
  .masthead__logo img { height: 48px; }
  .site-search { order: 4; flex-basis: 100%; max-width: none; padding: 9px 14px; }
  .masthead__actions { gap: 18px; }
}

/* ---- Main navigation and mega menu ------------------------------------ */
.site-nav { position: relative; z-index: 30; background: var(--color-cream-2); border-bottom: 2px solid var(--color-gold); }
.site-nav__inner { display: flex; align-items: center; justify-content: center; gap: 30px; height: 54px; font-size: var(--fs-body); font-weight: 500; letter-spacing: .01em; color: var(--color-ink); }
.site-nav__link { color: var(--color-ink); white-space: nowrap; }
.site-nav__link:hover, .site-nav__link[aria-expanded="true"] { color: var(--color-orange-hover); }
.site-nav__link[aria-current] { color: var(--color-orange); }
.site-nav__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; letter-spacing: inherit; }
.site-nav__trigger svg { width: 11px; height: 11px; transition: transform var(--dur) ease; }
.site-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--color-cream); border-bottom: 1px solid #F1E7DC; box-shadow: 0 24px 40px -28px rgba(0, 15, 29, .35); animation: mega-in .2s var(--ease-out); }
.mega-menu[hidden] { display: none; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega-menu__inner { display: grid; grid-template-columns: 240px minmax(0, 2.4fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 28px; padding-bottom: 30px; }
.mega-menu__title { margin-bottom: 16px; font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--track-card); color: var(--color-ink); }
.mega-menu__start { display: flex; flex-direction: column; align-items: flex-start; padding-right: 24px; border-right: 1px solid var(--color-line-2); }
.mega-menu__start .button { margin-bottom: 14px; padding: 12px 22px; }
.mega-menu__quick { padding: 6px 0; font-size: 16px; color: var(--color-ink); }
.mega-menu__quick:hover { color: var(--color-orange); }
.mega-menu__rule { width: 46px; height: 1px; margin: 16px 0; background: #D9C9B6; }
.mega-menu__note { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-navy); color: #F3ECDD; font-size: 13.5px; line-height: 1.35; text-align: left; }
.mega-menu__note svg { width: 30px; height: 30px; stroke: #F3ECDD; }
.mega-menu__categories { padding-right: 24px; border-right: 1px solid var(--color-line-2); }
.mega-menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.category-link { display: flex; align-items: center; gap: var(--space-3); padding: 6px; border-radius: var(--radius-md); color: var(--color-ink); transition: background var(--dur) ease; }
.category-link:hover { background: var(--color-sand); color: var(--color-ink); }
.category-link img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.category-link > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.category-link__name { font-size: 16px; font-weight: 600; transition: color var(--dur) ease; }
.category-link:hover .category-link__name { color: var(--color-orange); }
.category-link__sub { font-size: 12.5px; color: var(--color-text-3); }
.mega-menu__tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); color: var(--color-ink); }
.mega-menu__tile-img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; }
.mega-menu__tile-img img { width: 100%; height: 100%; object-fit: cover; }
.mega-menu__tile-title { font-size: 16px; font-weight: 500; }
.mega-menu__tile:hover .text-link { color: var(--color-orange); }

@media (max-width: 1199px) {
  .site-nav { display: none; }
}

/* ---- Navigation drawer -------------------------------------------------- */
.nav-drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(360px, 88vw); height: 100%; max-height: none; padding: 0; border: 0; background: var(--color-cream); color: var(--color-ink); box-shadow: var(--shadow-modal); flex-direction: column; }
.nav-drawer[open] { display: flex; animation: drawer-in .32s var(--ease-out) both; }
.nav-drawer.is-closing { animation: drawer-out .24s var(--ease-in) both; }
.nav-drawer::backdrop { background: rgba(0, 15, 29, .55); }
.nav-drawer[open]::backdrop { animation: backdrop-in .32s ease both; }
.nav-drawer.is-closing::backdrop { animation: backdrop-out .24s ease both; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes drawer-out { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--color-line); }
.nav-drawer__logo img { height: 48px; width: auto; }
.nav-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.nav-drawer__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 20px; font-size: 18px; font-weight: 500; color: var(--color-ink); border-bottom: 1px solid var(--color-line-soft); cursor: pointer; }
.nav-drawer__link:hover { color: var(--color-orange); }
.nav-drawer__link[aria-current] { color: var(--color-orange); }
.nav-drawer__link svg { width: 18px; height: 18px; transition: transform var(--dur) ease; }
.nav-drawer__group[open] > .nav-drawer__link svg { transform: rotate(180deg); }
.nav-drawer__sub { display: flex; flex-direction: column; padding: 6px 0; background: var(--color-cream-2); border-bottom: 1px solid var(--color-line-soft); }
.nav-drawer__sub a { padding: 10px 20px 10px 32px; font-size: var(--fs-body); color: var(--color-ink); }
.nav-drawer__sub a:hover { color: var(--color-orange); }
.nav-drawer__foot { padding: 14px 20px 20px; border-top: 1px solid var(--color-line); }
.nav-drawer__meta { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: var(--fs-body); color: var(--color-ink); }
.nav-drawer__meta svg { width: 18px; height: 18px; color: var(--color-green-dark); }
.nav-drawer__offer { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-text-4); text-align: left; }

/* ---- Hero -------------------------------------------------------------- */
.hero { padding: 28px var(--gutter) 0; }
.hero__inner { max-width: var(--container-narrow); margin: 0 auto; padding: 48px 48px 40px; display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 48px; align-items: center; background: var(--color-cream-2); border: 1px solid var(--color-line-cream); border-radius: var(--radius-lg); }
.hero__copy { container-type: inline-size; }
.hero__title { font-size: min(52px, 13cqw); font-weight: 600; line-height: 1.04; letter-spacing: var(--track-sub); color: var(--color-ink); margin-bottom: 22px; }
.hero__lede { max-width: 380px; margin-bottom: 30px; font-size: var(--fs-body); line-height: 1.65; color: var(--color-text-2); }
.hero__perks { display: flex; align-items: flex-start; margin-bottom: 30px; }
.hero__perks li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: 0 min(16px, 3.2cqw); text-align: center; font-size: min(12.5px, 3.6cqw); line-height: 1.3; color: var(--color-text-2); }
.hero__perks li:first-child { padding-left: 0; }
.hero__perks li + li { border-left: 1px solid #E2D3C1; }
.hero__perk-icon { width: 42px; height: 42px; }
.hero__cta { padding: 14px 26px; font-size: var(--fs-small); letter-spacing: .04em; }
.hero__frame { background: var(--color-navy); position: relative; width: 100%; aspect-ratio: 2.25 / 1; overflow: hidden; border-radius: var(--radius-md); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateX(100%); z-index: 1; transition: transform .7s var(--ease-in-out); pointer-events: none; }
.hero__slide.is-active { transform: none; z-index: 3; }
.hero__slide.is-leaving { transform: translateX(-25%); z-index: 2; }
.hero__frame.is-reverse .hero__slide.is-leaving { transform: translateX(25%); }
.hero__frame.is-dragging .hero__slide { transition: none; }
.hero__slide.is-revealing { transform: none; z-index: 3; animation: hero-reveal .95s cubic-bezier(.7, 0, .2, 1) both; }
.hero__frame.is-reverse .hero__slide.is-revealing { animation-name: hero-reveal-reverse; }
.hero__slide.is-behind { transform: none; z-index: 2; animation: hero-recede .95s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes hero-reveal { 0% { clip-path: ellipse(0% 120% at 108% 50%); scale: 1.18; filter: saturate(1.4) brightness(1.08); } 100% { clip-path: ellipse(150% 160% at 108% 50%); scale: 1; filter: none; } }
@keyframes hero-reveal-reverse { 0% { clip-path: ellipse(0% 120% at -8% 50%); scale: 1.18; filter: saturate(1.4) brightness(1.08); } 100% { clip-path: ellipse(150% 160% at -8% 50%); scale: 1; filter: none; } }
@keyframes hero-recede { 0% { scale: 1; filter: none; } 100% { scale: .94; filter: brightness(.55) blur(2px); } }
.hero__dots { margin-top: 16px; }

@media (max-width: 1199px) {
  .hero { padding-top: 20px; }
  .hero__inner { grid-template-columns: 36% minmax(0, 1fr); gap: 32px; padding: 32px; }
}
@media (max-width: 899px) {
  .hero__inner { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px 24px; }
  .hero__title { font-size: clamp(34px, 11cqw, 52px); }
  .hero__lede { max-width: none; }
}
@media (max-width: 639px) {
  .hero { padding-top: 16px; }
  .hero__inner { padding: 22px 16px 20px; }
  .hero__perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .hero__perks li { padding: 0 8px; font-size: 12.5px; }
  .hero__perks li + li { border-left: 0; }
  .hero__perks li:nth-child(even) { border-left: 1px solid #E2D3C1; }
  .hero__cta { display: flex; width: 100%; }
}

/* ---- Promo strip ------------------------------------------------------- */
.promo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-top: 56px; }
.promo-card { display: flex; align-items: stretch; min-height: 150px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-sand); color: var(--color-ink); }
.promo-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 22px 10px 22px 24px; }
.promo-card__title { font-size: var(--fs-title); font-weight: 600; line-height: var(--lead-tight); letter-spacing: -.005em; color: var(--color-ink); }
.promo-card__sub { font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-2); }
.promo-card__link { align-self: flex-start; margin-top: 14px; padding-bottom: 2px; border-bottom: 1.5px solid var(--color-orange); font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); transition: color var(--dur) ease; }
.promo-card:hover .promo-card__link { color: var(--color-orange); }
.promo-card__img { width: 44%; height: auto; min-height: 100%; object-fit: cover; flex: none; }

@media (max-width: 899px) {
  .promo-strip { gap: 14px; padding-top: var(--section-sm); }
  .promo-card__body { padding: 16px 8px 16px 16px; }
  .promo-card__title { font-size: var(--fs-lede); }
  .promo-card__sub { font-size: var(--fs-xs); }
  .promo-card__link { margin-top: 10px; font-size: var(--fs-xs); }
}
@media (max-width: 699px) {
  .promo-strip { grid-template-columns: 1fr; }
  .promo-card { min-height: 130px; }
  .promo-card__body { padding: 18px 10px 18px 20px; }
  .promo-card__title { font-size: var(--fs-title); }
  .promo-card__sub { font-size: var(--fs-small); }
}

/* ---- Best sellers ------------------------------------------------------ */
.best-sellers { padding-top: 72px; padding-bottom: 80px; }
.best-sellers__row { position: relative; display: flex; align-items: stretch; gap: 18px; }
.story-card { position: relative; display: block; flex: 0 0 calc(9.7% + 168px); min-width: 0; border: 1px solid #DDE7D3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-mint); color: var(--color-ink); container-type: inline-size; }
.story-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.story-card__copy { position: relative; z-index: 1; display: block; padding: 9cqw 6cqw 0 9cqw; }
.story-card__title { display: block; font-size: 8.4cqw; font-weight: 600; line-height: 1.08; letter-spacing: var(--track-card); color: var(--color-ink); margin-bottom: 3.5cqw; }
.story-card__lede { display: block; max-width: 52cqw; font-size: 4.6cqw; line-height: 1.5; color: var(--color-text-2); text-align: left; }
.story-card__link { position: absolute; left: 9cqw; bottom: 7.5cqw; z-index: 1; display: inline-flex; gap: 2cqw; padding-bottom: 2px; border-bottom: 1px solid var(--color-forest); font-size: 5cqw; font-weight: 500; color: var(--color-forest); }
.story-card__link span { transition: transform .3s ease; }
.story-card:hover .story-card__link span { transform: translateX(3px); }

.product-rail { flex: 1; display: flex; gap: var(--rail-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; container-type: inline-size; }
.product-rail::-webkit-scrollbar { display: none; }
.product-card { --card-w: calc((100cqw - var(--rail-gap) * (var(--rail-cols) - 1)) / var(--rail-cols)); flex: 0 0 var(--card-w); min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 16px 18px; border: 1px solid #F0E9E2; border-radius: 50% 50% var(--radius-md) var(--radius-md) / calc(var(--card-w) * .22) calc(var(--card-w) * .22) var(--radius-md) var(--radius-md); overflow: hidden; background: var(--color-cream); scroll-snap-align: start; }
.product-card__arch { position: relative; aspect-ratio: 2 / 3; margin: 0 -16px 12px; padding: calc(7% + 20px) 10px 0; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.product-card__photo-link { display: contents; }
.product-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.product-card__category, .product-card__explore { position: relative; z-index: 1; }
.product-card__category { display: inline-flex; align-items: center; gap: .3em; font-size: min(19px, calc(var(--card-w) * .1)); font-weight: 600; line-height: var(--lead-h); letter-spacing: -.005em; color: var(--color-ink); white-space: nowrap; }
.product-card__category .icon { width: .95em; height: .95em; }
.product-card__explore { display: inline-flex; gap: 5px; margin-top: 5px; font-size: var(--fs-xs); color: var(--color-green-link); white-space: nowrap; }
.product-card__explore span { transition: transform .3s ease; }
.product-card__explore:hover span { transform: translateX(3px); }
.product-card__name { display: block; font-size: var(--fs-meta); font-weight: 600; line-height: 1.35; color: var(--color-text); }
.product-card__name:hover { color: var(--color-orange); }
.product-card__meta { font-size: var(--fs-xs); color: var(--color-text-4); }
.product-card__rating { display: flex; align-items: center; gap: 6px; font-size: var(--fs-tiny); color: var(--color-text-4); }
.product-card__stars { font-size: 11.5px; letter-spacing: 1px; color: #D06600; }
.product-card__price { margin-top: 2px; font-size: var(--fs-price); font-weight: 700; color: var(--color-text); }
.product-card__unit { margin-bottom: 12px; font-size: 11.5px; color: var(--color-text-4); white-space: nowrap; }
.product-card__add { margin-top: auto; padding: 12px 0; font-size: var(--fs-meta); }

@media (max-width: 899px) {
  .best-sellers { padding-top: var(--section); padding-bottom: var(--section); }
  .best-sellers__row { flex-direction: column; gap: var(--space-5); }
  .story-card { flex: none; min-height: 230px; aspect-ratio: 16 / 7; container-type: normal; }
  .story-card__img { object-position: center 8%; }
  .story-card__copy { padding-top: 22px; }
  .story-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(237, 243, 227, .92) 0%, rgba(237, 243, 227, .55) 45%, rgba(237, 243, 227, 0) 75%); pointer-events: none; }
  .story-card__copy, .story-card__link { z-index: 1; }
  .story-card__copy { padding: 26px 28px 0; }
  .story-card__title { font-size: var(--fs-h3); margin-bottom: 8px; }
  .story-card__lede { max-width: 320px; font-size: var(--fs-body); }
  .story-card__link { left: 28px; bottom: 24px; gap: 6px; padding: 8px 12px; border-bottom: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .92); font-size: var(--fs-body); }
  .rail-column { flex: none; }
  .rail-arrow { display: none; }
}
@media (max-width: 639px) {
  .story-card { aspect-ratio: 4 / 3; min-height: 0; }
  .story-card__copy { padding: 22px 20px 0; }
  .story-card__link { left: 20px; bottom: 20px; }
  .product-card { padding: 0 12px 14px; }
  .product-card__arch { margin: 0 -12px 10px; }
}

/* ---- Certifications and marquee ---------------------------------------- */
.trust { border-top: 1px solid #EFE4D2; border-bottom: 1px solid #E6EDDD; }
.trust__certs { display: flex; align-items: center; justify-content: center; gap: 36px; padding-top: 44px; padding-bottom: 44px; }
.cert-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(14px, 2.2vw, 34px); }
.cert-list__mark { height: 74px; width: auto; object-fit: contain; }
.cert-list__mark--wide { height: 64px; }
.cert-list__sep, .marquee__sep { display: flex; align-items: center; flex: none; }
.cert-list__sep .icon, .marquee__sep .icon { width: 18px; height: 18px; color: #E8872A; fill: currentColor; }
.trust__note { flex: none; padding-left: 28px; border-left: 1px solid #E8872A; font-size: 18px; font-weight: 500; line-height: 1.15; color: var(--color-ink); white-space: nowrap; }
.marquee { overflow: hidden; background: var(--color-mint); border-top: 1px solid #E8872A; padding: 20px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 34px; padding-right: 34px; flex: none; }
.marquee__item { display: flex; align-items: center; gap: 14px; font-size: var(--fs-title); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.perk-icon { width: 34px; height: 34px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 899px) {
  .trust__certs { flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .trust__note { padding: 0; border-left: 0; font-size: var(--fs-body); white-space: normal; text-align: center; }
  .cert-list__sep { display: none; }
  .cert-list { gap: var(--space-5); }
}
@media (max-width: 639px) {
  .cert-list { gap: var(--space-4); }
  .cert-list__mark { height: 56px; }
  .cert-list__mark--wide { height: 48px; }
  .marquee { padding: 14px 0; }
  .marquee__item { gap: 10px; font-size: var(--fs-lede); }
  .perk-icon { width: 28px; height: 28px; }
}

/* ---- Founder and promise ------------------------------------------------ */
.founder { padding-top: 88px; }
.founder__panel { display: grid; grid-template-columns: clamp(250px, 21vw, 320px) minmax(0, 1fr) clamp(360px, 24vw, 380px); gap: 48px; align-items: stretch; background: var(--color-panel); border: 1px solid #EFE6D8; border-radius: var(--radius-md); }
.founder__portrait { width: 100%; height: auto; align-self: end; border-bottom-left-radius: var(--radius-md); }
.founder__copy { align-self: center; padding: 34px 0; }
.founder__copy .section-title { margin-bottom: 22px; }
.founder__text { max-width: 640px; margin-bottom: 16px; font-size: 14.5px; line-height: 1.75; color: var(--color-text-3); }
.founder__text strong { font-weight: 600; color: #2A2622; }
.founder__signoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 36px; max-width: 640px; margin-top: 24px; }
.founder__signature { display: flex; align-items: center; gap: 14px; flex: none; text-align: left; }
.founder__signature::before { content: ""; width: 34px; height: 1px; background: var(--color-gold); flex: none; }
.founder__name { display: block; font-size: var(--fs-title); font-weight: 600; line-height: var(--lead-h); color: var(--color-ink); }
.founder__role { display: block; margin-top: 3px; font-size: var(--fs-small); color: #8A7F72; }
.promise { margin: -14px -1px -14px 0; padding: 32px 26px 48%; border-radius: var(--radius-md); background: var(--color-green-deep) url("../img/story-promise-bg.webp") center calc(100% - 14px) / 84% auto no-repeat; color: #F3ECDD; }
.promise__list { display: flex; flex-direction: column; gap: 22px; }
.promise__item { display: flex; align-items: center; gap: 14px; }
.promise__icon { width: 44px; height: 44px; flex: none; border: 1.5px solid var(--color-gold-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; --pk-ink: #E0B25E; --pk-leaf: #E0B25E; --pk-sage: #C9A35A; --pk-pale: #F3E3BE; --pk-cream: transparent; --pk-warm: #E0B25E; }
.promise__icon .icon { width: 26px; height: 26px; }
.promise__name { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; color: #F7F1E6; }
.promise__sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: #B9C4B8; white-space: nowrap; }

@media (max-width: 1199px) {
  .founder__panel { grid-template-columns: clamp(200px, 22vw, 260px) minmax(0, 1fr) clamp(320px, 33vw, 360px); gap: 32px; }
  .promise { padding: 26px 22px 48%; }
}
@media (max-width: 899px) {
  .founder { padding-top: var(--section); }
  .founder__panel { grid-template-columns: clamp(180px, 30vw, 240px) minmax(0, 1fr); gap: 0 24px; }
  .founder__copy { padding: 28px 24px 24px 0; }
  .promise { grid-column: 1 / -1; margin: 0 20px 20px; padding-bottom: 40%; }
  .promise__sub { white-space: normal; }
}
@media (max-width: 639px) {
  .founder__panel { grid-template-columns: 1fr; gap: 0; }
  .founder__portrait { width: min(100%, 220px); border-bottom-left-radius: 0; }
  .founder__copy { padding: 20px 16px 24px; }
  .founder__signoff { flex-direction: column; align-items: flex-start; gap: 16px; }
  .promise { margin: 0 12px 12px; padding: 24px 18px 46%; }
}

/* ---- Split sections (Watch and Shop, Journal) --------------------------- */
.split { display: grid; grid-template-columns: clamp(250px, 20vw, 300px) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 80px; }
.split--watch, .split--journal { align-items: center; }
.split--journal { padding-bottom: 88px; }
.split__intro { container-type: inline-size; }
.split__title { font-size: min(var(--fs-h2), 13cqw); line-height: 1.02; letter-spacing: var(--track-display); }
.split__sub { margin-top: 16px; font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-2); }
.split__intro .button { margin-top: 26px; }
.split__content { min-width: 0; }

@media (max-width: 1199px) {
  .split { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; gap: 28px; padding-top: var(--section); }
  .split--journal { padding-bottom: var(--section); }
  .split__title { font-size: var(--fs-h2); }
  .split__sub { max-width: 560px; }
}

/* ---- Video rail and modal ----------------------------------------------- */
.video-rail { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; container-type: inline-size; }
.video-rail::-webkit-scrollbar { display: none; }
.video-card { position: relative; display: block; flex: 0 0 calc((100cqw - 14px * (var(--rail-cols) - 1)) / var(--rail-cols)); aspect-ratio: 9 / 15; padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-sand); cursor: pointer; text-align: left; scroll-snap-align: start; transition: transform var(--dur-fast) ease-out; }
.video-card:active { transform: scale(.98); }
.video-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .42) 100%); pointer-events: none; }
.video-card__chip { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: var(--radius-sm); background: rgba(254, 254, 254, .95); }
.video-card__chip img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.video-card__chip-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.video-card__chip-name { font-size: var(--fs-tiny); font-weight: 600; line-height: 1.25; color: var(--color-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.video-card__chip-price { font-size: 11.5px; font-weight: 700; line-height: 1.1; color: var(--color-navy); }

.video-modal { --video-accent: #C98A34; width: min(960px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-cream); color: var(--color-ink); box-shadow: var(--shadow-modal); transform-origin: center center; will-change: transform; }
.video-modal[open] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.video-modal::backdrop { background: rgba(0, 15, 29, .72); }
.video-modal[open]::backdrop { animation: video-backdrop-in .45s ease both; }
.video-modal.is-closing::backdrop { animation: video-backdrop-out .38s ease both; }
@keyframes video-backdrop-in { from { background: rgba(0, 15, 29, 0); } to { background: rgba(0, 15, 29, .72); } }
@keyframes video-backdrop-out { from { background: rgba(0, 15, 29, .72); } to { background: rgba(0, 15, 29, 0); } }
.video-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; background: rgba(254, 254, 254, .95); }
.video-modal__close:hover { background: var(--color-white); color: var(--color-orange); }
.video-modal__close svg { width: 15px; height: 15px; }
.video-modal__player-wrap { display: flex; align-items: center; justify-content: center; min-height: 0; background: var(--color-navy); }
.video-modal__player { width: 100%; height: 100%; max-height: calc(100vh - 48px); aspect-ratio: 9 / 15; object-fit: cover; background: var(--color-navy); }
.video-modal__shop { position: relative; display: flex; flex-direction: column; padding: 30px 36px 26px; background: var(--color-white); overflow: auto; }
.video-modal__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-right: 44px; margin-bottom: 14px; }
.video-modal__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-small); font-weight: 600; color: var(--color-orange); }
.video-modal__eyebrow svg { width: 18px; height: 18px; stroke: var(--color-orange); }
.video-modal__moment { padding: 5px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--video-accent) 16%, var(--color-white)); font-size: var(--fs-xs); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.video-modal__moment:empty { display: none; }
.video-modal__stage { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; margin-bottom: 18px; overflow: hidden; }
.video-modal__pack { position: relative; width: auto; height: 190px; max-width: 70%; object-fit: contain; }
.video-modal__badge { position: absolute; }
.video-modal__badge--organic { top: 14px; left: 14px; }
.video-modal__badge--origin { right: 14px; bottom: 14px; }
.video-modal__name { margin-bottom: 6px; font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; letter-spacing: var(--track-sub); color: var(--color-ink); }
.video-modal__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.video-modal__price { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--color-navy); }
.video-modal__ship { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--color-green); }
.video-modal__ship svg { width: 15px; height: 15px; }
.video-modal__desc { margin-bottom: 18px; font-size: var(--fs-body); line-height: var(--lead-body); color: var(--color-text-2); }
.video-modal__buy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.video-modal__cart { height: 50px; padding: 0 24px; }
.video-modal__cart svg { width: 18px; height: 18px; }
.video-modal__cart.is-added { background: var(--color-green); }
.video-modal__cart.is-added::before { transform: scaleX(0); }
.video-modal__link { margin-bottom: 18px; align-self: flex-start; }
.video-modal__perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: auto; padding-top: 14px; border-top: 1px dashed #DCCFBF; }
.video-modal__perks li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 11.5px; font-weight: 500; line-height: 1.25; color: var(--color-text-2); }
.video-modal__perks .perk-icon { width: 30px; height: 26px; }

@media (max-width: 799px) {
  .video-modal { width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .video-modal[open] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .video-modal__player-wrap { max-height: 42vh; }
  .video-modal__player { height: auto; max-height: 42vh; aspect-ratio: 16 / 10; }
  .video-modal__shop { padding: 22px 20px 20px; }
  .video-modal__top { padding-right: 0; }
  .video-modal__close { top: 10px; right: 10px; }
  .video-modal__stage { height: 170px; margin-bottom: 12px; }
  .video-modal__pack { height: 150px; }
}

/* ---- Journal ----------------------------------------------------------- */
.journal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.journal__link { align-self: flex-end; }
.journal__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; }
.journal__side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.journal-card { display: flex; color: var(--color-ink); }
.journal-card img { flex: none; object-fit: cover; border-radius: var(--radius-md); transition: opacity .3s ease; }
.journal-card:hover img { opacity: .9; }
.journal-card:hover .journal-card__title { color: var(--color-orange); }
.journal-card--feature { flex-direction: column; }
.journal-card--feature img { width: 100%; aspect-ratio: 16 / 9; }
.journal-card--feature .journal-card__body { padding-top: 18px; }
.journal-card--small { align-items: center; gap: 20px; }
.journal-card--small img { width: 42%; height: 100%; }
.journal-card--small .journal-card__body { justify-content: center; }
.journal-card__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.journal-card__tag { font-size: var(--fs-small); font-weight: 600; color: var(--color-orange); }
.journal-card__title { font-size: var(--fs-title); font-weight: 600; line-height: 1.25; letter-spacing: var(--track-card); color: var(--color-ink); transition: color .3s ease; }
.journal-card--small .journal-card__title { font-size: 18px; }
.journal-card__desc { font-size: var(--fs-meta); line-height: var(--lead-body); color: var(--color-text-2); }

@media (max-width: 899px) {
  .journal__grid { grid-template-columns: 1fr; }
  .journal__side { grid-template-rows: none; gap: 18px; }
  .journal-card--small img { aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 639px) {
  .journal__link { align-self: flex-start; }
  .journal-card--small { gap: 14px; }
  .journal-card--small .journal-card__title { font-size: 16px; }
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: #D9EFFB url("../img/footer-bg.webp") center bottom / cover no-repeat; color: var(--color-ink); }
.site-footer__inner { max-width: var(--container-narrow); padding-top: 56px; }
.site-footer__columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col__title { margin-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--color-ink); }
.footer-link { font-size: var(--fs-body); line-height: 1.3; color: #3B4A57; }
.footer-link:hover { color: var(--color-orange); }
.footer-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-brand__logo img { height: 96px; width: auto; }
.footer-brand__title { margin: 18px 0 8px; font-size: var(--fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: var(--track-display); color: var(--color-ink); text-align: center; text-align-last: center; }
.footer-brand__sub { margin-bottom: 22px; font-size: var(--fs-lede); color: #3B4A57; text-align: center; text-align-last: center; }
.newsletter { display: flex; align-items: center; width: 100%; max-width: 470px; padding: 5px 5px 5px 20px; border: 1px solid #C9DCE8; border-radius: var(--radius-sm); background: var(--color-white); transition: border-color var(--dur) ease; }
.newsletter:focus-within { border-color: var(--color-ink); }
.newsletter__input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; font-size: var(--fs-body); color: var(--color-ink); }
.newsletter__input::placeholder { color: #6B7784; }
.newsletter__button { position: relative; isolation: isolate; overflow: hidden; height: 46px; padding: 0 30px; border: 0; border-radius: var(--radius-sm); background: var(--color-navy); color: var(--color-on-dark); font-size: var(--fs-body); font-weight: 600; transition: color .35s ease, transform var(--dur-fast) ease-out; }
.newsletter__button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-orange); transform: scaleX(0); transform-origin: right center; transition: transform var(--dur-slow) var(--ease-in-out); }
.newsletter__button:hover::before, .newsletter__button:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.newsletter__button:active { transform: scale(.97); }
.newsletter__note { min-height: 20px; margin-top: 10px; font-size: var(--fs-meta); color: #3B4A57; text-align: center; text-align-last: center; }
.newsletter__note.is-ok { color: var(--color-green); font-weight: 600; }
.newsletter__note.is-error { color: var(--color-orange); }
.footer-contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 34px; margin-top: 40px; padding: 26px 0 30px; border-top: 1px solid #C9DCE8; }
.footer-contact__item { display: flex; align-items: center; gap: 14px; color: var(--color-ink); }
.footer-contact__item:hover { color: var(--color-orange); }
.footer-contact__item svg { width: 26px; height: 26px; stroke: var(--color-green-dark); stroke-width: 1.8; }
.footer-contact__item span { display: flex; flex-direction: column; gap: 2px; }
.footer-contact__item strong { font-size: var(--fs-body); font-weight: 600; }
.footer-contact__item small { font-size: var(--fs-small); line-height: 1.4; color: #3B4A57; }
.footer-contact__rule { width: 1px; height: 38px; background: #C9DCE8; }
.footer-social { display: flex; gap: 10px; }
.footer-social__link { width: 38px; height: 38px; border-radius: 50%; background: var(--color-navy); display: flex; align-items: center; justify-content: center; transition: background var(--dur) ease, transform var(--dur-fast) ease-out; }
.footer-social__link:hover, .footer-social__link:focus-visible { background: var(--color-orange); }
.footer-social__link:active { transform: scale(.94); }
.footer-social__link svg { width: 17px; height: 17px; fill: none; stroke: var(--color-on-dark); stroke-width: 1.7; }
.footer-social__link svg.footer-social__fill { fill: var(--color-on-dark); stroke: none; }
.footer-social__link .footer-social__dot { fill: var(--color-on-dark); stroke: none; }
.footer-certs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 48px; height: 210px; padding: 0 var(--gutter); }
.footer-certs img { height: 64px; width: auto; max-width: 110px; object-fit: contain; }
.footer-bottom { background: var(--color-white); }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--container-narrow); padding-top: 16px; padding-bottom: 16px; }
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; font-size: var(--fs-small); color: #3B4A57; }
.footer-legal > * { padding: 0 14px; border-left: 1px solid #C9DCE8; }
.footer-legal > :first-child { padding-left: 0; border-left: 0; }
.footer-legal a { color: #3B4A57; }
.footer-legal a:hover { color: var(--color-orange); }
.footer-pay { display: flex; align-items: center; gap: 12px; flex: none; }
.footer-pay img { height: 26px; width: auto; }
.footer-pay .footer-pay__word { height: 18px; }

@media (max-width: 1199px) {
  .site-footer__columns { gap: 28px; }
}
@media (max-width: 899px) {
  .site-footer__inner { padding-top: 40px; }
  .site-footer__columns { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; order: -1; }
  .footer-brand__logo img { height: 80px; }
  .footer-contact { gap: 20px 28px; margin-top: 32px; padding: 22px 0 26px; }
  .footer-contact__rule { display: none; }
  .footer-certs { gap: 24px 32px; height: auto; min-height: 160px; padding-top: 24px; padding-bottom: 32px; }
  .footer-bottom__inner { flex-direction: column; text-align: center; gap: 14px; }
  .footer-legal { justify-content: center; }
}
@media (max-width: 639px) {
  .site-footer__columns { grid-template-columns: 1fr; }
  .footer-pair { gap: 16px; }
  .footer-contact { flex-direction: column; align-items: flex-start; }
  .footer-certs img { height: 52px; max-width: 90px; }
  .footer-legal > * { padding: 0 8px; }
  .footer-legal > :first-child { flex-basis: 100%; padding: 0 0 4px; text-align: center; }
  .footer-legal > :nth-child(2) { padding-left: 0; border-left: 0; }
}

/* ---- Store finder ------------------------------------------------------ */
.store-finder { width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 52px 52px 30px; border: 0; border-radius: var(--radius-md); overflow: auto; background: var(--color-cream); color: var(--color-ink); box-shadow: var(--shadow-modal); }
.store-finder::backdrop { background: rgba(0, 15, 29, .55); }
.store-finder__close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; }
.store-finder__close svg { width: 26px; height: 26px; stroke-width: 1.8; }
.store-finder__title { margin-bottom: 26px; }
.store-finder__tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; margin-bottom: 28px; }
.store-finder__search { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 20px; border: 1px solid #CFC6BA; border-radius: var(--radius-sm); background: var(--color-white); transition: border-color var(--dur) ease; }
.store-finder__search:focus-within { border-color: var(--color-navy); }
.store-finder__search svg { width: 24px; height: 24px; }
.store-finder__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--color-ink); }
.store-finder__search input::placeholder { color: #8A8580; }
.store-finder__locate { display: inline-flex; align-items: center; gap: 14px; height: 58px; padding: 0 26px; border: 1px solid #CFC6BA; border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--fs-body); font-weight: 500; color: var(--color-ink); white-space: nowrap; transition: border-color var(--dur) ease, transform var(--dur-fast) ease-out; }
.store-finder__locate:hover { border-color: var(--color-navy); }
.store-finder__locate:active { transform: scale(.98); }
.store-finder__locate svg { width: 20px; height: 20px; fill: var(--color-ink); stroke: var(--color-ink); }
.store-finder__locate[aria-busy="true"] { opacity: .6; cursor: progress; }
.store-finder .chip-row { margin-bottom: 24px; }
.store-finder .chip { padding: 11px 28px; }
.store-finder__count { margin-bottom: 18px; font-size: var(--fs-body); color: var(--color-text-2); text-align: left; }
.store-finder__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.store-finder__grid li[hidden] { display: none; }
.store-card { position: relative; display: flex; align-items: flex-start; gap: 18px; min-height: 108px; padding: 22px 20px 20px 22px; border: 1px solid #E3DACD; border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink); transition: border-color var(--dur) ease; }
.store-card:hover { color: var(--color-ink); border-color: #B9AC99; }
.store-card__pin { width: 28px; height: 28px; flex: none; fill: var(--color-green-dark); stroke: var(--color-green-dark); }
.store-card__pin circle { fill: var(--color-paper); stroke: none; }
.store-card__name { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; font-size: var(--fs-title); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.store-card__name small { font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0; color: var(--color-text-2); }
.store-card__go { position: absolute; right: 18px; top: 50%; width: 38px; height: 38px; border: 1.5px solid var(--color-ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); transition: background var(--dur) ease, color var(--dur) ease; }
.store-card__go svg { width: 17px; height: 17px; }
.store-card:hover .store-card__go { background: var(--color-navy); color: var(--color-on-dark); }
.store-card__near { position: absolute; top: -10px; left: 18px; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--color-orange); color: var(--color-on-dark); font-size: var(--fs-tiny); font-weight: 600; }
.store-finder__empty { margin-top: 8px; padding: 30px 0; text-align: center; font-size: 16px; color: var(--color-text-2); }
.store-finder__help { margin-top: 28px; padding-top: 24px; border-top: 1px solid #E3DACD; text-align: center; text-align-last: center; font-size: var(--fs-body); color: var(--color-ink); }
.store-finder__help a { margin-left: 6px; font-weight: 500; color: var(--color-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--color-green-dark); }
.store-finder__help a:hover { color: var(--color-orange); }

@media (max-width: 1199px) {
  .store-finder__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .store-finder { width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 28px 20px 24px; }
  .store-finder__close { top: 10px; right: 10px; }
  .store-finder__title { margin-bottom: 18px; padding-right: 44px; }
  .store-finder__tools { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
  .store-finder__search, .store-finder__locate { height: 50px; }
  .store-finder__locate { justify-content: center; }
  .store-finder .chip { padding: 9px 16px; font-size: var(--fs-meta); }
}
@media (max-width: 639px) {
  .store-finder__grid { grid-template-columns: 1fr; gap: 10px; }
  .store-card { min-height: 0; padding: 16px 60px 16px 16px; }
  .store-card__name { font-size: 18px; }
}

/* ---- Shop -------------------------------------------------------------- */
.shop-hero { position: relative; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); align-items: stretch; min-height: 250px; overflow: hidden; background: var(--color-cream-2); }
.shop-hero__copy { position: relative; z-index: 1; align-self: center; padding: 28px 0 30px var(--gutter); }
.shop-hero__sub { font-size: var(--fs-lede); font-weight: 500; color: var(--color-ink); text-align: left; }
.shop-hero__img { position: relative; }
.shop-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.shop-hero__img::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 14%; background: linear-gradient(90deg, var(--color-cream-2) 0%, rgba(246, 239, 230, 0) 100%); }
.shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.shop-filters { padding: 28px 22px 40px 0; border-right: 1px solid var(--color-line-2); }
.shop-filters__toggle { display: none; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 1px solid #CFC6BA; border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--fs-body); font-weight: 500; color: var(--color-ink); }
.shop-filters__toggle svg { width: 18px; height: 18px; }
.shop-filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: 16px; border-bottom: 1px solid var(--color-line-2); }
.shop-filters__title { font-size: 21px; font-weight: 600; letter-spacing: var(--track-card); color: var(--color-ink); }
.shop-filters__clear { padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--color-orange); background: none; font-size: var(--fs-small); color: var(--color-orange); }
.filter-group { margin: 0; padding: 18px 0 16px; border: 0; border-bottom: 1px solid var(--color-line-2); }
.filter-group__legend { padding: 0; margin-bottom: 10px; font-size: 18px; font-weight: 600; color: var(--color-ink); }
.filter-accordion { border-bottom: 1px solid var(--color-line-2); }
.filter-accordion summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 18px; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.filter-accordion summary svg { width: 18px; height: 18px; transition: transform var(--dur) ease; }
.filter-accordion[open] summary svg { transform: rotate(180deg); }
.filter-accordion__body { padding-bottom: 14px; }
.shop-results { min-width: 0; padding: 18px 0 28px 20px; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: 12px; }
.shop-toolbar__count { font-size: var(--fs-body); color: var(--color-ink); text-align: left; }
.shop-toolbar__tools { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.shop-toolbar__search { width: 230px; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-card { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper); }
.shop-card[hidden] { display: none; }
.shop-card__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.45 / 1; padding: 18px 0 10px; overflow: hidden; background: #F3EDE3; }
.shop-card__img img { height: 100%; width: auto; max-width: 90%; object-fit: contain; }
.shop-card__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); padding: 8px 14px 12px; }
.shop-card__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shop-card__cat { font-size: var(--fs-small); font-weight: 500; color: var(--color-green); }
.shop-card__name { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.shop-card__name:hover { color: var(--color-orange); }
.shop-card__size { font-size: var(--fs-small); color: var(--color-text-2); }
.shop-card__price { font-size: var(--fs-lede); font-weight: 700; color: var(--color-ink); }
.shop-card__body .button { margin-bottom: 10px; }
.shop-promo { position: relative; display: block; min-height: 240px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-sky); color: var(--color-ink); }
.shop-promo[hidden] { display: none; }
.shop-promo img { position: absolute; right: 8%; bottom: 10px; height: 92%; width: auto; object-fit: contain; }
.shop-promo__copy { position: absolute; left: 16px; top: 28px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 48%; }
.shop-promo__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.02; letter-spacing: var(--track-sub); }
.shop-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; text-align-last: center; font-size: 16px; color: var(--color-text-2); }
.shop-more { position: relative; display: flex; justify-content: center; margin-top: 6px; }
.shop-more__top { position: absolute; right: 0; top: 50%; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-ink); transform: translateY(-50%); }
.shop-more__top svg { width: 13px; height: 13px; }
.shop-strip { background: var(--color-sky); }
.shop-strip__inner { display: flex; align-items: center; gap: 22px; padding-top: 14px; padding-bottom: 14px; }
.shop-strip__icon svg { width: 28px; height: 28px; color: var(--color-ink); }
.shop-strip__inner > div { flex: 1; }
.shop-strip__title { font-size: 16px; font-weight: 600; color: var(--color-ink); text-align: left; }
.shop-strip__sub { margin-top: 2px; font-size: var(--fs-small); color: var(--color-ink); text-align: left; }

@media (max-width: 1199px) {
  .shop-layout { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .shop-hero { grid-template-columns: 1fr; min-height: 0; }
  .shop-hero__copy { padding: 24px var(--gutter); }
  .shop-hero__img { aspect-ratio: 16 / 7; }
  .shop-hero__img::before { display: none; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-filters { padding: 20px 0 0; border-right: 0; }
  .shop-filters__toggle { display: flex; }
  .shop-filters__panel { display: none; padding-top: 8px; }
  .shop-filters.is-open .shop-filters__panel { display: block; }
  .shop-filters.is-open .shop-filters__toggle { border-color: var(--color-navy); }
  .shop-results { padding: 18px 0 28px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-more { flex-wrap: wrap; gap: 14px; }
  .shop-more__top { position: static; transform: none; }
  .shop-strip__inner { flex-wrap: wrap; gap: 14px 22px; }
}
@media (max-width: 639px) {
  .shop-hero__img { aspect-ratio: 16 / 9; }
  .shop-toolbar__search { width: 100%; }
  .shop-toolbar__tools { width: 100%; }
  .shop-toolbar__sort { flex: 1; }
  .shop-grid { gap: 10px; }
  .shop-card__body { flex-direction: column; align-items: stretch; gap: 10px; padding: 8px 12px 12px; }
  .shop-card__body .button { margin-bottom: 0; }
  .shop-promo { grid-column: 1 / -1; }
}

/* ---- Product ----------------------------------------------------------- */
.product-crumbs { padding-top: 22px; padding-bottom: 18px; font-size: 12.5px; }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 72px; align-items: start; padding-bottom: 72px; }
.product__gallery { position: sticky; top: 24px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
.product__thumbs { display: flex; flex-direction: column; gap: 10px; }
.product__thumb { width: 72px; height: 72px; padding: 0; border: 1px solid #E6DCCD; border-radius: var(--radius-md); overflow: hidden; background: var(--color-sky-3); cursor: pointer; transition: border-color .2s ease; }
.product__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.product__thumb--crop img { object-fit: cover; object-position: 50% 36%; padding: 0; transform: scale(1.8); transform-origin: 50% 36%; }
.product__thumb--photo img { object-fit: cover; padding: 0; }
.product__thumb:hover { border-color: #B9AC99; }
.product__thumb.is-active { border-color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink); }
.product__main { position: relative; aspect-ratio: 1 / 1; max-height: 540px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-sky-3); }
.product__main img { width: 100%; height: 100%; object-fit: contain; padding: 14% 18% 12%; }
.product__main.is-photo img { object-fit: cover; padding: 0; }
.product__badge { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); }
.product__zoom { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border: 1px solid rgba(0, 24, 40, .12); background: var(--color-white); }
.product__zoom svg { width: 17px; height: 17px; }
.product__info { min-width: 0; padding-top: 6px; }
.product__title { margin: 10px 0 12px; font-size: var(--fs-product-title); font-weight: 600; line-height: var(--lead-h); letter-spacing: var(--track-h); color: var(--color-ink); }
.product__rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 18px; font-size: var(--fs-small); color: var(--color-text-2); }
.product__stars { font-size: var(--fs-small); letter-spacing: 1px; color: var(--color-gold); }
.product__rating strong { font-weight: 600; color: var(--color-ink); }
.product__dot { width: 3px; height: 3px; border-radius: 50%; background: #B9AC99; }
.product__rating a { color: var(--color-text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #D9CFC2; }
.product__rating a:hover { color: var(--color-orange); }
.product__lede { margin-bottom: 22px; font-size: var(--fs-body); line-height: var(--lead-body); color: #4A4540; }
.product__price-row { display: flex; align-items: baseline; gap: var(--space-3); padding: 18px 0; border-top: 1px solid var(--color-line-3); }
.product__price { font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--color-ink); }
.product__unit { font-size: var(--fs-small); color: var(--color-text-5); }
.product__block { padding-bottom: 18px; }
.product__label { margin-bottom: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--color-text-5); text-align: left; }
.product__label span { margin-left: 6px; font-weight: 500; color: var(--color-ink); }
.product__block .chip { padding: 9px 20px; border-color: var(--color-ink); font-size: var(--fs-small); font-weight: 500; }
.product__buy { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; }
.product__add { height: 52px; padding: 0 16px; font-size: var(--fs-meta); letter-spacing: .04em; }
.product__add-sep { width: 1px; height: 16px; background: rgba(254, 254, 254, .35); }
.product__save { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: 14px; padding: 0; border: 0; background: none; font-size: var(--fs-small); color: var(--color-text-2); transition: color var(--dur) ease; }
.product__save:hover { color: var(--color-orange); }
.product__save svg { width: 16px; height: 16px; }
.product__save.is-saved svg { fill: var(--color-orange); stroke: var(--color-orange); }
.product__perks { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-top: 26px; padding: 16px 0; border-top: 1px solid var(--color-line-3); border-bottom: 1px solid var(--color-line-3); }
.product__perks li { display: flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--color-text-2); white-space: nowrap; }
.product__perks svg { width: 18px; height: 18px; color: var(--color-ink); }
.product__certs { display: flex; align-items: center; gap: 18px; padding: 18px 0 6px; }
.product__certs img { height: 34px; width: auto; opacity: .9; }
.product-story { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%); min-height: 250px; background: var(--color-sky); }
.product-story__copy { align-self: center; padding: 26px 40px 26px max(100px, calc((100% - var(--container-tight)) / 2 + var(--gutter))); }
.product-story__copy .section-title { margin-bottom: 18px; }
.product-story__dish { margin-bottom: 6px; font-size: 18px; font-weight: 600; color: var(--color-ink); text-align: left; }
.product-story__text { max-width: 300px; margin-bottom: 14px; font-size: var(--fs-body); line-height: 1.5; color: var(--color-ink); }
.product-story__img { position: relative; }
.product-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.product-pairs { padding-top: 64px; padding-bottom: 72px; }
.product-pairs .section-head { margin-bottom: 14px; }
.product-pairs .section-lede { margin-top: 4px; }
.product-pairs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pair-card { display: grid; grid-template-columns: 52% 48%; align-items: center; min-height: 180px; border-radius: var(--radius-md); overflow: hidden; }
.pair-card--green { background: #E7EEDD; }
.pair-card--peach { background: #F8E3D1; }
.pair-card__img { display: flex; align-items: flex-end; justify-content: center; height: 100%; padding-top: 16px; }
.pair-card__img img { height: 150px; width: auto; object-fit: contain; }
.pair-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 24px; }
.pair-card__name { font-size: var(--fs-body); font-weight: 600; color: var(--color-ink); }
.pair-card__size { font-size: var(--fs-xs); color: var(--color-text-2); }
.pair-card__price { margin-bottom: 8px; font-size: 16px; font-weight: 700; color: var(--color-ink); }
.pair-card__body .button { align-self: center; padding: 10px 32px; }

@media (max-width: 1199px) {
  .product { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; }
  .product-story__copy { padding-left: var(--gutter); }
}
@media (max-width: 899px) {
  .product { grid-template-columns: 1fr; gap: 32px; padding-bottom: var(--section-sm); }
  .product__gallery { position: static; }
  .product__info { padding-top: 0; }
  .product-story { grid-template-columns: 1fr; }
  .product-story__img { aspect-ratio: 16 / 9; }
  .product-story__copy { padding: 28px var(--gutter); }
  .product-story__text { max-width: none; }
  .product-pairs { padding-top: var(--section-sm); padding-bottom: var(--section-sm); }
}
@media (max-width: 699px) {
  .product-pairs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .product__gallery { grid-template-columns: 1fr; gap: 12px; }
  .product__thumbs { flex-direction: row; order: 2; }
  .product__main { max-height: none; }
  .product__title { margin-top: 0; }
  .product__perks { justify-content: flex-start; }
  .pair-card { grid-template-columns: 44% 56%; min-height: 150px; }
  .pair-card__img img { height: 120px; }
  .pair-card__body { padding: 16px; }
  .pair-card__body .button { align-self: flex-start; }
}

/* ---- Contact ----------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; padding-top: 12px; padding-bottom: 50px; }
.contact .breadcrumbs { margin-bottom: 24px; font-size: var(--fs-xs); }
.contact__sub { max-width: 460px; margin-bottom: 20px; font-size: var(--fs-lede); line-height: 1.4; color: var(--color-ink); }
.contact__img { aspect-ratio: 1.3 / 1; margin-left: -20px; border-radius: 40% 40% 8px 8px / 12% 12% 8px 8px; overflow: hidden; }
.contact__img img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 60%; }
.contact__home { margin: 14px 0 12px; font-size: var(--fs-meta); color: var(--color-ink); text-align: left; }
.contact__links { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.contact__links .text-link { font-weight: 500; }
.contact-form { margin-top: 26px; padding: 26px 26px 22px; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-paper); }
.contact-form__title { margin-bottom: 16px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--track-sub); color: var(--color-ink); }
.contact-form .chip-row { margin-bottom: 20px; }
.attach { position: relative; display: flex; align-items: center; gap: var(--space-4); margin-bottom: 24px; padding: 14px 20px; border: 1px solid #D9CFC2; border-radius: var(--radius-md); background: #F7F4EF; font-size: var(--fs-xs); color: var(--color-ink); cursor: pointer; }
.attach svg { width: 22px; height: 22px; }
.attach > span { display: flex; flex-direction: column; gap: var(--space-1); }
.attach small { font-size: var(--fs-tiny); color: var(--color-text-2); }
.attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.contact-form__send { padding: 14px; font-size: var(--fs-lede); }
.contact-help { background: var(--color-sky); overflow: hidden; }
.contact-help__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; padding-top: 30px; padding-bottom: 34px; }
.contact-help__copy { position: relative; min-height: 270px; }
.contact-help__copy .section-title { margin-bottom: 14px; }
.contact-help__sub { position: relative; z-index: 1; max-width: 250px; margin-left: 135px; font-size: var(--fs-body); line-height: 1.4; color: var(--color-ink); }
.contact-help__art { position: absolute; left: -10px; bottom: -40px; display: flex; align-items: flex-end; }
.contact-help__art img { width: 190px; height: auto; }
.contact-help__art img + img { width: 150px; margin-left: -26px; }
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq { border-radius: var(--radius-md); background: var(--color-white); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 16px 22px; font-size: var(--fs-body); color: var(--color-ink); cursor: pointer; }
.faq summary svg { width: 18px; height: 18px; transition: transform var(--dur) ease; }
.faq[open] summary svg { transform: rotate(180deg); }
.faq p { padding: 0 22px 16px; font-size: var(--fs-meta); line-height: var(--lead-body); color: var(--color-text-2); }
.contact-close { display: flex; align-items: center; justify-content: center; gap: var(--space-5); padding-top: 30px; padding-bottom: 34px; }
.contact-close__art { width: 220px; height: 80px; flex: none; fill: none; stroke: #C9CDBE; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-close__title { margin-bottom: 6px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--track-sub); color: var(--color-ink); }
.contact-close__sub { font-size: var(--fs-body); color: var(--color-text-2); text-align: left; }

@media (max-width: 899px) {
  .contact { grid-template-columns: 1fr; gap: 8px; padding-bottom: var(--section-sm); }
  .contact__img { margin-left: 0; }
  .contact-help__inner { grid-template-columns: 1fr; gap: 20px; }
  .contact-help__copy { min-height: 0; }
  .contact-help__sub { max-width: none; margin-left: 0; }
  .contact-help__art { display: none; }
}
@media (max-width: 639px) {
  .contact-form { padding: 20px 16px 18px; }
  .contact-close { flex-direction: column; text-align: center; gap: var(--space-4); }
  .contact-close__art { width: 180px; height: 66px; }
  .contact-close__sub { text-align: center; text-align-last: center; }
  .contact__links { gap: 12px 24px; }
}

/* ---- Our heroes -------------------------------------------------------- */
.heroes-intro { padding: 44px var(--gutter) 40px; background: var(--color-cream-2); text-align: center; }
.heroes-intro__sub { max-width: 760px; margin: 0 auto; font-size: var(--fs-lede); line-height: 1.55; color: var(--color-text-2); text-align-last: center; }
.heroes-banner { position: relative; width: 100%; aspect-ratio: 3.2 / 1; max-height: 520px; overflow: hidden; background: #E9E0D2; }
.heroes-banner__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; visibility: hidden; }
.heroes-banner__slide.is-on { visibility: visible; }
.heroes-banner__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.heroes-banner__canvas.is-on { visibility: visible; }
.care { padding-top: 52px; padding-bottom: 60px; }
.care__head { margin-bottom: 44px; }
.care .section-lede { max-width: 720px; }
.care__steps { --care-gap: 110px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--care-gap); padding: 10px 20px 20px; }
.care__link { position: absolute; z-index: 0; top: 30%; width: calc(var(--care-gap) + 90px); height: 100px; margin-left: calc((var(--care-gap) + 90px) / -2); fill: none; stroke: var(--color-gold); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; pointer-events: none; overflow: visible; }
.care__link--1 { left: calc(20px + (100% - 40px - 2 * var(--care-gap)) / 3 + var(--care-gap) / 2); }
.care__link--2 { left: calc(20px + 2 * (100% - 40px - 2 * var(--care-gap)) / 3 + 1.5 * var(--care-gap)); }
.care__link--2 path { transform: scaleY(-1); transform-origin: 50% 50%; }
.photo-print { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 14px 14px 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); transform: rotate(var(--tilt, 0deg)); }
.photo-print img { width: 100%; aspect-ratio: 1.3 / 1; object-fit: cover; border-radius: var(--radius-sm); }
.photo-print__body { padding: 18px 8px 24px; text-align: center; }
.photo-print__body .card-title { margin-bottom: 6px; }
.photo-print__text { font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-2); text-align: center; text-align-last: center; }
.care__step:nth-of-type(1) { --tilt: -2.2deg; }
.care__step:nth-of-type(2) { --tilt: 1.6deg; margin-top: 26px; }
.care__step:nth-of-type(3) { --tilt: -1.2deg; }
.together { position: relative; display: flex; align-items: center; min-height: 400px; overflow: hidden; background: var(--color-sky); }
.together__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.together__copy { position: relative; z-index: 1; max-width: 560px; padding: 56px 0 56px max(var(--gutter), calc((100% - var(--container-narrow)) / 2 + var(--gutter))); }
.together__copy .section-title { margin-bottom: 16px; line-height: 1.08; }
.together__text { margin-bottom: 26px; font-size: var(--fs-body); line-height: 1.55; color: var(--color-ink); }
.closing { max-width: 900px; padding-top: 64px; padding-bottom: 72px; text-align: center; }
.closing__text { margin-bottom: 22px; font-size: var(--fs-lede); line-height: 1.65; color: var(--color-text-2); text-align-last: center; }
.closing__line { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: var(--track-sub); color: var(--color-ink); text-align: center; text-align-last: center; }

@media (max-width: 1199px) {
  .care__steps { --care-gap: 64px; }
}
@media (max-width: 899px) {
  .heroes-intro { padding-top: var(--section-sm); padding-bottom: var(--section-sm); }
  .care { padding-top: var(--section-sm); padding-bottom: var(--section-sm); }
  .care__head { margin-bottom: 28px; }
  .care__steps { grid-template-columns: 1fr; gap: 28px; padding: 10px 0 0; }
  .care__step { max-width: 440px; margin: 0 auto; width: 100%; }
  .care__step:nth-of-type(2) { margin-top: 0; }
  .care__link { display: none; }
  .together { flex-direction: column; align-items: stretch; min-height: 0; }
  .together__bg { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .together__copy { max-width: none; padding: 28px var(--gutter) 36px; }
  .closing { padding-top: var(--section-sm); padding-bottom: var(--section-sm); }
}
@media (max-width: 639px) {
  .heroes-banner { aspect-ratio: 16 / 10; }
}

/* ---- Our story --------------------------------------------------------- */
.story-page { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; padding-bottom: 72px; }
.story-hero { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); align-items: center; gap: 20px; padding: 48px 40px 48px 56px; border-radius: var(--radius-md); background: var(--color-sky); overflow: hidden; }
.story-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.story-hero__copy .page-title { margin-bottom: 20px; }
.story-hero__lede { max-width: 470px; margin-bottom: 28px; font-size: var(--fs-lede); line-height: var(--lead-body); color: var(--color-ink); }
.collage { position: relative; container-type: inline-size; aspect-ratio: 100 / 73; }
.collage__print { position: absolute; margin: 0; padding: 1.4cqw 1.4cqw 3.6cqw; }
.collage__print img { height: 100%; aspect-ratio: auto; border-radius: 1px; }
.collage__print--founder { left: 16%; top: 5.6cqw; width: 36%; height: 52cqw; padding-bottom: 1.4cqw; --tilt: -3deg; z-index: 3; }
.collage__print--founder img { flex: 1; min-height: 0; height: auto; object-position: 50% 25%; }
.photo-print__caption { display: flex; flex-direction: column; align-items: center; padding: 1.1cqw .5cqw 0; line-height: 1.1; text-align: center; }
.photo-print__name { font-family: var(--font-script); font-size: 4.2cqw; font-weight: 600; color: var(--color-ink); }
.photo-print__role { margin-top: 2px; font-size: clamp(9px, 1.6cqw, 13px); font-weight: 600; color: var(--color-orange); }
.collage__print--flour { left: 51%; top: 0; width: 26%; height: 29cqw; --tilt: 2.5deg; z-index: 2; }
.collage__print--market { left: 74%; top: 4.8cqw; width: 25%; height: 32cqw; --tilt: 4deg; z-index: 1; }
.collage__print--market img { object-position: 60% 30%; }
.collage__print--curry { left: 0; top: 47.5cqw; width: 30%; height: 24.5cqw; --tilt: -2deg; z-index: 2; }
.collage__note { position: absolute; left: 62%; top: 46cqw; font-family: var(--font-script); font-size: 5cqw; font-weight: 600; line-height: 1.05; color: var(--color-ink); text-align: left; transform: rotate(-7deg); }
.story-row { display: grid; align-items: stretch; min-height: 320px; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-paper); overflow: hidden; }
.story-row--img-left { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
.story-row--img-right { grid-template-columns: minmax(0, 54%) minmax(0, 46%); }
.story-row__img { position: relative; min-height: 320px; }
.story-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-row--img-right .story-row__img img { object-position: 40% 30%; }
.story-row__copy { align-self: center; padding: 40px 52px; }
.story-row__copy .section-title { margin-bottom: 14px; }
.story-row__copy p { max-width: 640px; margin-bottom: 14px; font-size: var(--fs-body); line-height: 1.65; color: var(--color-text-2); }
.story-row__copy p:last-child { margin-bottom: 0; }
.story-homes { padding: 46px 56px; border-radius: var(--radius-md); background: var(--color-cream-2); }
.story-homes .section-title { margin-bottom: 14px; }
.story-homes__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.story-homes__cols p { font-size: var(--fs-body); line-height: 1.65; color: var(--color-text-2); }
.heritage { position: relative; display: flex; align-items: center; min-height: 440px; border-radius: var(--radius-md); background: #FDF8EC; overflow: hidden; }
.heritage__bg { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; height: 100%; object-fit: cover; object-position: 95% center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
.heritage__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 44%; padding: 52px 32px 52px 56px; }
.heritage__title { margin-bottom: 18px; line-height: 1; letter-spacing: -.035em; color: var(--color-orange); }
.heritage__copy p { margin-bottom: 26px; font-size: var(--fs-body); line-height: var(--lead-body); color: var(--color-ink); }

@media (max-width: 1199px) {
  .story-hero { padding: 36px 32px; }
  .story-row__copy { padding: 32px 36px; }
  .heritage__copy { padding: 40px 24px 40px 36px; }
}
@media (max-width: 899px) {
  .story-page { padding-top: 18px; padding-bottom: var(--section-sm); }
  .story-hero { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px 32px; }
  .story-row--img-left, .story-row--img-right { grid-template-columns: 1fr; }
  .story-row__img { min-height: 0; aspect-ratio: 4 / 3; }
  .story-row__copy { padding: 28px 24px; }
  .story-homes { padding: 32px 24px; }
  .story-homes__cols { grid-template-columns: 1fr; gap: 16px; }
  .heritage { flex-direction: column-reverse; align-items: stretch; min-height: 0; }
  .heritage__bg { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; -webkit-mask-image: none; mask-image: none; object-position: center; }
  .heritage__copy { width: 100%; padding: 28px 24px 32px; }
}
@media (max-width: 639px) {
  .story-hero { padding: 24px 16px 28px; }
  .story-row__copy, .story-homes, .heritage__copy { padding-left: 16px; padding-right: 16px; }
}

/* ---- Careers ----------------------------------------------------------- */
.careers { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; padding-bottom: 72px; }
.careers-hero { display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 57%); align-items: center; gap: 28px; padding-bottom: 30px; }
.careers-hero .breadcrumbs { margin-bottom: 26px; }
.careers-hero .page-title { margin-bottom: 20px; }
.careers-hero__sub { margin-bottom: 30px; font-size: var(--fs-lede); color: var(--color-ink); text-align: left; }
.careers-hero__img { aspect-ratio: 1.5 / 1; border-radius: var(--radius-md); overflow: hidden; }
.careers-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.values { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 66%); align-items: start; gap: 48px; padding: 40px 0 44px; border-top: 1px solid var(--color-line-3); }
.values .section-title { line-height: 1; }
.values__text { max-width: 620px; margin: 4px 0 22px; font-size: var(--fs-lede); line-height: 1.5; color: var(--color-ink); }
.values__list { display: flex; flex-wrap: wrap; }
.values__list li { display: inline-flex; align-items: center; gap: 10px; padding: 2px 20px; font-size: var(--fs-body); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.values__list li:first-child { padding-left: 0; }
.values__list li + li { border-left: 1px solid #D9CFC2; }
.values__icon { width: 30px; height: 30px; }
.jobs { padding: 28px 26px 10px; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-paper); }
.jobs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.jobs__head .section-title { margin-top: 8px; line-height: 1.05; }
.jobs__count { margin-top: 6px; font-size: var(--fs-body); color: var(--color-ink); white-space: nowrap; }
.jobs__tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--color-line-3); }
.jobs__tools .chip-row { gap: 8px; }
.jobs__tools .chip { min-width: 72px; border-color: #BFD6E4; background: var(--color-sky); }
.jobs__tools .chip[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); }
.job-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 2px; border-bottom: 1px solid var(--color-line-3); }
.job-row:last-of-type { border-bottom: 0; }
.job-row[hidden], .jobs__empty[hidden] { display: none; }
.job-row__name { margin-bottom: 6px; }
.job-row__meta { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: var(--color-ink); text-align: left; }
.job-row__meta svg { width: 18px; height: 18px; }
.job-row__sep { width: 1px; height: 16px; margin: 0 8px; background: #CFC6BA; }
.job-row .tag { justify-self: start; }
.job-row .button { padding: 12px 36px; }
.jobs__empty { padding: 28px 0; text-align: center; font-size: 16px; color: var(--color-text-2); }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 22px 56px; border-radius: var(--radius-md); }
.cta-band__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--track-sub); text-align: left; }
.cta-band--dark { background: var(--color-ink); color: var(--color-on-dark); }
.cta-band__link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1.5px solid var(--color-gold); font-size: 16px; font-weight: 600; color: var(--color-on-dark); white-space: nowrap; }
.cta-band__link:hover { color: #F1C88E; }
.cta-band__link svg { width: 18px; height: 18px; }
.cta-band--light { background: var(--color-sky); color: var(--color-ink); }

@media (max-width: 899px) {
  .careers { padding-top: 18px; padding-bottom: var(--section-sm); }
  .careers-hero { grid-template-columns: 1fr; gap: 24px; padding-bottom: 20px; }
  .values { grid-template-columns: 1fr; gap: 16px; padding: 32px 0 36px; }
  .jobs { padding: 22px 18px 6px; }
  .jobs__head { flex-direction: column; gap: 4px; }
  .jobs__tools { grid-template-columns: 1fr; gap: 12px; }
  .cta-band { padding: 22px 28px; }
}
@media (max-width: 699px) {
  .job-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
  .job-row__main { grid-column: 1 / -1; }
  .job-row .button { padding: 10px 20px; }
  .values__list li { padding: 2px 12px; }
  .cta-band { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
}

/* ---- Global presence --------------------------------------------------- */
.presence { display: flex; flex-direction: column; gap: 18px; padding-bottom: 72px; }
.presence-hero { padding: 30px 0 24px; text-align: center; background: #FFFDF8; box-shadow: 0 0 0 100vmax #FFFDF8; clip-path: inset(0 -100vmax); }
.presence-hero .page-title { margin-bottom: 10px; }
.presence-hero__sub { margin-bottom: 8px; font-size: var(--fs-card); font-weight: 500; letter-spacing: -.01em; color: var(--color-green-dark); text-align: center; text-align-last: center; }
.presence-hero__desc { max-width: 780px; margin: 0 auto 14px; font-size: var(--fs-lede); line-height: var(--lead-body); color: var(--color-text-2); text-align-last: center; }
.presence-hero__meta { margin-bottom: 8px; font-size: var(--fs-lede); color: var(--color-ink); text-align: center; text-align-last: center; }
.presence-hero__meta span { margin: 0 6px; }
.world-map { position: relative; max-width: 1320px; margin: 0 auto; }
.world-map > img { width: 100%; height: auto; }
.world-map__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-pin { cursor: pointer; transition: opacity .3s ease; }
.map-pin:focus { outline: none; }
.map-pin__halo { fill: #005038; opacity: .2; transition: opacity .3s ease; }
.map-pin.is-on .map-pin__halo { opacity: .38; }
.map-pin__marker { transition: transform .3s ease; }
.map-pin__body { fill: var(--color-orange); stroke: #FFFDF8; stroke-width: 1.3; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s ease; }
.map-pin__eye { fill: #FFFDF8; pointer-events: none; }
.map-pin__ring { fill: none; stroke: var(--color-orange); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: pin-ping 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes pin-ping { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
.world-map[data-on] .map-pin { opacity: .35; }
.world-map[data-on] .map-pin.is-on { opacity: 1; }
.map-pin.is-on .map-pin__body, .map-pin__marker:hover .map-pin__body { transform: scale(1.18); }
.map-pop { position: absolute; z-index: 4; width: min(300px, calc(100vw - 32px)); border: 1px solid #E6DCCD; border-radius: var(--radius-md); background: var(--color-paper); box-shadow: 0 22px 44px -18px rgba(0, 15, 29, .38); overflow: hidden; text-align: left; opacity: 0; transform: scale(.35); transform-origin: var(--ox, 50%) var(--oy, 100%); transition: opacity .2s ease, transform .45s cubic-bezier(.2, .8, .25, 1.12); pointer-events: none; }
.map-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.map-pop__map { position: relative; height: 150px; overflow: hidden; background: #FFFDF8; border-bottom: 1px solid var(--color-line-3); }
.map-pop__map img { position: absolute; left: 0; top: 0; width: 1736px; height: 906px; max-width: none; transform-origin: 0 0; will-change: transform; }
.map-pop__pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 35px; margin: -35px 0 0 -13px; opacity: 0; transform: translateY(-14px); transition: opacity .25s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.map-pop__pin path { fill: var(--color-orange); stroke: #FFFDF8; stroke-width: 1.3; stroke-linejoin: round; }
.map-pop__pin circle { fill: #FFFDF8; }
.map-pop.is-landed .map-pop__pin { opacity: 1; transform: none; }
.map-pop__ring { position: absolute; left: 50%; top: 50%; width: 22px; height: 9px; margin: -4.5px 0 0 -11px; border: 1.5px solid var(--color-orange); border-radius: 50%; opacity: 0; }
.map-pop.is-landed .map-pop__ring { animation: pop-ring 1.8s ease-out infinite; }
@keyframes pop-ring { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.map-pop__body { padding: 14px 16px 16px; }
.map-pop__head { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: var(--track-card); color: var(--color-ink); }
.map-pop__head .flag { width: 24px; height: 24px; }
.map-pop__region { margin: 4px 0 12px; font-size: var(--fs-small); line-height: 1.4; color: var(--color-text-3); text-align: left; }
.map-pop__cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 14px; font-size: var(--fs-meta); color: var(--color-ink); }
.map-pop__cities li { display: flex; align-items: center; gap: var(--space-2); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; transition-delay: calc(.3s + var(--i, 0) * .06s); }
.map-pop__cities li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-orange); flex: none; }
.map-pop.is-open .map-pop__cities li { opacity: 1; transform: none; }
.flag { width: 30px; height: 30px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px #E6DCCD; }
.country-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 8px; }
.country-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid #E6DCCD; border-radius: var(--radius-md); background: var(--color-paper); font-size: var(--fs-body); font-weight: 600; color: var(--color-ink); transition: border-color var(--dur) ease, box-shadow var(--dur) ease; }
.country-chip span { font-size: var(--fs-meta); font-weight: 400; color: var(--color-text-3); }
.country-chip .flag { width: 22px; height: 22px; }
.country-chip:hover, .country-chip.is-on { color: var(--color-ink); border-color: var(--color-green-dark); box-shadow: 0 0 0 1px var(--color-green-dark); }
.community { padding-top: 34px; border-top: 1px solid var(--color-line-3); }
.community .section-head { align-items: center; margin-bottom: 22px; }
.community__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.community__side { display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.country-card { scroll-margin-top: 24px; border: 1px solid #E6DCCD; border-radius: var(--radius-md); background: var(--color-paper); transition: border-color var(--dur) ease; }
.country-card:target, .country-card.is-on { border-color: var(--color-green-dark); }
.country-card--usa { display: flex; flex-direction: column; padding: 8px; }
.country-card__img { aspect-ratio: 2.6 / 1; border-radius: var(--radius-md); overflow: hidden; }
.country-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.country-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 16px; }
.country-card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--color-line-3); }
.country-card__name { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-card); font-weight: 600; letter-spacing: -.015em; color: var(--color-ink); }
.country-card__meta { display: flex; align-items: center; gap: 18px; }
.country-card__count { font-size: var(--fs-body); color: var(--color-ink); }
.country-card__entity { display: block; width: auto; height: 80px; flex: none; }
.country-card__meta .country-card__entity { height: 64px; }
.city-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 8px 0 18px; }
.city-list a { display: flex; align-items: center; gap: var(--space-3); padding: 9px 4px; border-radius: var(--radius-md); font-size: var(--fs-body); color: var(--color-ink); transition: background var(--dur) ease, color var(--dur) ease; }
.city-list a:hover { color: var(--color-orange); background: var(--color-cream-2); }
.city-list a > svg:first-child { width: 18px; height: 18px; }
.city-list__chev { width: 18px; height: 18px; margin-left: auto; stroke-width: 2.2; }
.country-card__button { margin-top: auto; align-self: flex-start; padding: 11px 26px; }
.country-card--row { display: grid; grid-template-columns: min(calc((100cqw - 36px) * .42), calc(100cqw - 366px)) minmax(max-content, 1fr) auto auto; align-items: center; gap: 22px; flex: 1; padding: 8px 26px 8px 8px; color: var(--color-ink); }
.country-card--row:hover { color: var(--color-ink); border-color: #B9AC99; }
.country-card--row > .country-card__chev { grid-column: 4; }
.country-card--row .country-card__entity { align-self: center; }
.country-card__row-img { display: block; height: 100%; min-height: 120px; border-radius: var(--radius-md); overflow: hidden; }
.country-card__row-img img { width: 100%; height: 100%; object-fit: cover; }
.country-card__row-body { display: flex; flex-direction: column; gap: var(--space-1); }
.country-card__city { padding-left: 42px; font-size: var(--fs-body); color: var(--color-text-2); }
.country-card__chev { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--dur) ease; }
.country-card--row:hover .country-card__chev { transform: translateX(3px); }
.presence-band { position: relative; display: flex; align-items: center; min-height: 260px; margin-top: 10px; border-radius: var(--radius-md); background: #E3EEF5; overflow: hidden; }
.presence-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.presence-band__copy { position: relative; z-index: 1; max-width: 560px; padding: 44px 56px; }
.presence-band__copy p { margin: 10px 0 24px; font-size: var(--fs-lede); line-height: 1.5; color: var(--color-ink); }
.presence-band .button--outline { background: var(--color-white); }

@media (max-width: 899px) {
  .presence { padding-bottom: var(--section-sm); }
  .community__grid { grid-template-columns: 1fr; }
  .presence-band { flex-direction: column; align-items: stretch; min-height: 0; }
  .presence-band__bg { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .presence-band__copy { max-width: none; padding: 28px 24px 32px; }
}
@media (max-width: 639px) {
  .country-card__entity { height: 56px; }
  .country-card__meta .country-card__entity { height: 48px; }
  .city-list { grid-template-columns: 1fr; column-gap: 0; }
  .country-card--row { grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 12px 8px 8px; }
  .country-card__row-img { min-height: 88px; }
  .country-card__city { padding-left: 0; }
  .country-card--row .country-card__entity { height: 44px; }
  .presence-band__copy { padding: 24px 16px 28px; }
  .map-pop__cities { grid-template-columns: 1fr; }
}

/* ---- Legal pages ------------------------------------------------------- */
.legal { padding-top: 22px; padding-bottom: 80px; }
.legal .breadcrumbs { margin-bottom: 26px; }
.legal__card { max-width: 820px; margin: 0 auto; padding: 52px 56px 44px; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-paper); }
.legal__card .page-title { margin-bottom: 12px; }
.legal__lede { margin-bottom: 28px; font-size: var(--fs-lede); line-height: 1.55; color: var(--color-text-2); }
.legal__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin: 28px 0 36px; }
.legal__actions .text-link { font-size: var(--fs-body); }
.legal__more { padding-top: 24px; border-top: 1px solid var(--color-line-3); }
.legal__more-title { margin-bottom: 10px; font-size: var(--fs-meta); font-weight: 600; color: var(--color-text-2); text-align: left; }
.legal__more .chip-row { gap: 10px; }
.legal__more .chip { padding: 8px 16px; font-size: var(--fs-meta); }

@media (max-width: 899px) {
  .legal { padding-bottom: var(--section-sm); }
  .legal__card { padding: 32px 28px 28px; }
}
@media (max-width: 639px) {
  .legal__card { padding: 28px 16px 24px; }
}

/* ---- Motion preferences ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero__slide { transition: none; }
  .marquee__track { animation: none; }
  .map-pin__ring { animation: none; }
  .map-pop, .map-pop__pin, .map-pop__cities li { transition: none; }
  .map-pop.is-landed .map-pop__ring { animation: none; }
  .video-modal[open]::backdrop, .video-modal.is-closing::backdrop { animation: none; }
  .nav-drawer[open], .nav-drawer.is-closing { animation: none; }
  .product-rail, .video-rail { scroll-behavior: auto; }
}
/* ---- Storefront: toast, save hearts, cart, checkout, articles ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius-sm); background: var(--color-navy); color: var(--color-on-dark); font-size: var(--fs-meta); font-weight: 500; text-align: center; opacity: 0; transform: translate(-50%, 12px); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); pointer-events: none; }
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--color-orange); }
.cart-count.is-bump { animation: bump .4s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35); } }
.cart-count--wish { background: var(--color-green); }
.cart-count[hidden] { display: none; }
.product-card__save, .shop-card__save { position: absolute; z-index: 2; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--color-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color var(--dur) ease, transform var(--dur-fast) ease-out; }
.product-card__save { top: 10px; right: 10px; }
.shop-card { position: relative; }
.shop-card__save { top: 10px; right: 10px; }
.product-card__save svg, .shop-card__save svg { width: 16px; height: 16px; }
.product-card__save:active, .shop-card__save:active { transform: scale(.9); }
.product-card__save.is-saved, .shop-card__save.is-saved, .product__save.is-saved { color: var(--color-orange); }
.product-card__save.is-saved svg, .shop-card__save.is-saved svg { fill: var(--color-orange); stroke: var(--color-orange); }
.button.is-added { color: var(--color-on-dark); }
.button.is-added::before { transform: scaleX(1); background: var(--color-green); }
.cart, .checkout, .wishlist, .journal-archive { padding-top: 22px; padding-bottom: 72px; }
.cart .page-title, .checkout .page-title, .wishlist .page-title, .journal-archive .page-title { margin-bottom: 24px; }
.cart__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 0; }
.cart__empty .section-lede { margin-top: 0; }
.cart__layout, .checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.cart__lines { display: flex; flex-direction: column; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-line-3); }
.cart-line__img { display: block; width: 96px; height: 96px; border-radius: var(--radius-md); background: var(--color-sky-3); overflow: hidden; }
.cart-line__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cart-line__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-line__name { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.cart-line__meta { font-size: var(--fs-small); color: var(--color-text-2); }
.cart-line__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.cart-line__controls .stepper { height: 40px; width: 118px; }
.cart-line__controls .stepper button { width: 34px; }
.cart-line__remove { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: var(--fs-small); color: var(--color-text-2); }
.cart-line__remove:hover { color: var(--color-orange); }
.cart-line__remove svg { width: 15px; height: 15px; }
.cart-line__total { font-size: var(--fs-lede); font-weight: 700; color: var(--color-ink); }
.cart__summary { position: sticky; top: 24px; padding: 24px; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-paper); }
.cart__summary .card-title { margin-bottom: 16px; }
.cart__totals { margin: 0 0 16px; }
.cart__totals div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: var(--fs-body); color: var(--color-text-2); }
.cart__totals dd { margin: 0; color: var(--color-ink); font-weight: 500; }
.cart__totals-total { border-top: 1px solid var(--color-line-3); margin-top: 6px; padding-top: 14px; font-weight: 600; color: var(--color-ink); }
.cart__totals-total dd { font-size: var(--fs-price); font-weight: 700; }
.cart__note { margin-bottom: 16px; font-size: var(--fs-small); color: var(--color-green); text-align: left; }
.cart__continue { margin-top: 16px; }
.checkout__form { margin-top: 0; }
.checkout__form .notice { margin: 8px 0 18px; }
.checkout__lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-line-3); }
.checkout__lines li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-body); color: var(--color-ink); }
.checkout__lines small { color: var(--color-text-2); }
.checkout__done { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 640px; }
.wishlist__grid { margin-top: 24px; }
.prose { font-size: var(--fs-body); line-height: var(--lead-relaxed); color: var(--color-text-2); }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose h2, .prose h3 { margin: 28px 0 10px; color: var(--color-ink); }
.prose h2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--track-sub); }
.prose h3 { font-size: var(--fs-card); font-weight: 600; }
.prose a { color: var(--color-orange); text-decoration: underline; }
.prose img { border-radius: var(--radius-md); }
.prose__figure { margin: 0 0 24px; border-radius: var(--radius-md); overflow: hidden; }
.journal-archive__sub { margin: 32px 0 16px; }
.journal-archive__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid #DCD2C5; border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--fs-meta); color: var(--color-ink); }
.pagination .page-numbers.current { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); }
@media (max-width: 899px) {
  .cart__layout, .checkout__layout { grid-template-columns: 1fr; gap: 24px; }
  .cart__summary { position: static; }
  .journal-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart, .checkout, .wishlist, .journal-archive { padding-bottom: var(--section-sm); }
}
@media (max-width: 639px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .cart-line__img { width: 72px; height: 72px; }
  .cart-line__total { grid-column: 2; }
  .journal-archive__grid { grid-template-columns: 1fr; }
}

/* ---- Account and order history ---- */
.account { padding-top: 22px; padding-bottom: 72px; }
.account__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-top: 8px; }
.account__login { margin-top: 0; }
.account__login .login-username, .account__login .login-password { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--color-ink); }
.account__login .login-username input, .account__login .login-password input { width: 100%; padding: 12px 14px; border: 1px solid #D9CFC2; border-radius: var(--radius-md); background: var(--color-white); font-size: var(--fs-small); color: var(--color-ink); outline: none; }
.account__login .login-username input:focus, .account__login .login-password input:focus { border-color: var(--color-navy); }
.account__login .login-remember { margin-bottom: 18px; font-size: var(--fs-small); color: var(--color-text-2); }
.account__login .login-submit input { display: flex; width: 100%; padding: 13px 26px; border: 0; border-radius: var(--radius-sm); background: var(--color-navy); color: var(--color-on-dark); font: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer; }
.account__note { font-size: var(--fs-meta); color: var(--color-text-2); text-align: left; margin-bottom: 16px; }
.account__note a { color: var(--color-orange); text-decoration: underline; }
.account__sub { margin: 40px 0 16px; }
.account__orders .section-title { margin-bottom: 16px; }
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card { border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-paper); }
.order-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; align-items: center; gap: 16px; padding: 16px 18px; cursor: pointer; }
.order-card__number { display: flex; flex-direction: column; gap: 3px; font-size: 16px; font-weight: 600; color: var(--color-ink); }
.order-card__number small { font-size: var(--fs-small); font-weight: 400; color: var(--color-text-2); }
.order-card__status { padding: 5px 12px; border-radius: var(--radius-sm); background: var(--color-sky); font-size: var(--fs-small); font-weight: 500; color: var(--color-ink); }
.order-card__status--confirmed { background: #E7EEDD; }
.order-card__status--fulfilled { background: #DDEFE2; color: var(--color-green); }
.order-card__status--cancelled { background: #F4E3DE; color: var(--color-orange); }
.order-card__total { font-size: var(--fs-lede); font-weight: 700; color: var(--color-ink); }
.order-card__chev { width: 18px; height: 18px; transition: transform var(--dur) ease; }
.order-card details[open] .order-card__chev { transform: rotate(180deg); }
.order-card__lines { margin: 0 18px; padding: 14px 0; border-top: 1px solid var(--color-line-3); border-bottom: 0; }
.order-card__lines a { color: var(--color-ink); }
.order-card__meta { padding: 0 18px 16px; font-size: var(--fs-small); color: var(--color-text-2); text-align: left; }
.account__form .field { margin-bottom: 12px; }
.account__form .button { margin-top: 6px; }
.checkout__account { margin: 6px 0 4px; align-items: flex-start; }
.checkout__account .checkbox__box { margin-top: 2px; }
@media (max-width: 899px) {
  .account__layout { grid-template-columns: 1fr; gap: 28px; }
  .account { padding-bottom: var(--section-sm); }
}
@media (max-width: 639px) {
  .order-card__head { grid-template-columns: minmax(0, 1fr) 18px; gap: 8px 12px; }
  .order-card__status, .order-card__total { grid-column: 1; justify-self: start; }
}

.whatsapp-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 80; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 16px; border-radius: 999px; background: linear-gradient(135deg, #2BE07A 0%, #1EBE5D 55%, #128C4A 100%); color: #FFFFFF; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .01em; text-decoration: none; box-shadow: 0 12px 28px -8px rgba(18, 140, 74, .55), 0 2px 6px rgba(0, 15, 29, .18); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); animation: whatsapp-in .5s .8s var(--ease-out) both; }
.whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); animation: whatsapp-pulse 2.8s 1.6s var(--ease-out) infinite; pointer-events: none; }
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(18, 140, 74, .6), 0 3px 8px rgba(0, 15, 29, .2); }
.whatsapp-float:active { transform: scale(.97); }
.whatsapp-float:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 3px; }
.whatsapp-float__icon { width: 28px; height: 28px; flex: none; fill: currentColor; }
@keyframes whatsapp-in { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes whatsapp-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } }
@media (max-width: 639px) {
  .whatsapp-float { width: 56px; padding: 0; justify-content: center; }
  .whatsapp-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toast { bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float, .whatsapp-float::before { animation: none; }
}

.article { padding: 22px 0 0; }
.article__head { display: flex; flex-direction: column; align-items: center; max-width: 920px; text-align: center; }
.article__crumbs { align-self: flex-start; margin-bottom: 40px; }
.article__tag { display: inline-flex; padding: 6px 14px; border: 1px solid #E8C9A8; border-radius: 999px; background: var(--color-white); font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-orange); transition: background var(--dur) ease, color var(--dur) ease; }
.article__tag:hover { background: var(--color-orange); color: var(--color-white); }
.article__title { margin: 20px 0 0; font-size: clamp(34px, 2.6vw + 20px, 60px); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; color: var(--color-ink); text-wrap: balance; }
.article__lede { text-align: center; hyphens: manual; max-width: 640px; margin: 20px 0 0; font-size: 19px; line-height: 1.6; color: var(--color-text-3); text-wrap: pretty; }
.article__meta { text-align: center; display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font-size: var(--fs-small); color: var(--color-text-5); }
.article__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold); }
.article__hero { max-width: 1168px; margin-top: 48px; }
.article__hero img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius-md); }
.article__body { max-width: 768px; padding-top: 56px; }
.article__prose { font-size: 18px; line-height: 1.8; color: #2F2B27; text-align: left; hyphens: manual; }
.article__prose p, .article__prose li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.article__prose > p:first-child { font-size: 21px; line-height: 1.65; color: var(--color-ink); }
.article__prose p, .article__prose ul, .article__prose ol { margin-bottom: 24px; }
.article__prose h2 { margin: 48px 0 16px; font-size: clamp(24px, 1vw + 18px, 30px); line-height: 1.2; }
.article__prose h3 { margin: 36px 0 12px; font-size: 21px; }
.article__prose blockquote { margin: 40px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--color-gold); font-size: 22px; line-height: 1.5; font-weight: 500; color: var(--color-ink); }
.article__prose figure, .article__prose img { margin: 36px 0; }
.article__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-line); }
.article__foot .text-link { display: inline-flex; align-items: center; gap: 6px; }
.article__foot .text-link svg { width: 16px; height: 16px; }
.article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--color-text-5); }
.article__share a { padding: 7px 14px; border: 1px solid var(--color-line); border-radius: 999px; font-weight: 500; color: var(--color-ink); transition: border-color var(--dur) ease, color var(--dur) ease; }
.article__share a:hover { border-color: var(--color-orange); color: var(--color-orange); }
.article__more { padding-top: 88px; padding-bottom: 88px; }
.article__more .section-title { margin-bottom: 28px; }
.article__more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 899px) {
  .article__crumbs { margin-bottom: 28px; }
  .article__hero { margin-top: 32px; }
  .article__hero img { aspect-ratio: 16 / 10; }
  .article__body { padding-top: 36px; }
  .article__more { padding-top: 64px; padding-bottom: 64px; }
  .article__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 639px) {
  .article__lede { font-size: 17px; }
  .article__prose { font-size: 17px; }
  .article__prose > p:first-child { font-size: 19px; }
  .article__hero { padding: 0; }
  .article__hero img { border-radius: 0; aspect-ratio: 4 / 3; }
  .article__more-grid { grid-template-columns: 1fr; }
}

.product__promise { --promise-angle: 0deg; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 0; padding: 16px 20px; border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink); font-size: 17px; line-height: 1.4; text-decoration: none; box-shadow: 0 10px 24px -18px rgba(152, 56, 0, .55); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.product__promise::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--promise-angle), #983800, #E0B25E, #1F7A3A, #7D9E5A, #C98A34, #983800); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: promise-spin 4s linear infinite; }
.product__promise-text { font-weight: 500; }
.product__promise strong { font-weight: 700; background: linear-gradient(90deg, #983800, #D06920, #C98A34, #1F7A3A, #0B4A34, #983800); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: promise-hue 5s ease-in-out infinite; }
.product__promise-hint { display: block; margin-top: 6px; font-size: var(--fs-small); font-weight: 400; color: var(--color-text-5); }
.product__qr { flex: none; width: 84px; height: 84px; padding: 4px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); transition: transform var(--dur) var(--ease-out); }
.product__qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product__promise:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(152, 56, 0, .6); }
.product__promise:hover .product__qr { transform: scale(1.04); }
.product__promise + .product__perks { margin-top: 16px; }
#product-details { scroll-margin-top: 120px; }
@property --promise-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes promise-spin { to { --promise-angle: 360deg; } }
@keyframes promise-hue { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (max-width: 639px) {
  .product__promise { font-size: 15.5px; padding: 14px 16px; }
  .product__qr { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .product__promise::before, .product__promise strong { animation: none; }
}