:root {
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #dedede;
  --soft-line: #e8e8ed;
  --surface: #f5f5f7;
  --warm: #faf7f0;
  --white: #ffffff;
  --green: #19552f;
  --green-dark: #0f3d22;
  --sale: #b6461c;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --display-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 12px 36px rgba(0, 0, 0, .08);
  --header-h: 96px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body.cart-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 14px; background: white; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 5px; }
.hero :focus-visible, footer :focus-visible { outline-color: #dceb5a; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 30; padding: 14px 0; background: transparent; pointer-events: none; }
.header-main { min-height: 68px; display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); pointer-events: auto; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .category-nav, .search, .location-button, .cart-button { background: rgba(247,250,248,.94); }
}
.brand { min-height: 62px; padding: 3px 8px; flex: none; display: inline-flex; align-items: center; }
.brand img { width: 84px; height: auto; }
.category-nav { min-height: 58px; padding: 6px; border: 1px solid rgba(255,255,255,.38); border-radius: 22px; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: clamp(2px, .55vw, 8px); overflow-x: auto; scrollbar-width: none; background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(225,240,230,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.64), inset 0 -1px 0 rgba(8,35,19,.1), 0 10px 28px rgba(5,22,12,.14); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
.category-nav::-webkit-scrollbar { display: none; }
.category-nav a { position: relative; min-height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; flex: none; display: flex; align-items: center; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 550; text-shadow: 0 1px 8px rgba(0,0,0,.32); white-space: nowrap; transition: color .2s, background .2s, border-color .2s, box-shadow .2s; }
.category-nav a::after { display: none; }
.category-nav a:hover { color: #fff; background: rgba(255,255,255,.2); }
.category-nav a.active { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.64), 0 5px 16px rgba(10,38,21,.09); }
.search { flex: 0 1 220px; height: 50px; cursor: text; padding: 0 15px; border: 1px solid rgba(255,255,255,.42); border-radius: 19px; display: flex; align-items: center; gap: 9px; background: linear-gradient(145deg, rgba(255,255,255,.36), rgba(225,240,230,.13)); box-shadow: inset 0 1px 0 rgba(255,255,255,.66), inset 0 -1px 0 rgba(8,35,19,.1), 0 9px 26px rgba(5,22,12,.14); -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%); transition: background .2s, border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: rgba(255,255,255,.66); background: rgba(255,255,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 0 0 3px rgba(25,85,47,.1), 0 7px 20px rgba(8,29,16,.1); }
.search svg { width: 17px; flex: none; color: rgba(255,255,255,.82); }
.search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 13px; }
.search input::placeholder { color: rgba(255,255,255,.68); }
.header-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.location-button, .cart-button { min-height: 50px; padding: 0 13px; border: 1px solid rgba(255,255,255,.42); border-radius: 19px; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.36), rgba(225,240,230,.13)); box-shadow: inset 0 1px 0 rgba(255,255,255,.66), inset 0 -1px 0 rgba(8,35,19,.1), 0 9px 26px rgba(5,22,12,.14); -webkit-backdrop-filter: blur(28px) saturate(185%); backdrop-filter: blur(28px) saturate(185%); display: flex; align-items: center; cursor: pointer; transition: color .2s, background .2s, border-color .2s, box-shadow .2s; }
.location-button:hover, .cart-button:hover { border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 6px 18px rgba(8,29,16,.1); }
.location-button { gap: 8px; text-align: left; }
.location-button svg, .cart-button svg { width: 21px; height: 21px; color: #e8f45d; }
.location-button span { display: grid; gap: 1px; }
.location-button small { color: rgba(255,255,255,.66); font-size: 10px; }
.location-button strong { max-width: 104px; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 12px; white-space: nowrap; }
.cart-button { position: relative; gap: 6px; font-size: 13px; font-weight: 600; }
.cart-button strong { position: absolute; top: -9px; left: 13px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; color: white; background: var(--green); border: 2px solid white; border-radius: 999px; font-size: 9px; }

.site-header.is-on-light .category-nav, .site-header.is-on-light .search, .site-header.is-on-light .location-button, .site-header.is-on-light .cart-button { border-color: rgba(255,255,255,.76); background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(235,244,238,.48)); box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(8,35,19,.08), 0 9px 26px rgba(5,22,12,.1); }
/* Where the header is fixed, body text scrolls through the gaps between the
   pills. Blur the whole bar and fade it out at the bottom so content passes
   under it cleanly instead of showing through. Below 721px the header is in
   normal flow and already carries its own background. */
@media (min-width: 721px) {
  .site-header.is-on-light { background: linear-gradient(180deg, rgba(250,252,251,.94) 0%, rgba(250,252,251,.8) 58%, rgba(250,252,251,0) 100%); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
}

.site-header.is-on-light .category-nav a { color: #3f4541; text-shadow: none; }
.site-header.is-on-light .category-nav a:hover { color: var(--green); background: rgba(255,255,255,.5); }
.site-header.is-on-light .category-nav a.active { color: var(--green-dark); background: rgba(255,255,255,.72); }
.site-header.is-on-light .search svg { color: #6e6e73; }
.site-header.is-on-light .search input { color: var(--text); }
.site-header.is-on-light .search input::placeholder { color: #7b7d7b; }
.site-header.is-on-light .location-button, .site-header.is-on-light .cart-button { color: var(--text); }
.site-header.is-on-light .location-button svg, .site-header.is-on-light .cart-button svg { color: var(--green); }
/* Header cart past the hero. Modelled on the iPhone Duo unfold: the change is
   scrubbed by scroll the way the Duo's is scrubbed by hinge angle (not played on
   a timer), the label stays locked in place, and the orange arrives through a
   irregular blot that bleeds outward like colour into paper, blurred and dark
   at first and coming into focus as it spreads (receding inward on the way up).
   Browsers without scroll timelines get the same states as a timed transition. */
.cart-button { isolation: isolate; transition: border-color .6s ease, box-shadow .8s ease; }
.cart-button::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: #fc8019;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='f' x='-25%' y='-25%' width='150%' height='150%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='44' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3Ccircle cx='100' cy='100' r='58' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='f' x='-25%' y='-25%' width='150%' height='150%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.034' numOctaves='3' seed='23'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='44' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3Ccircle cx='100' cy='100' r='55' filter='url(%23f)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='f' x='-25%' y='-25%' width='150%' height='150%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.028' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='44' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3Ccircle cx='100' cy='100' r='58' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='f' x='-25%' y='-25%' width='150%' height='150%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.034' numOctaves='3' seed='23'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='44' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3Ccircle cx='100' cy='100' r='55' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 46% 56%, 57% 43%; mask-position: 46% 56%, 57% 43%;
  -webkit-mask-size: 0% auto, 0% auto; mask-size: 0% auto, 0% auto; filter: blur(5px) brightness(.72); opacity: 0;
  transition: -webkit-mask-size .9s cubic-bezier(.33,0,.15,1), mask-size .9s cubic-bezier(.33,0,.15,1), filter .9s cubic-bezier(.33,0,.15,1), opacity .45s ease, background-color .2s ease; }
.cart-button svg, .cart-button strong { transition: color .6s ease, background-color .6s ease, border-color .6s ease; }
.cart-button strong { z-index: 1; }
.site-header.is-on-light .cart-button { border-color: #fc8019; color: #fff; box-shadow: 0 6px 16px rgba(252,128,25,.28); }
.site-header.is-on-light .cart-button::before { -webkit-mask-size: 780% auto, 780% auto; mask-size: 780% auto, 780% auto; filter: none; opacity: 1; }
.site-header.is-on-light .cart-button:hover::before { background: #e8700c; }
.site-header.is-on-light .cart-button svg { color: #fff; }
.site-header.is-on-light .cart-button strong { color: #fc8019; background: #fff; border-color: #fc8019; }

@supports (animation-timeline: scroll()) {
  .cart-scrubbed .cart-button, .cart-scrubbed .cart-button::before, .cart-scrubbed .cart-button svg, .cart-scrubbed .cart-button strong {
    animation-timeline: scroll(root block);
    animation-range: var(--cart-unfold-start, 0px) var(--cart-unfold-end, 1px);
    animation-timing-function: linear; animation-fill-mode: both;
  }
  .cart-scrubbed .cart-button { animation-name: cart-unfold-rim; }
  .cart-scrubbed .cart-button::before { animation-name: cart-bleed; }
  .cart-scrubbed .cart-button svg { animation-name: cart-unfold-icon; }
  .cart-scrubbed .cart-button strong { animation-name: cart-unfold-badge; }
}
@keyframes cart-bleed {
  0%   { -webkit-mask-size: 0% auto, 0% auto; mask-size: 0% auto, 0% auto; filter: blur(5px) brightness(.72); opacity: 0; }
  8%   { opacity: 1; }
  40%  { -webkit-mask-size: 58% auto, 44% auto; mask-size: 58% auto, 44% auto; }
  72%  { -webkit-mask-size: 125% auto, 104% auto; mask-size: 125% auto, 104% auto; filter: blur(2.5px) brightness(.88); }
  90%  { -webkit-mask-size: 205% auto, 180% auto; mask-size: 205% auto, 180% auto; filter: blur(1px) brightness(.96); }
  100% { -webkit-mask-size: 780% auto, 780% auto; mask-size: 780% auto, 780% auto; filter: blur(0) brightness(1); opacity: 1; }
}
@keyframes cart-unfold-rim { 0% { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 rgba(252,128,25,0); } 100% { border-color: #fc8019; box-shadow: 0 6px 16px rgba(252,128,25,.28); } }
@keyframes cart-unfold-icon { 0% { color: #e8f45d; } 55%, 100% { color: #fff; } }
@keyframes cart-unfold-badge { 0% { color: #fff; background: var(--green); border-color: #fff; } 100% { color: #fc8019; background: #fff; border-color: #fc8019; } }
.site-header.is-on-light .location-button small { color: var(--muted); }
.site-header.is-on-light .location-button strong { color: var(--text); }

.hero { --hero-progress: 0; position: relative; z-index: 1; height: 176svh; background: #120d06; }
.hero__stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; color: white; background: radial-gradient(125% 95% at 50% 6%, #4c3b20 0%, #271c0e 48%, #120d06 100%); }
.hero__stage::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(72% 62% at 50% 34%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.12) 72%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.04) 48%, transparent 72%); pointer-events: none; }
.hero__media { position: absolute; inset: 0; z-index: 1; }
.hero__media picture { display: contents; }
.hero__media img { width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center 32%; transform-origin: 50% 100%; transform: translate3d(0,0,0) scale(1); will-change: transform; }
.hero__inner { position: relative; z-index: 3; flex: 1 1 auto; align-items: center; padding: 0; display: flex; justify-content: center; }
.hero__content { position: relative; isolation: isolate; width: min(1100px, 100%); text-align: center; opacity: 1; transform: translate3d(0,0,0) scale(1); will-change: opacity, transform; }
.kicker { margin: 0 0 14px; color: var(--green); font-size: 14px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero .kicker { color: #e8f45d; text-shadow: 0 2px 14px rgba(0,0,0,.95); }
.hero h1 { margin: 0; cursor: default; transition: filter .4s ease; color: #c6c2ba; font-family: var(--display-font); font-size: clamp(62px, min(6.2vw, 10vh), 100px); line-height: .94; letter-spacing: -.055em; font-weight: 700; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; text-wrap: balance; text-shadow: 0 2px 5px rgba(0,0,0,.72), 0 8px 30px rgba(0,0,0,.58), 0 0 24px rgba(246,238,220,.09); }
.hero h1 span { display: block; }
.hero h1 span + span { margin-top: .06em; }
.hero h1:hover { filter: drop-shadow(0 0 14px rgba(255,246,214,.5)) drop-shadow(0 0 36px rgba(255,236,186,.32)); }
.hero__content > p:not(.kicker) { max-width: 680px; margin: clamp(16px, 2.2vh, 24px) auto 0; color: rgba(214,210,203,.95); font-size: clamp(17px, 2.2vh, 20px); line-height: 1.5; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 5px 18px rgba(0,0,0,.62); }
.hero__content > p:not(.kicker) span { display: block; }
.hero__actions { margin-top: clamp(20px, 3vh, 30px); display: flex; justify-content: center; gap: 12px; }
.button { position: relative; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .25s; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: white; background: var(--green); }
.button--primary:hover { background: var(--green-dark); }
.button--secondary { border-color: #bdbdc2; background: rgba(255,255,255,.7); }
.button--secondary:hover { border-color: #7f7f84; background: white; }
.button--full { width: 100%; }
.hero .button--primary { color: var(--green-dark); background: #dceb5a; }
.hero .button--primary { box-shadow: 0 8px 26px rgba(0,0,0,.28); }
.hero .button--primary { overflow: hidden; }
.hero .button--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.7) 50%, transparent 78%); transform: translateX(-130%); transition: transform .65s cubic-bezier(.3,.9,.4,1); pointer-events: none; }
.hero .button--primary:hover::after { transform: translateX(130%); }
.hero .button--primary:hover { background: #e6f36a; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(214,232,86,.42), 0 8px 26px rgba(0,0,0,.3); }
.hero .button--secondary { color: white; border-color: rgba(255,255,255,.72); background: rgba(8,12,7,.78); box-shadow: 0 8px 26px rgba(0,0,0,.22); }
.hero .button--secondary:hover { border-color: #fff; background: rgba(255,255,255,.2); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 0 3px rgba(255,255,255,.1); }
.hero__scroll { position: absolute; right: clamp(16px, 3vw, 44px); bottom: clamp(14px, 2.2vh, 26px); z-index: 4; padding: 7px 15px 4px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(16,11,5,.66); display: grid; place-items: center; gap: 0; color: white; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.6); opacity: 1; }
.hero__content.is-faded { pointer-events: none; }
.hero__scroll { transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.hero__scroll:hover { border-color: rgba(255,255,255,.55); background: rgba(22,15,6,.72); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.36); }
.hero__scroll svg { width: 19px; height: 19px; animation: scroll-cue 1.8s ease-in-out infinite; }

.hero__content > * { animation: hero-rise .85s cubic-bezier(.22,1,.36,1) both; }
.hero__content > .kicker { animation-delay: 60ms; }
.hero__content > h1 { animation: hero-rise .85s cubic-bezier(.22,1,.36,1) 150ms both, hero-glow 4s ease-in-out 1.1s infinite; }
.hero__content > p:not(.kicker) { animation-delay: 270ms; }
.hero__content > .hero__actions { animation-delay: 370ms; }

/* Scroll-driven hero: runs on the compositor, so it tracks the scrollbar
   exactly in both directions with no main-thread work and no easing lag.
   JS drives the same motion as a fallback where this is unsupported. */
@supports (animation-timeline: scroll()) {
  .hero__content, .hero__media img, .hero__scroll {
    animation-timeline: scroll(root block);
    animation-range: var(--hero-start, 0px) calc(var(--hero-start, 0px) + 78vh);
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  .hero__content { animation-name: hero-recede; }
  .hero__media img { animation-name: hero-photo; }
  .hero__scroll { animation-name: hero-cue-out; }
}

@keyframes hero-recede {
  0%   { opacity: 1; transform: translate3d(0,0,0) scale(1); pointer-events: auto; }
  80%  { opacity: 0; pointer-events: none; }
  100% { opacity: 0; transform: translate3d(0,-58px,0) scale(.96); pointer-events: none; }
}
@keyframes hero-photo {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,20px,0) scale(1.1); }
}
@keyframes hero-cue-out {
  0%  { opacity: 1; }
  32% { opacity: 0; }
  100%{ opacity: 0; }
}

@keyframes hero-rise { from { opacity: 0; transform: translateY(20px); } }

/* slow breathing warmth, so the headline is not a flat white slab */
@keyframes hero-glow {
  0%, 100% { color: #b8b4ab; text-shadow: 0 2px 5px rgba(0,0,0,.72), 0 8px 30px rgba(0,0,0,.58), 0 0 16px rgba(246,238,220,.04); }
  50%      { color: #e3dfd6; text-shadow: 0 2px 5px rgba(0,0,0,.72), 0 8px 30px rgba(0,0,0,.58), 0 0 34px rgba(255,246,220,.5), 0 0 74px rgba(255,238,190,.26); }
}
@keyframes scroll-cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }

@media (min-width: 721px) {
  .hero__content::before { content: ""; position: absolute; inset: -76px -90px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(4,11,6,.6) 0%, rgba(4,11,6,.36) 50%, rgba(4,11,6,.12) 70%, transparent 82%); pointer-events: none; }
}

.service-strip { border-block: 1px solid var(--soft-line); background: white; }
.service-strip__grid { min-height: 108px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.service-strip__grid > div { min-height: 52px; padding: 0 40px; border-right: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: center; gap: 16px; }
.service-strip__grid > div:first-child { padding-left: 0; }
.service-strip__grid > div:last-child { padding-right: 0; border-right: 0; }
.service-strip svg { width: 29px; flex: none; color: var(--green); }
.service-strip span { display: grid; gap: 4px; }
.service-strip strong { font-size: 13px; }
.service-strip small { color: var(--muted); font-size: 11px; }

.about-section { padding: 118px 0; background: #f6f1e6; }
.about-lead { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: clamp(48px, 7vw, 96px); }
.about-lead h2 { max-width: 620px; margin: 0; font-family: var(--display-font); font-size: clamp(38px, 4vw, 58px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.about-lead__copy { max-width: 650px; padding-top: 24px; }
.about-lead__copy p { margin: 0; color: #50524f; font-size: 17px; line-height: 1.65; }
.about-lead__copy p + p { margin-top: 18px; }
.benefit-grid { margin-top: 72px; border-top: 1px solid #d8d1c2; border-left: 1px solid #d8d1c2; display: grid; grid-template-columns: repeat(3, 1fr); }
.benefit-grid article { min-height: 218px; padding: 32px 30px; border-right: 1px solid #d8d1c2; border-bottom: 1px solid #d8d1c2; background: rgba(255,255,255,.42); }
.benefit-grid h3 { max-width: 310px; margin: 0; font-family: var(--display-font); font-size: 20px; line-height: 1.25; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.benefit-grid p { max-width: 310px; margin: 16px 0 0; color: #63645f; font-size: 14px; line-height: 1.58; }

.product-section { position: relative; z-index: 2; margin-top: -36svh; padding: clamp(74px, 9vh, 118px) 0 110px; background: white; border-radius: clamp(26px, 3.4vw, 46px) clamp(26px, 3.4vw, 46px) 0 0; box-shadow: 0 -26px 64px rgba(0,0,0,.3); scroll-margin-top: calc(var(--header-h, 0px) + 14px); }
.section-heading { margin-bottom: 38px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.section-heading h2, .delivery-card h2 { margin: 0; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -.035em; }
.section-heading > p { max-width: 410px; margin: 0 0 3px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.section-heading--center { justify-content: center; text-align: center; }
.product-filters { margin: -18px 0 38px; display: flex; flex-wrap: wrap; gap: 9px; }
.product-filters button { min-height: 44px; padding: 0 18px; border: 1px solid #d9dedb; border-radius: 999px; color: #4d514e; background: rgba(245,247,245,.9); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.product-filters button:hover { color: var(--green); border-color: #afbeb4; background: white; transform: translateY(-1px); }
.product-filters button.active { color: white; border-color: var(--green); background: var(--green); box-shadow: 0 7px 18px rgba(25,85,47,.18); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px; }
.product-card { min-width: 0; display: flex; flex-direction: column; }
.product-card__info { flex: 1; display: flex; flex-direction: column; }
.product-card__meta { margin-top: auto; }
.product-card__ingredients { min-height: var(--ingredients-h, auto); margin: 0 0 14px; padding: 11px 12px 12px; border-radius: 10px; background: var(--surface); }
.product-card__ingredients h4 { margin: 0 0 7px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.product-card__ingredients ul { margin: 0; padding: 0 0 0 14px; columns: 2; column-gap: 18px; }
.product-card__ingredients li { break-inside: avoid; color: #4a4a4f; font-size: 11.5px; line-height: 1.6; }
.product-card__ingredients li::marker { color: var(--green); }
.product-card[hidden] { display: none; }
.product-card__visual { position: relative; height: 285px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--surface); }
.product-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-card__visual img { transform: scale(1.025); }
.product-card__badge { position: absolute; top: 14px; left: 14px; padding: 5px 8px; border: 1px solid #d2d2d7; border-radius: 6px; color: #55555a; background: rgba(255,255,255,.88); font-size: 10px; font-weight: 600; }
.product-card__info { padding: 16px 2px 0; }
.product-card__info h3 { margin: 0; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.product-card__info p { margin: 6px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.product-card__meta { margin-bottom: 5px; display: flex; gap: 8px; color: var(--muted); font-size: 11px; }
.product-card__meta span + span::before { content: "•"; margin-right: 8px; }
.product-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-card__buy strong { font-size: 16px; }
.buy-add { min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; color: #fff; background: #fc8019; box-shadow: 0 6px 16px rgba(252,128,25,.28); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s; }
.buy-add:hover { background: #e8700c; }
.buy-add:active { transform: scale(.97); }
.buy-control { display: flex; justify-content: flex-end; }
.product-card__price { display: grid; gap: 1px; }
.product-card__price small { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* Plain second line in the same voice as the 400g / portions line. */
.product-card__certs { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; }
.product-card__certs span + span::before { content: "•"; margin-right: 8px; }
.stepper { min-height: 38px; display: grid; grid-template-columns: 38px minmax(30px, auto) 38px; align-items: center; border-radius: 8px; color: #fff; background: #fc8019; box-shadow: 0 6px 16px rgba(252,128,25,.3); }
.stepper button { height: 38px; padding: 0; border: 0; border-radius: 8px; color: inherit; background: none; font-size: 18px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .15s; }
.stepper button:hover { background: rgba(255,255,255,.14); }
.stepper button:active { background: rgba(255,255,255,.24); }
.stepper button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.stepper__count { min-width: 30px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper__count.is-bumped { animation: count-bump .28s cubic-bezier(.34,1.56,.64,1); }
.buy-control.is-swapping > * { animation: buy-swap .32s cubic-bezier(.22,1,.36,1); }
@keyframes buy-swap { from { opacity: 0; transform: scale(.85); } }
@keyframes count-bump { 40% { transform: scale(1.35); } }

.how-section { padding: 100px 0; background: var(--surface); }
.how-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); }
.how-grid article { min-height: 210px; padding: 30px 38px; border-right: 1px solid #d9d9dd; display: flex; align-items: flex-start; gap: 20px; }
.how-grid article:first-child { padding-left: 0; }
.how-grid article:last-child { padding-right: 0; border: 0; }
.how-grid article > span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 12px; font-weight: 700; }
.how-grid h3 { margin: 5px 0 10px; font-size: 19px; letter-spacing: -.02em; }
.how-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.delivery-section { padding: 100px 0; }
.delivery-card { padding: 56px 6%; border: 1px solid var(--soft-line); border-radius: 18px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9%; box-shadow: 0 8px 28px rgba(0,0,0,.04); }
.delivery-card > div > p:not(.kicker) { max-width: 520px; margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.inline-pincode label, .modal label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.inline-pincode > div, #pincodeForm > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.inline-pincode input, .modal input { width: 100%; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid #bdbdc2; border-radius: 9px; outline: 0; background: white; }
.inline-pincode input:focus, .modal input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(25,85,47,.1); }
.inline-pincode output, .modal output { display: block; min-height: 20px; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.inline-pincode output.error, .modal output.error { color: #a9271d; }
.inline-pincode output.pending, .modal output.pending { color: var(--green); }

/* ---------- Legal pages (terms, policies) ---------- */
.legal { padding: calc(var(--header-h) + clamp(22px, 3.5vh, 46px)) 0 clamp(64px, 9vh, 108px); background: var(--white); }
.legal__inner { width: min(740px, calc(100% - 48px)); margin-inline: auto; }
.legal__head { padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--soft-line); }
.legal h1 { margin: 0; font-family: var(--display-font); font-size: clamp(34px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; }
.legal__meta { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.legal__body h2 { margin: 38px 0 12px; color: var(--text); font-size: 17px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin: 0 0 16px; color: #3d3d41; font-size: 15px; line-height: 1.75; }
.legal__body p:last-child { margin-bottom: 0; }
.legal__body ul { margin: 0 0 16px; padding: 0 0 0 22px; display: grid; gap: 10px; }
.legal__body li { color: #3d3d41; font-size: 15px; line-height: 1.75; }
.legal__body li::marker { color: var(--green); }
.legal__body strong { font-weight: 650; color: var(--text); }
.legal__todo { padding: 1px 7px; border: 1px dashed #c0a24a; border-radius: 5px; color: #7a5f12; background: #fdf7e3; font-size: .93em; }
.legal__body a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--green-dark); }

/* ---------- Order confirmation page ---------- */
.track { padding: calc(var(--header-h) + clamp(22px, 3.5vh, 46px)) 0 clamp(64px, 9vh, 108px); background: var(--white); }
.track__inner { width: min(680px, calc(100% - 48px)); margin-inline: auto; }
.track h1 { margin: 0; font-family: var(--display-font); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; }
.track__sub { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.track__sub a { color: var(--green); font-weight: 600; text-decoration: underline; }
.track__porter { margin: 24px 0 0; padding: 18px; border: 1px solid var(--soft-line); border-radius: 14px; background: var(--warm); }
.track__steps { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.track__email { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.track__fee { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.track__back { margin-top: 24px; }
/* Cards set their own display, which would otherwise beat [hidden]. */
.track [hidden] { display: none !important; }
.track__label { margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.track__summary { margin: 24px 0 0; padding: 18px; border: 1px solid var(--soft-line); border-radius: 14px; }
.track__summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.track__summary li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.track__total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--soft-line); display: flex; justify-content: space-between; font-size: 15px; }

@media (max-width: 720px) {
  .track { padding-top: clamp(24px, 3.5vh, 40px); }
  .track__inner { width: min(100% - 32px, 680px); }
}

footer { padding: 64px 0 24px; color: #e8e8ed; background: #202522; }
.footer-main { padding-bottom: 54px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 60px; }
.footer-brand img { width: 152px; height: auto; padding: 11px 13px; border-radius: 13px; background: #fff; }
.footer-brand p { max-width: 250px; margin: 16px 0 0; color: #a8aaa9; font-size: 13px; line-height: 1.5; }
.footer-main h3 { margin: 0 0 17px; color: white; font-size: 13px; }
.footer-main > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; }
.footer-main a { margin-bottom: 11px; color: #a8aaa9; font-size: 12px; }
.footer-main a:hover { color: white; text-decoration: underline; }
.footer-bottom { padding-top: 20px; border-top: 1px solid #3f4441; display: flex; justify-content: space-between; color: #8f9290; font-size: 11px; }

.scrim { position: fixed; inset: 0; z-index: 50; visibility: hidden; opacity: 0; background: rgba(0,0,0,.42); transition: opacity .25s, visibility .25s; }
.cart-open .scrim { visibility: visible; opacity: 1; }
.cart { position: fixed; top: 0; right: 0; z-index: 60; width: min(470px, 100%); height: 100dvh; padding: 26px; display: flex; flex-direction: column; background: white; box-shadow: -15px 0 50px rgba(0,0,0,.13); transform: translateX(102%); transition: transform .34s cubic-bezier(.2,.75,.25,1); }
.cart-open .cart { transform: none; }
.drawer-head { padding-bottom: 20px; border-bottom: 1px solid var(--soft-line); display: flex; align-items: flex-start; justify-content: space-between; }
.drawer-head p { margin: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.drawer-head h2, .modal h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
.icon-button { width: 38px; height: 38px; padding: 0; border: 1px solid #d2d2d7; border-radius: 50%; display: grid; place-items: center; background: white; font-size: 21px; cursor: pointer; }
.cart__items { overflow-y: auto; }
.cart-line { padding: 18px 0; border-bottom: 1px solid var(--soft-line); display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 14px; }
.cart-line__image { width: 76px; height: 76px; padding: 5px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: var(--surface); }
.cart-line__image img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
.cart-line__details h3 { margin: 0 0 4px; font-size: 14px; }
.cart-line__details p { margin: 0 0 8px; color: var(--muted); font-size: 10px; }
.cart-line__details strong { font-size: 13px; }
.quantity { display: grid; grid-template-columns: 27px 20px 27px; align-items: center; text-align: center; border: 1px solid #d2d2d7; border-radius: 7px; }
.quantity button { height: 29px; padding: 0; border: 0; background: none; cursor: pointer; }
.quantity span { font-size: 11px; font-weight: 600; }
.cart__empty { margin: auto; text-align: center; }
.cart__empty p { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.cart__empty a { color: var(--green); font-size: 13px; font-weight: 600; text-decoration: underline; }
.cart__summary { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--soft-line); }
.cart__summary > div { margin-bottom: 8px; display: flex; justify-content: space-between; font-size: 18px; }
.cart__summary p { margin: 0 0 18px; color: var(--muted); font-size: 11px; }

.modal { width: min(530px, calc(100% - 32px)); margin: auto; padding: 40px; border: 0; border-radius: 15px; color: var(--text); background: white; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.modal::backdrop { background: rgba(0,0,0,.5); }
.modal__close { position: absolute; top: 17px; right: 17px; }
.modal > p:not(.kicker) { margin: 12px 0 28px; color: var(--muted); font-size: 14px; }
/* Six fields overflow a small phone: the fields scroll, the action stays put. */
/* Only style the open state: an id selector here outranks the browser's own
   `dialog:not([open]) { display: none }`, which left the closed dialog
   rendering in page flow down by the footer. */
#addressModal { max-height: 88dvh; margin: auto; overflow: hidden; }
#addressModal[open] { display: flex; flex-direction: column; }
#addressModal .kicker { color: #c05600; }
.address-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.address-form__fields { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr; gap: 4px; }
/* Same small-caps label voice as INGREDIENTS and NET RETAIL PRICE. */
.address-form label { margin-top: 15px; color: #c05600; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.address-form label span { color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.address-form input { width: 100%; min-height: 46px; margin-top: 5px; padding: 0 14px; border: 1px solid #d2d2d7; border-radius: 9px; outline: 0; color: var(--text); background: #fff; font-size: 14px; }
.address-form input::placeholder { color: #8b8b90; }
.address-form input:focus { border-color: #fc8019; box-shadow: 0 0 0 3px rgba(252,128,25,.16); }
.address-form__submit { flex: none; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--soft-line); background: #fff; }
.address-form__submit .button { width: 100%; color: #fff; background: #fc8019; box-shadow: 0 6px 16px rgba(252,128,25,.28); }
.address-form__submit .button:hover { background: #e8700c; }
.address-form output { display: block; min-height: 18px; margin-bottom: 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.address-form output.error { color: #a9271d; }

.track__address { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--soft-line); color: var(--muted); font-size: 13px; line-height: 1.5; }
.track__address strong { display: block; color: var(--text); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; padding: 11px 17px; border-radius: 8px; color: white; background: #202522; box-shadow: var(--shadow); font-size: 12px; font-weight: 600; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Three steps arrive in sequence, so the numbering reads as a sequence rather
   than three cards appearing at once. */
.how-grid article { transform: translateY(28px); transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1); }
.how-grid article:nth-child(2) { transition-delay: 130ms; }
.how-grid article:nth-child(3) { transition-delay: 260ms; }

.how-grid article > span { opacity: 0; transform: scale(.45); transition: opacity .35s ease .18s, transform .62s cubic-bezier(.34,1.56,.64,1) .18s; }
.how-grid article.is-visible > span { opacity: 1; transform: scale(1); }
.how-grid article:nth-child(2) > span { transition-delay: 310ms; }
.how-grid article:nth-child(3) > span { transition-delay: 440ms; }

.how-grid article h3, .how-grid article p { opacity: 0; transform: translateY(9px); transition: opacity .55s ease .22s, transform .55s cubic-bezier(.22,1,.36,1) .22s; }
.how-grid article p { transition-delay: .3s; }
.how-grid article.is-visible h3, .how-grid article.is-visible p { opacity: 1; transform: none; }
.how-grid article:nth-child(2) h3 { transition-delay: .35s; }
.how-grid article:nth-child(2) p { transition-delay: .43s; }
.how-grid article:nth-child(3) h3 { transition-delay: .48s; }
.how-grid article:nth-child(3) p { transition-delay: .56s; }

/* ---------- Ingredient panel animation ----------
   Bullets cascade in once the card is revealed; the panel lifts on hover.
   To undo: git checkout before-ingredient-animation -- styles.css app.js */
.product-card__ingredients { transition: background-color .3s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.product-card:hover .product-card__ingredients { background: #edf4ef; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(25,85,47,.09); }
.product-card__ingredients h4 { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease .2s, transform .5s cubic-bezier(.22,1,.36,1) .2s; }
.product-card.is-visible .product-card__ingredients h4 { opacity: 1; transform: none; }
.product-card__ingredients li { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); transition-delay: calc(.28s + var(--i, 0) * 45ms); }
.product-card.is-visible .product-card__ingredients li { opacity: 1; transform: none; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .header-main { flex-wrap: wrap; row-gap: 0; }
  .category-nav { order: 4; flex-basis: 100%; margin-top: 8px; justify-content: flex-start; }
  .search { flex: 1 1 auto; }
}

@media (max-width: 980px) {
  .location-button span, .cart-button > span { display: none; }
  .hero h1 { font-size: clamp(36px, min(5.4vw, 7.4vh), 58px); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-card__visual { height: 250px; }
  .about-lead { grid-template-columns: 1fr; gap: 24px; }
  .about-lead__copy { max-width: 720px; padding-top: 0; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 32px, 1240px); }
  .site-header { position: relative; padding: 7px 0; background: linear-gradient(180deg, rgba(242,248,244,.74), rgba(242,248,244,.4)); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
  .header-main { min-height: 54px; padding: 0; }
  .brand img { width: 82px; }
  .brand { min-height: 54px; padding-inline: 4px; }
  .search { order: 3; flex-basis: 100%; height: 44px; margin-top: 7px; border-radius: 16px; }
  .header-actions { margin-left: auto; gap: 6px; }
  .location-button, .cart-button { min-width: 44px; min-height: 44px; padding-inline: 10px; border-radius: 16px; justify-content: center; }
  .category-nav { min-height: 48px; margin-top: 7px; border-radius: 18px; }
  .category-nav a { min-height: 34px; padding-inline: 10px; font-size: 12px; }
  .hero { height: 142svh; }
  .hero__stage { background: radial-gradient(150% 70% at 50% 4%, #4c3b20 0%, #271c0e 50%, #120d06 100%); }
  .hero { margin-top: 0; }
  .hero__stage { top: 0; height: 100svh; flex-direction: column; }
  .hero__stage::before { background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.08) 45%, transparent 66%); }
  .hero__inner { order: 1; flex: 1 1 auto; align-items: center; padding-block: 20px 12px; }
  .hero__media img { height: auto; }
  .hero__media { order: 2; position: relative; inset: auto; display: block; flex: 0 0 auto; min-height: 0; }
  .hero__media img { width: 108%; max-width: none; height: auto; margin-inline-start: -4%; }
  .hero__scroll { display: none; }
  .hero h1 { font-size: clamp(40px, 10.8vw, 50px); line-height: 1; }
  .hero__content > p:not(.kicker) { max-width: 440px; font-size: 16px; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__scroll { bottom: 14px; }
  .service-strip__grid { grid-template-columns: 1fr; }
  .service-strip__grid > div, .service-strip__grid > div:first-child, .service-strip__grid > div:last-child { min-height: 77px; padding: 0; border-right: 0; border-bottom: 1px solid var(--soft-line); justify-content: flex-start; }
  .service-strip__grid > div:last-child { border-bottom: 0; }
  .about-section { padding: 78px 0; }
  .about-lead h2 { font-size: 38px; }
  .about-lead__copy p { font-size: 16px; }
  .benefit-grid { margin-top: 46px; grid-template-columns: 1fr; }
  .benefit-grid article { min-height: auto; padding: 26px 24px; }
  .benefit-grid h3, .benefit-grid p { max-width: none; }
  .product-section { margin-top: -30svh; padding: 58px 0 80px; scroll-margin-top: 0; }
  .section-heading { margin-bottom: 30px; align-items: flex-start; flex-direction: column; gap: 13px; }
  .section-heading h2, .delivery-card h2 { font-size: 34px; }
  .product-filters { margin: -8px 0 28px; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
  .product-filters::-webkit-scrollbar { display: none; }
  .product-filters button { flex: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .product-card__visual { height: 185px; }
  .product-card__badge { top: 9px; left: 9px; }
  .product-card__info h3 { font-size: 14px; }
  .product-card__info p { font-size: 11px; }
  .product-card__certs { flex-direction: column; gap: 2px; }
  .product-card__certs span + span::before { content: none; }
  .product-card__buy { align-items: stretch; flex-direction: column; }
  .buy-control, .buy-add, .stepper { width: 100%; }
  .stepper { grid-template-columns: 38px 1fr 38px; }
  .product-card__ingredients { padding: 9px 9px 10px; }
  .product-card__ingredients ul { columns: 1; padding-left: 12px; }
  .product-card__ingredients li { font-size: 10.5px; line-height: 1.55; }
  .how-section { padding: 76px 0; }
  .how-grid { margin-top: 30px; grid-template-columns: 1fr; }
  .how-grid article, .how-grid article:first-child, .how-grid article:last-child { min-height: auto; padding: 25px 0; border-right: 0; border-bottom: 1px solid #d9d9dd; }
  .how-grid article:last-child { border-bottom: 0; }
  .how-grid article, .how-grid article > span, .how-grid article h3, .how-grid article p { transition-delay: 0ms; }
  .how-grid article > span { transition-delay: .12s; }
  .delivery-section { padding: 76px 0; }
  .delivery-card { padding: 34px 22px; grid-template-columns: 1fr; gap: 30px; }
  .inline-pincode > div, #pincodeForm > div { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 10px; }
  .footer-main > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { gap: 12px; }
  .cart { padding: 20px; }
  .modal { padding: 34px 22px; }
}

/* ---------- Kuttappan, the mascot ---------- */
/* Moves animate the individual translate/rotate properties, so they layer on top
   of the transform transitions that slide him in and out instead of fighting them. */
.kp { --kp-ease: cubic-bezier(.34,1.45,.64,1); --kp-move: none; position: fixed; left: 0; bottom: 0; z-index: 40; font-size: 14px; }
.kp[data-move="wave"] { --kp-move: kp-wave 1.2s ease-in-out; }
.kp[data-move="jump"] { --kp-move: kp-jump .75s ease-out; }
.kp[data-move="jolt"] { --kp-move: kp-jolt .5s ease-out; }
.kp[data-move="tilt"] { --kp-move: kp-tilt 1.4s ease-in-out; }
.kp[data-move="shake"] { --kp-move: kp-shake .8s ease-in-out; }
/* display, not visibility: his parts set visibility: visible themselves, which would win. */
.cart-open .kp { display: none; }

.kp__avatar { position: fixed; left: 18px; bottom: 18px; width: 64px; height: 64px; padding: 0; border: 3px solid white; border-radius: 50%; overflow: hidden; background: #d8d4cc; box-shadow: 0 0 0 2px var(--green), 0 10px 26px rgba(0,0,0,.24); cursor: pointer; opacity: 0; visibility: hidden; transform: scale(.4) translateY(30px); transition: transform .4s var(--kp-ease), opacity .2s, visibility 0s .4s; }
.kp__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.kp__avatar:hover { box-shadow: 0 0 0 2px #fc8019, 0 12px 30px rgba(0,0,0,.28); }
/* Visibility flips at once when showing, so focus can land; it waits out the fade when hiding. */
.kp[data-state="docked"] .kp__avatar, .kp[data-state="talk"] .kp__avatar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kp[data-state="docked"] .kp__avatar { animation: var(--kp-move), kp-bob 3.4s 1.4s ease-in-out infinite; }
.kp[data-state="talk"] .kp__avatar { animation: var(--kp-move); }

/* In full: rises from the bottom edge, cut off at the thighs. */
.kp__body { position: fixed; left: 6px; bottom: -92px; height: 300px; pointer-events: none; transform: translateY(105%) rotate(-6deg); transform-origin: 50% 100%; transition: transform .55s var(--kp-ease); }
.kp__body img { height: 100%; width: auto; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 14px 22px rgba(0,0,0,.28)); }
.kp[data-state="peek"] .kp__body { transform: none; }
.kp[data-state="peek"] .kp__body img { animation: var(--kp-move); animation-delay: .35s; }

@keyframes kp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes kp-wave { 0%, 100% { rotate: 0deg; } 30% { rotate: -3deg; } 65% { rotate: 2deg; } }
@keyframes kp-jump { 0%, 100% { translate: 0 0; } 35% { translate: 0 -12%; } 60% { translate: 0 0; } 78% { translate: 0 -4%; } }
@keyframes kp-jolt { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: -6% 0; rotate: -6deg; } 55% { translate: 3% 0; rotate: 2deg; } }
@keyframes kp-tilt { 0%, 100% { rotate: 0deg; } 30%, 70% { rotate: 6deg; } }
@keyframes kp-shake { 0%, 100% { rotate: 0deg; } 15% { rotate: -5deg; } 30% { rotate: 5deg; } 45% { rotate: -4deg; } 60% { rotate: 4deg; } 75% { rotate: -2deg; } }

/* The little symbol that pops over his head: ★ ! ? ♪ ♥ */
.kp__emote { position: fixed; left: 62px; bottom: 68px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: white; background: #fc8019; box-shadow: 0 4px 12px rgba(252,128,25,.45); font-size: 14px; font-weight: 800; line-height: 1; pointer-events: none; opacity: 0; }
.kp[data-state="peek"] .kp__emote { left: 128px; bottom: 196px; width: 32px; height: 32px; font-size: 17px; }
.kp[data-emote="on"]:not([data-state="quiz"], [data-state="hidden"]) .kp__emote { animation: kp-emote 2.6s ease-out forwards; }
@keyframes kp-emote { 0% { opacity: 0; scale: .2; translate: 0 6px; } 12% { opacity: 1; scale: 1.25; translate: 0 0; } 22% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -10px; } }

.kp__bubble { position: fixed; left: 96px; bottom: 24px; width: max-content; max-width: min(300px, calc(100vw - 112px)); padding: 14px 34px 14px 16px; border-radius: 16px 16px 16px 4px; color: var(--text); background: white; box-shadow: 0 14px 40px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.04); line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transform-origin: 0 100%; transition: opacity .2s, transform .3s var(--kp-ease), visibility 0s .3s; }
.kp[data-state="talk"] .kp__bubble, .kp[data-state="peek"] .kp__bubble { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.kp[data-state="peek"] .kp__bubble { left: 172px; bottom: 112px; max-width: min(300px, calc(100vw - 188px)); }
/* The full line sits invisibly underneath, so the bubble is its final size while the words type in. */
.kp__line { position: relative; margin: 0; }
.kp__ghost { visibility: hidden; }
.kp__typed { position: absolute; inset: 0; }
.kp[data-talking] .kp__typed::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #fc8019; animation: kp-caret .5s steps(2) infinite; }
@keyframes kp-caret { 50% { opacity: 0; } }
.kp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kp__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.kp__actions:not(:empty) { margin-top: 10px; }
.kp__btn { min-height: 34px; padding: 0 12px; border: 1px solid #bdbdc2; border-radius: 999px; background: white; color: var(--text); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.kp__btn:hover { border-color: #7f7f84; }
.kp__btn--primary { border-color: #fc8019; color: white; background: #fc8019; }
.kp__btn--primary:hover { border-color: #e56f0c; background: #e56f0c; }
.kp__close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.kp__close:hover { background: var(--surface); color: var(--text); }

.kp__quiz { position: fixed; left: 18px; bottom: 18px; width: min(390px, calc(100vw - 36px)); max-height: calc(100dvh - 120px); overflow-y: auto; padding: 18px; border-radius: 18px; background: white; box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97); transform-origin: 0 100%; transition: opacity .2s, transform .3s var(--kp-ease), visibility 0s .3s; }
.kp[data-state="quiz"] .kp__quiz { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kp__quiz-head { position: relative; display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.kp__quiz-head img { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 2px var(--green); object-fit: cover; background: #d8d4cc; }
.kp__quiz-head img[data-move="jump"] { animation: kp-jump .75s ease-out; }
.kp__quiz-head img[data-move="shake"] { animation: kp-shake .8s ease-in-out; }
.kp__quiz-head img[data-move="tilt"] { animation: kp-tilt 1.4s ease-in-out; }
.kp__quiz-head strong { display: block; font-size: 15px; }
.kp__quiz-head span { color: var(--muted); font-size: 12px; }
.kp__quiz-head .kp__close { top: -4px; right: -6px; }
.kp__question { margin: 16px 0 12px; font-family: var(--display-font); font-size: 19px; line-height: 1.3; letter-spacing: -.01em; outline: none; }
.kp__options { display: grid; gap: 8px; }
.kp__options[hidden] { display: none; }
.kp__option { min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--text); font: inherit; font-size: 14px; font-weight: 550; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.kp__option:hover:not(:disabled) { border-color: var(--green); background: #f3f8f4; }
.kp__option:disabled { cursor: default; color: var(--muted); }
.kp__option.is-right { border-color: var(--green); background: #e3f0e7; color: var(--green-dark); font-weight: 700; }
.kp__option.is-right::after { content: " ✓"; }
.kp__option.is-wrong { border-color: #c4483b; background: #fbeae8; color: #8e2a20; animation: kp-shake .4s ease-in-out; }
.kp__feedback { margin: 12px 0 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.kp__feedback:empty { display: none; }
.kp__quiz-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kp__quiz-actions:not(:empty) { margin-top: 14px; }
.kp__quiz-actions .button { min-height: 42px; padding: 0 16px; }

/* In the cart: he leans in from behind the drawer's left edge, waves, and suggests a gravy.
   On narrower screens there's no room beside the drawer, so he slides in from its right
   edge and stands on the checkout summary instead. */
.kpc { --kp-ease: cubic-bezier(.34,1.45,.64,1); position: absolute; right: 100%; bottom: 0; width: 0; height: 0; z-index: 2; visibility: hidden; pointer-events: none; transition: visibility 0s .55s; }
.kpc[data-in] { visibility: visible; transition-delay: 0s; }
.kpc__body { position: absolute; right: 0; bottom: 0; width: 180px; height: 232px; overflow: hidden; }
.kpc__body img { position: absolute; right: -16px; bottom: -86px; width: auto; height: 300px; transform: translateX(118%) rotate(14deg); transform-origin: 50% 100%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); transition: transform .55s var(--kp-ease); }
.kpc[data-in] .kpc__body img { transform: none; animation: kpc-wave .85s .5s ease-in-out 2; }
@keyframes kpc-wave { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 60% { rotate: 5deg; } }
.kpc__badge { position: absolute; right: 118px; bottom: 214px; min-width: 32px; height: 28px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; color: white; background: #fc8019; box-shadow: 0 4px 12px rgba(252,128,25,.45); font-size: 13px; font-weight: 800; opacity: 0; }
.kpc[data-in][data-badge="on"] .kpc__badge { animation: kp-emote 2.6s .45s ease-out both; }
.kpc__bubble { position: absolute; right: 168px; bottom: 120px; width: 270px; padding: 14px 16px; border-radius: 16px 16px 4px 16px; color: var(--text); background: white; box-shadow: 0 14px 40px rgba(0,0,0,.28); font-size: 14px; line-height: 1.45; pointer-events: auto; opacity: 0; transform: translateX(12px) scale(.95); transform-origin: 100% 100%; transition: opacity .2s, transform .3s var(--kp-ease); }
.kpc[data-in] .kpc__bubble { opacity: 1; transform: none; transition-delay: .45s; }
.kpc__line { position: relative; margin: 0; }
.kpc[data-talking] .kp__typed::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #fc8019; animation: kp-caret .5s steps(2) infinite; }
.kpc .kp__actions:not(:empty) { margin-top: 10px; }

/* Beside the drawer he stands outside its box, which a modal dialog would clip. The items list scrolls on its own. */
@media (min-width: 921px) { .cart[open] { overflow: visible; } }
@media (max-width: 920px) {
  .kpc { right: 0; bottom: var(--kpc-bottom, 140px); width: 100%; }
  .kpc__body { width: 124px; height: 158px; }
  .kpc__body img { right: -10px; bottom: -58px; height: 214px; }
  .kpc__badge { right: 76px; bottom: 140px; }
  .kpc__bubble { right: 112px; bottom: 26px; width: auto; max-width: min(300px, calc(100% - 128px)); font-size: 13px; }
}

/* "Show me": the suggested product card glows twice. */
[data-kp-spotlight="on"] { animation: kp-spotlight 1.1s ease-in-out 2; }
@keyframes kp-spotlight { 0%, 100% { box-shadow: 0 0 0 0 rgba(252,128,25,0); } 50% { box-shadow: 0 0 0 6px rgba(252,128,25,.55); } }

@media (max-width: 620px) {
  .kp__avatar { left: 12px; bottom: 12px; width: 56px; height: 56px; }
  .kp__emote { left: 50px; bottom: 56px; }
  .kp__bubble { left: 78px; bottom: 14px; max-width: calc(100vw - 92px); font-size: 13px; }
  .kp__body { height: 220px; bottom: -68px; left: 0; }
  .kp[data-state="peek"] .kp__emote { left: 88px; bottom: 140px; width: 28px; height: 28px; font-size: 15px; }
  .kp[data-state="peek"] .kp__bubble { left: 112px; bottom: 92px; max-width: calc(100vw - 124px); }
  .kp__quiz { left: 0; bottom: 0; width: 100%; max-height: 86dvh; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .how-grid article, .how-grid article > span, .how-grid article h3, .how-grid article p { opacity: 1; transform: none; }
  .product-card__ingredients h4, .product-card__ingredients li { opacity: 1; transform: none; }
  .hero { --hero-progress: 0 !important; height: auto; }
  .hero__stage { position: static; height: auto; min-height: 100svh; }
  .hero__content { opacity: 1; transform: none; filter: none; }
  .hero__media img { transform: none; }
  .product-section { margin-top: 0; box-shadow: none; }
  .kp__body, .kp__bubble, .kp__quiz, .kp__avatar { transform: none !important; }
  .kp[data-emote="on"] .kp__emote, .kpc[data-badge="on"] .kpc__badge { opacity: 1; }
  .kpc__body img { transform: none; }
}

@media (max-width: 720px) {
  .legal { padding-top: clamp(24px, 3.5vh, 40px); }   /* header is in flow below 720px */
  .legal__inner { width: min(100% - 32px, 740px); }
  .legal__body h2 { margin-top: 30px; font-size: 16px; }
  .legal__body p { font-size: 14.5px; line-height: 1.7; }
}

/* ---------- Sign-in sheet (auth.js) ---------- */
.auth-modal { max-width: 440px; }
.auth-modal h2 { margin-top: 2px; }
.auth-modal > p:not(.kicker) { margin: 10px 0 22px; }
.auth-step { display: grid; gap: 10px; }
.auth-step[hidden] { display: none; }
.auth-google, .auth-phone { width: 100%; min-height: 50px; gap: 10px; border-radius: 12px; font-size: 15px; }
.auth-google { border: 1px solid #d2d2d7; color: var(--text); background: #fff; }
.auth-google:hover { border-color: #9a9aa0; background: #fafafa; }
.auth-google svg { width: 20px; height: 20px; }
.auth-phone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.auth-fine { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-step label { margin: 0; }
.auth-phone-field { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid #bdbdc2; border-radius: 9px; background: #fff; }
.auth-phone-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(25,85,47,.1); }
.auth-phone-field span { padding: 0 4px 0 14px; color: var(--muted); font-weight: 600; }
.modal .auth-phone-field input { border: 0; box-shadow: none; }
.modal .auth-code { min-height: 56px; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; }
.auth-link { min-height: 40px; padding: 0; border: 0; color: var(--green); background: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.auth-link:disabled { color: var(--muted); cursor: default; }
.auth-message { display: block; min-height: 20px; margin-top: 12px; font-size: 13px; line-height: 1.45; }
.auth-message.error { color: #a9271d; }
.auth-message.ok { color: var(--green); font-weight: 600; }

/* The verified mobile in the address form: shown, not editable. */
.has-verified-phone #addrPhone { color: var(--muted); background: var(--surface); }
.has-verified-phone label[for="addrPhone"]::after { content: " · verified ✓"; color: var(--green); letter-spacing: .04em; }

/* ---------- My orders (account.html) ---------- */
.account__me { margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--soft-line); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.account__me strong { display: block; font-size: 16px; }
.account__me span { color: var(--muted); font-size: 13px; }
.account__me[hidden], .track__signin[hidden] { display: none; }
.track__signin { margin-top: 20px; }
.account__orders { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.account__order { padding: 16px 18px; border: 1px solid var(--soft-line); border-radius: 14px; }
.account__order-head, .account__order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account__order-head strong { font-size: 15px; }
.account__status { padding: 4px 10px; border-radius: 999px; background: #fdecd9; color: #8a4a0c; font-size: 12px; font-weight: 700; }
.account__status.is-delivered { background: #e3f0e7; color: var(--green-dark); }
.account__status.is-cancelled, .account__status.is-refunded { background: var(--surface); color: var(--muted); }
.account__lines { margin: 10px 0; color: var(--text); font-size: 14px; line-height: 1.5; }
.account__order-foot { color: var(--muted); font-size: 13px; }
.account__order-foot a { min-height: 40px; display: inline-flex; align-items: center; color: var(--green); font-weight: 700; }

/* "Deliver to" before paying (checkout.js). */
.deliver-modal { max-width: 440px; }
.deliver-modal h2 { margin-top: 2px; }
.deliver-card { position: relative; margin: 18px 0 0; padding: 16px 70px 16px 16px; border: 1px solid var(--soft-line); border-radius: 12px; background: var(--surface); display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.deliver-card strong { font-size: 15px; }
.deliver-card span { color: var(--muted); }
.deliver-change { position: absolute; top: 10px; right: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--green); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.deliver-change:hover { background: #fff; }
.deliver-total { margin: 18px 0 0; display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.deliver-total strong { font-size: 20px; }
.deliver-note { margin: 6px 0 18px; color: var(--muted); font-size: 12px; }
.deliver-pay { min-height: 50px; font-size: 16px; color: #fff; background: #fc8019; box-shadow: 0 6px 16px rgba(252,128,25,.28); }
.deliver-pay:hover { background: #e8700c; }

/* ---------- Phones ----------
   Kept last so it wins ties with the rules above. */

/* The page runs edge to edge (viewport-fit=cover): keep content clear of the
   notch in landscape and fixed controls clear of the home bar. Portrait insets are 0. */
.shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.cart { padding-bottom: calc(26px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.cart__items { overscroll-behavior: contain; }
.toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
a, button, label { -webkit-tap-highlight-color: transparent; }

/* Sticky cart bar: phones only (created by app.js once the cart has something in it). */
.cart-bar { display: none; }

@media (max-width: 720px) {
  /* 16px inputs: anything smaller and iOS Safari zooms the whole page on focus. */
  .search input, .modal input, .inline-pincode input, .address-form input { font-size: 16px; }

  /* Thumb-sized targets (40-44px). */
  .category-nav { min-height: 52px; }
  .category-nav a { min-height: 40px; font-size: 13px; }
  .buy-add { min-height: 44px; font-size: 13px; }
  .stepper { min-height: 44px; grid-template-columns: 44px 1fr 44px; }
  .stepper button { height: 44px; }
  .quantity { grid-template-columns: 40px 26px 40px; }
  .quantity button { height: 40px; font-size: 17px; }
  .quantity span { font-size: 13px; }
  .icon-button { width: 42px; height: 42px; }
  .footer-main a { margin-bottom: 0; padding: 9px 0; font-size: 13px; }
  .footer-main h3 { margin-bottom: 6px; }

  /* Small print a phone can actually read. */
  .product-card__badge { font-size: 11px; }
  .product-card__info p { font-size: 12.5px; }
  .product-card__ingredients h4 { font-size: 11px; }
  .product-card__ingredients li { font-size: 12px; }
  .product-card__meta, .product-card__certs { font-size: 12px; }
  .product-card__price small { font-size: 11px; }
  .service-strip small { font-size: 12px; }
  .cart-button strong { min-width: 20px; height: 20px; font-size: 11px; }
  .cart-line__details p, .cart__summary p { font-size: 12px; }
  .footer-bottom { font-size: 12px; }
  .track__label { font-size: 11px; }
  .address-form label { font-size: 11px; }

  /* The cart drawer fills the screen; its checkout button stays above the home bar. */
  .cart { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* Address form: a sheet from the bottom, nearly full height, so every field is
     reachable and "Save and pay" is always on screen. */
  #addressModal[open] { width: 100%; max-width: 100%; height: calc(100dvh - 18px); max-height: none; margin: auto 0 0; padding: 26px 18px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }

  .cart-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 35; min-height: 58px; padding: 0 14px 0 18px; border: 0; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; background: var(--green); box-shadow: 0 14px 34px rgba(15,61,34,.35); font: inherit; text-align: left; cursor: pointer; transition: transform .38s cubic-bezier(.34,1.3,.64,1), visibility 0s; }
  .cart-bar:active { background: var(--green-dark); }
  .cart-bar[hidden], .cart-open .cart-bar { visibility: hidden; transform: translateY(150%); transition: transform .3s ease, visibility 0s .3s; }
  .cart-bar__summary { display: grid; gap: 2px; }
  .cart-bar__summary strong { font-size: 15px; }
  .cart-bar__summary small { color: rgba(255,255,255,.78); font-size: 12px; }
  .cart-bar__cta { display: flex; align-items: center; gap: 2px; padding: 9px 10px 9px 14px; border-radius: 11px; background: rgba(255,255,255,.14); font-size: 14px; font-weight: 700; }
  .cart-bar__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  /* With the bar showing, everything that sits on the bottom edge moves up above it. */
  .has-cart-bar footer { padding-bottom: calc(24px + 70px + env(safe-area-inset-bottom)); }
  .has-cart-bar .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .has-cart-bar .kp__avatar { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .has-cart-bar .kp__emote { bottom: calc(126px + env(safe-area-inset-bottom)); }
  .has-cart-bar .kp[data-state="talk"] .kp__bubble { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* In full, he rises from behind the bar: lifted by its height, clipped at its top edge. */
  .has-cart-bar .kp__body { bottom: calc(2px + env(safe-area-inset-bottom)); clip-path: inset(0 0 68px 0); }
  .has-cart-bar .kp[data-state="peek"] .kp__bubble { bottom: calc(162px + env(safe-area-inset-bottom)); }
  .has-cart-bar .kp[data-state="peek"] .kp__emote { bottom: calc(210px + env(safe-area-inset-bottom)); }

  /* The toast would sit on top of the cart's checkout button; inside the cart it shows at the top. */
  .cart-open .toast { top: calc(14px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -12px); }
  .cart-open .toast.show { transform: translate(-50%, 0); }
}

/* Phones on their side: wide enough for the desktop layout but under 500px tall,
   so the two-row header would cover a third of the screen. Keep one compact row
   (logo, search, location, cart) and size the hero to fit. */
@media (min-width: 721px) and (max-height: 500px) {
  .site-header { padding: 6px 0; }
  .header-main { min-height: 50px; }
  .category-nav { display: none; }
  .brand { min-height: 46px; }
  .brand img { width: 62px; }
  .search { height: 42px; }
  .location-button, .cart-button { min-height: 42px; }
  .hero__inner { padding-top: 56px; }
  .hero .kicker { margin-bottom: 8px; font-size: 12px; }
  .hero h1 { font-size: 40px; }
  .hero__content > p:not(.kicker) { margin-top: 10px; font-size: 15px; }
  .hero__actions { margin-top: 14px; }
  .hero__actions .button { min-height: 44px; }
}