/* BhumiSutra prototype styles.
   Layout concept: a quiet ivory page, one column on phones, an editorial two-column split on wide screens.
   Ivory paper by day; a dark theme follows the device setting (change 62, at the end of this file). Colours come from the logo and packaging reference. */
:root {
  --paper: #FAF7F0;
  --panel: #F2EDE1;
  --card: #FFFDF8;
  --ink: #25261F;
  --ink-soft: #5B5B4D;
  --olive: #424B22;
  --olive-deep: #343B1A;
  --turmeric: #D18500;
  --turmeric-ink: #8A5600;
  --clay: #9E4A30;
  --line: #DCD4C2;
  --footer-bg: #E6EED8;
  --btn: #25261F;
  --btn-hover: #141510;
  --focus: #1F5F8B;
  --display: "Alegreya Sans", Seravek, "Gill Sans", Calibri, system-ui, sans-serif;
  --body: "Alegreya Sans", Seravek, "Gill Sans", Calibri, system-ui, sans-serif;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.6vw, 3.3rem);
  --radius: 6px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Safety net (owner report, change 42): nothing may push the page sideways on a phone. Layouts are also fixed at the source. */
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-text)/1.28 var(--body); /* 20% tighter than 1.6 (owner request, change 40) */
  padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px));
}
img { max-width: 100%; height: auto; }
a { color: var(--olive); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--olive-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: var(--t-head); letter-spacing: -.005em; font-weight: 300; }
h2 { font-size: var(--t-head); font-weight: 300; }
h3 { font-size: var(--t-subtitle); font-family: var(--body); font-weight: 500; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--olive); color: #fff; padding: 10px 14px; z-index: 50; border-radius: var(--radius); }
.skip:focus { top: 8px; color: #fff; }
.muted { color: var(--ink-soft); font-size: var(--t-text); }
.center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.measure { max-width: 65ch; }
.section { padding-block: clamp(2.75rem, 7vw, 6rem); }
.section-tight { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.band { background: var(--panel); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: var(--t-text); font-weight: 700; color: var(--turmeric-ink); margin-bottom: .6em; }
.lede { font-size: var(--t-subtitle); color: var(--ink-soft); max-width: 60ch; font-weight: 500; }
.section-head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; justify-content: space-between; }
.split { display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split > *, .split > .make-main > * { min-width: 0; }

/* Header, nav */
/* Fixed header. The centred brand row scrolls away; the nav row stays at the top of the screen.
   Sticky with a negative offset, so the page never jumps when the header changes state. */
#app-header { display: contents; }
/* Hold the page body back until the header is in place, so the header never pushes content down (layout shift). */
@media (scripting: enabled) { #app-header:empty ~ main { visibility: hidden; } }
/* Header: menu, brand, search. Slides away while reading down (is-hidden), back on the way up. */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(250, 247, 240, .96); border-bottom: 1px solid var(--line); transition: transform .35s cubic-bezier(.2, .65, .25, 1), box-shadow .3s ease; }
@supports (backdrop-filter: blur(1px)) { .site-header { background: rgba(250, 247, 240, .93); backdrop-filter: saturate(1.2) blur(10px); } }
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
html { scroll-padding-top: 64px; }
.header-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 60px; }
.header-bar > .menu-btn { justify-self: start; }
.brand { justify-self: center; display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--display); font-size: 1.35rem; letter-spacing: .08em; }
.icon-btn { position: relative; width: 48px; height: 48px; display: inline-grid; place-items: center; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; border-radius: 50%; }
.icon-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.icon-btn:hover { color: var(--olive-deep); background: rgba(66, 75, 34, .06); }
.header-bar > .icon-btn:last-child { justify-self: end; }
.menu-btn .ico-close, .menu-open .menu-btn .ico-open, .menu-label { display: none; }
/* Change 117: on Ask, once a question has been answered, the search icon shows as a refresh icon (new conversation). */
.search-btn .ico-new, html.chat-answered body[data-page="search"] .search-btn .ico-open { display: none; }
html.chat-answered body[data-page="search"] .search-btn .ico-new { display: block; }
/* Open: the X and the word Close side by side. */
.menu-open .menu-btn { display: inline-flex; align-items: center; width: auto; gap: var(--sp-1); padding: 0 .75rem 0 .6rem; border-radius: 999px; }
.menu-open .menu-label { display: inline; font-weight: 700; font-size: var(--t-text); }
/* Narrow phones: while the menu is open the name is hidden, so Close never runs into it. */
@media (max-width: 430px) { .menu-open .brand-name { display: none; } }
.menu-open .menu-btn .ico-close { display: block; }
.menu-count { position: absolute; top: 4px; right: 0; transform: scale(.85); }
/* The menu drops down over the page, so opening and closing it never moves the page underneath. */
.site-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); box-shadow: 0 18px 30px -22px rgba(30, 30, 10, .45); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; padding-bottom: var(--float-b); }
.site-menu[hidden] { display: none; }
/* Search drops down the same way as the menu. */
.menu-inner { padding-block: 1rem 1.5rem; display: grid; gap: var(--sp-4); }
.menu-main { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-item + .menu-item { border-top: 1px solid var(--line); }
.menu-row { display: flex; align-items: stretch; gap: var(--sp-2); }
.menu-page-link { flex: 1; display: flex; align-items: center; min-height: 56px; font-family: var(--display); font-size: var(--t-sub); color: var(--ink); text-decoration: none; font-weight: 400; }
.menu-page-link:hover > span { text-decoration: underline; text-underline-offset: 6px; }
.menu-page { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; min-height: 56px; margin-right: -.75rem; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); }
.menu-page-link[aria-current="page"] > span { color: var(--olive-deep); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-page .chev { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; flex: none; }
.menu-page[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu-sub { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--turmeric); }
/* Space below the list sits inside it, so the list folds all the way shut. */
.menu-sub li:last-child { padding-bottom: .75rem; }
.menu-sub[hidden] { display: none; }
.menu-sub a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.menu-sub a:hover { text-decoration: underline; }
@media (min-width: 900px) { .header-bar { min-height: 68px; } .brand-name { font-size: 1.6rem; } .menu-main { max-width: 640px; } }
.cart-count { background: var(--olive); color: #fff; border-radius: 999px; font-size: .78rem; min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; padding: 0 .35rem; font-variant-numeric: tabular-nums; }
.cart-count[hidden] { display: none; }
@media (max-width: 560px) {
}
.context-bar { background: #FFF6E2; border-bottom: 1px solid #EAD9AE; padding-block: .55rem; font-size: var(--t-text); }
.context-bar .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }
/* Change 104: on phones the sentence has its own line and the two actions sit below it, each kept on one line.
   Safari squeezed "Return to it" onto two lines over the end of the sentence (owner's screenshot, 25 Oct 2026). */
.context-bar a, .context-bar .linklike { white-space: nowrap; }
@media (max-width: 859px) { .context-bar .wrap > span { flex: 1 1 100%; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.25rem; border-radius: var(--radius); border: 1.5px solid transparent; font: 600 var(--t-text)/1.2 var(--body); text-decoration: none; cursor: pointer; text-align: center; }
.btn-sm { min-height: 44px; padding: .45rem .9rem; font-size: var(--t-text); }
.btn-primary { background: var(--btn); color: #FBF8EF; }
.btn-primary:hover { background: var(--btn-hover); color: #fff; }
.btn-secondary { background: transparent; color: var(--btn); border-color: var(--btn); }
.btn-secondary:hover { background: var(--panel); }
.btn-quiet { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--ink-soft); }
.btn:disabled { opacity: .65; cursor: progress; }
.btn-block { width: 100%; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--olive); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block: var(--sp-4); }
.actions.stack { flex-direction: column; }

/* Chips: pack contents, required additions and optional additions never look alike (S-01 critical rule) */
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t-text); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 3px; white-space: nowrap; }
.chip-pack { background: var(--olive); color: #FBF8EF; }
.chip-pack::before { content: ""; width: .55rem; height: .55rem; background: #FBF8EF; border-radius: 1px; }
.chip-add { background: #FFF3D6; color: var(--turmeric-ink); border: 1.5px solid var(--turmeric-ink); }
.chip-add::before { content: "+"; font-size: var(--t-text); line-height: 1; }
.chip-opt { color: var(--ink-soft); border: 1.5px dashed #857D67; background: transparent; }
.chip-yours { background: transparent; color: var(--clay); border: 1.5px solid var(--clay); }

/* Evidence labels (D-08) */
.evidence { font-size: var(--t-text); margin-block: var(--sp-2); }
.evidence summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink-soft); list-style: none; min-height: 32px; }
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary::before { content: "i"; font: 700 .7rem/1 var(--body); width: 1.1rem; height: 1.1rem; display: inline-grid; place-items: center; border: 1px solid var(--ink-soft); border-radius: 50%; }
.evidence-name { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: var(--t-text); }
.evidence p { margin: var(--sp-1) 0 0; color: var(--ink-soft); max-width: 50ch; }

/* Placeholder pack (illustrative) */
.pack { --hue: var(--olive); font-size: 16px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4.8px; text-align: center;
  background: linear-gradient(180deg, #FBF7EC, #F2EADB); border: 1px solid #E2D7BF; border-radius: 4px; padding: 14.4px 11.2px 33.6px; aspect-ratio: 3 / 4; max-width: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 22px -16px rgba(60,50,20,.45); overflow: hidden; }
.pack img { width: 34px; height: 34px; }
.pack-name { font-family: var(--display); color: color-mix(in srgb, var(--hue) 72%, #1d1a10); font-size: 1.05em; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; }
.pack-kind { font-size: .62em; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.pack-band { position: absolute; left: 0; right: 0; bottom: 19.2px; height: 7.2px; background: var(--hue); opacity: .85; }
.pack-tag { position: absolute; bottom: 4px; left: 0; right: 0; font-size: .58em; letter-spacing: .14em; text-transform: uppercase; color: #6F6855; }
.pack-xs { width: 64px; padding: 6.4px 4.8px 20.8px; }
.pack-xs img { width: 18px; height: 18px; }
.pack-xs .pack-name { font-size: .55em; }
.pack-xs .pack-kind, .pack-xs .pack-tag { display: none; }
.pack-xs .pack-band { bottom: 7.2px; height: 4.8px; }
.pack-sm { width: 100%; }
.pack-md { width: 150px; }
.pack-lg { width: min(240px, 60%); }
.pack-lg .pack-name { font-size: 1.4em; }
.dish { margin: 0; text-align: center; }
.dish figcaption { font-size: var(--t-text); color: var(--ink-soft); }

/* Hero and transformation strip (D-03) */
.hero { padding-block: clamp(2.25rem, 8vw, 6.5rem); border-bottom: 1px solid var(--line); }
.hero h1 { font-size: var(--t-head); line-height: 1.08; letter-spacing: -.01em; font-weight: 300; }
.hero .eyebrow { letter-spacing: .22em; }
.hero-grid { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }
.hero-copy { min-width: 0; }
.transform { display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; gap: var(--sp-2); align-items: center; }
.t-step { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.t-step .pack-md { width: 100%; max-width: 130px; }
.t-plus { font-family: var(--display); font-size: var(--t-head); color: var(--turmeric); font-weight: 300; }
.t-adds { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-1); font-size: var(--t-text); }
.t-adds li { border: 1.5px dashed #857D67; border-radius: 4px; padding: .3rem .5rem; background: var(--card); text-align: center; }
@media (max-width: 520px) {
  .transform { grid-template-columns: 1fr auto 1fr; }
  .transform .t-step:last-child { grid-column: 1 / -1; }
  .transform .t-plus:nth-of-type(4) { display: none; }
}

.steps-3 { list-style: none; counter-reset: s; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.steps-3 li { counter-increment: s; padding-top: 2.6rem; position: relative; }
.steps-3 li::before { content: counter(s); position: absolute; top: 0; left: 0; font-family: var(--display); font-size: var(--t-head); color: var(--turmeric-ink); line-height: 1; font-weight: 300; }

/* Categories and cards */
.cat-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); margin-bottom: var(--sp-4); }
.cat-link { display: flex; flex-direction: column; gap: var(--sp-1); padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--card); color: var(--ink); min-height: 100%; }
.cat-link:hover { border-color: var(--olive); }
.cat-name { font-family: var(--display); font-size: var(--t-subtitle); color: var(--olive); font-weight: 500; }
.cat-line { color: var(--ink-soft); font-size: var(--t-text); }
.grid-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.product-card .card-media { display: block; padding: 1rem 1rem 0; background: var(--panel); overflow: hidden; }
.product-card .card-media .pack { transition: transform .7s cubic-bezier(.2, .65, .25, 1); transform-origin: bottom center; }
.card { transition: border-color .3s ease, box-shadow .4s ease; }
@media (hover: hover) {
  .product-card:hover { border-color: #C9BEA5; box-shadow: 0 18px 36px -28px rgba(40, 36, 20, .6); }
  .product-card:hover .card-media .pack { transform: translateY(-4px) scale(1.035); }
}
.product-card .card-media .pack { width: 46%; margin: 0 auto -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card-title { font-family: var(--display);  font-size: var(--t-subtitle); margin: 0; font-weight: 500; }
.card-title a { text-decoration: none; color: var(--ink); }
.card-title a:hover { color: var(--olive); text-decoration: underline; }
.taste { color: var(--ink-soft); font-style: italic; margin: 0; }
.facts { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0; font-size: var(--t-text); }
.facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-2); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }
.facts-wide div { grid-template-columns: 6rem 1fr; }
.unverified { font-size: var(--t-text); text-transform: uppercase; letter-spacing: .06em; color: var(--clay); white-space: nowrap; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: .5rem; }
.price { font-weight: 700; font-variant-numeric: tabular-nums; }
.price-lg { font-size: var(--t-sub); font-family: var(--display); font-weight: 400; }
.after-add { margin: var(--sp-1) 0 0; font-size: var(--t-text); }

.addition-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.addition-list.cols { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.addition-list li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.addition-list p { margin: var(--sp-1) 0 0; }
.add-head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; justify-content: space-between; }
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.tick-list li { padding-left: 1.6rem; position: relative; }
.tick-list li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .7rem; height: .4rem; border-left: 2px solid var(--olive); border-bottom: 2px solid var(--olive); transform: rotate(-45deg); }

.grid-answers { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.answer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; scroll-margin-top: 1rem; }
.answer h3 { font-family: var(--display);  font-size: var(--t-subtitle); font-weight: 500; }
.answer-lead { font-weight: 600; }
.answer details summary, .why summary, details > summary { cursor: pointer; min-height: 32px; }
.flash { outline: 2px solid var(--turmeric); outline-offset: 4px; }
.empty { color: var(--ink-soft); border: 1px dashed var(--line); padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--card); }

/* Product page */
.crumbs { font-size: var(--t-text); color: var(--ink-soft); margin-bottom: var(--sp-3); }
.pdp-top { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-4); }
@media (min-width: 860px) { .pdp-top { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.pdp-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: end; background: var(--panel); padding: 1.5rem; border-radius: var(--radius); }
.pdp-media .pack-lg { width: 100%; }
.pdp-buy { min-width: 0; }
.pdp-buy h1 { font-size: var(--t-head); font-weight: 300; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block: var(--sp-3); }
.select-qty { min-height: 48px; padding: 0 .6rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card); font: inherit; color: var(--ink); }
.contract { display: grid; gap: var(--sp-3); margin-block: var(--sp-3) var(--sp-4); }
@media (min-width: 760px) { .contract { grid-template-columns: 1fr 1fr; } }
.contract-col { padding: 1.1rem 1.2rem; border-radius: var(--radius); min-width: 0; }
.contract-col.in-pack { background: #EEF0E2; border: 1px solid #C9CDAE; }
.contract-col.you-add { background: #FFF8E8; border: 1.5px solid #E2C27F; }
.col-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.col-head h3 { margin: 0; }
.method { padding-left: 1.4rem; display: grid; gap: var(--sp-2); }
.method li::marker { font-weight: 700; color: var(--turmeric-ink); }
.method li.yours { color: var(--clay); }
.method li.yours::after { content: "Your addition"; margin-left: var(--sp-2); font-size: var(--t-text); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--clay); border-radius: 3px; padding: 0 .3rem; white-space: nowrap; }
.why summary { list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary h2 { display: inline; }
.why summary::after { content: " Show"; font-size: var(--t-text); color: var(--olive); text-decoration: underline; }
.why[open] summary::after { content: " Hide"; }
.why.closing summary::after { content: " Show"; }
.combo h3 { font-family: var(--display);  font-size: var(--t-subtitle); margin-bottom: var(--sp-1); font-weight: 500; }
.link-list { padding-left: 1.1rem; }
.link-list li { margin-block: var(--sp-1); }
.facts-panel h3 { margin-top: var(--sp-4); }
.demo-note, .review-note { font-size: var(--t-text); color: var(--clay); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: min(280px, 100%); font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--ink-soft); font-size: var(--t-text); padding-bottom: .3rem; }
th, td { text-align: left; padding: .4rem 1.5rem .4rem 0; border-bottom: 1px solid var(--line); }
th { font-weight: 500; }

/* Create, search, ingredient */
.search { margin-block: var(--sp-4) var(--sp-4); }
.search label { display: block; font-weight: 700; margin-bottom: var(--sp-2); }
.search-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.search input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: .5rem .8rem; font: inherit; border: 1.5px solid #B9AE95; border-radius: var(--radius); background: var(--card); color: var(--ink); }
.suggest { font-size: var(--t-text); color: var(--ink-soft); margin-top: var(--sp-2); }
.suggest a { display: inline-block; padding-block: .3rem; }
.pick-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.pick-list a { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; color: var(--ink); }
.pick-list a:hover { border-color: var(--olive); }
.dot { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.result-group { margin-top: var(--sp-4); }
.result-group h2 { font-size: var(--t-sub); display: flex; align-items: center; gap: var(--sp-2); font-weight: 400; }
.count { font: 700 var(--t-text)/1 var(--body); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .55rem; }
.results { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.result { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.result a { font-weight: 700; }
.result p { margin: var(--sp-1) 0 0; }
.kv { display: grid; gap: var(--sp-2); margin-block: var(--sp-3) var(--sp-4); }
.kv div { display: grid; gap: var(--sp-1) var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .kv div { grid-template-columns: 9rem 1fr; } }
.kv dt { font-weight: 700; color: var(--ink-soft); }
.kv dd { margin: 0; }
.safety { background: #FBEDE7; border-left: 3px solid var(--clay); padding: .6rem .8rem; }

/* Customise */
.mode { border: 0; padding: 0; margin: var(--sp-4) 0; min-width: 0; }
/* The question runs as one line of text above the two choices; only the choices sit in a grid. */
.mode legend { display: block; width: 100%; font-weight: 700; margin-bottom: var(--sp-3); padding: 0; }
.mode-opts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.mode-opt { position: relative; }
.mode-opt input { position: absolute; opacity: 0; inset: 0; }
.mode-opt label { display: flex; flex-direction: column; gap: var(--sp-1); padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; min-height: 100%; }
.mode-opt label span { color: var(--ink-soft); font-size: var(--t-text); }
.mode-opt input:checked + label { border-color: var(--olive); box-shadow: inset 0 0 0 1px var(--olive); background: #F4F5EA; }
.mode-opt input:checked + label strong::before { content: ""; display: inline-block; width: .55rem; height: .55rem; background: var(--olive); border-radius: 50%; margin-right: var(--sp-2); vertical-align: middle; }
.mode-opt input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.custom-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 940px) { .custom-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } .summary { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1rem); } }
.custom-grid > * { min-width: 0; }
.group-h { margin-top: var(--sp-4); text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-text); color: var(--turmeric-ink); }
.option-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.option { display: grid; gap: var(--sp-3); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.option.on { border-color: var(--clay); background: #FDF5F0; }
.option:not(.on) { background: #F2F1E3; }
html.motion .option.fade-card { opacity: 0; transform: translateY(16px); transition: opacity 1.1s cubic-bezier(.2, .65, .25, 1) var(--d, 0ms), transform 1.1s cubic-bezier(.2, .65, .25, 1) var(--d, 0ms); }
html.motion .option.fade-card.in { opacity: 1; transform: none; }
.option p { margin: var(--sp-1) 0; }
.mini { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: var(--sp-2) 0; font-size: var(--t-text); }
.mini div { display: flex; gap: var(--sp-1); }
.mini dt { color: var(--ink-soft); }
.mini dd { margin: 0; font-weight: 600; }
.btn-toggle { background: var(--card); border-color: var(--btn); color: var(--btn); min-height: 44px; justify-self: start; }
.btn-toggle[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); color: #fff; }
.allergen-note { font-size: var(--t-text); color: var(--clay); font-weight: 600; }
.summary { background: var(--panel); border-radius: var(--radius); padding: 1.25rem; }
.sum-block { padding: .75rem .9rem; border-radius: var(--radius); margin-bottom: var(--sp-2); }
.sum-block p, .sum-block ul { margin: var(--sp-2) 0 0; }
.sum-block.in-pack { background: #EEF0E2; }
.sum-block.you-add { background: #FFF8E8; border: 1px solid #E2C27F; }
.sum-block.yours { background: var(--card); border: 1px dashed var(--clay); }
.time-note { font-weight: 600; }
.cue { border-top: 1px solid var(--line); margin-top: var(--sp-3); padding-top: .75rem; }
.cue h3 { font-family: var(--display); font-weight: 400; }

/* Cart and checkout */
.cart-grid, .checkout-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .cart-grid, .checkout-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } .cart-summary { position: sticky; top: 1rem; } }
.cart-grid > *, .checkout-grid > * { min-width: 0; }
.cart-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.cart-line { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.cart-info { min-width: 0; }
.cart-info a { font-weight: 700; }
.cart-info p { margin: var(--sp-1) 0 var(--sp-2); }
.cart-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.qty-btn { width: 44px; height: 44px; border: 0; background: none; font-size: var(--t-subtitle); cursor: pointer; color: var(--ink); font-weight: 500; }
.qty-val { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 480px) { .cart-line { grid-template-columns: auto 1fr; } .cart-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; } }
.cart-summary { background: var(--panel); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: var(--sp-2); }
.cart-summary h2, .cart-summary h3 { font-size: var(--t-sub); font-weight: 400; }
.totals { margin: 0; display: grid; gap: var(--sp-1); font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.totals dd { margin: 0; }
.totals .total { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: var(--sp-1);  font-size: var(--t-subtitle); font-weight: 500; }
.mini-lines { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: grid; gap: var(--sp-1); font-variant-numeric: tabular-nums; }
.mini-lines li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: var(--sp-3); }
.panel h2 { font-size: var(--t-sub); font-weight: 400; }
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
/* A label styled as a button (the photo buttons) keeps the button layout, so its text sits in the middle (owner, change 94). */
.field label.btn { display: inline-flex; margin-bottom: 0; font-weight: 600; }
.field input { width: 100%; min-height: 48px; padding: .5rem .75rem; font: inherit; border: 1.5px solid #B9AE95; border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.field input[aria-invalid="true"] { border-color: var(--clay); background: #FDF3EF; }
.hint { font-size: var(--t-text); color: var(--ink-soft); margin: 0 0 var(--sp-1); }
.err { color: var(--clay); font-weight: 600; margin: var(--sp-1) 0 0; font-size: var(--t-text); }
.err-summary { border: 2px solid var(--clay); background: #FDF3EF; border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: var(--sp-4); }
.err-summary h2 { font-size: var(--t-subtitle); font-family: var(--body); font-weight: 500; }
.pin-result[data-tone="ok"] { color: var(--olive); font-weight: 600; }
.pin-result[data-tone="error"] { color: var(--clay); font-weight: 600; }
/* Accounts: inline offers and the returning-user prompt. Never modal. */
.welcome-back { background: #F2F0E2; border-bottom: 1px solid var(--line); padding-block: 1rem; }
.welcome-back h2 { font-size: var(--t-subtitle); margin: 0 0 var(--sp-1); font-weight: 500; }
.welcome-back p { margin: var(--sp-1) 0; }
.wb-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.account-offer, .account-panel { margin-top: var(--sp-4); }
.account-offer h2, .account-offer h3, .account-panel h2 { font-size: var(--t-subtitle); font-weight: 500; }
.account-form { margin-top: var(--sp-3); }
.account-status:empty { display: none; }
.account-status { margin-top: var(--sp-3); }
.inline-account { border-left: 3px solid var(--olive); padding-left: 1rem; margin-bottom: var(--sp-3); }
.saved-note { background: #EEF2E0; border-radius: var(--radius); padding: .75rem 1rem; }
.undo-note { background: #EEF2E0; border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 var(--sp-3); }
.toggle-row { display: flex; gap: var(--sp-2); align-items: flex-start; margin-block: var(--sp-2); }
.toggle-row input { width: 22px; height: 22px; margin-top: var(--sp-1); flex: none; accent-color: var(--olive); }
.test-mode { border: 1.5px dashed var(--turmeric-ink); background: #FFFBF1; }
fieldset { border: 0; padding: 0; margin: 0; }
.pay-status { font-size: var(--t-text); }
.pay-status[data-tone="error"] { color: var(--clay); font-weight: 600; }
.pay-status[data-tone="wait"] { color: var(--ink-soft); }
.track { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.track li { padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-text); color: var(--ink-soft); }
.track li.done { background: var(--olive); color: #fff; border-color: var(--olive); }

/* Text pages */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--t-sub); margin-top: var(--sp-4); font-weight: 400; }
.confirm { background: #FFF3D6; border-radius: 3px; padding: 0 .3rem; font-size: var(--t-text); color: var(--turmeric-ink); font-weight: 600; }
.jump ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.jump a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--card); }
.cat-section { margin-top: var(--sp-5); }
.help-line { margin-top: var(--sp-5); }
/* Help accordion on Blends */
.help-section { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: 2rem; max-width: 820px; }
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; padding: .75rem .25rem;  font-size: var(--t-subtitle); font-weight: 500; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+";  font-size: var(--t-sub); line-height: 1; color: var(--olive); font-weight: 400; }
.acc[open] > summary::after { content: "−"; }
.acc.closing > summary::after { content: "+"; }
.acc-body { padding: 0 .25rem 1.25rem; max-width: 70ch; }
.acc-body h3 { font-size: var(--t-subtitle); margin-top: var(--sp-4); font-weight: 500; }
/* Hub */
.hub-section { margin-top: var(--sp-5); }
.hub-section > h2 { font-size: var(--t-sub); font-weight: 400; }
.hub-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.hub-list li { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.hub-list li a { min-height: 32px; display: inline-flex; align-items: center; font-weight: 700; }

/* Footer, cookie banner, toast */
.site-footer { background: var(--footer-bg); color: var(--olive-deep); border-top: 1px solid #D3DEC0; margin-top: var(--sp-5); padding-block: .4rem calc(.4rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px)) + var(--ui-reserve, 0px)); text-align: center; }
.site-footer a, .site-footer .linklike { color: var(--olive-deep); }
/* The footer colour runs to the bottom of the screen; its links and copyright stay above any browser panel floating over it (--ui-reserve, set by the phone view; 0 elsewhere). */
.footer-inner { display: grid; gap: 0; }
/* Help at the far left, Terms in the middle, Instagram at the far right. */
.site-footer ul.footer-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 var(--sp-3); }
.footer-links li:first-child { justify-self: start; }
.footer-links li:last-child { justify-self: end; }
/* Change 113: Kitchen tips sits beside Terms in the middle, with Help on the left and Instagram on the right as before. */
.site-footer ul.footer-links:has(> li:nth-child(4)) { grid-template-columns: 1fr auto auto 1fr; }
/* When large text leaves too little room for four links on one row, they wrap onto two rows instead of running off the screen. */
.site-footer .footer-inner { container-type: inline-size; }
@container (max-width: 14em) { .site-footer ul.footer-links:has(> li:nth-child(4)) { display: flex; flex-wrap: wrap; justify-content: space-between; } }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-ig { min-width: 36px; justify-content: center; }
.footer-ig svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.footer-ig .dot { fill: currentColor; stroke: none; }
.copyright { margin: 0; font-size: var(--t-text); line-height: 1.3; color: var(--ink-soft); text-align: center; }
/* --ui-bottom: space taken by browser controls floating over the page (set by the phone preview; 0 elsewhere).
   Messages and the cookie panel always sit above it so they are never hidden. */
.cookie { position: fixed; left: 0; right: 0; bottom: var(--ui-bottom, 0px); transition: bottom .3s ease; z-index: 40; background: var(--card); border-top: 2px solid var(--olive); box-shadow: 0 -12px 30px -18px rgba(30,30,10,.5);
  padding: 1rem max(16px, env(safe-area-inset-right, 0px)) calc(1rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))) max(16px, env(safe-area-inset-left, 0px)); max-height: 85vh; overflow-y: auto; }
.cookie-inner { max-width: 1120px; margin: 0 auto; }
.cookie h2 { font-size: var(--t-subtitle); font-weight: 500; }
.cookie-actions { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.cookie-manage { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }
.cookie-manage[hidden] { display: none; }
.cookie-manage legend { font-weight: 700; }

.result-ing { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ing-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.ing-head h1 { margin: 0; }
/* Ingredient photograph (owner request, change 29): edge to edge on phones, half the screen width on wider screens, centred. */
.ing-photo { margin: .75rem calc(50% - 50vw) 1rem; width: 100vw; }
.ing-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--line); }
.ing-photo figcaption { padding: .35rem 16px 0; font-size: var(--t-text); color: var(--ink-soft); }
@media (min-width: 860px) {
  .ing-photo { width: 50vw; margin-left: calc(50% - 25vw); margin-right: calc(50% - 25vw); }
  .ing-photo img { border-radius: 12px; }
  .ing-photo figcaption { padding-left: 0; padding-right: 0; }
}
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1.2rem + max(max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px)), var(--ui-bottom, 0px))); z-index: 45; max-width: min(92vw, 520px);
  background: var(--ink); color: #FAF7F0; padding: .75rem 1rem; border-radius: var(--radius); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); font-size: var(--t-text); opacity: 0; transition: opacity .15s ease, bottom .3s ease; }
.toast.show { opacity: 1; }
.toast[data-tone="error"] { background: #6E2E1C; }
/* Arrival motion: fade up once, only when motion is allowed (see ui.js wireReveal). */
html.motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2, .65, .25, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .65, .25, 1) var(--d, 0ms); }
html.motion .reveal.in { opacity: 1; transform: none; }
/* A jump to a section: everything is already in place, no fades. */
html.no-fade .reveal { transition: none !important; }
section[tabindex="-1"]:focus { outline: none; }
/* The first screen: the base, additions and finished dish arrive in order. The heading and buttons do not wait. */
@keyframes bs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .t-step, .hero .t-plus { animation: bs-rise .7s cubic-bezier(.2, .65, .25, 1) both; }
.hero .transform > :nth-child(2) { animation-delay: .12s; }
.hero .transform > :nth-child(3) { animation-delay: .24s; }
.hero .transform > :nth-child(4) { animation-delay: .36s; }
.hero .transform > :nth-child(5) { animation-delay: .48s; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { html.motion .reveal { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Page changes (owner request, change 88; slowed and softened in changes 89 and 90): the header stays in place. The page leaving fades from the top down, then the
   new page fades in from the top down. A blend's pack picture clicked on a card grows into the pack on its product page.
   Browsers without view transitions change pages as before; reduced motion turns it off. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
@keyframes bs-sweep { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
::view-transition-old(root), ::view-transition-new(root) { -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
::view-transition-old(root) { -webkit-mask-image: linear-gradient(to bottom, transparent 0 25%, #000 75% 100%); mask-image: linear-gradient(to bottom, transparent 0 25%, #000 75% 100%);
  animation: bs-sweep .8s cubic-bezier(.45, 0, .55, 1) both; }
::view-transition-new(root) { -webkit-mask-image: linear-gradient(to bottom, #000 0 25%, transparent 75% 100%); mask-image: linear-gradient(to bottom, #000 0 25%, transparent 75% 100%);
  animation: bs-sweep 1s cubic-bezier(.3, 0, .3, 1) .5s both; }
/* A picture tapped to open larger (change 96): no fade; the old page goes at once and only the picture moves. */
html.vt-still::view-transition-old(root) { animation: none; opacity: 0; }
html.vt-still::view-transition-new(root) { animation: none; -webkit-mask-image: none; mask-image: none; }
::view-transition-group(bs-pack) { animation-duration: 1s; animation-timing-function: cubic-bezier(.2, .65, .25, 1); z-index: 2; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Prototype only: switch to the mobile view from the top right corner (wide screens). */
.view-corner { position: fixed; top: 10px; right: 10px; z-index: 60; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: rgba(250, 247, 240, .92); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: 0 4px 12px -6px rgba(30, 30, 10, .35); }
.view-corner:hover { color: var(--ink); background: var(--paper); }
/* Screenshot of the page on screen, beside the mobile view switch (owner request, change 69). */
.shot-corner { position: fixed; top: 10px; right: 52px; z-index: 60; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(250, 247, 240, .92); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: 0 4px 12px -6px rgba(30, 30, 10, .35); cursor: pointer; }
.shot-corner:hover { color: var(--ink); background: var(--paper); }
.shot-corner[aria-busy="true"] { opacity: .6; cursor: progress; }
/* Change 109 (owner request): reset the free Ask questions, under the mobile view icon. Preview only, like the others. */
.ask-corner { position: fixed; top: 52px; right: 10px; z-index: 60; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(250, 247, 240, .92); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: 0 4px 12px -6px rgba(30, 30, 10, .35); cursor: pointer; }
.ask-corner:hover { color: var(--ink); background: var(--paper); }
.ask-corner svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .ask-corner { display: none; } }
@media (pointer: coarse) and (max-height: 520px) { .ask-corner { display: none; } }
html.force-dark .ask-corner { background: rgba(26, 27, 21, .94); }
@media (prefers-color-scheme: dark) { html:not(.force-light) .ask-corner { background: rgba(26, 27, 21, .94); } }
.shot-corner svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.view-corner svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
/* Where the page is narrow enough for the header to reach the corner, the header keeps clear of the icon. */
@media (max-width: 1380px) { .has-view-corner .header-bar, .has-view-corner .cook-row { padding-right: 192px; } } /* room for the mobile view, screenshot and colour mode switches (changes 64, 69) */
@media (max-width: 520px) { .view-corner, .shot-corner { display: none; } .has-view-corner .header-bar, .has-view-corner .cook-row { padding-right: max(20px, env(safe-area-inset-right, 0px)); } }

/* Smallest text (owner decisions, 20 Oct 2026: text too small). On every screen no label is below 15 px,
   above the spec's 14 px minimum. */
.chip, .evidence-name, .unverified, .copyright, .count, .method li.yours::after { font-size: var(--t-text); letter-spacing: .04em; }
.cart-count { font-size: .9375rem; }
.eyebrow, .group-h { font-size: var(--t-text); letter-spacing: .08em; }
.pack-kind, .pack-tag { font-size: .9375em; letter-spacing: .05em; }
.pack-tag { line-height: 1.2; }
.pack:not(.pack-xs) { padding-bottom: 40px; }
.pack:not(.pack-xs) .pack-band { bottom: 25.6px; }
.dish figcaption, .evidence, .confirm { font-size: var(--t-text); }
.copyright { line-height: 1.4; }
@media (max-width: 400px) { .chip { white-space: normal; max-width: 100%; } }
.muted, .cat-line, .facts, .t-adds, .suggest, .hint, .crumbs, .mini, .demo-note, .review-note, caption, .track li,
.after-add, .context-bar, .btn-sm, .err, .pay-status, .allergen-note, .mode-opt label span { font-size: var(--t-text); }

/* Phone type scale. On phones body text is 18 px and supporting text 17 px. */
@media (max-width: 599px) {
  :root { --step-0: 1.125rem; --step-1: 1.3125rem; --step-2: 1.625rem; }
  body { line-height: 1.28; }
  .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  p, li, dd { overflow-wrap: break-word; }
  .lede { font-size: var(--t-subtitle); line-height: 1.2; font-weight: 500; }
  .muted, .cat-line, .facts, .t-adds, .suggest, .hint, .crumbs, .mini, .demo-note, .review-note, caption, .track li,
  .after-add, .context-bar, .btn-sm, .err, .pay-status, .allergen-note, .mode-opt label span, .evidence, .confirm, .dish figcaption { font-size: var(--t-text); }
  .dish figcaption { line-height: 1.16; }
  .facts { gap: var(--sp-1); }
  .card-title, .combo h3 { font-size: var(--t-sub); font-weight: 400; }
  .cat-name { font-size: var(--t-sub); font-weight: 400; }
  .why summary::after { font-size: var(--t-text); }
  .btn { font-size: var(--t-text); }
}

/* Finished-dish photos (illustrative, AI-generated; design package 4.1). Fixed 4:3 box so nothing shifts while loading. */
.dish-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel); }
.dish-photo figcaption { margin-top: var(--sp-2); line-height: 1.12; }
.product-card .card-media.card-photo { position: relative; padding: 0; }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel); transition: transform .7s cubic-bezier(.2, .65, .25, 1); }
@media (hover: hover) { .product-card:hover .card-photo img { transform: scale(1.03); } }
.photo-tag { position: absolute; left: .6rem; bottom: .6rem; background: rgba(250, 247, 240, .92); color: var(--ink); font-size: var(--t-text); letter-spacing: .04em; padding: .15rem .5rem; border-radius: 3px; }
.t-step .dish-photo { width: 100%; max-width: 260px; }
.t-step .dish-photo figcaption { font-size: var(--t-text); }

.add-name { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.t-adds li { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); text-align: left; padding-left: .4rem; line-height: 1.3; }

/* ---------- Home, change 21: opening clip, picture steps, category collages, sample posts ---------- */
.hero-video { margin: 0; min-width: 0; }
.hv-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--panel); aspect-ratio: 16 / 9; }
.hv-frame img, .hv-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv-play { all: unset; display: block; width: 100%; height: 100%; cursor: pointer; position: relative; }
.hv-play:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.hv-icon { position: absolute; left: 50%; top: 50%; width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem; border-radius: 50%; background: rgba(37, 38, 31, .78); box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.hv-icon::after { content: ""; position: absolute; left: 1.65rem; top: 1.3rem; border-style: solid; border-width: .85rem 0 .85rem 1.35rem; border-color: transparent transparent transparent #fff; }
.hv-play:hover .hv-icon { background: rgba(37, 38, 31, .92); }
.hv-fail { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .6rem .9rem; background: rgba(255, 255, 255, .92); }
.hero-video figcaption, .make-pic figcaption { font-size: var(--t-text); color: var(--muted); margin-top: var(--sp-2); }
@media (min-width: 900px) { .hero-open .hero-grid { grid-template-columns: 1fr 1.15fr; } }
/* Opening, change 30: the clip runs the full screen width with the slogan over it. */
.hero-open { padding-block: 0 clamp(1.5rem, 5vw, 3rem); }
.hero-full .hv-stage { position: relative; }
.hero-full .hv-frame { border-radius: 0; aspect-ratio: 16 / 9; max-height: 85svh; width: 100%; }
.hv-title { position: absolute; left: 0; right: 0; top: 0; padding: clamp(.9rem, 3vw, 2.5rem) max(16px, calc((100vw - 1120px) / 2 + 16px)) clamp(2.5rem, 8vw, 6rem); color: #fff; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 20, 16, .78), rgba(20, 20, 16, .45) 60%, rgba(20, 20, 16, 0)); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.hero .hv-title h1 { margin: 0; color: #fff; font-size: var(--t-head); line-height: 1.08; max-width: 16ch; font-weight: 300; }
.hv-sub { margin: var(--sp-2) 0 0; font-size: var(--t-text); line-height: 1.3; font-weight: 600; max-width: 40ch; }
.hero-full .hv-icon { left: auto; top: auto; right: clamp(.75rem, 3vw, 2rem); bottom: clamp(.75rem, 3vw, 2rem); margin: 0; }
.hero-full figcaption { margin-top: var(--sp-2); }
.hero-actions { margin-top: var(--sp-3); }
@media (max-width: 899px) { .hero-full .hv-icon { width: 3.5rem; height: 3.5rem; } .hero-full .hv-icon::after { left: 1.35rem; top: 1.05rem; border-width: .7rem 0 .7rem 1.1rem; } }

/* Make it your own, change 30: the chosen blend's picture first, then a choice of blend. */
.cust-pic .dish { margin: var(--sp-3) 0 var(--sp-2); }
.cust-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.cust-pic { max-width: 560px; }
.blend-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.blend-pick label { font-weight: 700; }
.blend-pick select { min-height: 48px; min-width: min(100%, 18rem); max-width: 100%; padding: .4rem 2.2rem .4rem .75rem; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid #B9AE95; border-radius: var(--radius); }

/* Made it? and Creation history, change 30. */
.made-it { margin-top: var(--sp-4); }
.made-choice { border: 0; margin: 0 0 var(--sp-3); padding: 0; min-width: 0; }
.made-choice legend { font-weight: 700; padding: 0; margin-bottom: var(--sp-1); }
.made-choice > div { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.made-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.made-choice label { min-height: 44px; display: inline-flex; align-items: center; padding: .35rem .9rem; font-weight: 600; cursor: pointer; }
.made-choice input:checked + label { background: var(--ink); color: #fff; }
.made-choice input:focus-visible + label { outline: 3px solid var(--olive); outline-offset: -3px; }
.field textarea { width: 100%; padding: .5rem .75rem; font: inherit; border: 1.5px solid #B9AE95; border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.hub-list li.dish-entry { display: block; }
.dish-entry > span { display: block; }
.dish-note { margin-top: var(--sp-1); color: var(--ink-soft); white-space: pre-line; }
.dish-actions { display: flex !important; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-1); }
.hub-list .dish-actions .order-hide { margin-left: 0; }
.undo-line { margin: 0 0 var(--sp-3); }

.how-pics { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4) var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; counter-reset: s; }
@media (min-width: 820px) { .how-pics { gap: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .how-pics h3 { font-size: var(--t-text); } }
.how-pics li { counter-increment: s; }
/* Realistic photographs in circles (owner request, change 66). */
.how-pics img { display: block; width: min(86%, 13rem); height: auto; aspect-ratio: 1; margin: 0 auto var(--sp-3); object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--line); }
.how-pics h3 { margin: 0 0 var(--sp-1); }
.how-pics h3::before { content: counter(s) ". "; color: var(--turmeric-ink); }
.how-pics p { margin: 0; color: var(--muted); }

.cat-collages { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.cat-collages > li, .posts > li, .how-pics > li { min-width: 0; }
@media (min-width: 820px) { .cat-collages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-collage { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .3s ease, box-shadow .4s ease; }
.cat-collage:hover { border-color: var(--olive); box-shadow: 0 6px 22px rgba(37, 38, 31, .08); }
.collage { display: grid; gap: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--line); }
.collage img, .post img, .how-pics img, .make-pic img { max-width: 100%; }
.collage img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.collage.n1 { grid-template-columns: 1fr; }
.collage.n3 img:first-child { grid-column: 1 / -1; aspect-ratio: 8 / 3; }
.cc-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: 1rem 1.1rem 1.15rem; flex: 1; }
.cc-body .cat-name { font-family: var(--display); font-size: var(--t-subtitle); font-weight: 500; }
.cc-need { color: var(--ink); }
.cc-more { margin-top: auto; padding-top: .3rem; color: var(--olive); text-decoration: underline; }
.know-inline { border-top: 1px solid var(--line); padding-top: 1.5rem; display: grid; gap: var(--sp-2) var(--sp-5); }
@media (min-width: 820px) { .know-inline { grid-template-columns: 1fr 1fr; } }
.know-inline h3 { margin: 0 0 var(--sp-2); }
.know-inline p { margin: 0; }
.cc-note { margin-top: var(--sp-4); }

.make-pic { margin: 0; }
.make-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

.posts { list-style: none; padding: 0 0 .75rem; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); grid-auto-flow: column; grid-auto-columns: min(80%, 300px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; }
.posts > li { scroll-snap-align: start; }
.posts:focus-visible { outline: 3px solid var(--olive); outline-offset: 4px; border-radius: var(--radius); }
.post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.post img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.post-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.post blockquote { margin: 0; }
.post blockquote p { margin: 0; }
.post-meta { margin: auto 0 0; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cat-collage { transition: none; } }

/* Create collages (owner request, changes 22 and 23): small square tiles, placed in a new pattern on every view.
   Each tile carries its place for phones (--m) and for wider screens (--d); names sit on top over a dark fade. */
.mosaic { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-2); display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 820px) { .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } }
.tile { min-width: 0; aspect-ratio: 1; grid-area: var(--m); }
@media (min-width: 820px) { .tile { grid-area: var(--d); } }
.tile.wide, .tile.big { aspect-ratio: auto; }
.tile a { position: relative; display: block; height: 100%; border-radius: 8px; overflow: hidden; background: var(--line); color: #fff; text-decoration: none; }
.tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .65, .25, 1); }
.tile a:hover img { transform: scale(1.04); }
.tile a:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
.tile-name { position: absolute; left: 0; right: 0; top: 0; padding: .4rem .5rem 1.6rem; background: linear-gradient(to bottom, rgba(20, 20, 16, .82), rgba(20, 20, 16, .5) 55%, rgba(20, 20, 16, 0)); font-size: var(--t-text); font-weight: 700; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
@media (min-width: 820px) { .tile-name { font-size: var(--t-text); } }
.mosaic-note { margin: 0 0 var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } .tile a:hover img { transform: none; } }

/* Hub (change 25): cookie preferences and the privacy policy fold away; past orders can be hidden. */
.hub-acc { border-top: 1px solid var(--line); }
.hub-acc > summary { cursor: pointer; }
.hub-acc > summary h2 { margin: 0; font-size: var(--t-sub); font-weight: 400; }
.hub-list li .order-hide { margin-left: auto; min-height: 44px; padding-block: .4rem; }
.hidden-toggle { margin: var(--sp-3) 0 0; }
.hidden-head { margin-top: var(--sp-4); font-size: var(--t-subtitle); font-weight: 500; }
.hub-hidden li { opacity: .8; }
/* Hub (change 26): share or keep each saved creation private, as a two-way switch. */
.share-choice { display: inline-flex; margin: var(--sp-1) 0 0; padding: 0; border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; flex-basis: auto; }
.share-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.share-choice label { min-height: 44px; display: inline-flex; align-items: center; padding: .35rem 1rem; font-weight: 600; cursor: pointer; }
.share-choice input:checked + label { background: var(--ink); color: #fff; }
.share-choice input:focus-visible + label { outline: 3px solid var(--olive); outline-offset: -3px; }
.share-note { flex-basis: 100%; }
/* Product page (change 28): sections after "In the pack" fold on phones; wider screens show them open, unfolded. */
.pdp-acc > summary h2 { margin: 0; font-size: var(--t-sub); font-weight: 400; }
.pdp-acc-body { padding: 0 .25rem 1.25rem; }
@media (max-width: 859px) {
  .pdp-fold.section-tight, .pdp-why.section-tight { padding-block: 0; }
  .pdp-fold .acc { border-bottom: 0; }
  /* "Why this works" already folds everywhere; on phones it matches the accordions around it. */
  .pdp-why .why > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; padding: .75rem .25rem; }
  .pdp-why .why summary h2 { font-size: var(--t-sub);  margin: 0; font-weight: 400; }
  .pdp-why .why summary::after, .pdp-why .why.closing summary::after { content: "+"; font-size: var(--t-sub); line-height: 1; color: var(--olive); text-decoration: none; font-weight: 400; }
  .pdp-why .why[open] summary::after { content: "\2212"; }
  .pdp-why .why > p { padding: 0 .25rem; }
}
@media (min-width: 860px) {
  /* Hub feedback, change 41: folds on phones only. */
  .fb-acc { border-top: 0; border-bottom: 0; }
  .fb-acc > summary { cursor: default; min-height: 0; padding: 0 0 .5rem; }
  .fb-acc > summary::after, .fb-acc[open] > summary::after { content: none; }
  .fb-acc > .acc-body { padding: 0; max-width: none; }
  .pdp-fold .pdp-acc { border: 0; }
  .pdp-acc > summary { cursor: default; min-height: 0; padding: 0 0 .5rem; pointer-events: none; }
  .pdp-acc > summary::after { content: none; }
  .pdp-acc-body { padding: 0; }
}


/* Make it your own on Home, change 32: a blinking "Selecting ingredients" line, then the ingredients typed out. */
#make-body { min-height: 3rem; }
.thinking { font-weight: 600; color: var(--ink-soft); animation: bs-blink 1.1s ease-in-out infinite; }
.thinking .dots span { animation: bs-dot 1.2s infinite; opacity: 0; }
.thinking .dots span:nth-child(2) { animation-delay: .2s; }
.thinking .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes bs-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes bs-dot { 0%, 20% { opacity: 0; } 40%, 100% { opacity: 1; } }

/* Make it your own on Home, change 33: on phones the picture comes straight after the title, then the paragraph and the menu. */
.make-intro { margin: 0 0 var(--sp-3); }
@media (max-width: 819px) {
  .make-split { row-gap: 0; }
  .make-split > .make-main { display: contents; }
  .make-split h2, .make-split .sec-sub { order: 1; } /* the subtitle stays under the title (change 65) */
  .make-split .sec-sub { margin-top: 0; }
  .make-split .make-pic { order: 2; margin-bottom: var(--sp-4); }
  .make-split .make-intro { order: 3; }
  .make-split .make-try { order: 3; } /* Try now comes right after the paragraph (owner request, change 92) */
  .make-split .blend-pick { order: 4; }
  .make-split #make-body { order: 5; }
}

/* Kitchen Secrets on Home, change 34: the picture, then three tips, then More. Side by side from 900px. */
.secrets { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .secrets { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: var(--sp-5); } }
.secrets-pic { margin: 0; }
.secrets-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.secrets-pic figcaption { font-size: var(--t-text); color: var(--ink-soft); margin-top: var(--sp-2); }
.secrets-list { display: grid; gap: var(--sp-3); min-width: 0; }
.secrets-more { margin: 0; font-weight: 700; }
.secrets-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* Opening clip, change 35: no browser control bar; one small pause / play / replay button in the corner. */
.hv-frame video { cursor: pointer; }
.hv-toggle { position: absolute; right: clamp(.75rem, 3vw, 2rem); bottom: clamp(.75rem, 3vw, 2rem); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(37, 38, 31, .7); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.hv-toggle:hover { background: rgba(37, 38, 31, .9); }
.hv-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hv-toggle span { display: block; width: 14px; height: 16px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.hv-toggle[data-state="play"] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.hv-toggle[data-state="replay"] span { width: 16px; height: 16px; border: 3px solid #fff; border-top-color: transparent; border-radius: 50%; }

/* Section intros, change 36: a short, reassuring line under each content section title. */
.sec-lead { margin: var(--sp-1) 0 var(--sp-4); max-width: 62ch; color: var(--ink-soft); }
.section-head + .sec-lead { margin-top: -.25rem; }
/* Opening screen on phones, change 36: the clip fills 70% of the screen height. */
@media (max-width: 699px) {
  .hero-full .hv-frame { aspect-ratio: auto; height: 70svh; max-height: none; }
  .hero-full .hv-play, .hero-full .hv-frame img, .hero-full .hv-frame video { height: 100%; object-fit: cover; }
}

/* Search, change 37: a note when only close matches are shown. */
.closest { color: var(--ink-soft); margin: var(--sp-2) 0 var(--sp-3); }

/* Desktop, change 37: on short pages the footer sits at the bottom of the screen. */
@media (min-width: 900px) {
  body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  body > main { flex: 1 0 auto; }
  #app-footer { margin-top: auto; }
}

/* Season and traditional use, change 37. */
.care-note { color: var(--ink-soft); border-left: 3px solid var(--clay); padding-left: .75rem; }

/* Blends header panel, change 39: shorter than the Home opening so the blends follow soon after. */
.blends-hero { border-bottom: 0; padding-bottom: 1.25rem; }
.blends-hero figure { margin: 0; }
.blends-hero .hv-frame { aspect-ratio: 7 / 3; max-height: 62svh; }
.blends-hero .hv-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.blends-body { padding-top: 0; }
@media (max-width: 699px) { .blends-hero .hv-frame { aspect-ratio: auto; height: 50svh; } }
.know-more { margin: var(--sp-3) 0 0; }
.know-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* My Kitchen, change 40: dish notes and pictures, and the opt-in list of what is in the kitchen. */
.mk-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .mk-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.mk-part { margin: 0; min-width: 0; }
.mk-part h3 { margin-top: 0; }
.mk-sub { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--t-text); }
/* My Kitchen photo frame (change 98): 4:3 like every picture on the site; the picture is moved and zoomed inside it. */
.mk-preview { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); max-width: 28rem; }
.mk-preview > p { margin: 0; }
.mk-crop { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--line); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mk-crop:active { cursor: grabbing; }
.mk-crop img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.mk-crop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mk-crop-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.mk-crop-tools label { font-weight: 600; }
.mk-crop-tools input[type=range] { flex: 1 1 8rem; min-height: 44px; accent-color: var(--olive); }
.share-help { margin-top: -.5rem; }
.mk-dishes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.mk-dish { display: flex; gap: var(--sp-3); align-items: flex-start; }
.mk-dish img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: var(--radius); }
.mk-dish > div { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.mk-share-toggle { align-self: flex-start; padding-left: 0; }
.mk-want { border: 0; padding: 0; margin: 0 0 var(--sp-3); min-width: 0; }
.mk-want legend { font-weight: 700; padding: 0; margin-bottom: var(--sp-1); }
.mk-want .check { display: flex; gap: var(--sp-2); align-items: flex-start; min-height: 44px; padding: .35rem 0; }
.mk-want input { width: 22px; height: 22px; flex: none; margin-top: var(--sp-1); accent-color: var(--olive); }
.mk-add label { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
.mk-add-row { display: flex; gap: var(--sp-2); }
.mk-add-row input { flex: 1; min-width: 0; min-height: 44px; }
.mk-quick-h { margin: var(--sp-3) 0 var(--sp-1); }
.mk-quick, .mk-items { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-btn { min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.chip-btn:hover { border-color: var(--ink); }
.mk-items li { display: inline-flex; align-items: center; gap: var(--sp-1); padding-left: .9rem; border: 1.5px solid var(--olive); border-radius: 999px; background: var(--panel); }
.mk-remove { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink); font-size: var(--t-sub); line-height: 1; cursor: pointer; border-radius: 999px; font-weight: 400; }
.mk-remove:focus-visible, .chip-btn:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
.mk-ideas { padding-left: 1.2em; margin: 0; display: grid; gap: var(--sp-2); }
.dish-thumb { float: right; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); margin-left: var(--sp-3); }
.mk-preview[hidden] { display: none; }
:is(#my-kitchen, #my-creations) select, .mk-add-row input { width: 100%; min-height: 48px; padding: .4rem .75rem; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid #B9AE95; border-radius: var(--radius); }
:is(#my-kitchen, #my-creations) input[type="file"] { min-height: 48px; padding: .5rem; font-size: var(--t-text); }
.mk-add-row input::placeholder { color: var(--muted); }

/* Simple recipes in Search, change 40. */
.recipe details > summary { cursor: pointer; min-height: 44px; padding: .35rem 0; }
.recipe-name { font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.recipe-h { font-size: var(--t-text); margin: var(--sp-3) 0 var(--sp-1); }
.recipe ul, .recipe ol { margin: 0 0 var(--sp-2); }

/* Hub feedback, change 40. */
#feedback-form { max-width: 40rem; }
#feedback .err { margin: var(--sp-1) 0 0; }

/* Creation history, change 40: one group per blend, the saved version first, then each time it was cooked. */
.creation-group { padding: 1rem 0; border-top: 1px solid var(--line); }
.creation-group h3 { margin: 0 0 var(--sp-1); }
.creation-group .creation-version p { margin: 0 0 var(--sp-2); }
.creation-group .hub-list { border-top: 0; }
/* Kitchen Secrets on desktop, change 40: the picture fills the full height of the tips beside it. */
@media (min-width: 900px) {
  .secrets { align-items: stretch; }
  .secrets-pic { display: flex; flex-direction: column; min-height: 0; }
  .secrets-pic img { flex: 1 1 auto; height: 100%; min-height: 0; aspect-ratio: auto; object-position: 50% 40%; }
}

/* Change 43 (owner requests). */
/* Panel subtitles inside a fold: the title, then the benefit, with the + on the right. */
.acc > summary:has(.sum-sub) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: center; }
.acc > summary:has(.sum-sub)::after { grid-column: 2; grid-row: 1 / span 2; }
.acc > summary .sum-sub { grid-column: 1; display: block; margin-top: var(--sp-1); font-family: var(--body); font-size: var(--t-text); font-weight: 400; color: var(--muted); line-height: 1.28; }
/* Know what goes into your kitchen, as a paragraph under Choose a Master Blend. */
.know-line { margin: 0 0 var(--sp-4); max-width: 70ch; }
/* Questions that open to their answer, typed out (phones). Wider screens show every answer. */
.ask h3 { margin: 0; }
.ask-q { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; font: inherit; color: inherit; }
@media (max-width: 859px) {
  .ask-list { display: grid; gap: var(--sp-2); grid-template-columns: minmax(0, 1fr); }
  .ask { padding: 0; }
  .ask-q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; padding: .75rem 1rem; }
  .ask-q::after { content: "+"; font-family: var(--body); font-size: var(--t-sub); line-height: 1; color: var(--olive); font-weight: 400; }
  .ask.asked .ask-q::after { content: "\2212"; }
  .ask-q:focus-visible { outline: 3px solid var(--olive); outline-offset: -3px; border-radius: var(--radius); }
  .ask-a { padding: 0 1rem 1rem; }
}
@media (min-width: 860px) { .ask-q { cursor: text; } .ask-a[hidden] { display: block; } .ask-a > :first-child { margin-top: var(--sp-2); } }
/* Kitchen Secrets rotation. */
.secrets-cards { display: grid; gap: var(--sp-3); }
.secrets-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-3); }
.secrets-more .btn { min-height: 44px; }
.secrets-pause[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .answer.swapped { animation: bs-in .6s ease both; } }
@keyframes bs-in { from { opacity: 0; } to { opacity: 1; } }
/* Tick-box choices in My Kitchen: a plain list, nothing boxed around them. */
.tick-choice { border: 0; margin: 0 0 var(--sp-3); padding: 0; min-width: 0; }
.tick-choice legend { font-weight: 700; padding: 0; margin-bottom: var(--sp-1); }
.tick-choice > div { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.tick-opt { position: relative; display: inline-flex; }
.tick-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick-opt label { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer; font-weight: 400; }
.tick-opt label::before { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper) no-repeat center / 16px 16px; }
.tick-opt input:checked + label::before { background-color: var(--olive); border-color: var(--olive); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tick-opt input:checked + label { font-weight: 700; }
.tick-opt input:focus-visible + label::before { outline: 3px solid var(--olive); outline-offset: 2px; }
.mk-step[hidden] { display: none; }
/* Picture: two buttons, no file box. The camera button is for phones and tablets. */
.field-label { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
.photo-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.photo-btns > span { position: relative; display: inline-flex; }
.vh-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.vh-input:focus-visible + label { outline: 3px solid var(--olive); outline-offset: 2px; }
.photo-btns label { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .photo-cam { display: none !important; } }
/* The upload button's words follow the device (change 93): "Choose from album" on a phone, "Upload a photo" on a computer. */
.photo-btns .on-desk { display: none; }
@media (hover: hover) and (pointer: fine) { .photo-btns .on-desk { display: inline; } .photo-btns .on-phone { display: none; } }
/* What is in your kitchen: one menu for each food group. */
.mk-groups { display: grid; gap: var(--sp-1) var(--sp-3); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-3); }
@media (min-width: 560px) { .mk-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-group { margin: 0 0 var(--sp-2); }
.mk-group label { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
:is(#my-kitchen, #my-creations) .mk-group select { width: 100%; }
.acc > summary:has(.sum-sub) h2 { margin: 0; }
:is(#my-kitchen, #my-creations) .vh-input { position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; }
/* Share and unshare popup, change 43. */
.bs-notice { max-width: min(32rem, calc(100vw - 2rem)); border: 0; border-radius: var(--radius); padding: 1.5rem; background: var(--paper); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.bs-notice::backdrop { background: rgba(20, 18, 12, .45); }
.bs-notice h2 { margin: 0 0 var(--sp-3); font-size: var(--t-sub); font-weight: 400; }
.bs-notice p:last-child { margin-bottom: 0; }

/* Change 44: Blends sections carry their own introduction; on phones each card's details read as one paragraph, ending with Know more. */
.cat-intro { max-width: 70ch; margin: var(--sp-1) 0 var(--sp-3); }
@media (max-width: 599px) {
  .facts-line { margin: var(--sp-2) 0 0; }
  .facts-line .facts, .facts-line .facts div, .facts-line .facts dt, .facts-line .facts dd, .facts-line .know-more { display: inline; margin: 0; }
  .facts-line .facts dt { font-weight: 600; color: var(--ink); }
  .facts-line .facts dt::after { content: " "; }
  .facts-line .facts dd::after { content: ". "; }
  .facts-line .know-more a { display: inline; min-height: 0; padding: .85rem 0; }
}

/* Change 44: the account popup in My Kitchen. */
.mk-account { max-width: 34rem; }
.mk-acc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mk-account .account-form { margin-top: var(--sp-3); }

/* Change 44: Answers on phones, three at a time, each question arriving in turn. */
.ask-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 0; }
.ask-more[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ask.ask-in { animation: bs-rise .55s cubic-bezier(.2, .65, .25, 1) var(--qd, 0ms) both; }
  /* Change 44: nothing appears at once. Content shown later fades in, pictures fade in when loaded, popups and opened panels fade in. */
  html.motion main .pop-in { animation: bs-in .45s ease both; }
  html.motion main img { opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .65, .25, 1); }
  html.motion main img.is-loaded { opacity: 1; }
  dialog[open] { animation: bs-in .25s ease both; }
  details[open] > :not(summary) { animation: bs-in .4s ease both; }
}

/* Change 44: Cart accordions on phones show only their headings; the line under each heading opens with the panel. */
.acc-lead { display: none; }
@media (max-width: 599px) {
  .hub-acc > summary .sum-sub { display: none; }
  .hub-acc .acc-lead { display: block; margin-top: 0; color: var(--muted); }
}
/* Phones and touch screens: every control that stands on its own is at least 44px tall to tap. Links inside running sentences keep their line. */
@media (max-width: 859px), (pointer: coarse) {
  .crumbs a, .crumbs [aria-current], .cart-info a, .card-title a, .context-bar a, .suggest a, .link-list a, .add-name a, .footer-links a, a.brand, .skip, .solo-link > a, .chip { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-ig { min-width: 44px; }
  .linklike, summary { min-height: 44px; }
  details > summary:not(.evidence summary) { padding-block: .7rem; }
  .evidence summary { min-height: 44px; }
  .toggle-row { align-items: center; min-height: 44px; }
  .toggle-row input { margin-top: 0; }
  .toggle-row label { display: inline-flex; align-items: center; min-height: 44px; }
}
/* "(free account)" on save buttons, shown only to someone not signed in, so the need is clear before they fill anything in (change 48). */
.signed-in .acct-hint { display: none; }
.acct-hint { font-weight: 400; }
.last-time { margin-block: var(--sp-3); padding: .85rem 1rem; display: grid; gap: var(--sp-2); justify-items: start; }
.last-time p { margin: 0; }
.qty-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.qty-max { display: block; font-size: var(--t-text); }
.order-names { font-weight: 600; }
.account-line { margin-top: var(--sp-4); }
.recipe-note { color: var(--ink-soft); border-left: 3px solid #EAD9AE; padding-left: .6rem; }
.more-ing { columns: 2 14rem; column-gap: var(--sp-4); }
.more-ing li { break-inside: avoid; }
/* Facts wrap instead of being cut off at small widths with large text (audit v4 A3). */
.facts { grid-template-columns: minmax(0, 1fr); }
.facts div { grid-template-columns: 5.5rem minmax(0, 1fr); }
.facts-wide div { grid-template-columns: 6rem minmax(0, 1fr); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
.in-kitchen { font-size: var(--t-text); color: var(--ink-soft); margin: var(--sp-1) 0 0; }
.in-kitchen.has { color: var(--olive); font-weight: 600; }

/* ---------- Finishing touches and Create Now (change 49) ---------- */
.chip-sold { background: var(--card); color: var(--olive-deep); border: 1.5px solid var(--olive); }
.finisher-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-3); }
.finisher-list.cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.finisher { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; min-width: 0; }
.finisher p { margin: var(--sp-1) 0 0; }
.fin-kind { font-size: var(--t-text); }
.fin-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.to-buy-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: var(--sp-2); }
.to-buy-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.resume-bar { background: #FFF6E2; border-bottom: 1px solid #EAD9AE; padding-block: .6rem; }
.resume-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.resume-bar p { margin: 0; }
.cn-resumed { margin: var(--sp-3) 0 0; color: var(--olive-deep); font-weight: 500; }
.cn-strip { margin: var(--sp-3) 0 0; padding: .5rem .8rem; border: 1.5px solid var(--turmeric-ink); border-radius: var(--radius); background: #FFF6E2; }
.cn-card { margin-top: var(--sp-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.1rem 1.25rem; }
.cn-count { margin: 0 0 var(--sp-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--t-text); color: var(--turmeric-ink); }
.cn-step { font-family: var(--body);  font-size: var(--t-head); line-height: 1.3; margin: var(--sp-1) 0 var(--sp-2); font-weight: 300; }
.cn-qty { font-weight: 700; color: var(--olive-deep); white-space: nowrap; }
.cn-need { font-size: var(--t-subtitle); line-height: 1.5; padding-left: 1.2rem; font-weight: 500; }
.cn-need li + li { margin-top: var(--sp-1); }
.cn-amount { font-size: var(--t-subtitle); font-weight: 500; }
.cn-why { margin-top: var(--sp-3); }
.cn-timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); padding-top: .9rem; border-top: 1px dashed var(--line); }
.cn-clock { margin: 0; font-family: var(--display); font-size: var(--t-head); font-variant-numeric: tabular-nums; min-width: 5ch; font-weight: 300; }
.cn-timer-done .cn-clock { color: var(--clay); }
.cn-nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.cn-nav .btn { flex: 1 1 0; min-height: 60px; font-size: var(--t-subtitle); font-weight: 500; }
.cn-nav [data-cn-back][hidden] + [data-cn-next] { flex-basis: 100%; }
.cn-all { margin-top: var(--sp-4); }
.cn-all summary h2 { font-size: var(--t-subtitle); margin: 0; font-weight: 500; }
.cn-all li.now { font-weight: 700; }
.cn-all .linklike { margin-left: var(--sp-1); }
.cn-keep { margin-top: var(--sp-3); }
@media (max-width: 859px), (pointer: coarse) {
  .cn-all .linklike, .cn-strip .linklike, .fin-buy .btn, .to-buy-list .btn { min-height: 44px; }
}

/* Change 50. Section subtitles: the title names the feature, the subtitle says what it does for you. */
.sec-sub { margin: var(--sp-1) 0 var(--sp-3); max-width: 62ch; font-size: var(--t-text); line-height: 1.4; font-weight: 600; color: var(--ink-soft); }
.sec-sub + .sec-lead { margin-top: 0; }
/* Home: the two buttons sit over the clip, bottom centre. */
.hero-full .hv-actions { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 4vw, 2.5rem); margin: 0; padding: 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); z-index: 3; pointer-events: none; }
.hero-full .hv-actions .btn { pointer-events: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.hero-full .hv-actions .btn-secondary { background: #fff; }
.hero-full .hv-actions .btn-secondary:hover { background: var(--panel); }
@media (max-width: 699px) {
  /* Play and pause move up so they never sit under the buttons on a narrow screen. */
  .hero-full .hv-icon, .hero-full .hv-toggle { bottom: 5.25rem; }
}
/* Create opening picture, as on Blends. */
.create-hero .hv-frame img { object-position: 50% 40%; }
.create-body { padding-top: 0; }
/* Answers: each question has its own very light tint, so they are easy to tell apart (kept for the folded questions, change 100). */
#answers-list .qa-q:nth-child(6n+1) { background: #FBF3EC; }
#answers-list .qa-q:nth-child(6n+2) { background: #F1F6EE; }
#answers-list .qa-q:nth-child(6n+3) { background: #EEF3F8; }
#answers-list .qa-q:nth-child(6n+4) { background: #F8F1F6; }
#answers-list .qa-q:nth-child(6n+5) { background: #FAF7E8; }
#answers-list .qa-q:nth-child(6n+6) { background: #EEF6F5; }
/* Cart: delivery updates. */
.track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.track-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.track-card p { margin: 0 0 var(--sp-1); }
.track-now strong { color: var(--ink); }
.track-events { margin: var(--sp-2) 0 0; padding-left: 1.2rem; }
.track-events li { margin: var(--sp-1) 0; }
.track-events li:first-child { font-weight: 600; }

/* Change 51. Subtitles half as large again, and lighter. */
.sec-sub { font-size: var(--t-sub);  line-height: 1.3; font-weight: 400; }
.acc > summary .sum-sub { font-size: var(--t-sub);  line-height: 1.25; font-weight: 400; }
/* Product page folds on phones: subtitles 15% smaller (owner request, change 97). */
@media (max-width: 859px) { .pdp-acc > summary .sum-sub { font-size: var(--t-subtitle); font-weight: 500; } }
/* From other kitchens, last on the product page and never folded (change 97). */
.pdp-posts h2 { font-size: var(--t-sub); font-weight: 400; }
/* My Kitchen: a warm kitchen scene under the intro. */
.mk-pic { margin: 0 0 var(--sp-4); }
.mk-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--panel); }

/* Change 52. My Kitchen sign-in: the button, with what it is for on the line below. */
.mk-who p { margin: 0 0 var(--sp-2); }
.signin-for span { display: block; margin-top: var(--sp-1); color: var(--ink-soft); }
/* My Kitchen picture: half the page width on desktop. */
@media (min-width: 900px) { .mk-pic { max-width: 50%; } }
/* Phones: More ingredients as a paragraph of links separated by commas. */
@media (max-width: 699px) {
  .more-ing { columns: auto; display: block; padding: 0; margin: 0; list-style: none; line-height: 2.1; }
  .more-ing li { display: inline; margin: 0; padding: 0; border: 0; }
  .more-ing li:not(:last-child)::after { content: ", "; }
  .more-ing a { display: inline; min-height: 0; padding: .35rem 0; }
}

/* Change 53. Feedback: the blend and website lists. */
#feedback-form select { width: 100%; max-width: 28rem; min-height: 48px; padding: .4rem .75rem; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid #B9AE95; border-radius: var(--radius); }
#feedback-form select[aria-invalid="true"] { border-color: var(--error, #A33A2A); }

/* Change 58: Create Now as a hands-free display, and its timer at the top of every other page. */
.cn-when { margin: var(--sp-3) 0 0; padding: .6rem .85rem; border-left: 4px solid var(--olive); background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--t-text); line-height: 1.45; }
.cook-bar { background: #FFF6E2; border-bottom: 1.5px solid var(--turmeric-ink); }
.cook-bar.cook-back, .cook-bar.cook-done { background: #FBE6DC; border-bottom-color: var(--clay); }
.cook-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding-top: .45rem; padding-bottom: .45rem; }
.cook-msg { margin: 0; font-size: var(--t-text); }
.cook-left { font-family: var(--display); font-size: var(--t-subtitle); font-variant-numeric: tabular-nums; font-weight: 500; }
.cook-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }

/* Change 59: search results under the search bar; what was searched for is said below the bar, never above it. */
.results-for { margin: var(--sp-3) 0 var(--sp-1); font-weight: 600; color: var(--ink-soft); }
.create-results:empty { display: none; }
.create-results { margin-top: var(--sp-2); }

/* Search (owner request, change 61): a thinking line before results, no clear (x) mark inside the box, and Clear fades the results away. */
.search input[type="search"]::-webkit-search-cancel-button, .search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-thinking { margin: var(--sp-3) 0; }
.search-out, .create-results { transition: opacity .4s ease; }
.search-out.is-fading, .create-results.is-fading { opacity: 0; }
.suggest.is-new { animation: bs-in .5s ease both; }
@media (prefers-reduced-motion: reduce) { .search-out, .create-results { transition: none; } .suggest.is-new { animation: none; } }

/* Create Now, change 62 (owner request): the step count is the largest text on the page; the step sits in the middle of the
   screen; Back and Next stay in the same place at the bottom on every step. Nothing below the card once the steps are done. */
.cn-card { display: flex; flex-direction: column; min-height: calc(100svh - 11rem); padding-bottom: calc(60px + 2.5rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); }
.cn-count { font-family: var(--display);  letter-spacing: .04em; font-size: var(--t-head); line-height: 1.05; margin: 0 0 var(--sp-2); color: var(--turmeric-ink); font-weight: 300; }
.cn-mid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* Change 64 (owner request): half the space between the step counter and the step, so a quarter of the free space sits above it. */
.cn-mid::before { content: ""; flex: 1 1 0; }
.cn-mid::after { content: ""; flex: 3.3 1 0; }
.cn-nav { position: fixed; left: 0; right: 0; bottom: var(--ui-bottom, 0px); z-index: 30; margin: 0; padding: .75rem max(16px, env(safe-area-inset-left, 0px)) calc(.75rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(30, 30, 10, .45); }
.cn-nav .btn { flex: 1 1 0; max-width: 360px; }
@media (min-width: 760px) { .cn-nav { justify-content: center; } }
.cn-nav [data-cn-back][hidden] + [data-cn-next] { flex-basis: 0; }
.cn-done .cn-extra, .cn-done .cn-nav { display: none; }
.cn-done .cn-card { padding-bottom: 1.25rem; }
.cn-note { margin: var(--sp-3) 0 0; }
body[data-page="createnow"] .site-footer { padding-bottom: calc(60px + 2rem); }
/* Change 64 (owner request): half the space between the header and the breadcrumb. */
body[data-page="createnow"] main > .section { padding-top: calc(clamp(2.75rem, 7vw, 6rem) / 2); }
@media (max-width: 859px), (pointer: coarse) { body[data-page="createnow"] main > .section { padding-top: max(.5rem, calc(clamp(2.75rem, 7vw, 6rem) / 2 - 7px)); } }
/* Round timer: the ring fills as time passes; a full ring means the time is up. */
.timer-ring { flex: none; display: block; }
.timer-ring .ring-track { fill: none; stroke: var(--line); stroke-width: 9; }
.timer-ring .ring-fill { fill: none; stroke: var(--turmeric); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.cn-timer-done .ring-fill { stroke: var(--clay); }
.ring-lg { width: clamp(6.5rem, 5rem + 8vw, 9rem); height: auto; }
.ring-sm { width: 2rem; height: 2rem; }
.cook-row .ring-sm { margin-right: -.25rem; }
@media (prefers-reduced-motion: reduce) { .timer-ring .ring-fill { transition: none; } }
/* Make it your own: one menu for garnishes and additions, and what is added so far (change 68, in place of More options) */
.opt-pick { margin: var(--sp-3) 0 0; }
.opt-pick select { min-height: 44px; width: 100%; max-width: 28rem; }
.opt-added { margin: var(--sp-3) 0 0; }
.opt-added .linklike { min-height: 44px; font-weight: 600; }
.prepare { margin: var(--sp-4) 0 0; }
#opt-out .search-thinking { margin: var(--sp-2) 0 var(--sp-3); }
.save-later { margin: var(--sp-3) 0; }
.steps-fold { margin: var(--sp-2) 0 var(--sp-3); }
.steps-fold > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px;  font-size: var(--t-subtitle); color: var(--olive); text-decoration: underline; text-underline-offset: 3px; list-style: none; font-weight: 500; }
.steps-fold > summary::-webkit-details-marker { display: none; }
.steps-fold[open] > summary { text-decoration: none; }
.made-on-date { margin-top: var(--sp-2); }
.made-on-date[hidden] { display: none; }
.mk-last { margin: var(--sp-1) 0 0; }
/* Phone text size (owner request, change 63). Body text follows the reader's chosen font size, from the smallest to
   200%. The frame does not: headings and the step counter stop growing at a share of the screen width, the header keeps
   its row, buttons and labels wrap rather than run off the screen, and grids drop to one column. */
:root {
  --step-2: min(1.5rem, 8.4vw);
  --step-3: min(clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem), 9.4vw);
  --step-4: min(clamp(2.1rem, 1.6rem + 2.6vw, 3.3rem), 10.6vw);
}
@media (max-width: 560px) { :root { --step-2: min(1.625rem, 8.4vw); } }
.skip { top: 0; transform: translateY(-110%); }
.skip:focus { transform: none; }
.brand-name { font-size: max(11px, min(1.35rem, 28px, calc((100vw - 150px) / 7.6))); white-space: nowrap; }
@media (min-width: 900px) { .brand-name { font-size: min(1.6rem, 32px); } }
.menu-open .menu-label { font-size: var(--t-text); }
.hero h1 { font-size: var(--t-head); font-weight: 300; }
.btn { white-space: normal; max-width: 100%; text-align: center; }
.chip, .unverified, .method li.yours::after { white-space: normal; }
.cn-qty { white-space: normal; }
h1, h2, h3, .card-title, .cn-step { overflow-wrap: break-word; hyphens: auto; }
/* Very narrow screens (a phone zoomed to 200% or more): a little less side space so the header row still fits. */
@media (max-width: 260px) {
  .wrap, .header-bar, .has-view-corner .header-bar { padding-left: 8px; padding-right: 8px; }
  .icon-btn { width: 44px; height: 44px; }
}
/* Tile names wrap inside their picture. */
.tile-name { overflow-wrap: anywhere; }
/* The pack drawing keeps its size, so the frame around it does too. */
.pdp-media { gap: min(1rem, 16px); padding: min(1.5rem, 24px); }
/* A phone on its side is still a phone: no switch to the mobile preview, and no room kept for it. */
@media (pointer: coarse) and (max-height: 520px) {
  .view-corner, .shot-corner { display: none; }
  .has-view-corner .header-bar, .has-view-corner .cook-row { padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}
/* Create Now: the step counter stays the largest text and on one line. */
.cn-count { font-size: var(--t-head); font-weight: 300; }
.cn-step { font-size: var(--t-head); font-weight: 300; }
.cn-need { font-size: var(--t-subtitle); font-weight: 500; }
/* Phones on their side (owner request, change 63): the screen is short, so Create Now drops the breadcrumbs and the
   empty space, sizes the counter by the screen height and slims the Back and Next bar, so the step itself shows
   between the header and the bar without scrolling. --safe-b is the home bar space, set by the mobile preview;
   real phones report it as the safe area. */
@media (orientation: landscape) and (max-height: 520px) {
  body[data-page="createnow"] .crumbs { display: none; }
  body[data-page="createnow"] main > .section, body[data-page="createnow"] main > .wrap { padding-top: .75rem; }
  .cn-card { margin-top: 0; min-height: calc(100svh - 60px - 4.5rem); padding: .6rem 1.1rem calc(48px + 1.6rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); }
  .cn-count { font-size: var(--t-head); margin-bottom: var(--sp-1); font-weight: 300; }
  .cn-step { font-size: var(--t-head); margin: var(--sp-1) 0 var(--sp-2); font-weight: 300; }
  .cn-nav { padding-top: .4rem; padding-bottom: calc(.4rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .cn-nav .btn { min-height: 48px; }
  body[data-page="createnow"]:has(.cn:not(.cn-done)) .toast { bottom: calc(48px + 1.6rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); }
  .cookie { max-height: 70svh; }
}

/* Change 64 (owner request): wide pictures grow a little under the pointer and settle back, smoothly, inside their frame. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .collage, .cust-pic .dish, .make-pic, .ing-photo { overflow: hidden; }
  .cust-pic .dish, .make-pic { border-radius: var(--radius); }
  @media (min-width: 860px) { .ing-photo { border-radius: 12px; } }
  .collage img, .cust-pic img, .make-pic img, .ing-photo img, .post img { transition: transform .7s cubic-bezier(.2, .65, .25, 1); will-change: transform; }
  .card-photo img, .tile img { will-change: transform; }
  .collage img:hover, .cust-pic img:hover, .make-pic img:hover, .ing-photo img:hover, .post:hover img { transform: scale(1.03); }
  html.motion main .collage img, html.motion main .cust-pic img, html.motion main .make-pic img, html.motion main .ing-photo img, html.motion main .post img { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .65, .25, 1); }
}
/* Change 64 (owner request): the previews can show the site in light or dark, whatever the device says. */
html.force-light { color-scheme: light; }
.theme-corner { position: fixed; top: 10px; right: 94px; z-index: 60; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; border-radius: 8px; background: rgba(250, 247, 240, .92); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: 0 4px 12px -6px rgba(30, 30, 10, .35); font: 500 var(--t-text)/1 var(--body); cursor: pointer; }
.theme-corner:hover { color: var(--ink); background: var(--paper); }
.theme-corner svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
@media (max-width: 520px) { .theme-corner { display: none; } }
@media (pointer: coarse) and (max-height: 520px) { .theme-corner { display: none; } }
/* Change 65 (owner request): 30% less space between a section title and its subtitle. */
:is(h1, h2, h3):has(+ .sec-sub) { margin-bottom: calc(.36em - 1.4px); }
/* Search: on first view the footer starts below the screen, where results push it anyway (owner request, change 65). */
body[data-page="search"] main { min-height: 100vh; min-height: 100svh; }
/* Fresh ideas on Home: See more, under the row of posts. */
.posts-more { margin: var(--sp-2) 0 0; }
@media (max-width: 859px), (pointer: coarse) { .posts-more a { display: inline-flex; align-items: center; min-height: 44px; } }
/* Create Now, change 66 (owner request): round buttons with symbols; play or pause between Back and Next when the step
   has a timer; a cross, top right, closes the steps. */
/* Three fixed places, so Back and Next never move when the pause/play button comes and goes. */
.cn-nav { display: grid; grid-template-columns: 64px 1fr 64px; grid-template-rows: 76px; align-items: center; gap: 0; }
.cn-nav .cn-back { grid-column: 1; } .cn-nav .cn-play { grid-column: 2; justify-self: center; } .cn-nav .cn-next { grid-column: 3; }
@media (min-width: 760px) { .cn-nav { grid-template-columns: 64px 76px 64px; justify-content: center; column-gap: var(--sp-5); } }
.cn-round { flex: none; width: 64px; height: 64px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); transition: background-color .2s ease, transform .15s ease; }
.cn-round svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cn-round svg .fill { fill: currentColor; stroke: none; }
.cn-round:active { transform: scale(.96); }
.cn-next { background: var(--btn); border-color: var(--btn); color: var(--paper); }
.cn-next:hover { background: var(--btn-hover); }
.cn-back:hover { background: var(--panel); }
.cn-play { width: 76px; height: 76px; background: var(--turmeric); border-color: var(--turmeric); color: #2D2716; }
.cn-play svg { width: 34px; height: 34px; }
.cn-play[hidden] { display: none; }
.cn-card { padding-bottom: calc(76px + 2.6rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); }
.cn-done .cn-card { padding-bottom: 1.25rem; }
.cn-timer-hint { margin: 0; }
/* Voice control on the step screens (owner request, change 66). */
#cn-voice:empty { display: none; }
#cn-voice { margin-top: var(--sp-3); }
.cn-voice-offer { margin: 0; }
.cn-voice-offer .btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 48px; }
.cn-voice-help { margin: var(--sp-2) 0 0; }
.cn-voice-on { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0; padding: .6rem .8rem; border-radius: 12px; background: var(--tint-sage); }
.cn-voice-on > span { flex: 1 1 10rem; }
.cn-voice-on .btn { margin-left: auto; min-height: 44px; }
.cn-mic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cn-voice-on .cn-mic { color: var(--olive); animation: micPulse 1.6s ease-in-out infinite; }
@keyframes micPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cn-voice-on .cn-mic { animation: none; } }
@media (orientation: landscape) and (max-height: 520px) {
  .cn-round { width: 50px; height: 50px; } .cn-play { width: 56px; height: 56px; }
  .cn-nav { grid-template-columns: 50px 1fr 50px; grid-template-rows: 56px; }
  .cn-round svg { width: 24px; height: 24px; }
  .cn-card { padding-bottom: calc(56px + 1.4rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); }
}
/* Change 66 (owner request): every section has its own panel colour, chosen for what it holds, and no two sections
   in a row share one. Sage: how things are made and ingredients. Sun: the blends and what is yours. Clay: making it
   your own. Sky: answers and know-how. Rose: the community. Stone: rules and records. */
:root { --tint-sage: #EDF1E3; --tint-sun: #FBF2DF; --tint-clay: #F7E9E2; --tint-sky: #E7EEF1; --tint-rose: #F5E9EE; --tint-stone: #F1EEE6; }
body[data-page="home"] #how { background: var(--tint-sage); }
body[data-page="home"] #choose { background: var(--tint-sun); }
body[data-page="home"] #make { background: var(--tint-clay); }
body[data-page="home"] #tips { background: var(--tint-sky); }
body[data-page="home"] #kitchens { background: var(--tint-rose); }
/* Sections inside a page column become rounded panels. */
body[data-page="create"] main .section-tight, body[data-page="hub"] .hub-section, .cat-section, .help-section, body[data-page="connect"] .connect-panel {
  border-top: 0; border-radius: 14px; padding: 1.5rem clamp(16px, 4vw, 28px); margin-block: var(--sp-3); }
body[data-page="create"] #make { background: var(--tint-clay); }
body[data-page="create"] #answers { background: var(--tint-sky); }
body[data-page="create"] #ingredients { background: var(--tint-sage); }
body[data-page="create"] #my-kitchen { background: var(--tint-sun); }
/* Change 127: My Creations, its own colour after My Kitchen. */
body[data-page="create"] #my-creations { background: var(--tint-sky); }
body[data-page="create"] #guidelines { background: var(--tint-stone); }
body[data-page="connect"] .connect-panel { background: var(--tint-rose); }
/* On phones the My Kitchen picture still runs the full width of its panel (change 52). */
@media (max-width: 899px) { body[data-page="create"] .mk-pic { margin-inline: calc(-1 * clamp(16px, 4vw, 28px)); } body[data-page="create"] .mk-pic img { border-radius: 0; } }
body[data-page="hub"] #cart { background: var(--tint-sun); }
body[data-page="hub"] #deliveries { background: var(--tint-sky); }
body[data-page="hub"] #orders { background: var(--tint-stone); }
body[data-page="hub"] #delivery { background: var(--tint-clay); }
body[data-page="hub"] #feedback { background: var(--tint-rose); }
body[data-page="hub"] #cookies { background: var(--tint-sage); }
body[data-page="hub"] #privacy { background: var(--tint-stone); }
.cat-section:nth-of-type(3n+1) { background: var(--tint-clay); }
.cat-section:nth-of-type(3n+2) { background: var(--tint-sun); }
.cat-section:nth-of-type(3n) { background: var(--tint-sage); }
.help-section { background: var(--tint-sky); max-width: none; }
@media (max-width: 599px) { body[data-page="create"] main .section-tight, body[data-page="hub"] .hub-section, .cat-section, .help-section, body[data-page="connect"] .connect-panel { margin-inline: -8px; } }
/* Likes on posts (owner request, change 66): a thumbs button and the count below each post. */
.post-like { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: .25rem; }
.like-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease; }
.like-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.like-btn[aria-pressed="true"] { background: var(--turmeric, #E0A526); border-color: transparent; color: #2A1E05; }
.like-btn[aria-pressed="true"] svg { fill: currentColor; }
.like-btn:active { transform: scale(.94); }
.like-btn:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
.like-count { font-size: var(--t-text); color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .like-btn { transition: none; } }
/* Connect: every post in a grid, and a sort bar that scrolls with the page like everything else (change 68; it used to stick under
   the header and slide away with it, which looked faster than the page). */
.posts-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; margin-top: var(--sp-3); }
@media (min-width: 640px) { .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.connect-sort { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 1rem calc(-1 * clamp(16px, 4vw, 28px)) 0; padding: .6rem clamp(16px, 4vw, 28px);
  background: var(--tint-rose); border-bottom: 1px solid var(--line); }
.connect-sort label { font-weight: 500; }
.connect-sort select { min-height: 44px; flex: 1 1 12rem; max-width: 18rem; }
.cx-group { margin: var(--sp-4) 0 0; }
.connect-guide { margin-top: var(--sp-4); }
/* Likes on your own shares: the total in My Kitchen, and a small pop-up when one arrives. */
.likes-total { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.likes-total[hidden] { display: none; }
.likes-total svg { width: 20px; height: 20px; fill: none; stroke: var(--turmeric-ink); stroke-width: 1.8; stroke-linejoin: round; }
.like-pop { position: fixed; z-index: 90; left: 50%; bottom: calc(1rem + var(--float-b)); transform: translateX(-50%); width: min(26rem, calc(100% - 2rem)); display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: .85rem .6rem .85rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.like-pop[hidden] { display: none; }
.like-pop.is-in { animation: likeIn .35s cubic-bezier(.2, .65, .25, 1); }
@keyframes likeIn { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .like-pop.is-in { animation: none; } }
.like-pop p { margin: 0; flex: 1; font-size: var(--t-text); }
.like-pop-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--turmeric, #E0A526); color: #2A1E05; }
.like-pop-icon svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.like-pop-x { flex: none; }

/* Page text cannot be selected (owner request, change 67); typing boxes still can. Not in the phone preview. */
html.no-copy body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.no-copy input, html.no-copy textarea, html.no-copy select, html.no-copy [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Garnishes and additions under their own headings, and your own ingredient (owner request, change 66). */
.option-list .opt-kind { list-style: none; border: 0; background: none; padding: 0; margin: var(--sp-4) 0 var(--sp-1); }
.option-list .opt-kind:first-child { margin-top: 0; }
.option-list .opt-kind h3 { margin: 0; font-size: var(--t-text); }
.option-list .opt-kind p { margin: var(--sp-1) 0 0; }
.own-add { margin-top: var(--sp-4); padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.own-add h3 { margin: 0 0 var(--sp-2); font-size: var(--t-text); }
.own-add input[type="text"], .own-add #own-item { width: 100%; }
.sum-kind { margin: var(--sp-2) 0 var(--sp-1); font-weight: 700; }

/* Suggestions under a text box as you type (owner request, change 66). */
.suggest-wrap { position: relative; }
.suggest-list { position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem 0; list-style: none; max-height: 16rem; overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.suggest-list[hidden] { display: none; }
.suggest-list li { padding: .65rem .9rem; min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.suggest-list li[aria-selected="true"], .suggest-list li:hover { background: var(--panel); }
.suggest-list strong { font-weight: 700; }
.suggest-note { margin-left: auto; font-size: var(--t-text); color: var(--ink-soft); }

/* Dark mode, from the device setting (owner request, change 62). The tokens are set by hand; every other colour in this
   file is its lightness-flipped twin, generated from the rules above. Text over photographs keeps its colours. */
@media (prefers-color-scheme: dark) {
  html:not(.force-light) {
    --paper: #1A1B15; --panel: #25261E; --card: #21221B; --ink: #ECE7DA; --ink-soft: #B8B3A3;
    --olive: #B9C67F; --olive-deep: #CFDA9C; --turmeric: #E8A23A; --turmeric-ink: #F0B963; --clay: #E3907A;
    --line: #3D3E32; --footer-bg: #222719; --btn: #ECE7DA; --btn-hover: #FFFFFF; --focus: #86BDE6;
    color-scheme: dark;
  }
  html:not(.force-light) .cart-count { color: #1A1A1A; }
  html:not(.force-light) .context-bar { background: #3A2D11; border-bottom: 1px solid #584C2D; }
  html:not(.force-light) .btn-primary { color: #2D2716; }
  html:not(.force-light) .btn-primary:hover { color: #1A1A1A; }
  html:not(.force-light) .chip-pack { color: #2D2716; }
  html:not(.force-light) .chip-pack::before { background: #2D2716; }
  html:not(.force-light) .chip-add { background: #413313; }
  html:not(.force-light) .chip-opt { border: 1.5px dashed #938D7B; }
  html:not(.force-light) .t-adds li { border: 1.5px dashed #938D7B; }
  @media (hover: hover) { html:not(.force-light) .product-card:hover { border-color: #5F5848; } }
  html:not(.force-light) .contract-col.in-pack { background: #303324; border: 1px solid #555844; }
  html:not(.force-light) .contract-col.you-add { background: #362A10; border: 1.5px solid #77633A; }
  html:not(.force-light) .search input { border: 1.5px solid #6B6455; }
  html:not(.force-light) .safety { background: #331F16; }
  html:not(.force-light) .mode-opt input:checked + label { background: #2C2D1F; }
  html:not(.force-light) .option.on { background: #2E1D13; }
  html:not(.force-light) .btn-toggle[aria-pressed="true"] { color: #1A1A1A; }
  html:not(.force-light) .sum-block.in-pack { background: #303324; }
  html:not(.force-light) .sum-block.you-add { background: #362A10; border: 1px solid #77633A; }
  html:not(.force-light) .field input { border: 1.5px solid #6B6455; }
  html:not(.force-light) .field input[aria-invalid="true"] { background: #2F1B13; }
  html:not(.force-light) .err-summary { background: #2F1B13; }
  html:not(.force-light) .welcome-back { background: #333121; }
  html:not(.force-light) .saved-note { background: #303521; }
  html:not(.force-light) .undo-note { background: #303521; }
  html:not(.force-light) .test-mode { background: #30260E; }
  html:not(.force-light) .track li.done { color: #1A1A1A; }
  html:not(.force-light) .confirm { background: #413313; }
  html:not(.force-light) .site-footer { border-top: 1px solid #434B35; }
  html:not(.force-light) .toast { color: #2B2518; }
  html:not(.force-light) .toast[data-tone="error"] { background: #D59988; }
  html:not(.force-light) .blend-pick select { border: 1.5px solid #6B6455; }
  html:not(.force-light) .made-choice input:checked + label { color: #1A1A1A; }
  html:not(.force-light) .field textarea { border: 1.5px solid #6B6455; }
  html:not(.force-light) .share-choice input:checked + label { color: #1A1A1A; }
  html:not(.force-light) :is(#my-kitchen, #my-creations) select, html:not(.force-light) .mk-add-row input { border: 1.5px solid #6B6455; }
  html:not(.force-light) .recipe-note { border-left: 3px solid #584C2D; }
  html:not(.force-light) .resume-bar { background: #3A2D11; border-bottom: 1px solid #584C2D; }
  html:not(.force-light) .cn-strip { background: #3A2D11; }
  html:not(.force-light) #answers-list .qa-q:nth-child(6n+1) { background: #2F2216; }
  html:not(.force-light) #answers-list .qa-q:nth-child(6n+2) { background: #222A1E; }
  html:not(.force-light) #answers-list .qa-q:nth-child(6n+3) { background: #1B232B; }
  html:not(.force-light) #answers-list .qa-q:nth-child(6n+4) { background: #281C25; }
  html:not(.force-light) #answers-list .qa-q:nth-child(6n+5) { background: #322D18; }
  html:not(.force-light) #answers-list .qa-q:nth-child(6n+6) { background: #1E2A28; }
  html:not(.force-light) #feedback-form select { border: 1.5px solid #6B6455; }
  html:not(.force-light) #feedback-form select[aria-invalid="true"] { border-color: var(--error, #C66E61); }
  html:not(.force-light) .cook-bar { background: #3A2D11; }
  html:not(.force-light) { --tint-sage: #1F251B; --tint-sun: #2A2415; --tint-clay: #2C201A; --tint-sky: #1A2326; --tint-rose: #291E23; --tint-stone: #23221C; }
  html:not(.force-light) .option:not(.on) { background: #282B1F; }
  html:not(.force-light) .theme-corner { background: rgba(26, 27, 21, .94); }
  html:not(.force-light) .cook-bar.cook-back, html:not(.force-light) .cook-bar.cook-done { background: #3B2317; }
}

/* Dark mode, by hand: the see-through panels. */
@media (prefers-color-scheme: dark) {
  html:not(.force-light) .site-header, html:not(.force-light) .shot-corner, html:not(.force-light) .view-corner, html:not(.force-light) .photo-tag, html:not(.force-light) .hv-fail { background: rgba(26, 27, 21, .94); }
  @supports (backdrop-filter: blur(1px)) { html:not(.force-light) .site-header { background: rgba(26, 27, 21, .9); } }
}
/* Create Now always dark (owner request, change 63): the step by step guide keeps attention on the cooking, so it uses the dark theme even when the device is set to light. Generated from the dark mode blocks above. */
html.force-dark {
--paper: #1A1B15; --panel: #25261E; --card: #21221B; --ink: #ECE7DA; --ink-soft: #B8B3A3;
--olive: #B9C67F; --olive-deep: #CFDA9C; --turmeric: #E8A23A; --turmeric-ink: #F0B963; --clay: #E3907A;
--line: #3D3E32; --footer-bg: #222719; --btn: #ECE7DA; --btn-hover: #FFFFFF; --focus: #86BDE6;
color-scheme: dark;
}
html.force-dark .cart-count { color: #1A1A1A; }
html.force-dark .context-bar { background: #3A2D11; border-bottom: 1px solid #584C2D; }
html.force-dark .btn-primary { color: #2D2716; }
html.force-dark .btn-primary:hover { color: #1A1A1A; }
html.force-dark .chip-pack { color: #2D2716; }
html.force-dark .chip-pack::before { background: #2D2716; }
html.force-dark .chip-add { background: #413313; }
html.force-dark .chip-opt { border: 1.5px dashed #938D7B; }
html.force-dark .t-adds li { border: 1.5px dashed #938D7B; }
@media (hover: hover) { html.force-dark .product-card:hover { border-color: #5F5848; } }
html.force-dark .contract-col.in-pack { background: #303324; border: 1px solid #555844; }
html.force-dark .contract-col.you-add { background: #362A10; border: 1.5px solid #77633A; }
html.force-dark .search input { border: 1.5px solid #6B6455; }
html.force-dark .safety { background: #331F16; }
html.force-dark .mode-opt input:checked + label { background: #2C2D1F; }
html.force-dark .option.on { background: #2E1D13; }
html.force-dark .btn-toggle[aria-pressed="true"] { color: #1A1A1A; }
html.force-dark .sum-block.in-pack { background: #303324; }
html.force-dark .sum-block.you-add { background: #362A10; border: 1px solid #77633A; }
html.force-dark .field input { border: 1.5px solid #6B6455; }
html.force-dark .field input[aria-invalid="true"] { background: #2F1B13; }
html.force-dark .err-summary { background: #2F1B13; }
html.force-dark .welcome-back { background: #333121; }
html.force-dark .saved-note { background: #303521; }
html.force-dark .undo-note { background: #303521; }
html.force-dark .test-mode { background: #30260E; }
html.force-dark .track li.done { color: #1A1A1A; }
html.force-dark .confirm { background: #413313; }
html.force-dark .site-footer { border-top: 1px solid #434B35; }
html.force-dark .toast { color: #2B2518; }
html.force-dark .toast[data-tone="error"] { background: #D59988; }
html.force-dark .blend-pick select { border: 1.5px solid #6B6455; }
html.force-dark .made-choice input:checked + label { color: #1A1A1A; }
html.force-dark .field textarea { border: 1.5px solid #6B6455; }
html.force-dark .share-choice input:checked + label { color: #1A1A1A; }
html.force-dark :is(#my-kitchen, #my-creations) select, html.force-dark .mk-add-row input { border: 1.5px solid #6B6455; }
html.force-dark .recipe-note { border-left: 3px solid #584C2D; }
html.force-dark .resume-bar { background: #3A2D11; border-bottom: 1px solid #584C2D; }
html.force-dark .cn-strip { background: #3A2D11; }
html.force-dark #answers-list .qa-q:nth-child(6n+1) { background: #2F2216; }
html.force-dark #answers-list .qa-q:nth-child(6n+2) { background: #222A1E; }
html.force-dark #answers-list .qa-q:nth-child(6n+3) { background: #1B232B; }
html.force-dark #answers-list .qa-q:nth-child(6n+4) { background: #281C25; }
html.force-dark #answers-list .qa-q:nth-child(6n+5) { background: #322D18; }
html.force-dark #answers-list .qa-q:nth-child(6n+6) { background: #1E2A28; }
html.force-dark #feedback-form select { border: 1.5px solid #6B6455; }
html.force-dark #feedback-form select[aria-invalid="true"] { border-color: var(--error, #C66E61); }
html.force-dark .cook-bar { background: #3A2D11; }
html.force-dark .cook-bar.cook-back, html.force-dark .cook-bar.cook-done { background: #3B2317; }
html.force-dark .site-header, html.force-dark .shot-corner, html.force-dark .view-corner, html.force-dark .photo-tag, html.force-dark .hv-fail { background: rgba(26, 27, 21, .94); }
@supports (backdrop-filter: blur(1px)) { html.force-dark .site-header { background: rgba(26, 27, 21, .9); } }
html.force-dark .option:not(.on) { background: #282B1F; }
html.force-dark .theme-corner { background: rgba(26, 27, 21, .94); }
html.force-dark { --tint-sage: #1F251B; --tint-sun: #2A2415; --tint-clay: #2C201A; --tint-sky: #1A2326; --tint-rose: #291E23; --tint-stone: #23221C; }
/* end Create Now always dark */
/* Create Now: messages show above Back and Next, not over them. */
body[data-page="createnow"]:has(.cn:not(.cn-done)) .toast { bottom: calc(60px + 2.4rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px))); }
/* Best time to add each garnish and addition (owner request, change 68). */
.best-time { margin: var(--sp-1) 0 0; font-size: var(--t-text); }
.sum-when { display: block; color: var(--muted); font-size: var(--t-text); }
/* Answers chosen one at a time from a menu (owner request, change 68). */
.pick-chips { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pick-chips[hidden] { display: none; }
.pick-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: .15rem .25rem .15rem .75rem; border: 1px solid var(--line); border-radius: 999px; }
.pick-chip .btn-sm { min-height: 44px; }
/* A like just added (owner request, change 69): a glimmer of light crosses the picture and the thumb pops.
   With reduced motion there is no animation (the rule near the top of this file); the thumb still fills in. */
.post-pic { position: relative; overflow: hidden; }
.post-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 25%, rgba(255, 248, 220, .2) 40%, rgba(255, 250, 230, .85) 50%, rgba(255, 248, 220, .2) 60%, transparent 75%); transform: translateX(-110%); }
.post-pic.is-liked-now::after { animation: bs-shine .9s cubic-bezier(.3, .6, .3, 1); }
.like-btn.is-liked-now { animation: bs-pop .45s ease; }
@keyframes bs-shine { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 1; transform: translateX(110%); } }
@keyframes bs-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* The rule that stops animation with reduced motion does not reach the glimmer, which is drawn by ::after. */
@media (prefers-reduced-motion: reduce) { .post-pic::after { animation: none !important; } }
/* Change 70 (owner requests). More options under Make it your own on Create: a range, then a blend. */
.more-blends { margin: var(--sp-3) 0 var(--sp-2); }
.more-blends-h { margin: 0 0 var(--sp-1);  font-size: var(--t-subtitle); font-weight: 500; }
.more-blends .blend-pick { margin-top: var(--sp-1); }
/* Now that you have made it: the paragraph, then the questions, folded on phones. */
.mk-reflect { margin: var(--sp-1) 0 var(--sp-3); }
.mk-fold > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--sp-2); font-weight: 700; color: var(--olive); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.mk-fold > summary::-webkit-details-marker { display: none; }
.mk-fold[open] > summary { text-decoration: none; }
@media (min-width: 820px) { .mk-fold > summary { display: none; } }
/* Or, would you like to add your own: a link that opens the form. */
.own-link { margin: var(--sp-4) 0 0; }
.own-box .own-add { margin-top: var(--sp-3); }
/* Phones: the names on the pictures in Make it your own and Add Ingredients stop growing above the 100% text size. */
@media (max-width: 819px) { #blend-mosaic .tile-name, #ing-mosaic .tile-name { font-size: var(--t-text); } }
/* The picture that grows into the next page. */
.fly-pic { position: fixed; z-index: 1000; margin: 0; max-width: none; object-fit: cover; pointer-events: none; border-radius: 8px; }
/* Change 71: the garnishes and additions as one line of links on Make it your own. */
.opt-pick { margin: var(--sp-3) 0 0; }
.opt-pick-h { margin: 0 0 var(--sp-1); font-weight: 700; }
/* Inline, like a sentence: a long name wraps where it must, as words do; the tall lines keep each one easy to tap. */
.opt-line { list-style: none; margin: 0; padding: 0; line-height: 2.6; }
.opt-line li { display: inline; }
.opt-line li:not(:last-child)::after { content: "·"; margin: 0 var(--sp-2); color: var(--muted, #6B6455); }
.opt-line .opt-word { padding: .55rem 0; color: var(--olive); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 4px; }
.opt-line .opt-word:hover { color: var(--olive-deep, #3E4A1F); }
.opt-line .opt-word:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
.opt-line .opt-word.is-added { font-weight: 700; }
.opt-line .opt-word.is-added::before { content: "✓ "; white-space: pre; }
#opt-out:focus { outline: none; }
/* Change 72: room at the end of the page while the cookie notice is open. */
html.cookie-open body::after { content: ""; display: block; height: var(--cookie-h, 0px); }
/* Change 73: every drop-down menu takes the page's text size (it follows the device text size); ui.js stops it growing
   once its longest choice would no longer fit on one line. */
select { font-size: inherit; font-family: inherit; }
.opt-pick select, .connect-sort select { font: inherit; }

/* Change 74: one height for every page-top picture except Home (Blends, Create, Connect and the ingredient pages),
   on phones and wider screens; Home's opening picture stays larger (70% of the screen height on phones, 16:9 above). */
:root { --top-pic-h: min(calc(100vw * 3 / 7), 62vh); --top-pic-h: min(calc(100vw * 3 / 7), 62svh); }
@media (max-width: 699px) { :root { --top-pic-h: 50vh; --top-pic-h: 50svh; } }
.blends-hero .hv-frame, .blends-hero.hero-open .hero-full .hv-frame { aspect-ratio: auto; height: var(--top-pic-h); max-height: none; }
.ing-photo img { aspect-ratio: auto; height: var(--top-pic-h); }
/* Create collages, change 74: pictures only; on phones three equal squares per row. */
@media (max-width: 819px) {
  #blend-mosaic, #ing-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #blend-mosaic .tile, #ing-mosaic .tile { grid-area: auto; aspect-ratio: 1; }
}
.list-pick { margin-top: var(--sp-3); }

/* Change 76: the Blends, Create and Connect top pictures sit lower in the frame, so the food shows as well as the faces on wide screens. */
.blends-hero .hv-frame img { object-position: 50% 50%; }
.blends-hero.create-hero .hv-frame img { object-position: 50% 65%; }
.blends-hero.connect-hero .hv-frame img { object-position: 50% 80%; }

/* A collage picture that did not load shows its name (owner choice after audit v5 B5). */
.tile.pic-failed { background: var(--panel); }
.tile.pic-failed img { visibility: hidden; }
.tile.pic-failed .sr-only { position: absolute; inset: 0; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: hidden; white-space: normal; display: grid; place-items: center; padding: .5rem; text-align: center; font-weight: 600; line-height: 1.25; color: var(--ink); }

/* Main buttons: a chilli to saffron fade (owner choice, change 80, from button-options.html). Cream text reads at 5.4:1 to 6.3:1.
   Second buttons stay warm black. The same fade in dark mode, so the main action looks the same everywhere. */
:root { --main-fade: linear-gradient(180deg, #A94A0A, #A8321E); --main-fade-hover: linear-gradient(180deg, #93400B, #8A2716); --main-edge: #A8321E; }
.btn-primary, html:not(.force-light) .btn-primary, html.force-dark .btn-primary, .cn-next { background: var(--main-fade); border-color: var(--main-edge); color: #FBF8EF; }
.btn-primary:hover, html:not(.force-light) .btn-primary:hover, html.force-dark .btn-primary:hover, .cn-next:hover { background: var(--main-fade-hover); border-color: #8A2716; color: #fff; }
/* "In the pack" and "You add" read as plain text, without a box (owner request, change 81). They still never look
   alike (S-01): the pack line is olive with a square, the add line turmeric with a plus. */
.chip-pack, .chip-add, html:not(.force-light) .chip-pack, html:not(.force-light) .chip-add, html.force-dark .chip-pack, html.force-dark .chip-add {
  background: transparent; border: 0; border-radius: 0; padding-inline: 0; }
.chip-pack, html:not(.force-light) .chip-pack, html.force-dark .chip-pack { color: var(--olive-deep); }
.chip-pack::before, html:not(.force-light) .chip-pack::before, html.force-dark .chip-pack::before { background: currentColor; }
.chip-add, html:not(.force-light) .chip-add, html.force-dark .chip-add { color: var(--turmeric-ink); }

/* Change 82 (owner request): text links that become buttons, and Create's category links. */
.cc-more.btn { align-self: flex-start; text-decoration: none; margin-top: auto; }
.cat-collage:hover .cc-more.btn, .cat-collage:focus-visible .cc-more.btn { background: var(--main-fade-hover); }
.make-try { margin: var(--sp-3) 0 0; }
.secrets-more a.btn, .posts-more a.btn { text-decoration: none; min-height: 44px; }
.posts-more { margin-top: var(--sp-3); }
.know-more a.btn { text-decoration: none; font-weight: 600; }
@media (max-width: 819px) {
  .facts-line .know-more { display: block; margin: var(--sp-3) 0 0; }
  .facts-line .know-more a.btn { display: inline-flex; min-height: 44px; padding: .55rem 1.1rem; }
}
.cat-pick-line { margin: 0; font-weight: 600; line-height: 2.4; }
.cat-pick-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15rem; }
.cat-pick-link[aria-current="true"] { text-decoration-thickness: 3px; }
.cat-pick-sep { color: var(--ink-soft); }
.cat-pick-list:empty { display: none; }
.cat-pick-h { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--t-subtitle); font-weight: 500; }
.cat-pick-blends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-pick-blends a { display: inline-flex; align-items: center; min-height: 44px; }

/* Change 84 (owner request): every button on the site shares one font, size and spacing. Small, list and toggle
   variants keep their colours and place but no longer change size. The round Create Now step controls are icons, not
   text buttons, and keep their own size. */
/* Change 88 (owner choice from the button shape options): corners 14 px, space 8 top, 6 bottom, 15 left and right,
   18 px text at weight 400, at least 44 px tall. */
:root { --btn-font: 400 var(--t-text)/1.2 var(--body); --btn-h: 44px; --btn-pad: 8px 15px 6px; --btn-gap: .5rem; --btn-radius: 14px; }
.btn, a.btn, button.btn, .btn.btn-sm, .btn.btn-toggle, .btn.cc-more {
  font: var(--btn-font) !important; letter-spacing: normal !important; text-transform: none !important;
  min-height: var(--btn-h) !important; padding: var(--btn-pad) !important; border-width: 1.5px !important;
  border-radius: var(--btn-radius) !important; gap: var(--btn-gap); }
.actions, .yv-row { gap: var(--sp-3); }
/* Second buttons with a dark background: warm black in light and dark mode, cream text 14.4:1. */
.btn-dark, html:not(.force-light) .btn-dark, html.force-dark .btn-dark { background: #25261F; border-color: #25261F; color: #FBF8EF; }
.btn-dark:hover, html:not(.force-light) .btn-dark:hover, html.force-dark .btn-dark:hover { background: #141510; border-color: #141510; color: #fff; }
@media (prefers-color-scheme: dark) { html:not(.force-light) .btn-dark { border-color: #6A6B5C; } }
html.force-dark .btn-dark { border-color: #6A6B5C; }
/* Your version: Create Now beside Add Blend to Cart, then Know your Blend beside Start Over. Half the row each on phones. */
.yv-actions { flex-direction: column; align-items: stretch; }
.yv-row { display: flex; flex-wrap: wrap; }
.yv-row > .btn { flex: 0 1 auto; }
@media (max-width: 599px) { .yv-row { flex-wrap: nowrap; } .yv-row > .btn { flex: 1 1 0; min-width: 0; } }
/* Create Now: the mic at the end of the help line turns voice on. */
.cn-voice-help.cn-voice-offer { margin: var(--sp-2) 0 0; }
.cn-mic-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -.5rem 0 -.5rem var(--sp-1); padding: 0; vertical-align: middle;
  border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: var(--ink); cursor: pointer; }
.cn-mic-btn:hover { background: var(--panel); }
.cn-mic-btn .cn-mic { width: 22px; height: 22px; }
.company-line { font-weight: 600; }

/* Gentle rise (owner choice, change 92): Community posts and blend cards fade in and rise a little as they come into
   view, following the scroll. --p is how far the item has come in, 0 to 1, set by ui.js. Off with reduced motion. */
html.motion main .rise { opacity: var(--p, 1); transform: translateY(calc((1 - var(--p, 1)) * 28px)); }
@media print { html.motion main .rise { opacity: 1; transform: none; } }
/* Each post's kind and a quiet Report link (audit v5 C6, change 93). */
.post-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.post-actions > .post-like { margin-bottom: 0; }
.post-kind { position: relative; display: flex; margin: 0 0 0 auto; }
.post-report { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; color: var(--ink-soft); }
.post-report svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.post-report:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
/* Cookie notice on phones (audit v5 C20, change 93): a short line, Accept and Reject side by side, Manage as a quiet link. */
.ck-short { display: none; }
@media (max-width: 600px) {
  .cookie .ck-long { display: none; } .cookie .ck-short { display: block; margin: var(--sp-1) 0 var(--sp-2); }
  .cookie h2 { font-size: var(--t-text); margin: 0; }
  .cookie-actions { grid-template-columns: 1fr 1fr; }
  .cookie-actions [data-cookie="manage"] { grid-column: 1 / -1; min-height: 44px; padding-block: 0; border: 0; background: none; text-decoration: underline; justify-self: center; }
}
/* On Make it your own, phone messages show at the top, clear of Prepare My Recipe (audit v5 B14, change 93). */
@media (max-width: 859px) { body[data-page="customise"] .toast { top: calc(70px + env(safe-area-inset-top, 0px)); bottom: auto; } }
/* Change 98: a long press on a picture link on phones (collage tiles, cards, posts) no longer lifts a stretched copy of the
   picture. iOS draws that copy at the picture's own shape, ignoring the crop, so the picture looked squashed. Zooms on hover
   only where there is a real pointer, so a tap never leaves a picture stuck half-zoomed. */
a img, .tile img, .post img, .card-media img, .card-photo img { -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@media (hover: none) {
  .tile a:hover img, .collage img:hover, .cust-pic img:hover, .make-pic img:hover, .ing-photo img:hover, .post:hover img { transform: none; }
}
/* Change 98: every text box, search box and list box shows focus the same way: its own outline darkens and thickens,
   with no blue ring. The Search page opens with the box ready to type in, so it now looks like the other boxes. */
input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]):focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Change 98: the folding sections at the foot of a page (Cart: delivery, feedback, cookies, privacy; Connect: guidelines)
   look like Help at the foot of Blends: one panel, a line between topics, the topic in bold sans, + on the right. */
.end-accs { padding-top: .5rem; }
body .end-accs > .hub-section, body[data-page="hub"] .end-accs > .hub-section { margin: 0; padding: 0; border-radius: 0; background: none !important; }
body[data-page="connect"] #guidelines { border-top: 0; border-radius: 14px; padding: 1.5rem clamp(16px, 4vw, 28px); margin-block: var(--sp-3); background: var(--tint-stone); }
@media (max-width: 599px) { body[data-page="connect"] #guidelines { margin-inline: -8px; } }
.end-accs > .hub-section:first-child > .acc { border-top: 1px solid var(--line); }
.end-accs .hub-acc, #guidelines .hub-acc { border-top: 0; border-bottom: 1px solid var(--line); }
.end-accs .hub-acc > summary, #guidelines .hub-acc > summary { display: flex; min-height: 56px; padding: .75rem .25rem; }
.end-accs .hub-acc > summary h2, #guidelines .hub-acc > summary h2 { margin: 0; font-family: var(--body);  font-size: var(--t-subtitle); line-height: 1.2; font-weight: 500; }
.end-accs .hub-acc > summary .sum-sub, #guidelines .hub-acc > summary .sum-sub { display: none; }
.end-accs .hub-acc .acc-lead, #guidelines .hub-acc .acc-lead { display: block; margin-top: 0; color: var(--muted); }
body[data-page="hub"] .end-accs { background: var(--tint-sky); }
#guidelines .hub-acc { border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .end-accs .fb-acc { border-bottom: 1px solid var(--line); }
  .end-accs .fb-acc > summary { min-height: 56px; padding: .75rem .25rem .5rem; }
}
.mk-crop img { transition: none !important; animation: none !important; }

/* Change 98 (owner request): one type family and four text sizes across the site. Alegreya Sans everywhere, the brand
   name included; the serif is gone. Section header, sub header, subtitle and normal text. The larger a size, the thinner
   and darker it is (300, 400, 500), except normal text, which stays 400 with bold for emphasis. All sizes are in rem, so
   they follow the reader's own text size; the two larger sizes also stop at a share of the screen width, so a heading
   never runs off a phone. Pack drawings, count badges and the brand name keep their own sizes. */
:root {
  --display: "Alegreya Sans", Seravek, "Gill Sans", Calibri, system-ui, sans-serif;
  --t-text: 1.0625rem;
  --t-subtitle: calc(var(--t-text) * 1.1765);
  --t-sub: max(calc(var(--t-subtitle) * 1.08), min(1.5rem, 8.4vw));
  --t-head: max(calc(var(--t-sub) * 1.08), min(clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem), 9.4vw));
  --step-0: var(--t-text); --step-1: var(--t-subtitle); --step-2: var(--t-sub); --step-3: var(--t-head); --step-4: var(--t-head);
  --c-head: #14150F; --c-subtitle: #45463A;
}
@media (max-width: 599px) { :root { --t-text: 1.125rem; --t-subtitle: calc(var(--t-text) * 1.1667); --t-sub: max(calc(var(--t-subtitle) * 1.08), min(1.625rem, 8.4vw)); } }
/* With a large text size chosen on the device, body text grows in full. The headings stop at a share of the screen width,
   but never below the size under them, so the order of sizes holds at every setting: header, sub header, subtitle, text. */
@media (prefers-color-scheme: dark) { html:not(.force-light) { --c-head: #FBF8EF; --c-subtitle: #D6D1C3; } }
html.force-dark { --c-head: #FBF8EF; --c-subtitle: #D6D1C3; }
h1, h2 { line-height: 1.12; letter-spacing: -.01em; color: var(--c-head); }
h3 { line-height: 1.22; color: var(--c-subtitle); }
/* The name in the header is set in the site font like the text around it, with no extra letter spacing (owner request, change 101). */
.brand-name { font-family: var(--body); font-weight: 400; letter-spacing: normal; }

/* Change 98 (owner request): one spacing scale. Every gap on the site comes from these six steps. */
:root { --sp-1: .25rem; --sp-2: .5rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2.5rem; --sp-6: clamp(3rem, 7vw, 5rem); }
.section { padding-block: var(--sp-6); }
.section-tight { padding-block: var(--sp-4); }
h1, h2 { margin: 0 0 var(--sp-3); }
h3 { margin: 0 0 var(--sp-2); }
p, ul, ol, dl, blockquote { margin-top: 0; margin-bottom: var(--sp-3); }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }
.eyebrow { margin-bottom: var(--sp-2); }
.lede { margin-bottom: var(--sp-4); }
.actions { gap: var(--sp-3); margin-block: var(--sp-4); }

/* Change 98 (owner choice, "Brand colours"): buttons take Apple's shape and size. A full pill, 17 px text at weight 400,
   11 px above and below, 22 px either side, at least 44 px tall. Main buttons keep the chilli to saffron fade, second
   buttons warm black. Size is in rem and em, so a button grows with the reader's text size and wraps rather than clips. */
:root { --btn-font: 400 var(--t-text)/1.18 var(--body); --btn-h: max(44px, 2.75rem); --btn-pad: .65em 1.3em; --btn-gap: .5rem; --btn-radius: 980px; }
.btn, a.btn, button.btn { letter-spacing: -.01em !important; }
/* Text links that stand alone (not inside a sentence) look like Apple's: link colour, no underline until hovered. */
.linklike:not([data-show]):not([data-signin]) { text-decoration: none; }
.linklike:not([data-show]):not([data-signin]):hover, .linklike:not([data-show]):not([data-signin]):focus-visible { text-decoration: underline; }
/* The line under a fold's title is a subtitle: smaller and heavier than the title, and lighter in colour. */
.acc > summary .sum-sub, .pdp-acc > summary .sum-sub { color: var(--c-subtitle); }
/* Change 98: the gaps between blocks, on the same six steps. A title sits 8 px over its subtitle, a subtitle 16 px over its
   paragraph, an introduction 24 px over what it introduces; lines in a list or a facts table 8 px apart. */
h1:has(+ .sec-sub), h2:has(+ .sec-sub) { margin-bottom: var(--sp-2); }
.sec-sub { margin: 0 0 var(--sp-3); }
.sec-lead, .lede, .measure, .know-line { margin-bottom: var(--sp-4); }
main h3 { margin-bottom: var(--sp-2); }
.cn-step { margin-bottom: var(--sp-2); }
.facts, .buy-row + .buy-row, .grid-answers + .ask-more { margin-top: var(--sp-3); }
.result-group + .result-group, .results-for { margin-bottom: 0; margin-top: var(--sp-4); }
.help-line { margin-top: var(--sp-4); }
.more-blends-h, .add-head, .col-head { margin-bottom: var(--sp-2); }
main * + h3 { margin-top: var(--sp-4); }
main img + h3, main h3 { margin-bottom: var(--sp-2); }
main img + h3 { margin-top: var(--sp-3); }
.posts, .custom-grid, .cn-extra, form.search { margin-top: var(--sp-4); }
.results-for + .result-group { margin-top: var(--sp-4); }
.prose * + h2 { margin-top: var(--sp-5); }
.facts + .buy-row { margin-top: var(--sp-3); }
legend, .field-label, .search label { margin-bottom: var(--sp-2); }
.cn-need li + li { margin-top: var(--sp-1); }

/* Quick answers (owner request, change 100): categories fold open to their questions, a question folds open to its answer,
   and an answer is in three parts that fold too. On phones only What helps starts open; wider screens open all three. */
.qa { max-width: 48rem; }
.qa summary { list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius); }
.qa-cat, .qa-q, .qa-sec { scroll-margin-top: calc(var(--hdr-h, 64px) + 1rem); }
.qa-cat { border-bottom: 1px solid var(--line); }
.qa-cat:first-child { border-top: 1px solid var(--line); }
.qa-cat > summary, .qa-q > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: center; }
.qa-cat > summary { min-height: 56px; padding: .8rem .25rem; }
.qa-cat > summary::after, .qa-q > summary::after, .qa-sec > summary::after { content: "+"; font-family: var(--body); font-size: var(--t-sub); line-height: 1; color: var(--olive); font-weight: 400; }
.qa-cat > summary::after, .qa-q > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.qa-cat[open] > summary::after, .qa-q[open] > summary::after, .qa-sec[open] > summary::after { content: "\2212"; }
.qa-cat.closing > summary::after, .qa-q.closing > summary::after, .qa-sec.closing > summary::after { content: "+"; }
.qa-ct { grid-column: 1; margin: 0; font-size: var(--t-subtitle); font-weight: 500; line-height: 1.25; }
.qa-count { grid-column: 1; margin-top: var(--sp-1); color: var(--c-subtitle); font-size: var(--t-text); }
.qa-list { display: grid; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-4); }
.qa-q { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.qa-q > summary { min-height: 56px; padding: .75rem 1rem; }
.qa-qt { margin: 0; font-family: var(--body); font-size: var(--t-text); font-weight: 500; line-height: 1.35; }
.qa-a { padding: 0 1rem 1rem; }
.qa-sec { border-top: 1px solid var(--line); }
.qa-sec > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; font-weight: 500; color: var(--c-subtitle); }
.qa-sec-body { padding-bottom: var(--sp-3); max-width: 68ch; }
.qa-sec-body > * + * { margin-top: var(--sp-2); }
.qa-sec-body ul { padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.qa-note { margin-top: var(--sp-2); color: var(--ink-soft); border-left: 3px solid var(--clay); padding-left: .75rem; max-width: 68ch; }
.qa-a > .evidence { margin-top: var(--sp-3); }
.secrets-cards.qa, .qa-results { display: grid; gap: var(--sp-2); }

/* Ask, the AI search (owner request, change 101). Laid out like the Claude app: one centred column, questions in soft
   bubbles on the right, answers as plain text, and the question box pinned to the bottom of the screen.
   --chat-h is the box's height and --chat-kb the space an open keyboard takes, both set by the page. */
.chat { padding-bottom: var(--sp-4); }
.chat-col { max-width: 46rem; margin-inline: auto; padding: var(--sp-4) max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px)); }
.chat-intro { margin-top: var(--sp-3); }
.chat-lead { color: var(--ink-soft); max-width: 36rem; }
.chat-log { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-4); }
.chat-turn { scroll-margin-top: 76px; min-width: 0; }
/* The newest answer keeps a screen of room, so its question can sit at the top while the answer arrives below it. */
.chat-log > .chat-ai:last-child { min-height: calc(100svh - var(--chat-h, 9rem) - 10rem); }
.chat-you { justify-self: end; max-width: min(85%, 34rem); background: var(--panel); border: 1px solid var(--line); border-radius: 20px 20px 6px 20px; padding: .65rem 1rem; }
.chat-you p { margin: 0; overflow-wrap: anywhere; }
.chat-ai { line-height: 1.55; }
.chat-ans > :first-child { margin-top: 0; }
.chat-ans p, .chat-ans ul { margin: 0 0 .75rem; }
.chat-ans ul { padding-left: 1.25rem; }
.chat-ans li { margin-bottom: .35rem; }
.chat-src { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.chat-src-h { font-size: var(--t-text); font-weight: 600; color: var(--ink-soft); margin: 0 0 .35rem; }
.chat-src ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.chat-src li { padding-block: .3rem; }
.chat-src li a { font-weight: 600; }
.chat-kind { color: var(--ink-soft); }
.chat-note { color: var(--ink-soft); margin-top: 0; }
.chat-group-h { font-size: var(--step-1); margin: var(--sp-3) 0 var(--sp-2); }
.chat-wait .thinking { margin: 0; }
/* Change 104 (owner request): the box's own background reaches the bottom of the screen, so no page text shows beneath it,
   under Safari's floating panel. The space the panel covers is padding inside the box instead of a gap below it. */
.chat-box { position: fixed; left: 0; right: 0; bottom: var(--chat-kb, 0px); z-index: 30; background: var(--paper);
  padding: .6rem max(12px, env(safe-area-inset-right, 0px)) calc(.5rem + max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px), var(--ui-bottom, 0px) - var(--chat-kb, 0px))) max(12px, env(safe-area-inset-left, 0px));
  box-shadow: 0 -14px 24px -12px var(--paper); transition: padding-bottom .3s ease; }
/* Change 115 (owner request): before the first question the box waits where it will be needed. On a computer it starts in
   the middle of the screen ("mid"), then moves to the bottom when the first question is sent. On a phone the page lifts it
   to where the keyboard's top will be ("kb"), and the paper colour fills the space below it, so nothing shows there. */
body[data-page="search"] .chat-box { transition: padding-bottom .3s ease, transform .45s ease; }
.chat[data-start="mid"] .chat-box { transform: translateY(calc(var(--chat-h, 5rem) / 2 - 50svh)); box-shadow: none; }
.chat[data-start="kb"] .chat-box::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--chat-kb, 0px); background: var(--paper); }
@media (prefers-reduced-motion: reduce) { body[data-page="search"] .chat-box { transition: none; } }
/* Change 118 (owner request): saved conversations. A bookmark at the start of the question box opens a panel that rises
   from the bottom on a phone and sits in the middle on a computer. The bookmark fills in when the conversation is saved. */
.chat-field:has(.chat-saved-btn) { padding-left: .3rem; }
.chat-saved-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; }
.chat-saved-btn:hover { color: var(--ink); }
/* Change 119 (owner request): the bookmark has a heart. Before saving it is a clay outline; saved, it fills with the
   chilli to saffron fade and the heart shows white. */
.bm-icon { width: 24px; height: 24px; overflow: visible; }
.bm-icon .bm-body { fill: none; stroke: var(--clay); stroke-width: 1.6; stroke-linejoin: round; }
.bm-icon .bm-heart { fill: none; stroke: var(--clay); stroke-width: 1.3; stroke-linejoin: round; }
.is-saved .bm-icon .bm-body, .ask-saved-now .bm-icon .bm-body { fill: url(#bm-fade); stroke: #A8321E; }
.is-saved .bm-icon .bm-heart, .ask-saved-now .bm-icon .bm-heart { fill: #FBF8EF; stroke: none; }
.ask-saved { width: min(34rem, calc(100vw - 2rem)); max-height: min(80svh, 40rem); overflow-y: auto; border: 0; border-radius: 20px; padding: .75rem 1.25rem 1.25rem; background: var(--paper); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.ask-saved::backdrop { background: rgba(20, 18, 12, .45); }
@media (max-width: 640px) {
  .ask-saved { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; padding-bottom: calc(1.25rem + var(--float-b)); max-height: min(80svh, calc(100svh - 2rem)); }
}
.ask-saved-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ask-saved-head h2 { margin: 0; font-size: var(--t-sub); font-weight: 400; }
.ask-saved-head h2:focus { outline: none; }
.ask-saved-where { color: var(--ink-soft); margin: .25rem 0 .75rem; }
.ask-saved-act { margin: 0 0 .75rem; }
.ask-saved-now { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.ask-saved-keep { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; margin: 0 0 .75rem; }
.ask-saved-keep p { margin: 0 0 .5rem; }
.ask-saved-list { list-style: none; padding: 0; margin: 0; }
.ask-saved-list li { display: flex; align-items: center; gap: .25rem; border-top: 1px solid var(--line); min-height: 56px; }
.ask-saved-open { flex: 1; min-width: 0; min-height: 48px; text-align: left; border: 0; background: transparent; color: var(--ink); padding: .55rem 0; cursor: pointer; display: grid; gap: .1rem; font: inherit; }
.ask-saved-t { font-weight: 600; overflow-wrap: anywhere; }
.ask-saved-m { color: var(--ink-soft); font-size: var(--t-text); }
.ask-saved-del { flex: none; color: var(--ink-soft); }
.ask-saved-del:hover { color: var(--ink); }
.ask-saved-gone { margin: 0; padding: .9rem 0; color: var(--ink-soft); }
.ask-saved-empty { color: var(--ink-soft); margin: .5rem 0 0; }
.chat-box-in { max-width: 46rem; margin-inline: auto; }
.chat-field { display: flex; align-items: flex-end; gap: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: .4rem .4rem .4rem 1rem; box-shadow: 0 2px 10px rgba(30, 30, 10, .08); }
/* Focus darkens the box's own outline, as on the other boxes (no blue ring). */
.chat-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: none; }
.chat-field textarea, .chat-field textarea:focus, .chat-field textarea:focus-visible { flex: 1; min-width: 0; min-height: 0; width: auto; resize: none; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; margin: 0; color: var(--ink); font: 400 var(--t-text)/1.4 var(--body); padding: .55rem 0; max-height: 168px; }
.chat-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--main-edge); background: var(--main-fade); color: #FBF8EF; display: grid; place-items: center; cursor: pointer; }
.chat-send:hover { background: var(--main-fade-hover); }
.chat-send:disabled { opacity: .55; cursor: wait; }
.chat-send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Change 106 (owner request): the countdown above the box, and the sign-in invitation that takes the box's place after
   the tenth question without signing in. */
.chat-left { margin: 0 var(--sp-2) .4rem; font-size: var(--t-text); color: var(--ink-soft); text-align: center; }
.chat-left[hidden], .chat-gate[hidden], [data-chat-ask][hidden], [data-gate-more][hidden], [data-gate-later][hidden] { display: none; }
.chat-gate { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: var(--sp-3); max-height: 60svh; overflow-y: auto; }
.chat-gate-h { font-size: var(--step-1); margin: 0 0 .4rem; }
.chat-gate p { margin: 0 0 .5rem; }
.chat-gate ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.chat-gate-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
/* Change 105 (owner request): no footer on Ask; the conversation itself keeps room for the pinned box instead. */
body[data-page="search"] .site-footer { display: none; }
body[data-page="search"] .chat { padding-bottom: calc(var(--sp-4) + var(--chat-h, 9rem)); }
body[data-page="search"] .toast { bottom: calc(var(--chat-h, 9rem) + .75rem + var(--chat-kb, 0px)); }

/* Change 105 (owner request): the picture's main colour (change 103) is only a faint hint while it loads, 8% of it mixed
   into the page background, so it is all but invisible between pages. Browsers without color-mix show the background. */
main img[data-tint="1"] { background-color: color-mix(in srgb, var(--tint) 8%, var(--paper)); }

/* Change 107 (owner request): no empty band under the top picture on Master Blends, Create and Connect. The picture's
   section kept 1.5 to 3rem below it and the next section opened with its full top space; now only a little is kept. */
.blends-hero.hero-open { padding-bottom: 0; }
.blends-hero.hero-open + .section { padding-top: var(--sp-4); }
/* Change 108 (owner request): on Home a strip of page colour and a line sat between the opening picture and the green
   How it works band. The opening picture now meets the next section directly, on every page. */
.hero.hero-open { padding-bottom: 0; border-bottom: 0; }
/* Change 120 (owner request): ideas from what is in the kitchen. Three short questions in the conversation, before Ask suggests. */
.chat-chooser { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: var(--sp-3); }
.chooser-h { font-size: var(--t-sub); font-weight: 400; margin: 0 0 var(--sp-2); }
.chooser-h:focus { outline: none; }
.chooser-q { border: 0; padding: 0; margin: 0 0 var(--sp-3); min-width: 0; }
.chooser-q legend, .chooser-q > label { font-weight: 600; margin-bottom: .4rem; display: block; padding: 0; }
.chooser .tick-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chooser-have { margin: 0 0 var(--sp-3); }
.chooser-go { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.chooser .err[hidden] { display: none; }
.mk-ask { margin: var(--sp-3) 0 0; }

/* Servings and the recipe bookmark (owner request, change 121). */
.serves { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 1rem; }
.serves-h { margin: 0; font-weight: 700; color: var(--ink); }
.serves-ctl { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: .2rem; }
/* Warm black with cream signs in both themes, like the secondary buttons. */
.serves-btn, html:not(.force-light) .serves-btn, html.force-dark .serves-btn { flex: none; width: 44px; height: 44px; border: 1px solid #25261F; border-radius: 50%; background: #25261F; color: #FBF8EF; font-family: var(--body); font-size: var(--t-subtitle); font-weight: 500; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.serves-btn:hover { background: #141510; }
@media (prefers-color-scheme: dark) { html:not(.force-light) .serves-btn { border-color: #6A6B5C; } }
html.force-dark .serves-btn { border-color: #6A6B5C; }
.serves-btn:disabled, html:not(.force-light) .serves-btn:disabled, html.force-dark .serves-btn:disabled { background: transparent; border-color: var(--line); color: var(--ink-soft); cursor: default; }
.serves-n { min-width: 0; width: 6.5em; flex: 0 1 auto; text-align: center; font-weight: 500; font-size: var(--t-subtitle); color: var(--ink); }
.serves-note, .serves-for { margin: -.4rem 0 1rem; }
.serves-for { margin: 0 0 .5rem; color: var(--ink-soft); }
.recipe-mark { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .75rem 0 .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.recipe-mark:hover { border-color: var(--clay); }
.recipe-mark[aria-pressed="true"] .bm-icon .bm-body { fill: url(#bm-fade); stroke: #A8321E; }
.recipe-mark[aria-pressed="true"] .bm-icon .bm-heart { fill: #FBF8EF; stroke: none; }
.yv-head, .cn-ready-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.yv-head h2, .cn-ready-head h2 { margin: 0; }
.cn-ready-head { margin-bottom: .5rem; }
.recipe-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin: .75rem 0 .25rem; }
.recipe-top .serves { margin: 0; }
.sum-amt { font-weight: 600; margin: .25rem 0; }
.sr-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.sr-blend { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.sr-blend a { font-weight: 700; }
@media (max-width: 640px) {
  .serves { gap: .5rem; }
  .serves-h { flex-basis: 100%; }
}

/* Pop-ups clear the browser controls (owner report, 28 Oct, change 123). --float-b is the bottom edge a pop-up must keep clear:
   the phone's own safe area, or Safari's floating controls (--ui-bottom and --safe-b, set by the mobile preview and 0 elsewhere).
   Bottom sheets reach the screen edge and pad their content above it; centred pop-ups centre in the space above it. */
:root { --float-b: max(env(safe-area-inset-bottom, 0px), var(--safe-b, 0px), var(--ui-bottom, 0px)); }
.bs-notice:modal, .ask-saved:modal { bottom: var(--float-b); max-height: calc(100% - var(--float-b) - 2rem - env(safe-area-inset-top, 0px)); overflow-y: auto; transition: bottom .3s ease; }
@media (max-width: 640px) { .ask-saved:modal { bottom: 0; max-height: calc(100% - 2rem - env(safe-area-inset-top, 0px)); } }
/* While the cookie panel is open, the Ask box and Create Now's step bar sit just above it instead of under it, so they can be used straight away. */
html.cookie-open .chat-box { bottom: max(var(--chat-kb, 0px), calc(var(--cookie-h, 0px) + var(--ui-bottom, 0px))); padding-bottom: .5rem; }
html.cookie-open .cn-nav { bottom: calc(var(--cookie-h, 0px) + var(--ui-bottom, 0px)); padding-bottom: .5rem; }

/* Change 125 (owner request): what worked and what did not, one four-stop slider per line, unrated until moved. */
.mk-rate { border: 0; margin: 0 0 var(--sp-3); padding: 0; min-width: 0; }
.mk-rate legend { font-weight: 700; padding: 0; margin-bottom: var(--sp-2); }
.rate-row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rate-row label { font-weight: 400; margin: 0; }
.rate-out { color: var(--muted); }
.rate-row.is-set .rate-out { color: var(--ink); }
.rate-row input[type=range] { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 44px; margin: 0; accent-color: var(--olive); }
.rate-row:not(.is-set) input[type=range] { opacity: .55; }
.rate-row label { grid-column: 1; grid-row: 1; }
.rate-out { grid-column: 2; grid-row: 1; }
/* Each stop's name sits under its own place on the slider: the ends at the edges, the middle two at a third and two thirds. */
.rate-stops { grid-column: 1 / -1; position: relative; height: 1.4em; color: var(--muted); font-size: var(--t-text); line-height: 1.25; }
.rate-stops > span { position: absolute; top: 0; white-space: nowrap; left: calc(var(--i) * 100% / 3); transform: translateX(calc(var(--i) * -100% / 3)); }
#mk-blend[aria-invalid=true] { border-color: var(--error, #A33A2A); box-shadow: 0 0 0 1px var(--error, #A33A2A); }

/* Change 125 (owner request): a picture tapped in Choose a base or Add Ingredients opens its page with no fade out or fade in. */
html.fly-still .reveal, html.fly-still main img { opacity: 1 !important; transform: none !important; transition: none !important; }
html.fly-still main .pop-in, html.fly-still details[open] > :not(summary) { animation: none !important; }
html.fly-still::view-transition-old(root), html.fly-still::view-transition-new(root) { animation: none !important; }

/* Change 125 (owner request): page titles a fifth larger and page subtitles 30% larger and lighter, on every screen. */
:root { --t-page: calc(var(--t-head) * 1.2); --t-page-sub: min(calc(var(--t-text) * 1.3), var(--t-sub)); } /* the subtitle never outgrows a section header at large text sizes */
main h1:not(.sr-only), .hero .hv-title h1, .pdp-buy h1 { font-size: var(--t-page); }
.hero .hv-sub, main h1 + .lede, main h1 + .sec-sub, main h1 + .lead { font-size: var(--t-page-sub); font-weight: 400; line-height: 1.25; }

/* Change 125 (owner request): Choose from, then a button per category; two lists for ingredients. */
.cat-pick-line { line-height: 1.4; margin: 0 0 var(--sp-2); }
.cat-pick-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cat-pick-btns .cat-pick-link { padding: 0 1.1rem; }
.cat-pick-btns .cat-pick-link[aria-expanded="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
.two-pick { display: grid; gap: var(--sp-2); }
.two-pick .more-blends-h { margin-bottom: 0; }
.two-pick label { display: block; margin-bottom: var(--sp-1); }
.two-pick select:disabled { opacity: .6; }
@media (min-width: 820px) { .two-pick { grid-template-columns: repeat(2, minmax(0, 18rem)); } .two-pick .more-blends-h { grid-column: 1 / -1; } }

/* Change 125 (owner request): on wider screens the Kitchen Secrets and My Kitchen pictures take half the width, as Make it your own on Home. */
@media (min-width: 820px) {
  .secrets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: var(--sp-4) var(--sp-5); }
  .mk-split { align-items: center; margin-bottom: var(--sp-4); }
  .mk-split .mk-pic { max-width: none; margin: 0; }
  .mk-split .mk-head > :last-child { margin-bottom: 0; }
}

/* Change 127 (owner request, 29 Oct): the open menu shows the cross only, without the word Close. Page names never break
   inside a word (an iPhone squeezed them to a few letters a line), and the space under the last item is trimmed. */
.menu-open .menu-btn { display: inline-grid; width: 48px; padding: 0; border-radius: 50%; }
@media (max-width: 430px) { .menu-open .brand-name { display: inline; } }
.menu-inner { padding-block: 1rem .5rem; grid-template-columns: minmax(0, 1fr); }
.menu-main { grid-template-columns: minmax(0, 1fr); }
.menu-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px; }
.menu-page-link { min-width: 0; }
.menu-page-link > span { white-space: nowrap; }
.site-menu { padding-bottom: 0; }

/* Change 127 (owner request): Choose a base, the three buttons share one line on every screen. */
.cat-pick-btns { flex-wrap: nowrap; }
.cat-pick-btns .cat-pick-link { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 .5rem; }
@media (min-width: 820px) { .cat-pick-btns .cat-pick-link { flex: 0 0 auto; padding: 0 1.5rem; } }

/* Change 127 (owner request): Kitchen Secrets, My Kitchen and My Creations on wide screens take half the width each for the
   picture and for every word. Kitchen Secrets and My Kitchen have the picture on the left; My Creations on the right.
   Phones keep the title and lead first, then the picture, then the rest. */
@media (max-width: 819px) {
  .secrets { gap: 0; }
  .secrets > .secrets-main, .mk-split > .mk-main, .mc-split > .mc-main { display: contents; }
  .secrets h2, .secrets .sec-sub, .secrets .sec-lead, .mk-split .mk-head, .mc-split .mc-head { order: 1; }
  .secrets .secrets-pic { order: 2; margin-bottom: var(--sp-4); }
  .secrets .secrets-list, .mk-split > .mk-main > :not(.mk-head), .mc-split > .mc-main > :not(.mc-head) { order: 3; }
  .mk-split .mk-pic, .mc-split .mc-pic { order: 2; }
  .mk-split, .mc-split { row-gap: 0; }
}
@media (min-width: 820px) {
  .secrets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .secrets-main { display: flex; flex-direction: column; min-width: 0; }
  .secrets-main > h2 { margin-top: 0; }
  .mk-split, .mc-split { align-items: start; margin-bottom: 0; }
  .mk-split .mk-pic, .mc-split .mc-pic { max-width: none; margin: 0; position: sticky; top: calc(var(--hdr-h, 64px) + 1rem); }
  .mk-main, .mc-main { display: grid; gap: var(--sp-3); min-width: 0; }
  .mk-main .mk-head > :last-child, .mc-head > :last-child { margin-bottom: 0; }
  body[data-page="create"] .mk-pic, body[data-page="create"] .mc-pic { margin-inline: 0; }
  body[data-page="create"] .mk-pic img, body[data-page="create"] .mc-pic img { border-radius: var(--radius); }
}
.mc-pic { margin: 0 0 var(--sp-4); }
.mc-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--panel); }
@media (max-width: 819px) { body[data-page="create"] .mc-pic { margin-inline: calc(-1 * clamp(16px, 4vw, 28px)); } body[data-page="create"] .mc-pic img { border-radius: 0; } }
.mc-head h2 { margin-top: 0; }

/* Change 127 (owner request): Rate your creation. Each slider sits beside its name, with simple faces in place of the four words:
   once above all the sliders on phones, under each slider on wider screens. */
.rate-row { grid-template-columns: 5.5rem minmax(0, 1fr) 5.2em; margin-bottom: var(--sp-2); }
.rate-row label { grid-column: 1; grid-row: 1; }
.rate-row input[type=range] { grid-column: 2; grid-row: 1; }
.rate-out { grid-column: 3; grid-row: 1; text-align: right; font-size: .9em; }
.rate-stops { grid-column: 2; grid-row: 2; font-size: 1.3rem; height: 1.5em; line-height: 1.2; color: inherit; }
.rate-key { display: none; }
@media (max-width: 819px) {
  .rate-row:not(.rate-key) .rate-stops { display: none; }
  .rate-key { display: grid; margin-bottom: 0; }
  .rate-key .rate-stops { grid-row: 1; }
  .rate-row { grid-template-columns: 4.6rem minmax(0, 1fr) 4.6em; column-gap: var(--sp-2); }
  .rate-out { font-size: .82em; }
}
.mk-blend-cat > div { flex-wrap: nowrap; gap: var(--sp-1) var(--sp-3); }
.mk-blend-field select:disabled { opacity: .6; }
.mk-rest[hidden] { display: none; }

/* Change 127 (owner request): a soft vignette on every picture, except the posts in Fresh ideas and on Connect, the community
   page. It is drawn over the picture, so the pictures themselves are unchanged. Pack pictures and the visitor's own photos keep none. */
.make-pic, .secrets-pic, .mk-pic, .mc-pic, .dish-photo, .vgw { position: relative; }
.vgw { display: block; }
.hv-frame::after, .card-media::after, .tile a::after, .make-pic::after, .secrets-pic::after, .mk-pic::after, .mc-pic::after, .dish-photo::after, .vgw::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(30, 22, 10, 0) 55%, rgba(30, 22, 10, .3) 100%);
}
@media (min-width: 820px) { .mk-pic::after, .mc-pic::after { border-radius: var(--radius); } }
body[data-page="connect"] .hv-frame::after { content: none; }
.collage .vgw { overflow: hidden; }
.collage.n3 > .vgw:first-child { grid-column: 1 / -1; }
.collage.n3 > .vgw:first-child img { aspect-ratio: 8 / 3; }
.how-pic { width: min(86%, 13rem); margin: 0 auto var(--sp-3); border-radius: 50%; box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--line); }
.how-pics .how-pic img { width: 100%; margin: 0; box-shadow: none; }
@media (min-width: 860px) { .ing-photo .vgw { border-radius: 12px; overflow: hidden; } }