/* =====
   DINKOMART — the product page (after store.css): the first screen
   (gallery and buy box), THE DETAILS, the related rail, the lightbox, the
   price request.

   Redesigned 2026-10-14 (owner: "cluttered, clumsy … not so great"; the
   thumbnails "horizontal not vertical"). What changed and why:
   · The first screen holds only what decides a purchase — the photograph,
     its thumbnails in a row under it; where you are, the brand, the name,
     one line, the price, the pack, the way to buy — and fits 1536x730.
   · The partner's long text left the buy column for a band of its own,
     cut at its own sub-headings into cards (md_blocks), the specification,
     questions and maker beside them.
   · Fills, not outlines: no bordered boxes, no rules between rows; one
     radius family (30 / 26 / 18 / pill).
   ===== */

/* ----- one photograph, two pages
   It shares a name with the card clicked (shop.js), and flies into place. */
[data-pdp] .gal__slide:first-child img:not(.vt-off) { view-transition-name: pimg; }
::view-transition-group(pimg) { animation-duration: .55s; animation-timing-function: var(--ease-out); }
::view-transition-old(pimg), ::view-transition-new(pimg) { height: 100%; object-fit: contain; }

/* The page has its own WhatsApp button, naming the product and the pack. */
.page-product .wa { display: none; }

/* =====
   THE FIRST SCREEN
   ===== */
.pdp { padding-top: clamp(12px, 1.6vw, 22px); }
.pdp__top {
  display: grid; align-items: start; gap: clamp(1.75rem, 4.4vw, 4.75rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  padding-bottom: clamp(2.75rem, 5.5vw, 5rem);
}

/* ----- the gallery: the photograph, then its row of thumbnails. It
   stays in view while the buy box scrolls, so it must FIT in view. */
.gal { position: sticky; top: calc(var(--top-h, 72px) + 16px); display: grid; gap: 14px; min-width: 0; }
/* The photographs' corner is cut for the zoom (main.css .cut on the
   track, a 44px disc in a 50px notch). 5:4, as tall as the screen allows
   with the row under it. */
.gal__stage {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66'%3E%3Cpath d='M0 66H66A16 16 0 0 0 50 50H44A28 28 0 0 1 16 22V16A16 16 0 0 0 0 0Z'/%3E%3C/svg%3E"); --cut-w: 66px; --cut-h: 66px;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 5 / 4; max-height: calc(100svh - var(--top-h, 72px) - 138px); min-height: 340px;
  border-radius: 30px;
}
.gal__track {
  display: flex; height: 100%; border-radius: inherit; background: var(--surface-sunk);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__track:focus-visible { outline-offset: -4px; }
.gal__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; overflow: hidden; }
.gal__slide img { position: relative; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.gal__slide.is-pack { background: var(--plate); }
.gal__slide.is-pack img { object-fit: contain; padding: 6% 8%; background: none; }
/* Another shape: whole, on its own top-to-bottom colours (pic_fit),
   edges only just feathered; here every photograph is seen whole. */
.gal__slide.is-wide img { --f: linear-gradient(transparent, #000 6%, #000 94%, transparent); position: absolute; inset: 50% 0 auto; height: auto; translate: 0 -50%; }
.gal__slide.is-tall img { --f: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); position: absolute; inset: 0 auto 0 50%; width: auto; translate: -50% 0; }
.gal__slide:is(.is-wide, .is-tall) img { -webkit-mask-image: var(--f); mask-image: var(--f); }
/* THE FIRST PHOTOGRAPH'S SKELETON: until it lands, a light sweeps its
   frame (its own colours stay under it). CSS alone, so it is there from
   the first paint on a slow line, not once the scripts arrive (D42); the
   rest of the row are main.js's. */
html.js .gal__slide:first-child:has(> img:not(.is-loaded))::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 22%, var(--skel-hi) 50%, transparent 78%);
  translate: -100% 0; animation: skel 1.35s cubic-bezier(.45, .05, .55, .95) infinite;
}
@media (prefers-reduced-motion: reduce) { html.js .gal__slide:first-child::after { animation: none; } }

.gal__nav, .gal__zoom {
  position: absolute; z-index: 2;
  width: var(--tap); height: var(--tap); display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--fg);
  box-shadow: 0 8px 20px -10px rgba(17, 21, 18, .35);
  transition: opacity var(--dur) var(--ease), scale var(--dur-press) var(--ease-out), background var(--dur) var(--ease);
}
.gal__nav:active, .gal__zoom:active { scale: .92; }
.gal__nav { top: 50%; translate: 0 -50%; }
.gal__nav--prev { left: 16px; }
.gal__nav--next { right: 16px; }
.gal__nav:disabled { opacity: 0; pointer-events: none; }
.gal__zoom { top: 0; right: 0; background: var(--fg); color: var(--bg); box-shadow: none; }
@media (hover: none), (pointer: coarse) { .gal__nav { display: none; } }
@media (hover: hover) and (pointer: fine) {
  .gal__stage:not(:hover):not(:focus-within) .gal__nav { opacity: 0; }
  .gal__nav:hover { background: var(--surface); }
  .gal__zoom:hover { background: var(--brand); color: var(--on-brand); }
}
.gal__count {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  padding: 7px 11px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; color: var(--fg-muted);
}
.gal__count b { color: var(--fg); font-weight: 600; }
.gal__stage .pcard__flags { top: 16px; left: 16px; right: 72px; }

/* THE ROW: every photograph as a thumbnail under it, the one on screen
   ringed in the brand's green; sideways when there are more than fit. */
.gal__thumbs {
  display: flex; gap: 10px; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  /* Room for the ring, which a sideways scroller would clip. */
  padding: 5px; margin: -5px;
}
.gal__thumbs::-webkit-scrollbar { display: none; }
.gal__thumb {
  position: relative; flex: none; width: 76px; height: 76px; padding: 0;
  border: 0; border-radius: 18px; overflow: hidden;
  background: var(--plate, var(--surface-sunk));
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow .3s var(--ease), translate .3s var(--ease-out), scale var(--dur-press) var(--ease-out);
}
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumb img.is-pack { object-fit: contain; padding: 9%; }
.gal__thumb img.is-fit { object-fit: contain; }
.gal__thumb:active { scale: .94; }
.gal__thumb.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
@media (hover: hover) and (pointer: fine) { .gal__thumb:not(.is-on):hover { translate: 0 -3px; } }

/* ----- the buy box: where you are, the brand, the name, one line, the
   price, the pack, the way to buy; at a glance, four facts. */
.buy { display: grid; align-content: start; min-width: 0; max-width: 600px; padding-top: 2px; }
.buy__crumbs { margin-bottom: 20px; }
.buy__brand {
  display: inline-flex; align-items: center; gap: 9px; justify-self: start;
  min-height: 36px; padding: 3px 14px 3px 3px; margin-bottom: 14px;
  border-radius: var(--r-full); background: var(--surface-sunk);
  color: var(--fg-muted); text-decoration: none; font-weight: 600; font-size: .86rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.buy__brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #fff; }
.buy__brand:hover { color: var(--fg); background: var(--surface-2); }
.buy__name {
  font-size: clamp(1.95rem, 1.25rem + 1.9vw, 3.05rem);
  font-weight: 800; line-height: 1.03; letter-spacing: -.038em;
  text-wrap: balance;
}
.buy__lede { margin-top: 14px; max-width: 56ch; color: var(--fg-muted); font-size: 1rem; line-height: 1.6; }

.buy__form { display: grid; gap: 16px; margin-top: 24px; }
.buy__price p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
/* The price in the headline's face, as on every card (D43). */
.price--big { font: 800 clamp(2rem, 1.6rem + 1vw, 2.65rem)/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.price--big.price--quote { font-family: var(--font-mono); font-weight: 600; letter-spacing: var(--track-label); }
.price--big.price--quote { font-size: 1.05rem; }
.buy__mrp { font: 400 .95rem var(--font-mono); color: var(--fg-subtle); }
.buy__off {
  align-self: center; padding: 5px 10px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-ink);
  font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label);
}
.buy__pack {
  flex-basis: 100%;
  font: 500 var(--fs-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle);
}
.buy__label {
  margin-bottom: 10px; padding: 0;
  font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--fg-subtle);
}

/* A pack is a tile you choose, its own price on it: a fill, and the one
   chosen raised on the page's own colour and ringed. */
.vopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.vopt { position: relative; display: grid; }
.vopt input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.vopt__box {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 10px;
  min-height: 66px; padding: 12px 16px;
  border-radius: 18px; background: var(--surface-sunk);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.vopt__box b { font-weight: 650; font-size: .98rem; line-height: 1.25; }
.vopt__box small { grid-column: 1; font-size: .8rem; color: var(--fg-subtle); }
/* Bundle or Single (D82): a tag, the bundle in the brand's tint. */
.vopt__box .vtag {
  justify-self: start; margin-top: 3px; padding: 3px 8px; border-radius: var(--r-full);
  font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  background: var(--surface-2); color: var(--fg-muted);
}
.vopt__box .vtag--bundle { background: var(--brand-soft); color: var(--brand-ink); }
/* "= HTP set ₹6,560 + Petrol engine ₹7,050": a bundle that is its singles. */
.buy__sum { flex-basis: 100%; font-size: .9rem; color: var(--fg-muted); }
/* DM's Choice over the name (D82), a size up from the card's. */
.buy__choice { justify-self: start; width: max-content; margin: 2px 0 -4px; padding: 8px 22px 8px 11px; font-size: .9rem; --notch: 11px; }
.buy__choice .dmc__mark { width: 28px; height: 14px; }
/* A subsidy, under the name (D84). */
.buy__perk {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin: -2px 0 0; padding: 6px 13px 6px 9px;
  border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-ink); font: 650 .88rem/1.1 var(--font-body);
}
.buy__perk .ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.buy__sum b { font: 600 .9rem var(--font-mono); color: var(--fg); }
.vopt__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 .95rem var(--font-mono); color: var(--fg); }
.vopt:hover .vopt__box { background: var(--surface-2); }
.vopt input:checked + .vopt__box {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--brand), 0 14px 26px -18px color-mix(in srgb, var(--brand) 80%, transparent);
}
.vopt input:focus-visible + .vopt__box { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.vopt input:active + .vopt__box { scale: .98; }

/* The blocks a pack changes, shown by the chosen pack's position, so the
   page is right with no script; without :has every pack's block shows. */
[data-pdp]:not(:has(.vopt:nth-of-type(2) input:checked)) .vblock[data-v='2'],
[data-pdp]:not(:has(.vopt:nth-of-type(3) input:checked)) .vblock[data-v='3'],
[data-pdp]:not(:has(.vopt:nth-of-type(4) input:checked)) .vblock[data-v='4'],
[data-pdp]:has(.vopt:nth-of-type(n+2) input:checked) .vblock[data-v='1'] { display: none; }
/* An option's own photographs (D82): a slide or thumbnail naming options
   (data-v="1 2") shows only while one of them is chosen; one naming none
   is every option's. shop.js counts what is left. */
[data-pdp]:has(.vopt:nth-of-type(1) input:checked) :is(.gal__slide, .gal__thumb)[data-v]:not([data-v~='1']),
[data-pdp]:has(.vopt:nth-of-type(2) input:checked) :is(.gal__slide, .gal__thumb)[data-v]:not([data-v~='2']),
[data-pdp]:has(.vopt:nth-of-type(3) input:checked) :is(.gal__slide, .gal__thumb)[data-v]:not([data-v~='3']),
[data-pdp]:has(.vopt:nth-of-type(4) input:checked) :is(.gal__slide, .gal__thumb)[data-v]:not([data-v~='4']) { display: none; }

/* The way to buy: the number and Add on one line; Buy now and WhatsApp
   under it, a pair. */
.buy__row { display: flex; gap: 10px; }
.buy .qty { border: 0; background: var(--surface-sunk); }
.buy .qty button:hover { background: var(--surface-2); }
.buy__add { flex: 1; display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 10px; }
.buy__add .ico { grid-row: 1; grid-column: 1; width: 20px; height: 20px; }
.buy__add [data-addlabel] { grid-row: 1; grid-column: 2; }
.buy__more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.buy__more .btn { min-height: 50px; }
.buy__now { background: var(--fg); color: var(--bg); }
.buy__now:hover { background: var(--brand-ink); color: var(--bg); }
[data-theme='dark'] .buy__now:hover { background: var(--fg-muted); }
/* At night the page's sunk fill all but meets the page: a step lighter. */
[data-theme='dark'] :is(.buy .qty, .buy__wa, .vopt__box, .facts > div, .buy__brand) { background: rgba(255, 255, 255, .065); }
[data-theme='dark'] :is(.buy__wa, .vopt):hover :is(.vopt__box), [data-theme='dark'] .buy__wa:hover { background: rgba(255, 255, 255, .1); }
.buy__wa { background: var(--surface-sunk); color: var(--fg); }
.buy__wa:hover { background: var(--surface-2); color: var(--fg); }
.buy__wa .ico, .sum__wa .ico { color: #0F8445; }
[data-theme='dark'] :is(.buy__wa, .sum__wa) .ico { color: #34C46D; }
.buy__state {
  padding: 14px 18px; border-radius: 16px; background: var(--surface-sunk);
  font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label);
}
.buy__pay {
  display: flex; align-items: center; gap: 8px;
  font: 500 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle);
}
.buy__pay .ico { width: 15px; height: 15px; color: var(--brand); }

/* At a glance: up to four of the pack's facts, as tiles. */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 26px 0 0; }
.facts > div { padding: 13px 16px; border-radius: 18px; background: var(--surface-sunk); }
.facts dt, .specs dt {
  font: 600 var(--fs-label)/1.45 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle);
}
.facts dd { margin-top: 4px; font-size: .9rem; font-weight: 600; line-height: 1.4; }


/* =====
   THE DETAILS — the partner's words as cards on the shop's ground, the
   specification, questions and maker held in view beside them.
   ===== */
.pdx { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); background: var(--surface-sunk); }
.pdx__head { display: grid; gap: 10px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pdx__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--fg-subtle);
}
.pdx__kicker::before { content: ''; width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: var(--accent); }
.pdx__title {
  max-width: 24ch; font-size: clamp(1.8rem, 1.2rem + 1.7vw, 2.75rem); font-weight: 800; line-height: 1.04; letter-spacing: -.038em;
}
.pdx__grid { display: grid; align-items: start; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
/* No prose, only the sheet — a machine's (D77): the sheet takes the band,
   its rows two to a line, the maker beside it while there is room. */
.pdx__grid--side { grid-template-columns: minmax(0, 1fr); }
.pdx__grid--side .pdx__side { position: static; align-items: start; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (min-width: 701px) {
  .pdx__grid--side .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
  .pdx__grid--side .specs > div + div { box-shadow: none; }
  .pdx__grid--side .specs > div:nth-child(n + 3) { box-shadow: inset 0 1px 0 var(--hairline); }
}

/* The partner's text, a card per sub-heading of theirs; two columns when
   there are several, each card whole in its column. */
.dblocks { display: grid; gap: 16px; min-width: 0; }
.dblocks--two { display: block; columns: 2 300px; column-gap: 16px; }
.dblocks--two > .dblock { break-inside: avoid; margin-bottom: 16px; }
.dblock {
  position: relative; padding: clamp(22px, 2.3vw, 32px);
  border-radius: 26px; background: var(--surface);
}
.dblock__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--font-display); font-size: clamp(1.18rem, 1rem + .4vw, 1.4rem); font-weight: 700; letter-spacing: -.02em;
  font-variation-settings: 'opsz' 36, var(--wonk-off);
}
.dblock__n {
  display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding-inline: 8px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent-ink);
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .04em;
}
/* A lead: text before any sub-heading, said a size up. */
.dblock--lead .prose { font-size: 1.08rem; line-height: 1.7; color: var(--fg); }
.dblock .prose { color: var(--fg-muted); }
/* a card holding a table: the table takes the card's width; lines of text keep their measure */
.dblock .prose:has(.tablewrap) { max-width: none; }
.dblock .prose:has(.tablewrap) > :not(.tablewrap) { max-width: 68ch; }

/* ===== THE STORY LAYOUT (D82): food with a spec sheet (product.php $rich).
   The facts as tiles, then the partner's text as a story, every block on
   the range's tint where it speaks for the product. */
.pdx--rich .pdx__head { margin-bottom: clamp(18px, 2.4vw, 28px); }
.pdr + .pdr { margin-top: 16px; }

/* At a glance: each fact a tile, its mark in the range's colours. */
.glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px;
  margin: 0 0 16px; padding: 0; list-style: none;
}
.glance__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px;
  align-items: center; padding: 18px 20px; border-radius: 22px; background: var(--surface);
}
.glance__ico {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px;
  background: var(--tint-a, var(--brand-soft)); color: var(--tint-b, var(--brand-ink));
}
.glance__ico .ico { width: 23px; height: 23px; }
.glance__k { align-self: end; font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); }
.glance__v { align-self: start; font-size: 1.02rem; font-weight: 650; line-height: 1.35; color: var(--fg); overflow-wrap: anywhere; }

/* The story: two columns; what is drawn takes the width. */
.story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.story__block {
  position: relative; isolation: isolate; min-width: 0; padding: clamp(22px, 2.8vw, 40px);
  border-radius: 28px; background: var(--surface); overflow: hidden; overflow: clip;
}
.story__block:is(.story__block--lead, .story__block--vs, .story__block--nutri, .story__block--label) { grid-column: 1 / -1; }
.story__head {
  max-width: 34ch; margin-bottom: 20px; text-wrap: balance;
  font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + .9vw, 1.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em;
}
.story__block .prose { max-width: none; }
.story__block .prose > :is(p, ul) { max-width: 68ch; }

/* the opening line, large, on the range's tint, its mark behind */
.story__block--lead { background: linear-gradient(120deg, var(--tint-a) 0%, transparent 62%), var(--surface); }
.story__block--lead .prose > p {
  max-width: 34ch; color: var(--fg);
  font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.1vw, 1.95rem); font-weight: 650; line-height: 1.3; letter-spacing: -.018em;
}
.story__mark { position: absolute; right: -2%; bottom: -18%; z-index: -1; width: clamp(150px, 18vw, 250px); aspect-ratio: 1; color: var(--tint-b); opacity: .1; }
.story__mark .ico { width: 100%; height: 100%; }

/* A comparison (md_versus): theirs ticked on the brand's colour, the
   other crossed and quiet. Stacked in a narrow card, every value under its
   column's name. */
.story__block--vs { container-type: inline-size; }
.vs { display: grid; }
.vs__row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
.vs__row > span { padding: 16px 18px; }
.vs__row + .vs__row > span { box-shadow: inset 0 1px 0 var(--hairline); }
.vs__k { align-self: stretch; display: flex; align-items: center; font-weight: 650; color: var(--fg); }
.vs__a, .vs__b { display: flex; align-items: flex-start; gap: 11px; line-height: 1.45; }
.vs__a { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--fg); font-weight: 550; }
.vs__b { color: var(--fg-subtle); }
.vs__row--head > span { padding-block: 16px; align-items: center; }
.vs__row--head .vs__k { font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); }
.vs__row--head .vs__a { border-radius: 18px 18px 0 0; background: var(--brand); color: var(--on-brand); }
.vs__row--head .vs__b { border-radius: 18px 18px 0 0; background: var(--surface-sunk); color: var(--fg-muted); }
.vs__row--head b { font-weight: 750; line-height: 1.25; }
.vs__row--head .ico { flex: none; width: 18px; height: 18px; }
.vs__row:last-child .vs__a { border-radius: 0 0 18px 18px; }
.vs__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; font-style: normal; }
.vs__a .vs__mark { background: var(--brand); color: var(--on-brand); }
.vs__b .vs__mark { background: var(--surface-sunk); color: var(--fg-subtle); }
.vs__mark .ico { width: 13px; height: 13px; }
.vs__who { display: none; }
@container (max-width: 620px) {
  /* the head becomes the key: the two columns' names, once, as two chips */
  .vs__row--head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 0 6px; }
  .vs__row--head .vs__k { display: none; }
  .vs__row--head > :is(.vs__a, .vs__b) { padding: 10px 12px; border-radius: 14px; font-size: .84rem; }
  .vs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 0; }
  .vs__row + .vs__row > span { box-shadow: none; }
  .vs__row + .vs__row { box-shadow: inset 0 1px 0 var(--hairline); }
  .vs__row > .vs__k { grid-column: 1 / -1; padding: 0 2px 2px; }
  .vs__row > :is(.vs__a, .vs__b) { padding: 12px 13px; border-radius: 14px; }
  .vs__row:last-child .vs__a { border-radius: 14px; }
  .vs__b { background: var(--surface-sunk); }
  .vs__row:not(.vs__row--head) > :is(.vs__a, .vs__b) { font-size: .92rem; }
}

/* Nutrition (md_nutrition): energy large, the fats as one bar of their
   shares, the other figures as tiles, a note for what is not a figure. */
.story__block--nutri { container-type: inline-size; }
.nutri { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 14px; }
.nutri__hero {
  grid-row: span 2; display: grid; align-content: center; gap: 10px; padding: clamp(20px, 2.4vw, 30px); border-radius: 22px;
  background: linear-gradient(160deg, var(--tint-a), transparent 75%), var(--surface-sunk);
}
.nutri__big { font-family: var(--font-display); font-size: clamp(3rem, 1.8rem + 4vw, 5.4rem); font-weight: 800; line-height: .9; letter-spacing: -.045em; color: var(--fg); }
.nutri__big small { margin-left: 8px; font-size: .3em; font-weight: 700; letter-spacing: 0; color: var(--fg-muted); }
.nutri__k { font: 600 var(--fs-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); }
.nutri__k b { margin-left: 6px; color: var(--fg); }
.nutri__fat { padding: clamp(18px, 2vw, 24px); border-radius: 22px; background: var(--surface-sunk); }
.nutri__bar { display: flex; height: 18px; margin: 14px 0 16px; overflow: hidden; border-radius: var(--r-full); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.nutri__seg { width: var(--w); height: 100%; }
.nutri__seg + .nutri__seg { box-shadow: inset 2px 0 0 var(--surface-sunk); }
.nutri__seg--0 { background: var(--brand); }
.nutri__seg--1 { background: var(--harvest-500); }
.nutri__seg--2 { background: var(--clay-600, #C2410C); }
.nutri__seg--3 { background: var(--fg-subtle); }
.prose .nutri__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.prose .nutri__legend li { display: inline-flex; align-items: center; gap: 8px; padding: 0; font-size: .92rem; color: var(--fg-muted); }
.prose .nutri__legend li::before { display: none; }
.nutri__dot { width: 11px; height: 11px; border-radius: 3px; }
.nutri__legend b { font: 600 .92rem var(--font-mono); color: var(--fg); }
.nutri__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.nutri__tile { display: grid; align-content: center; gap: 5px; padding: 18px 20px; border-radius: 20px; background: var(--surface-sunk); }
.nutri__tile b { font: 800 clamp(1.25rem, 1rem + .8vw, 1.7rem)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--fg); }
.nutri__tile span { font-size: .88rem; color: var(--fg-subtle); }
.prose .nutri__note {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--harvest-500) 16%, transparent); color: var(--fg); font-size: .94rem;
}
.nutri__note .ico { flex: none; width: 18px; height: 18px; color: var(--harvest-700); }
@container (max-width: 640px) {
  .nutri { grid-template-columns: minmax(0, 1fr); }
  .nutri__hero { grid-row: auto; }
}

/* The maker's own label (dairy): their line as a pull quote, what the label
   says as stamps, the ring round their logo underneath. */
.story__block--label {
  background: radial-gradient(110% 120% at 100% 0%, var(--tint-a), transparent 58%), linear-gradient(180deg, #FBF6EC, #F3E9D6);
}
[data-theme='dark'] .story__block--label { background: radial-gradient(110% 120% at 100% 0%, var(--tint-a), transparent 58%), linear-gradient(180deg, #221C13, #19150E); }
.story__block--label .story__head {
  margin-bottom: 18px; font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--fg-subtle);
}
.mquote {
  position: relative; margin: 0; padding-left: clamp(40px, 4.4vw, 64px);
  font-family: var(--font-display); font-size: clamp(1.55rem, 1.05rem + 2vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.032em; color: var(--fg);
}
.mquote::before { content: '\201C'; position: absolute; left: 0; top: -.08em; font-size: 2.3em; line-height: 1; color: var(--tint-b, var(--brand)); }
.mquote p { max-width: 24ch; }
.mquote strong { color: var(--tint-b, var(--brand-ink)); font-weight: 800; }
.story__block--label .prose > * + * { margin-top: 22px; }
.story__block--label .prose ul.ticks { display: flex; flex-wrap: wrap; gap: 10px; }
.story__block--label .prose ul.ticks li {
  padding: 10px 16px 10px 40px; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--shadow-sm);
  font-weight: 650; color: var(--fg);
}
.story__block--label .prose ul.ticks li::before { left: 13px; top: 50%; translate: 0 -50%; }
.story__block--label .prose em {
  display: block; font: 600 var(--fs-label)/1.6 var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .14em; color: var(--fg-subtle);
}

/* The questions and the maker, after the story. */
.pdr__foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.pdr__foot > .maker:only-child { max-width: 620px; }
@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); }
}
/* A phone: the facts two across, each its mark over its words. */
@media (max-width: 600px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .glance__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: start; padding: 14px 15px 16px; border-radius: 18px; }
  .glance__ico { grid-row: auto; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 13px; }
  .glance__ico .ico { width: 19px; height: 19px; }
  .glance__v { font-size: .95rem; }
  .story__block { padding: 20px 18px; border-radius: 22px; }
}

.pdx__side { position: sticky; top: calc(var(--top-h, 72px) + 20px); display: grid; gap: 16px; min-width: 0; }
.dcard { padding: clamp(20px, 2vw, 28px); border-radius: 26px; background: var(--surface); }
.dcard__head {
  margin-bottom: 10px;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
  font-variation-settings: 'opsz' 36, var(--wonk-off);
}

.prose h4 {
  margin-top: 22px; color: var(--fg);
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em;
  font-variation-settings: 'opsz' 24, var(--wonk-off);
}
.prose h4:first-child { margin-top: 0; }
.prose p + p { margin-top: 12px; }
.prose ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.prose * + ul, .prose ul + * { margin-top: 12px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ''; position: absolute; left: 3px; top: .68em; width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: var(--brand); }
.prose strong { color: var(--fg); font-weight: 650; }
.prose ul.ticks li { padding-left: 28px; }
.prose ul.ticks li::before {
  left: 0; top: .28em; width: 18px; height: 18px; border-radius: 0; rotate: none;
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
}
.prose em { color: var(--fg-subtle); }
/* A partner's table: the card's width, words wrapping in their cells, read
   in the text face; only a quantity (`.num`) in mono. Owner, 2026-11-05, of
   a comparison cut off at the card's edge on one line of mono: "see the
   product description how worst it is". */
.tablewrap { container-type: inline-size; overflow-x: auto; border-radius: 16px; background: var(--surface-sunk); }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.45; }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; }
.prose tbody tr + tr > * { box-shadow: inset 0 1px 0 var(--hairline); }
.prose thead th {
  color: var(--fg-subtle); vertical-align: bottom;
  font: 600 var(--fs-label)/1.35 var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
}
.prose tbody th { color: var(--fg); font-weight: 600; }
.prose td { color: var(--fg-muted); }
.prose td.num { color: var(--fg); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Any table in a narrow card: tighter cells, a long row name may break. */
@container (max-width: 560px) {
  .prose table { font-size: .85rem; }
  .prose th, .prose td { padding: 9px 8px; }
  .prose th:first-child, .prose td:first-child { padding-left: 12px; }
  .prose th:last-child, .prose td:last-child { padding-right: 12px; }
  .prose thead th { letter-spacing: .02em; overflow-wrap: anywhere; }
  .prose tbody th { overflow-wrap: anywhere; }
}
/* A comparison in a narrow card: each row stacks, its values under their
   column's name — nothing slides out of sight. */
@container (max-width: 560px) {
  .tablewrap--wide table, .tablewrap--wide tbody, .tablewrap--wide tr,
  .tablewrap--wide th, .tablewrap--wide td { display: block; }
  .tablewrap--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tablewrap--wide tbody tr { padding: 14px 16px; }
  .tablewrap--wide tbody tr + tr > * { box-shadow: none; }
  .tablewrap--wide tbody tr + tr { box-shadow: inset 0 1px 0 var(--hairline); }
  .tablewrap--wide tbody th { padding: 0 0 4px; }
  .tablewrap--wide td { padding: 6px 0 0; }
  .tablewrap--wide td::before {
    content: attr(data-label); display: block; margin-bottom: 1px; color: var(--fg-subtle);
    font: 600 var(--fs-label)/1.35 var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  }
}

/* The specification: label above value, a hairline between rows only. */
.specs > div { display: grid; gap: 3px; padding-block: 11px; }
.specs > div + div { box-shadow: inset 0 1px 0 var(--hairline); }
.specs dd { font-size: .95rem; font-weight: 500; color: var(--fg); }

.faqs { display: grid; gap: 8px; }
.faq { border-radius: 16px; background: var(--surface-sunk); }
.faq > summary {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 12px 16px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: .96rem; line-height: 1.4;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: ''; flex: none; margin-left: auto; width: 7px; height: 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  rotate: 45deg; translate: 0 -2px; transition: rotate .3s var(--ease-out);
}
.faq[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.faq > .prose { padding: 0 16px 16px; }
.faq[open] > .prose { animation: unfold .4s var(--ease-out); }
@keyframes unfold { from { opacity: 0; translate: 0 -8px; } }

/* The maker: a card with its way in in the cut corner. */
.maker {
  --cut: var(--cut-go); --cut-w: 70px; --cut-h: 70px;
  --cutbox-bg: linear-gradient(130deg, color-mix(in srgb, var(--tone-soft) 80%, var(--surface)), var(--surface) 75%);
  display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 18px 76px 18px 18px;
  border-radius: 26px;
  color: var(--fg); text-decoration: none;
  transition: translate var(--dur) var(--ease), scale var(--dur-press) var(--ease-out);
}
.maker img { width: 56px; height: 56px; flex: none; border-radius: 16px; object-fit: contain; padding: 5px; background: #fff; box-shadow: var(--shadow-sm); }
.maker__txt { display: grid; gap: 2px; min-width: 0; }
.maker__txt small { font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-subtle); }
.maker__txt b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.maker__txt span { font-size: .86rem; color: var(--fg-subtle); }
.maker__go { position: absolute; right: 0; bottom: 0; }
.maker:hover { color: var(--fg); }
.maker:active { scale: .98; }
@media (hover: hover) and (pointer: fine) {
  .maker:hover { translate: 0 -3px; }
  .maker:hover .maker__go { rotate: 0deg; background-color: var(--brand); color: var(--on-brand); }
}

/* ----- the bar that follows a phone */
.buybar {
  position: fixed; z-index: 47; left: 12px; right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-lg);
  transition: opacity .3s var(--ease-out), translate .35s var(--ease-out);
}
@starting-style { .buybar { opacity: 0; translate: 0 24px; } }
.buybar__txt { display: grid; min-width: 0; line-height: 1.3; }
.buybar__txt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .92rem; }
.buybar__txt span { font: 600 .88rem var(--font-mono); color: var(--fg-muted); }
.buybar .btn { margin-left: auto; flex: none; }
@media (min-width: 900px) { .buybar { display: none !important; } }

/* ----- what else is in it
   A whole number of cards, never one sliced (the owner, three times). On
   the details' own ground, so the two read as one band, back to paper at
   its foot, clear of the footer. */
.related { padding-top: clamp(1rem, 2vw, 1.75rem); background: linear-gradient(var(--surface-sunk) calc(100% - 7rem), var(--bg)); }
.related__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.related__ctrl { display: flex; align-items: center; gap: 8px; }
/* The rail and its arrows: store.css (the shop's short shelves end on one too). */
.railall {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 6px;
  font: 600 var(--fs-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--fg); text-decoration: none;
}
.railall:hover { color: var(--brand-ink); }
.railall .ico { transition: translate var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .railall:hover .ico { translate: 3px 0; } }

/* ----- lightbox */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); color: var(--fg);
  transition: opacity .3s var(--ease-out), scale .3s var(--ease-out);
}
.lightbox[open] { display: grid; place-items: center; }
@starting-style { .lightbox[open] { opacity: 0; scale: .97; } }
.lightbox::backdrop { background: transparent; }
.lightbox img {
  max-width: min(92vw, 1200px); max-height: 88dvh; object-fit: contain; cursor: zoom-in;
  border-radius: 12px; transition: scale .45s var(--ease-out);
}
.lightbox img.is-zoomed { scale: 2; cursor: zoom-out; }
.lightbox .icon-btn { position: fixed; z-index: 1; background: var(--surface); box-shadow: var(--shadow-md); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav { top: 50%; translate: 0 -50%; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }


/* ----- price on request
   A product with no price asks instead (enquire.php). */
.ask { margin-top: var(--s-5); }
.ask__form { display: grid; gap: var(--s-4); padding: clamp(18px, 2vw, 24px); border-radius: 26px; background: var(--surface-sunk); }
.ask__form .buy__label { margin: 0; }
.ask__grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ask__wide { grid-column: 1 / -1; }
.ask__err { font-size: .88rem; font-weight: 600; color: var(--err); }
.ask__go { justify-self: start; }
.ask__done { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 18px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.ask__done:focus { outline: none; }
.ask__done .ico { width: 22px; height: 22px; flex: none; }
.ask__done b { padding: 2px 8px; border-radius: 8px; background: var(--surface); color: var(--fg); }


/* ===== RESPONSIVE */
@media (max-width: 1100px) {
  .pdp__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pdx__grid { grid-template-columns: minmax(0, 1fr); }
  .pdx__side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .pdx__grid--side .pdx__side { grid-template-columns: minmax(0, 1fr); }
}
/* One column: the photograph square across the width, its row under it,
   then the buy box. */
@media (max-width: 900px) {
  .pdp__top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gal { position: relative; top: auto; }
  .gal__stage { aspect-ratio: 1; max-height: none; min-height: 0; border-radius: 26px; }
  .buy { max-width: none; }
  .gal__thumb { width: 64px; height: 64px; border-radius: 16px; }
}
@media (max-width: 599px) {
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .buy__row { flex-wrap: wrap; }
  .buy__row .qty { width: 100%; grid-template-columns: 1fr 1fr 1fr; }
  .ask__grid { grid-template-columns: minmax(0, 1fr); }
  .ask__go { justify-self: stretch; }
  .dblocks--two { columns: 1; }
}

/* ===================================================== THE BIO-INPUT PAGE
   (D84; product.php $bio). The maker's blocks drawn as what they are:
   key facts as tiles, crops as chips, features as cards, each method of
   application a step with its doses marked, the rest of the sheet plain. */
.pdx--bio .pdx__head { margin-bottom: clamp(18px, 2.4vw, 28px); }
.bio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bio > * { min-width: 0; }
.bio > :is(.glance, .bio__how, .bio__lead, .bio__sheet, .bio__table, .bio__feats--wide) { grid-column: 1 / -1; }
.glance--bio { margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.bio__crops, .bio__feats, .bio__how, .bio__sheet, .bio .story__block {
  position: relative; padding: clamp(22px, 2.6vw, 36px); border-radius: 28px; background: var(--surface);
}
.bio__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font: 800 clamp(1.25rem, 1rem + .7vw, 1.7rem)/1.12 var(--font-display); letter-spacing: -.025em;
}
.bio__head small { margin-left: 2px; padding: 3px 9px; border-radius: var(--r-full); background: var(--surface-2); font: 600 .78rem/1.2 var(--font-mono); color: var(--fg-muted); letter-spacing: 0; }
.bio__headmark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--tint-a); color: var(--tint-b); }
.bio__headmark .ico { width: 20px; height: 20px; }

/* crops: one chip each, a sprout before it */
.cropchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cropchips li {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: var(--r-full);
  background: var(--surface-2); font-weight: 600; font-size: .94rem; line-height: 1.2;
}
.cropchips li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tint-b); box-shadow: 0 0 0 3px var(--tint-a); }
.bio__crops--pest .cropchips li::before { background: var(--clay-600, #B4501A); box-shadow: 0 0 0 3px rgba(229, 96, 11, .16); }

/* features: each a card with a tick */
.feats { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.feat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: 18px; background: var(--surface-2); }
.feat__tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint-b); color: #fff; }
.feat__tick .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.feat .prose { max-width: none; }
.feat .prose > p { margin: 0; line-height: 1.55; }

/* how to apply: the steps side by side, a dose stands out */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.step {
  position: relative; display: grid; align-content: start; gap: 12px; padding: 22px 22px 24px; border-radius: 22px;
  background: linear-gradient(160deg, var(--tint-a) 0%, transparent 55%), var(--surface-2);
}
.step__top { display: flex; align-items: center; justify-content: space-between; }
.step__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--surface); color: var(--tint-b); box-shadow: 0 6px 18px -12px rgba(17, 21, 18, .5); }
.step__ico .ico { width: 26px; height: 26px; }
.step__n { font: 700 .82rem/1 var(--font-mono); color: var(--fg-subtle); letter-spacing: .06em; }
.step__name { font: 800 1.18rem/1.2 var(--font-display); letter-spacing: -.02em; }
.step__txt { max-width: none; }
.step__txt > p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--fg-muted); }
.step__txt > p + p { margin-top: 10px; }
.dose {
  display: inline-block; padding: 0 7px; border-radius: 7px; background: var(--tint-a); color: var(--fg);
  font-weight: 700; white-space: nowrap; line-height: 1.5;
}

/* the rest of the sheet: two columns of label and value */
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 28px; margin: 0; }
.sheet > div { display: grid; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.sheet dt { font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); }
.sheet dd { margin: 0; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.bio__warn { background: linear-gradient(120deg, rgba(229, 96, 11, .1), transparent 60%), var(--surface) !important; }

@media (max-width: 760px) {
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio > * { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .glance--bio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .glance--bio .glance__item { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .glance--bio .glance__ico { grid-row: auto; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 6px; }
  .bio__crops, .bio__feats, .bio__how, .bio__sheet, .bio .story__block { padding: 20px 16px; border-radius: 22px; }
  .step { padding: 18px; }
}
.cropnote { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: .94rem; line-height: 1.5; color: var(--fg-muted); }

/* D85: every page not on the food story is drawn — millet foods (ingredients
   as named cards, preparation as steps, nutrition as a panel), machines (the
   package as numbered parts, the flyer's facts as tiles), traps. */
.bio__feats--wide .feats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.feat__body { display: grid; gap: 4px; min-width: 0; }
.feat__name { font: 750 1.02rem/1.25 var(--font-display); letter-spacing: -.01em; color: var(--fg); }
.feat__tick--n { font: 700 .86rem/1 var(--font-mono); background: var(--surface); color: var(--tint-b); box-shadow: inset 0 0 0 1.5px var(--tint-b); }
.bio__feats--parts .feat { align-items: center; }
.bio .bio__lead .prose > p { max-width: 62ch; font-size: clamp(1.05rem, .95rem + .45vw, 1.32rem); line-height: 1.5; font-weight: 600; }
.bio .bio__lead .prose > p + p { margin-top: 12px; }
.bio__lead-head { max-width: 30ch; }
.bio__table .prose { max-width: none; overflow-x: auto; }
.bio__table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bio__table :is(th, td) { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
.bio__table th { font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); }
.bio__table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--tint-a) 45%, transparent); }
.bio__table td:first-child { font-weight: 650; }
.bio__note { background: linear-gradient(120deg, var(--tint-a), transparent 60%), var(--surface) !important; }
.bio > .is-full { grid-column: 1 / -1; }
.steps__group { margin: 4px 0 12px; font: 600 var(--fs-label)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--tint-b); }
.steps + .steps__group { margin-top: 22px; }