/*
 * Breadwinner v3, the port kit: what the twenty inner pages share beyond v3.css.
 * Loaded by shell.html after v3.css and before the page's own stylesheet. It implements the
 * cross-cutting entries of docs/redesign-v3/port/plan-2026-10-09.json plan.new_components,
 * every one except c-shell (that is shell.html), c-prepaint-flags (head script 1 in the shell)
 * and c-admin-register (the admin page's own stylesheet), in this order:
 *
 *   0. Tokens this file adds               12. c-order-confirm
 *   1. Shared from home.css (verbatim)      13. c-track-timeline
 *   2. c-page-head-meta                     14. c-sheet
 *   3. Layouts: .column, .two-up            15. c-data-table
 *   4. c-alias                              16. c-definition-list
 *   5. c-field-kit                          17. c-prose-lists
 *   6. c-choice                             18. c-address-block, c-contact-form
 *   7. c-tabs                               19. c-faq-group
 *   8. c-status-word, c-busy-line           20. c-city-landing, c-compare-ledger
 *   9. c-empty-slip                         21. c-person-full
 *  10. c-cart-line                          22. c-article-list, c-article-reader
 *  11. c-totals-slip                        23. c-not-found, c-auth-divider, the sign-in card
 *                                           24. c-layout-utils (last)
 *
 * House rules: colour only through the v3 tokens (the two literals mirror v3.css's own shadow
 * practice), no hex, no pure black or white, no !important (one inherited exception, marked),
 * class selectors (attributes only where the live JS emits no class), hover inside
 * (hover: hover) and (pointer: fine), 44px targets, no transitions on layout properties, no
 * side stripes, no gradient text, no cards inside cards. The toast and card from js/utils.js
 * (.bw-toast, .bw-card*) are already restyled in v3.css section 11 and are not repeated here.
 * Section 1 duplicates home.css on purpose tonight; the home page keeps its own copy.
 */

/* ======================================================================
   0. Tokens this file adds
   ====================================================================== */
:root {
  --scrim: oklch(0.21 0.008 75 / 0.6);        /* Kitchen Ink at 60%, written out as v3.css writes its shadows */
  --z-sheet: 400;                              /* above the chat aside (250), under the toast (500) */
  /* The select chevron: an inline SVG with the ink written out (Kitchen Ink by day, Chalk at night). */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='oklch(0.21%200.008%2075)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --scrim: oklch(0.13 0.004 70 / 0.6);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='oklch(0.925%200.006%2085)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scrim: oklch(0.13 0.004 70 / 0.6);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='oklch(0.925%200.006%2085)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* ======================================================================
   1. Shared from home.css, verbatim (home.css:23, 29-57, 64-65, 344-345): the strip title,
   the handwritten marks, the inline ink clips, the footer's "say hello" line. The `.mark`
   phone rule keeps its !important from home.css: page rules place each mark at (0,2,0) and
   load after this file, so without it the phone positions would lose. The only one here.
   ====================================================================== */
html, body { overflow-x: clip; }

.strip-title {
  max-width: none;
  font-size: var(--t-title);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: pretty;
}
.strip-title > strong { font-weight: 600; margin-right: 0.45em; }

.mark {
  position: absolute;
  display: block;
  width: max-content;
  z-index: 1;
  font-family: var(--font-hand);
  font-size: var(--t-hand);
  font-weight: 400;
  line-height: 1.2;
  color: var(--accent-text);
  transform: rotate(var(--mark-tilt, -3deg));
  pointer-events: none;
}
.mark .note-words { clip-path: inset(-25% -10% -25% -10%); transition: clip-path 700ms var(--ease-expo); }
.mark.is-waiting .note-words { clip-path: inset(-25% 110% -25% -10%); transition: none; }
@media (max-width: 599.98px) {
  .mark:not([data-phone]) { display: none; }
  .mark[data-phone] { top: var(--pt) !important; left: var(--pl, auto) !important; right: var(--pr, auto) !important; font-size: var(--t-hand); }
}

.ink-clip--inline { width: 1.45em; height: 1.45em; vertical-align: -0.38em; margin: 0 0.06em; }
.ink-clip--inline-lg { width: 2.6em; height: 2.6em; vertical-align: -0.9em; margin: 0 0.1em; }

.foot-hello { margin-top: var(--s-sm); }
.foot-hello .link { font-family: var(--font-hand); font-size: var(--t-hand); line-height: 1.2; color: var(--accent-text); }

/* ======================================================================
   2. c-page-head-meta: the inner page header. Kicker (Label, sentence case), the h1 at
   clamp(2.5rem, 1.5rem + 4.5vw, 5rem) weight 250, an optional lede, an optional
   "Last updated" Fine line. `.page-head--centred` centres the block (shell.html).
   Section h2 anchors carry tabindex="-1" (v3-page.js part k focuses them; v3.css
   already removes the ring on a programmatic heading focus).
   ====================================================================== */
.page-head h1 {
  font-size: var(--t-statement);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.page-head__kicker {
  max-width: none;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.page-head__kicker + h1 { margin-top: var(--s-sm); }
.page-head h1 + .lede { margin-top: var(--s-lg); }
.page-head__updated { margin-top: var(--s-md); color: var(--pencil-text); }
/* Every page head is left-aligned on the gutter (DESIGN.md: compositions are left-aligned).
   `.page-head--centred` is kept as a hook in the markup but no longer centres anything. */
.page-head--centred { text-align: left; }
.page-head--centred > .wrap { display: block; }
.page-head--centred h1 { max-width: 22ch; text-wrap: balance; margin-inline: 0; }
.page-head--centred .lede { margin-inline: 0; max-width: 25.8em; text-align: left; }   /* 44ch of Literata, in em so the fallback font sets the same column */
.page-head--centred .page-head__kicker, .page-head--centred .page-head__updated { text-align: left; margin-inline: 0; }

/* ======================================================================
   3. Layouts inner pages use. `.column` is a centred reading column (44rem). `.two-up` is
   one column, then 5fr / 7fr from 900px (`.two-up--wide` 7fr / 5fr), gap one gutter.
   ====================================================================== */
.column { width: 100%; max-width: 44rem; margin-inline: auto; }
/* .wrap makes its gutter through its width, so on .wrap.column the column's width:100% would erase
   it (city pages, faq, fssai, checkout-success sat flush with the screen edge on phones). */
.wrap.column { width: min(100% - 2 * (var(--gutter) + var(--art-gutter)), 44rem); }
/* One left edge: the reading column starts on the page gutter, the same x as the page head and the
   .wrap content above it; the 44rem measure still caps the line length. (checkout.css opts
   /checkout-success out; faq.css already sets its own.) */
.wrap > .column { margin-inline: 0; }
.wrap.column { margin-inline: max(var(--gutter) + var(--art-gutter), (100% - var(--page-max)) / 2) auto; }
.two-up {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2xl) var(--gutter);
  align-items: start;
}
@media (min-width: 900px) {
  .two-up { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .two-up--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ======================================================================
   4. c-alias: the classes the live modules print (cart.js, checkout.js, account.js,
   track.js, signin.html, contact.html), given the v3 look without touching the JS.
   Loaded after v3.css; plain class selectors; the review-modal classes that account.js
   styles from an injected <style> are handled in section 14 with the weight they need.
   ====================================================================== */
/* The button box (.btn), then primary (Haldi) or secondary (paper). */
.cta-ac,
.cta-wh,
.auth-submit,
.auth-google-btn,
.order-reorder-btn,
.order-secondary-btn,
.cart-pin-btn,
.cart-coupon-apply,
.alert-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  min-height: var(--btn-h);
  padding: 0.8125rem var(--s-lg);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  background-color: var(--paper);
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-button);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease-quart), transform 160ms var(--ease-quart);
}
.cta-ac,
.auth-submit,
.alert-action.is-primary {
  background-color: var(--haldi);
  color: var(--kitchen-ink);
  border-color: var(--kitchen-ink);
}
/* cart.js and checkout.js print the WhatsApp order link as .cta-ac too; the plan makes it secondary. */
.cta-ac.cart-wa-order {
  background-color: var(--paper);
  color: var(--ink-text);
  border-color: var(--ink-text);
}
/* Beside a field (pincode Check, coupon Apply): the field's 52px. */
.cart-pin-btn,
.cart-coupon-apply { flex: none; min-height: var(--field-h); }
@media (hover: hover) and (pointer: fine) {
  :is(.cta-ac, .auth-submit, .alert-action.is-primary):not(.cart-wa-order):hover { background-color: var(--haldi-stain); }
  :is(.cta-wh, .auth-google-btn, .order-reorder-btn, .order-secondary-btn, .cart-pin-btn, .cart-coupon-apply, .cta-ac.cart-wa-order, .alert-action):not(.is-primary):hover { background-color: var(--raised); }
}
:is(.cta-ac, .cta-wh, .auth-submit, .auth-google-btn, .order-reorder-btn, .order-secondary-btn, .cart-pin-btn, .cart-coupon-apply, .alert-action):active { transform: scale(0.97); transition-duration: 100ms; }
:is(.cta-ac, .cta-wh, .auth-submit, .auth-google-btn, .order-reorder-btn, .order-secondary-btn, .cart-pin-btn, .cart-coupon-apply, .alert-action):is(:disabled, [aria-disabled="true"], .is-disabled) {
  transform: none;
  cursor: default;
  color: var(--pencil-text);
  background-color: var(--paper);
  border-style: dashed;
  border-color: var(--pencil-text);
}
.is-disabled { pointer-events: none; }

/* Text buttons: account's small Edit and Add (.np), the coupon Remove, the address card actions. */
.np,
.cart-coupon-remove,
.address-actions > button,
.article-full-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
/* A button inside a sentence ("Forgot password?", "Sign up"): reads as an inline link. */
.auth-link-btn {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--inline-line);
  text-underline-offset: 4px;
  cursor: pointer;
  padding-block: round(up, max(0px, (var(--tap) - 1lh) / 2), 1px);   /* 44px hit area; inline, so the sentence does not reflow */
}
/* The cart line's remove control is a glyph: a 44px square, no underline. */
.cart-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  :is(.np, .cart-coupon-remove, .address-actions > button, .article-full-back, .auth-link-btn):hover { text-decoration-color: var(--ink-text); }
  .cart-remove-btn:hover { background-color: var(--raised); }
}

/* Anchors the modules print without .link: the v3 text link (band on hover and focus). */
.cart-continue-link,
.checkout-manage a,
.checkout-empty-addr a,
.track-tracking-link,
.contact-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 4px;
  background-image: linear-gradient(var(--swipe), var(--swipe));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 55%;
  transition: background-size 200ms var(--ease-quart);
}
.checkout-manage a,
.checkout-empty-addr a { text-decoration-color: var(--inline-line); }
@media (hover: hover) and (pointer: fine) {
  :is(.cart-continue-link, .checkout-manage a, .checkout-empty-addr a, .track-tracking-link, .contact-link):hover { background-size: 100% 55%; transition-duration: 280ms; color: var(--ink-text); }
}
:is(.cart-continue-link, .checkout-manage a, .checkout-empty-addr a, .track-tracking-link, .contact-link):focus-visible { background-size: 100% 55%; transition-duration: 280ms; color: var(--ink-text); }
@media (pointer: coarse), (max-width: 899.98px) {   /* as .link: phone widths too, not only touch */
  .cart-continue-link,
  .track-tracking-link { display: inline-block; padding-block: max(0px, (var(--tap) - 1.3em) / 2); background-origin: content-box; background-clip: content-box; }
}

/* Fields: .form-input and the cart's inputs are .input. */
.form-input,
.cart-pin-input,
.cart-coupon-input {
  display: block;
  width: 100%;
  height: var(--field-h);
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--field-border);
  border-radius: var(--cut);
  background-color: var(--raised);
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-body);
  line-height: 1.3;
}
:is(.form-input, .cart-pin-input, .cart-coupon-input)::placeholder { color: var(--pencil-text); opacity: 1; }
:is(.form-input, .cart-pin-input, .cart-coupon-input)[aria-invalid="true"] { border-color: var(--error); }
:is(.form-input, .cart-pin-input, .cart-coupon-input):disabled {
  color: var(--pencil-text);
  background-color: var(--paper);
  border-style: dashed;
  border-color: var(--pencil-text);
}
.cart-pin-input,
.cart-coupon-input { font-variant-numeric: tabular-nums lining-nums; }

/* Labels and groups: .form-label is Label type; .form-group is the .field stack. */
.form-label,
.cart-pin-label,
.cart-coupon-tag,
.cart-bundle-tag,
.track-tracking-label,
.address-label {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.form-group { display: grid; gap: var(--s-xs); }
.form-group + * { margin-top: var(--s-md); }
.form-group + :is(.cta-ac, .cta-wh, .auth-submit) { margin-top: var(--s-xl); }

/* Hints and fine lines. */
.form-hint,
.cart-cta-hint,
.checkout-fineprint,
.checkout-secure,
.rewards-card-note,
.cart-tax-note,
.cart-eta,
.cart-eta-chip,
.cart-promo,
.auth-forgot {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
  max-width: 62ch;
}
.cart-promo { text-transform: lowercase; }   /* cart.js prints "FREE DELIVERY UNLOCKED" */

/* Loading, pressure and stamp surfaces the system does not keep. */
.spinner,
.cart-promo-bar,
.cart-promo-track,
.cart-promo-fill,
.cart-bundle-nudge,
.cart-empty-stamp { display: none; }

/* Pincode status (cart.js and checkout.js write class "cart-pin-status is-<tone>"; the tones
   BW.delivery.zoneCopy returns are ok, soon, off and hint): the .status line and its tones. */
.cart-pin-status,
.cart-coupon-error,
.checkout-zone {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--ink-text);
  overflow-wrap: anywhere;
  max-width: none;
}
.cart-pin-status.is-hint { color: var(--pencil-text); }
.cart-pin-status.is-ok,
.cart-pin-status.is-soon,
.cart-pin-status.is-off { color: var(--ink-text); }
.cart-coupon-error { color: var(--error); }
.cart-pin-status:empty,
.cart-coupon-error:empty,
.checkout-zone:empty { display: none; }

/* ======================================================================
   5. c-field-kit: the controls v3.css lacks. select.select (and select.form-input),
   textarea.textarea (and textarea.form-input), the password toggle, radio and checkbox
   rows (.check), fieldset.fieldset > legend.label, aria-invalid Brick, :disabled dashed.
   ====================================================================== */
.select,
select.form-input,
select.input {
  display: block;
  width: 100%;
  height: var(--field-h);
  padding: 0.75rem 2.75rem 0.75rem 0.875rem;
  border: 1.5px solid var(--field-border);
  border-radius: var(--cut);
  background-color: var(--raised);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 0.75rem 0.5rem;
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-body);
  line-height: 1.3;
  appearance: none;
  cursor: pointer;
  max-width: none;
}
.textarea,
textarea.form-input,
textarea.input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 10.5rem;                           /* six Body lines plus the padding */
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--field-border);
  border-radius: var(--cut);
  background-color: var(--raised);
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-body);
  line-height: 1.5;
  resize: vertical;
}
:is(.select, select.form-input, select.input, .textarea, textarea.form-input, textarea.input)::placeholder { color: var(--pencil-text); opacity: 1; }
:is(.select, select.form-input, select.input, .textarea, textarea.form-input, textarea.input)[aria-invalid="true"] { border-color: var(--error); }
:is(.select, select.form-input, select.input, .textarea, textarea.form-input, textarea.input):disabled {
  color: var(--pencil-text);
  background-color: var(--paper);
  border-style: dashed;
  border-color: var(--pencil-text);
  cursor: default;
}
/* A password field with its show/hide text button in one .field-row. */
.input--password { flex: 1 1 auto; min-width: 0; }
.input__toggle { flex: none; min-width: var(--tap); padding-inline: var(--s-xs); }
/* Radio and checkbox rows: a 24px box, 1.5px ink, Haldi fill with an ink mark when checked. */
.check {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  min-height: var(--tap);
  cursor: pointer;
}
.check + .check { margin-top: 0; }
.check > input[type="checkbox"],
.check > input[type="radio"] {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--field-border);
  border-radius: var(--cut);
  background-color: var(--raised);
  appearance: none;
  cursor: pointer;
}
.check > input[type="radio"] { border-radius: 50%; }
.check > input:checked { background-color: var(--haldi); border-color: var(--kitchen-ink); }
.check > input[type="checkbox"]:checked::before {
  content: "";
  width: 0.375rem;
  height: 0.75rem;
  margin-top: -0.125rem;
  border-right: 2px solid var(--kitchen-ink);
  border-bottom: 2px solid var(--kitchen-ink);
  transform: rotate(45deg);
}
.check > input[type="radio"]:checked::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--kitchen-ink);
}
.check > input:disabled { border-style: dashed; border-color: var(--pencil-text); background-color: var(--paper); cursor: default; }
.check > input:disabled + .check__text { color: var(--pencil-text); }
.check__text { font-size: var(--t-body); line-height: 1.3; }
.check--fine .check__text { font-size: var(--t-fine); }
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset > legend { padding: 0; margin-bottom: var(--s-xs); font-size: var(--t-label); font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
.fieldset > .check:first-of-type { margin-top: 0; }

/* ======================================================================
   6. c-choice: a radio card. label.choice (checkout.js: label.address-option) wraps a visually
   hidden radio and a body (Label name, Body lines, Fine zone line). 1.5px ink; the chosen one
   (input:checked, or .is-selected from checkout.js) carries the still Haldi band under its name
   and a 2px border; .is-unserviceable is dashed pencil with its reason in words. Arrow keys
   move between native radios in role=radiogroup. `.choice--static` and account.js's
   .address-card are the same box without an input.
   ====================================================================== */
.address-options,
.choices { display: grid; gap: var(--s-sm); }
.choice,
.address-option,
.choice--static,
.address-card {
  position: relative;
  display: block;
  min-height: var(--tap);
  padding: calc(var(--s-md) + 0.5px);              /* 1.5px border now, 2px when chosen: the box never moves */
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  background-color: var(--raised);
  color: var(--ink-text);
}
.choice,
.address-option { cursor: pointer; }
.choice + .choice,
.address-card + .address-card { margin-top: var(--s-sm); }
.choice > input,
.address-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.choice:focus-within,
.address-option:focus-within { outline: 2px solid var(--focus-ink); outline-offset: 3px; }
.choice__name,
.address-option-label {
  display: inline;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  background-image: linear-gradient(var(--swipe), var(--swipe));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 55%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.choice__lines,
.address-option-lines { margin-top: var(--s-2xs); font-size: var(--t-body); line-height: 1.5; max-width: none; }
.choice__zone,
.address-option-zone { margin-top: var(--s-2xs); font-size: var(--t-fine); line-height: 1.5; color: var(--pencil-text); }
.choice:has(> input:checked),
.address-option:has(> input:checked),
.choice.is-selected,
.address-option.is-selected { padding: var(--s-md); border-width: 2px; }
.choice:has(> input:checked) .choice__name,
.address-option:has(> input:checked) .address-option-label,
.choice.is-selected .choice__name,
.address-option.is-selected .address-option-label { background-size: 100% 55%; }
.choice:has(> input:disabled),
.address-option:has(> input:disabled),
.choice.is-unserviceable,
.address-option.is-unserviceable {
  border-style: dashed;
  border-color: var(--pencil-text);
  color: var(--pencil-text);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .choice:not(.is-unserviceable):hover,
  .address-option:not(.is-unserviceable):hover { background-color: var(--paper); }
}
/* Static cards (account.js): plain lines and a row of text buttons. */
.address-card > div { line-height: 1.5; }
.address-card > .address-label { margin-bottom: var(--s-2xs); }
.address-actions { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-top: var(--s-xs); }
.address-card .form-group + .form-group { margin-top: var(--s-md); }

/* ======================================================================
   7. c-tabs: a WAI-ARIA tab row from the .loaf-tab look. .tabs[role=tablist] > button.tab
   (signin: .auth-tabs > .auth-tab, admin: .admin-tabs > .admin-tab): Label, 44px, Pencil;
   the selected tab (aria-selected="true", or .active for the pages' own JS) is ink with the
   still Haldi band. .tabs--scroll (and .admin-tabs) scrolls sideways with 16px fades.
   The switching stays with the page's JS; this is the look and the markup pattern.
   ====================================================================== */
.tabs,
.auth-tabs,
.admin-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--s-lg);
  margin-bottom: var(--s-lg);
  border-bottom: var(--line-w) solid var(--rule);
}
.tab,
.auth-tab,
.admin-tab {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 0 var(--s-xs);
  border: 0;
  background: none;
  background-image: linear-gradient(var(--swipe), var(--swipe));
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  background-position: 0 88%;
  background-size: 0% 55%;
  color: var(--pencil-text);
  font-family: var(--font-print);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-size 200ms var(--ease-quart);
}
.tab[aria-selected="true"],
.auth-tab[aria-selected="true"],
.admin-tab[aria-selected="true"],
.tab.active,
.auth-tab.active,
.admin-tab.active {
  color: var(--ink-text);
  background-size: 100% 55%;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  :is(.tab, .auth-tab, .admin-tab):not(.active):not([aria-selected="true"]):hover {
    color: var(--ink-text);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--link-line);
    text-underline-offset: 4px;
  }
}
@media (forced-colors: active) {
  :is(.tab, .auth-tab, .admin-tab):is(.active, [aria-selected="true"]) { text-decoration: underline 2px; text-underline-offset: 4px; }
}
.tabs--scroll,
.admin-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-inline: var(--s-md);
  margin-inline: calc(-1 * var(--s-md));
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink-text) var(--s-md), var(--ink-text) calc(100% - var(--s-md)), transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ink-text) var(--s-md), var(--ink-text) calc(100% - var(--s-md)), transparent);
}
.tabs--scroll::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar { display: none; }
.tabs--scroll > .tab,
.admin-tabs > .admin-tab { scroll-snap-align: start; }

/* ======================================================================
   8. c-status-word and c-busy-line. A plain-ink status word replaces every stamp and badge:
   span.status-word[data-state] in Label type, no fill, no border; cancelled, refunded,
   payment_failed and off are Brick, soon and pending are Pencil, the rest ink; an optional
   span.pencil date follows. Aliases: .stamp (account.js), .track-result-status.<status>.
   The busy line is p.status[role=status][data-tone=busy] from v3.css, with words; .busy-line
   is the same look for a container the page owns. Spinners are hidden in section 4.
   ====================================================================== */
.status-word,
.stamp,
.stamp-grn,
.stamp-acid,
.track-result-status {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;
  font-family: var(--font-print);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ink-text);
  text-transform: none;
}
.stamp { text-transform: lowercase; }          /* account.js prints status.toUpperCase(); no capitals here */
.status-word[data-state="cancelled"],
.status-word[data-state="refunded"],
.status-word[data-state="payment_failed"],
.status-word[data-state="off"],
.track-result-status.cancelled,
.track-result-status.refunded,
.track-result-status.payment_failed { color: var(--error); }
.status-word[data-state="soon"],
.status-word[data-state="pending"],
.track-result-status.pending { color: var(--pencil-text); }
.status-word + .pencil { margin-left: var(--s-xs); font-size: var(--t-fine); font-weight: 400; }
.busy-line {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
  overflow-wrap: anywhere;
}

/* ======================================================================
   9. c-empty-slip: .slip.empty-slip > h2.title + p + one link or the page's Haldi button.
   cart.js and checkout.js print .cart-empty-page (the EMPTY stamp inside it is hidden above).
   The prerendered copy hides before first paint once head script 1 has set the page flag
   (html.bw-cart-has-items on the cart, html.bw-maybe-authed on checkout and account).
   ====================================================================== */
.empty-slip,
.cart-empty-page {
  max-width: 36rem;
  padding: var(--slip-pad);
  background-color: var(--raised);
  border: var(--line-w) solid var(--rule);
}
.empty-slip > * + *,
.cart-empty-page > * + * { margin-top: var(--s-md); }
.empty-slip > .btn,
.empty-slip > .link,
.cart-empty-page > .cta-ac { margin-top: var(--s-lg); }
html.bw-maybe-authed .cart-empty-page[data-prerendered],
html.bw-cart-has-items[data-page="cart"] .cart-empty-page[data-prerendered] { display: none; }
/* With no loaf in the cart the final state is "Nothing to check out", so the prerendered
   sign-in slip stays hidden until checkout.js paints the right one (head gate sets
   .bw-cart-has-items on /checkout as on /cart; 23 Oct audit, the 2 s flash on a slow link). */
html.js[data-page="checkout"]:not(.bw-cart-has-items) #checkout-container > .cart-empty-page[data-prerendered] { display: none; }

/* ======================================================================
   10. c-cart-line: cart.js's line item as a ruled ledger row. A 4rem print-like thumb, the
   name in Body, the unit price Fine, the two quantity buttons and the count as the .stepper's
   joined 48px cells, remove as a 44px glyph button, the line total tabular at the right.
   [data-tween] count-ups keep working; nothing here animates. Reused for account.js's
   .wishlist-row and .wishlist-thumb.
   ====================================================================== */
.cart-item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  column-gap: var(--s-md);
  align-items: start;
  padding-block: var(--s-lg);
  border-top: var(--line-w) solid var(--rule);
}
.cart-item:last-child { border-bottom: var(--line-w) solid var(--rule); }
.cart-item-img,
.wishlist-thumb {
  flex: none;
  width: 4rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0.1875rem solid var(--receipt-white);
  background-color: var(--receipt-white);
  box-shadow: var(--shadow-print);
}
.cart-item-img > img,
.wishlist-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-name { font-size: var(--t-body); font-weight: 500; line-height: 1.3; }
.cart-item-price {
  margin-top: var(--s-2xs);
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.cart-item-qty {
  display: inline-grid;
  grid-template-columns: 1fr 2.5rem 1fr;
  width: 8.5rem;
  height: var(--btn-h);
  margin-top: var(--s-sm);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  background-color: var(--paper);
}
.cart-qty-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background-color: var(--paper);
  color: var(--ink-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms var(--ease-quart);
}
.cart-qty-btn:first-child { border-right: 1.5px solid var(--ink-text); border-radius: 1px 0 0 1px; }
.cart-qty-btn:last-child { border-left: 1.5px solid var(--ink-text); border-radius: 0 1px 1px 0; }
.cart-qty-btn:disabled { color: var(--pencil-text); cursor: default; }
.cart-item-qty > span {
  display: grid;
  place-items: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
  .cart-qty-btn:not(:disabled):hover { background-color: var(--raised); }
}
.cart-qty-btn:not(:disabled):active { background-color: var(--raised); }
.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: var(--s-xs);
}
.cart-item-line {
  font-size: var(--t-price);
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.wishlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm) var(--s-md);
  padding-block: var(--s-lg);
  border-top: var(--line-w) solid var(--rule);
}
.wishlist-row:last-child { border-bottom: var(--line-w) solid var(--rule); }

/* ======================================================================
   11. c-totals-slip: the totals cart.js and checkout.js print. The page puts .slip on its
   #cart-totals container; checkout.js's .checkout-card is a slip of its own. Rows read as
   .price-table rows (label left, figure right, tabular 500), discount rows Pencil, the total
   row 600 with an ink rule above, the tax line Fine. The order of lines is JS-owned.
   ====================================================================== */
.checkout-card {
  padding: var(--slip-pad);
  background-color: var(--raised);
  border: var(--line-w) solid var(--rule);
}
.checkout-title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.checkout-items { margin-top: var(--s-md); }
.checkout-item,
.checkout-row,
.cart-summary-row,
.cart-bundle-applied,
.cart-coupon-applied,
.track-result-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-md);
  padding: var(--row-pad) 0;
  border-bottom: var(--line-w) solid var(--rule);
  line-height: 1.3;
}
.checkout-item-name,
.cart-coupon-tag { min-width: 0; }
.checkout-item-price,
.checkout-row > span:last-child,
.cart-summary-amt,
.cart-total-amt,
.cart-bundle-amount,
.track-result-total > span:last-child {
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  text-align: right;
}
.cart-summary-discount { color: var(--pencil-text); }
.cart-total-row,
.checkout-total,
.track-result-total {
  margin-top: -1px;                                /* sits on the row above's rule */
  border-top: var(--line-w) solid var(--ink-text);
  border-bottom: 0;
  font-weight: 600;
}
.cart-total-amt,
.checkout-total > span:last-child,
.track-result-total > span:last-child { font-weight: 600; }
.cart-tax-row,
.checkout-tax-row {
  padding-top: var(--s-xs);
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--t-fine);
  color: var(--pencil-text);
}
.cart-tax-note { margin-top: var(--s-xs); }
.cart-pay-note { margin-top: var(--s-md); }
.cart-pay-note > p { max-width: none; font-size: var(--t-fine); line-height: 1.5; }
.cart-bundle-applied,
.cart-coupon-applied { border-bottom: 0; }
.cart-coupon-box {
  display: flex;
  align-items: stretch;
  gap: var(--s-xs);
  margin-top: var(--s-md);
}
.cart-coupon-box > .cart-coupon-input { flex: 1 1 auto; min-width: 0; }
.cart-coupon-error { margin-top: var(--s-xs); }
.cart-eta { margin-top: var(--s-xs); }
/* The pincode block cart.js and checkout.js render into their slots. */
.cart-pin-slot:not(:empty) {
  margin-top: var(--s-lg);
  padding-top: var(--s-lg);
  border-top: var(--line-w) solid var(--rule);
}
.cart-pin { display: grid; gap: var(--s-xs); }
.cart-pin-row { display: flex; align-items: stretch; gap: var(--s-xs); }
.cart-pin-row > .cart-pin-input { flex: 1 1 auto; min-width: 0; }
.cart-pin-notify:not(:empty) { margin-top: var(--s-sm); }
/* The actions under the cart totals: full-width buttons, then the continue link. */
.cart-sum-actions:not(:empty) { display: grid; gap: var(--s-sm); margin-top: var(--s-lg); }
.cart-sum-actions > .cta-ac { width: 100%; }
.cart-sum-actions > .cart-continue-link { justify-self: start; margin-top: var(--s-xs); }
.cart-sum-actions > .cart-cta-hint { margin-top: 0; }
/* Checkout sections (address, pincode, date) are groups, 48px apart, with a Title heading. */
.checkout-section { margin-top: var(--s-2xl); }
.checkout-section:first-child { margin-top: 0; }
.checkout-section-title {
  margin-bottom: var(--space-h);
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.checkout-zone:not(:empty) { margin-top: var(--s-sm); }
.checkout-manage { margin-top: var(--s-md); font-size: var(--t-fine); line-height: 1.5; }
.checkout-empty-addr { margin-top: var(--s-md); }
.checkout-fineprint { margin-top: var(--s-xs); }
.checkout-pay-btn { width: 100%; margin-top: var(--s-lg); }
.cta-ac.cart-wa-order { width: 100%; margin-top: var(--s-md); }

/* ======================================================================
   12. c-order-confirm: the checkout-success slip. .page-head h1 + lede, then .wrap >
   .slip.order-confirm > table.ledger-table (Order number in td.fig#order-number, Delivery in
   td#delivery-promise) + ul.contact-rows with a#track-link. No tick, no stamp.
   ====================================================================== */
.order-confirm { max-width: 36rem; }
.order-confirm__number {
  font-size: var(--t-title);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.order-confirm .contact-rows { margin-top: var(--s-lg); }

/* ======================================================================
   13. c-track-timeline: track.js's result. .track-result is a slip; the order number in
   Price type; status as a status word; the timeline a ruled list of 44px rows with an 8px dot
   (done ink, active a 2px Haldi ring with its label in 600, pending pencil outline, terminal
   Brick), label Label, description Body, time Fine Pencil; the tracking block stacked rows;
   the items as ledger rows; .track-error as the error status line. Nothing animates.
   ====================================================================== */
.track-error {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--error);
  overflow-wrap: anywhere;
}
.track-result {
  padding: var(--slip-pad);
  background-color: var(--raised);
  border: var(--line-w) solid var(--rule);
}
.track-result-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-xs) var(--s-md);
}
.track-result-order {
  font-size: var(--t-title);
  font-weight: 500;
  line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums;
}
.track-timeline {
  margin-top: var(--s-lg);
  border-top: var(--line-w) solid var(--rule);
}
.track-timeline-step {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--s-sm);
  align-items: start;
  min-height: var(--tap);
  padding-block: var(--s-sm);
  border-bottom: var(--line-w) solid var(--rule);
}
.track-step-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.45em 0 0 0.25rem;
  border: 1.5px solid var(--pencil-text);
  border-radius: 50%;
  background-color: var(--paper);
}
.is-done > .track-step-dot { border-color: var(--ink-text); background-color: var(--ink-text); }
.is-active > .track-step-dot {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0.35em 0 0 0.125rem;
  border: 2px solid var(--haldi);
  background-color: var(--paper);
}
.is-terminal > .track-step-dot { border-color: var(--error); background-color: var(--error); }
.track-step-body { min-width: 0; }
.track-step-label {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.is-pending > .track-step-body > .track-step-label { color: var(--pencil-text); font-weight: 400; }
.is-terminal > .track-step-body > .track-step-label { color: var(--error); }
.track-step-desc { margin-top: var(--s-2xs); font-size: var(--t-body); line-height: 1.5; }
.is-pending > .track-step-body > .track-step-desc { color: var(--pencil-text); }
.track-step-when { margin-top: var(--s-2xs); font-size: var(--t-fine); line-height: 1.5; color: var(--pencil-text); }
.track-eta-block { margin-top: var(--s-md); font-size: var(--t-body); line-height: var(--lh-body); }
.track-tracking-block {
  margin-top: var(--s-md);
  padding-top: var(--row-pad);
  border-top: var(--line-w) solid var(--rule);
}
.track-tracking-number {
  margin-top: var(--s-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.track-tracking-link { display: inline-block; margin-top: var(--s-xs); }
.track-timeline + .track-tracking-block { margin-top: 0; padding-top: var(--s-md); border-top: 0; }   /* the timeline's last rule already closes it */
.track-result-items { margin-top: var(--s-lg); }
.track-result-items > * {
  gap: var(--s-md);
  padding: var(--row-pad) 0;
  border-bottom: var(--line-w) solid var(--rule);
  line-height: 1.3;
}
.track-result-items > * > span:last-child {
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.track-result-date { margin-top: var(--s-sm); font-size: var(--t-fine); line-height: 1.5; color: var(--pencil-text); }

/* ======================================================================
   14. c-sheet: a generic modal in the menu sheet's manner, applied by CSS to the modals the
   modules render. Backdrop Kitchen Ink at 60%; panel a slip, 36rem at most, centred, the full
   screen below 600px; a .sheet__bar row with the title and the module's close button; the
   body flows; the actions row holds one Haldi button and secondaries. Focus trap and scroll
   lock stay in the module. account.js injects #bw-review-modal-styles with
   html[data-theme="light"] .x rules at (0,2,0), so every review-modal rule here is prefixed
   html.js (0,2,1): heavier by weight, never by !important. admin.js prints
   .admin-modal-overlay#modal-overlay and .admin-modal-backdrop.
   ====================================================================== */
.sheet-backdrop,
.admin-modal-backdrop,
.admin-modal-overlay,
html.js .bw-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-lg);
  background-color: var(--scrim);
}
.sheet,
html.js .bw-review-modal {
  position: relative;
  width: 100%;
  max-width: 36rem;
  max-height: calc(100vh - 2 * var(--s-lg));
  max-height: calc(100dvh - 2 * var(--s-lg));
  overflow-y: auto;
  padding: var(--slip-pad);
  background-color: var(--raised);
  color: var(--ink-text);
  border: var(--line-w) solid var(--rule);
  border-radius: var(--cut);
  box-shadow: none;
  font-family: var(--font-print);
}
@media (max-width: 599.98px) {
  .sheet-backdrop,
  .admin-modal-backdrop,
  .admin-modal-overlay,
  html.js .bw-review-backdrop { padding: 0; }
  .sheet,
  html.js .bw-review-modal { max-width: none; height: 100%; max-height: none; border: 0; }
}
.sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: var(--tap);
}
.sheet__title,
html.js .bw-rev-title {
  margin: 0 var(--tap) 0 0;
  font-family: var(--font-print);
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-text);
}
.sheet__body { margin-top: var(--s-md); }
.sheet__body > * + * { margin-top: var(--s-md); }
.sheet__actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-lg); }
.sheet__close,
html.js .bw-rev-close {
  position: absolute;
  top: var(--s-xs);
  right: var(--s-xs);
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--cut);
  background: none;
  color: var(--ink-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .sheet__close:hover,
  html.js .bw-rev-close:hover { background-color: var(--paper); color: var(--ink-text); }
}
html.js .bw-rev-sub {
  margin: var(--s-xs) 0 0;
  max-width: 62ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-text);
}
html.js .bw-rev-product,
html.js .bw-rev-label {
  display: block;
  margin: var(--s-md) 0 0;
  font-family: var(--font-print);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-text);
}
html.js .bw-rev-label { margin-bottom: var(--s-xs); }
html.js .bw-rev-input,
html.js .bw-rev-select,
html.js .bw-rev-textarea {
  display: block;
  width: 100%;
  height: var(--field-h);
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--field-border);
  border-radius: var(--cut);
  background-color: var(--raised);
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-body);
  line-height: 1.3;
}
html.js .bw-rev-select {
  padding-right: 2.75rem;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 0.75rem 0.5rem;
  appearance: none;
  cursor: pointer;
}
html.js .bw-rev-textarea { height: auto; min-height: 7.5rem; line-height: 1.5; resize: vertical; }
html.js :is(.bw-rev-input, .bw-rev-select, .bw-rev-textarea)::placeholder { color: var(--pencil-text); opacity: 1; }
html.js :is(.bw-rev-input, .bw-rev-select, .bw-rev-textarea):focus { border-color: var(--field-border); }
html.js :is(.bw-rev-input, .bw-rev-select, .bw-rev-textarea):focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 3px; }
/* The star picker: DESIGN.md bans star ratings, so this is the quiet minimum (an owner
   decision is open); five 44px text buttons, the chosen ones in the accent colour. */
html.js .bw-rev-stars { display: flex; gap: var(--s-2xs); margin: 0 0 var(--s-xs); }
html.js .bw-rev-star {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pencil-text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: none;
}
html.js .bw-rev-star:hover { transform: none; }
html.js .bw-rev-star.is-on { color: var(--accent-text); }
html.js .bw-rev-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
}
html.js .bw-rev-cancel,
html.js .bw-rev-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0.8125rem var(--s-lg);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  background-color: var(--paper);
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-button);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms var(--ease-quart), transform 160ms var(--ease-quart);
}
html.js .bw-rev-submit {
  background-color: var(--haldi);
  color: var(--kitchen-ink);
  border-color: var(--kitchen-ink);
}
@media (hover: hover) and (pointer: fine) {
  html.js .bw-rev-cancel:hover { background-color: var(--raised); color: var(--ink-text); border-color: var(--ink-text); }
  html.js .bw-rev-submit:hover { background-color: var(--haldi-stain); color: var(--kitchen-ink); border-color: var(--kitchen-ink); }
}
html.js :is(.bw-rev-cancel, .bw-rev-submit):focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 3px; }
html.js :is(.bw-rev-cancel, .bw-rev-submit):active { transform: scale(0.97); transition-duration: 100ms; }
html.js .bw-rev-submit:disabled {
  opacity: 1;
  cursor: default;
  color: var(--pencil-text);
  background-color: var(--paper);
  border-style: dashed;
  border-color: var(--pencil-text);
}

/* ======================================================================
   15. c-data-table: table.ledger-table.ledger-table--wide, a multi-column ledger with a
   visible thead (Label type, ink rule below), 44px rows, td.fig figures, th[scope=row] first
   column. Below 600px (unless .ledger-table--dense) each row stacks and every td prints its
   data-label in Label type before the value. .register-scroll scrolls a dense table sideways
   (.ledger-table--dense: 40px rows, Fine figures, never stacks).
   ====================================================================== */
.ledger-table--wide thead th {
  padding: 0 var(--s-md) var(--s-xs) 0;
  border-bottom: var(--line-w) solid var(--ink-text);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  vertical-align: bottom;
}
.ledger-table--wide thead th.fig { text-align: right; padding-left: var(--s-md); padding-right: 0; }
.ledger-table--wide tbody th,
.ledger-table--wide tbody td { padding-right: var(--s-md); }
.ledger-table--wide tbody th { font-weight: 500; }
.ledger-table--wide tbody td.fig,
.ledger-table--wide tbody .ledger-table__fig { padding-right: 0; }
.ledger-table--wide tbody tr:last-child > * { border-bottom: var(--line-w) solid var(--rule); }
.register-scroll { overflow-x: auto; scrollbar-width: thin; }
.register-scroll > .ledger-table { min-width: 40rem; }
.ledger-table--dense th,
.ledger-table--dense td {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: var(--t-fine);
  line-height: 1.3;
}
@media (max-width: 599.98px) {
  .ledger-table--wide:not(.ledger-table--dense),
  .ledger-table--wide:not(.ledger-table--dense) tbody,
  .ledger-table--wide:not(.ledger-table--dense) tr,
  .ledger-table--wide:not(.ledger-table--dense) th,
  .ledger-table--wide:not(.ledger-table--dense) td { display: block; }
  .ledger-table--wide:not(.ledger-table--dense) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .ledger-table--wide:not(.ledger-table--dense) tr { padding: var(--row-pad) 0; border-bottom: var(--line-w) solid var(--rule); }
  .ledger-table--wide:not(.ledger-table--dense) tbody tr:last-child { border-bottom: 0; }
  .ledger-table--wide:not(.ledger-table--dense) tbody tr:last-child > *,
  .ledger-table--wide:not(.ledger-table--dense) th,
  .ledger-table--wide:not(.ledger-table--dense) td { padding: 0; border: 0; text-align: left; }
  .ledger-table--wide:not(.ledger-table--dense) td { margin-top: var(--s-2xs); }
  /* A block table would leave its caption as a shrink-to-fit table-caption, one word a line. */
  .ledger-table--wide:not(.ledger-table--dense) caption { display: block; }
  .ledger-table--wide:not(.ledger-table--dense) td.fig,
  .ledger-table--wide:not(.ledger-table--dense) .ledger-table__fig { padding-left: 0; white-space: normal; }
  .ledger-table--wide:not(.ledger-table--dense) td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 9rem;
    padding-right: var(--s-sm);
    font-size: var(--t-label);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
  }
}

/* ======================================================================
   16. c-definition-list: dl.deflist > div > dt (Label) + dd (Body, numbers in .nowrap); 8px
   inside a row, 12px between rows, two columns from 600px (dt 10rem).
   ====================================================================== */
.deflist { display: grid; gap: var(--s-sm); margin: 0; }
.deflist > div {
  display: grid;
  gap: var(--s-xs);
  padding-bottom: var(--s-sm);
  border-bottom: var(--line-w) solid var(--rule);
}
.deflist > div:last-child { padding-bottom: 0; border-bottom: 0; }
.deflist dt {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.deflist dd { margin: 0; line-height: 1.5; }
@media (min-width: 600px) {
  .deflist > div { grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--s-md); align-items: baseline; }
}

/* ======================================================================
   17. c-prose-lists: ul and ol inside .prose with ink markers, 12px between items (v3.css),
   24px indent, nested lists 8px, <strong> lead-ins 600; a .callout stays full width.
   ====================================================================== */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose :is(ul, ol) { padding-left: 1.5rem; }
.prose li::marker { color: var(--ink-text); font-variant-numeric: tabular-nums lining-nums; }
.prose li > :is(ul, ol) { margin-top: var(--s-xs); }
.prose li > :is(ul, ol) > li + li { margin-top: var(--s-xs); }
.prose li > strong:first-child { font-weight: 600; }
.prose li > p { max-width: none; }
.prose > .callout { max-width: none; }

/* ======================================================================
   18. c-address-block and c-contact-form. address.fine.address-block (never italic) with the
   registered office lines, then CIN, GSTIN and FSSAI each in .nowrap. The contact form is a
   grid of .field stacks (or the live .form-group), the honeypot row .visually-hidden, the
   submit the page's one Haldi button; the sent state .form-sent > p.callout + a.link.
   ====================================================================== */
.address-block { font-style: normal; max-width: 62ch; }
.address-block__line { display: block; }
.address-block__ids { display: block; margin-top: var(--s-xs); }
.contact-form { display: grid; gap: var(--s-md); max-width: 36rem; }
.contact-form > .form-group + * { margin-top: 0; }
.contact-form > :is(.btn, .cta-ac) { justify-self: start; margin-top: var(--s-xs); }
.form-sent { max-width: 36rem; }
.form-sent > * + * { margin-top: var(--s-md); }
.form-sent > .callout { max-width: none; }

/* ======================================================================
   19. c-faq-group: section.faq-group > h2 + .faq-list > .faq-item > button.faq-question
   (Title type, full width, 44px, a chevron that turns on .open) + .faq-answer (hidden until
   .faq-item.open, which BW.initFaqAccordion toggles; every answer shows without JavaScript).
   The answer opens at once, no height transition (the menu sheet opens the same way).
   ====================================================================== */
.faq-group + .faq-group { margin-top: var(--s-3xl); }
.faq-group > h2 + .faq-list { margin-top: var(--space-h); }
.faq-list { border-top: var(--line-w) solid var(--rule); }
.faq-item { border-bottom: var(--line-w) solid var(--rule); }
.faq-h { margin: 0; font: inherit; }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-sm) 0;
  border: 0;
  background: none;
  color: var(--ink-text);
  font-family: var(--font-print);
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.faq-question::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 160ms var(--ease-quart);
}
.faq-item.open .faq-question::after { transform: translateY(25%) rotate(225deg); }
@media (hover: hover) and (pointer: fine) {
  .faq-question:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--link-line);
    text-underline-offset: 4px;
  }
}
.faq-answer { display: none; padding-bottom: var(--s-lg); }
.faq-item.open > .faq-answer,
html:not(.js) .faq-answer { display: block; }
html:not(.js) .faq-question::after { display: none; }
.faq-answer-inner > * + * { margin-top: var(--s-md); }
/* The live page's section heading, if a port keeps it: Headline type, like h2. */
.faq-section-title {
  margin-top: var(--s-3xl);
  margin-bottom: var(--space-h);
  font-size: var(--t-headline);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 960px) { .faq-section-title { font-weight: 300; } }
html[data-motion="none"] .faq-question::after { transition: none; }

/* ======================================================================
   20. c-city-landing and c-compare-ledger. A city page is c-page-head-meta with a status line,
   then .wrap.split (the intro left, the three-loaf .price-table in a .split__aside.slip), then
   the pincode group (served) or the notify group (not yet), then the contact rows: the
   composition is v3.css's; these are its joints. The comparison is two slips side by side from
   900px, the other loaf's figures in Pencil, a Fine source line under each, no red marks.
   ====================================================================== */
.city-status { margin-top: var(--s-md); }
.city-summary__link { margin-top: var(--s-md); }
.city-order { margin-top: var(--s-2xl); max-width: 30rem; }
.city-order > * + * { margin-top: var(--s-md); }
.city-contact { margin-top: var(--s-3xl); }
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-xl) var(--gutter);
  align-items: start;
}
@media (min-width: 900px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.compare__theirs .ledger-table :is(th, td) { color: var(--pencil-text); }
.compare__source { margin-top: var(--s-sm); font-size: var(--t-fine); line-height: 1.5; color: var(--pencil-text); }

/* ======================================================================
   21. c-person-full: li.person.person--full inside ul.people__grid.people__grid--full:
   portrait, h2.person__name, p.person__role, dl.person__facts (Education, Experience),
   p.person__bio, a.link to Instagram. One column below 600px, two from 600px; the subgrid
   rows of the small people block do not apply.
   ====================================================================== */
.people__grid--full {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2xl) var(--gutter);
}
@media (min-width: 600px) {
  .people__grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .people__grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3xl) var(--gutter); }
}
.people__grid--full > .person { display: block; grid-row: auto; grid-template-rows: none; }
.people__grid--full .person__name { width: auto; }
.person--full .person__photo { max-width: 12rem; }
.person--full .person__name { margin-top: var(--s-md); font-size: var(--t-title); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.person__facts { display: grid; gap: var(--s-xs); margin: var(--s-md) 0 0; }
.person__facts dt {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.person__facts dd { margin: 0; }
.person__facts dd + dt { margin-top: var(--s-sm); }
.person__facts ul { margin: 0; padding: 0; list-style: none; }
.person__facts li + li { margin-top: var(--s-2xs); }
.person__bio { margin-top: var(--s-md); }
.person__bio > * + * { margin-top: var(--s-md); }
.person__link { display: inline-block; margin-top: var(--s-md); }

/* ======================================================================
   22. c-article-list and c-article-reader. The hub is a ledger of article.article-row rows
   (a 3:2 print left from 600px, h2.title, a 44ch excerpt, a Fine date and read-time line);
   .article-row--featured spans the width with a larger print. A reader is
   article.article-full.prose.flow, shown by .active (the page's JS) or without JavaScript,
   with button.article-full-back at the top and the bottom.
   ====================================================================== */
.article-list { border-bottom: var(--line-w) solid var(--rule); }
.article-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-md) var(--s-xl);
  align-items: start;
  padding-block: var(--s-xl);
  border-top: var(--line-w) solid var(--rule);
}
@media (min-width: 600px) {
  .article-row { grid-template-columns: 12rem minmax(0, 1fr); }
}
.article-row__pic { --tilt: 0deg; }
.article-row__body > * + * { margin-top: var(--s-xs); }
.article-row__title { font-size: var(--t-title); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.article-row__excerpt { max-width: 44ch; }
.article-row__meta { font-size: var(--t-fine); line-height: 1.5; color: var(--pencil-text); }
@media (min-width: 900px) {
  .article-row--featured { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-lg) var(--gutter); }
  .article-row--featured .article-row__title { font-size: var(--t-headline); font-weight: 350; line-height: 1.1; letter-spacing: -0.01em; }
}
@media (min-width: 960px) {
  .article-row--featured .article-row__title { font-weight: 300; }
}
.article-full { display: none; }
.article-full.active,
html:not(.js) .article-full {
  display: block;
  /* The opened article sits straight in <main> (articles.html), so it carries the .wrap width
     itself; without this it ran edge to edge (2026-10-23). */
  width: min(100% - 2 * (var(--gutter) + var(--art-gutter)), var(--page-max));
  margin-inline: auto;
}
html:not(.js) .article-full + .article-full { margin-top: var(--s-4xl); }
.article-full > h1, .article-full > .article-full__title {
  font-size: var(--t-headline);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
@media (min-width: 960px) { .article-full > h1, .article-full > .article-full__title { font-weight: 300; } }
.article-full .print { margin-block: var(--s-xl); }
.article-full > .article-full-back:last-child { margin-top: var(--s-2xl); }

/* ======================================================================
   23. c-not-found, c-auth-divider and the sign-in card. 404 is .page-head h1 + lede +
   ul.contact-rows of two links. .auth-divider is a ruled line with the Fine word "or" on
   Receipt White. The sign-in page's static classes (.auth-container, .auth-card, the four
   forms, .auth-google-btn, #alert-box's .alert markup from signin.js) get the slip and field
   looks here, because the page's inline logic names them.
   ====================================================================== */
.not-found .contact-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 var(--s-xl);
  margin-top: var(--s-xl);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  margin-block: var(--s-lg);
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1 1 auto; border-top: var(--line-w) solid var(--rule); }
.auth-container { width: 100%; max-width: 28rem; margin-inline: 0; }
.auth-card {
  padding: var(--slip-pad);
  background-color: var(--raised);
  border: var(--line-w) solid var(--rule);
}
.auth-card form { display: grid; gap: var(--s-md); }
.auth-card .form-group + * { margin-top: 0; }
.auth-card .auth-submit { width: 100%; margin-top: var(--s-xs); }
.auth-form-title { font-size: var(--t-title); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.auth-form-sub { max-width: none; }
.auth-forgot { margin-top: var(--s-2xs); max-width: none; }
.auth-footer-text { margin-top: var(--s-lg); max-width: none; font-size: var(--t-fine); line-height: 1.5; text-align: center; }
.auth-google-btn { width: 100%; gap: var(--s-sm); }
.auth-google-btn > svg { width: 1.125rem; height: 1.125rem; }
.alert { margin-bottom: var(--s-md); font-size: var(--t-fine); line-height: 1.5; }
.alert-error { color: var(--error); }
.alert-headline { display: block; font-size: var(--t-label); font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
.alert-body { margin-top: var(--s-2xs); max-width: none; }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-sm); }
.alert-action { min-height: var(--tap); padding: 0.625rem var(--s-md); }

/* ======================================================================
   24. c-layout-utils, last so they win: .reserve-520 (the cart grid's CLS anchor), .grid-2
   (two equal columns from 600px, 16px gap), .u-hide for a class the page's JS toggles.
   The [hidden] guard already lives in v3.css.
   ====================================================================== */
.reserve-520 { min-height: 520px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-md); }
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.u-hide { display: none; }