/* =====================================================================
   Atto Sushi — CATERING page styles
   Builds on /css/style.css (tokens + components). Only page-specific
   layout lives here; every colour comes from a style.css token so the
   computed contrast table still holds (see the note at the bottom).
   ===================================================================== */

/* Elements this page toggles with [hidden] keep it even when a class sets display */
.cat-rolls[hidden], .qc-group[hidden], .qc-state[hidden], .calc-step[hidden] { display: none; }

/* ---------- no-JS: hide the calculator shell, show the note ---------- */
.calc-nojs { margin-bottom: var(--s-8); }
.js .calc-nojs { display: none; }
html:not(.js) .calc,
html:not(.js) .mobile-bar { display: none; }
html:not(.js) body.has-mobile-bar { padding-bottom: 0; }

/* ------------------------------- HERO ------------------------------- */
.cat-hero { min-height: 92vh; min-height: 92svh; }
.cat-hero .hero__media { object-position: 50% 62%; }
.cat-hero__grid { display: grid; gap: var(--s-10); align-items: end; }
@media (min-width: 1000px) {
  .cat-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: var(--s-16); }
}
.cat-hero__title { margin-top: var(--s-3); max-width: 13ch; }
.cat-hero__lede { margin-top: var(--s-6); color: var(--fg-muted); }
.cat-hero__ctas { margin-top: var(--s-8); }

.cat-facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
.cat-facts__item { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.cat-facts__item dt { color: var(--fg-muted); }
.cat-facts__item dd { margin-top: var(--s-1); font-size: var(--fs-16); line-height: 1.5; color: var(--fg); }
.cat-facts__item--price dd { display: grid; gap: var(--s-2); }
.cat-facts__item--price .price-hero__amount { font-size: var(--fs-56); }
.cat-facts__note { font-size: var(--fs-14); color: var(--fg-muted); }

/* ---------------------------- QUOTE BAND ---------------------------- */
.cat-quote__aside { max-width: 34ch; }
@media (min-width: 900px) { .cat-quote__aside { text-align: right; } }

/* Guests */
.cat-guests { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.cat-guests__unit { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-28); color: var(--fg-muted); }
.cat-msg:not(:empty) { margin-top: var(--s-4); }
.calc-step .notice .link { font-weight: 600; }

/* Packages */
.cat-pkgs { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .cat-pkgs { grid-template-columns: 1fr 1fr; align-items: start; } }
.pkg-from { font-size: var(--fs-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.pkg-extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pkg-extra__label { flex-basis: 100%; font-size: var(--fs-14); font-weight: 600; }
/* What a switched-on package comes to: platters and price, then every item in it */
.pkg-break { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums lining-nums; }
.pkg-break:empty { display: none; }
.pkg-break__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); font-weight: 600; }
.pkg-break__price { font-size: var(--fs-22); font-weight: 700; color: var(--accent); }
.pkg-break__note { font-size: var(--fs-14); color: var(--fg-muted); }
.pkg-break__items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.pkg-break__items dt { font-size: var(--fs-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.pkg-break__n { font-size: var(--fs-22); font-weight: 700; line-height: 1.2; }
.pkg-break__u { font-size: var(--fs-14); color: var(--fg-muted); }
.pkg-break__total { padding-top: var(--s-3); border-top: 1px dotted var(--line-strong); font-size: var(--fs-14); font-weight: 600; }
.cat-coverage { margin-top: var(--s-4); }
.cat-coverage__ok { font-size: var(--fs-14); color: var(--fg-muted); }
.cat-coverage__ok strong { color: var(--fg); }

/* Rolls */
.cat-rolls { margin-top: var(--s-6); display: grid; gap: var(--s-8); }
.roll-picker {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.roll-picker__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-2); }
.roll-count {
  display: inline-flex; align-items: center; min-height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-14); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--surface-2);
}
.roll-count.is-ok    { background: var(--wasabi-bed); color: var(--wasabi-fg); }
.roll-count.is-under { background: var(--accent-bed); color: var(--accent-on-bed); }
.roll-count.is-over  { background: var(--warn-bed);   color: var(--warn-fg); }
.roll-list { margin-top: var(--s-4); display: grid; }
@media (min-width: 700px) { .roll-list:not(.roll-list--sig) { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
.roll-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
}
.roll-row__name { min-width: 0; font-size: var(--fs-16); font-weight: 600; line-height: 1.35; }
.roll-row__desc { display: block; margin-top: 2px; font-size: var(--fs-14); font-weight: 400; color: var(--fg-muted); }
.roll-row.is-over .roll-row__name { color: var(--warn-fg); }
.roll-star { color: var(--accent); margin-left: 1px; }

/* Smaller stepper for dense lists */
.stepper--sm { height: 44px; flex: none; }
.stepper--sm .stepper__btn { width: 44px; font-size: 1.125rem; }
.stepper--sm .stepper__input { min-width: 40px; width: 3ch; font-size: var(--fs-16); }

/* Per guest + sides */
.cat-items { display: grid; }
.cat-item {
  display: grid; gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.cat-item:first-child { padding-top: 0; }
@media (min-width: 700px) {
  .cat-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-8); }
}
.cat-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.cat-item__name { font-size: var(--fs-18); font-weight: 600; line-height: 1.35; }
.cat-item__price { font-size: var(--fs-16); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cat-item__unit { font-weight: 400; color: var(--fg-muted); }
.cat-item__desc { margin-top: var(--s-1); max-width: 56ch; font-size: var(--fs-14); line-height: 1.6; color: var(--fg-muted); }
.cat-item__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
@media (min-width: 700px) { .cat-item__ctrl { justify-content: flex-end; } }
.cat-item--side .cat-item__head { justify-content: flex-start; }
.seg-price { font-weight: 400; margin-left: 2px; font-variant-numeric: tabular-nums lining-nums; }
.cat-item .segmented__opt { padding: 0 var(--s-3); }

/* Drinks */
.cat-drinks { display: grid; }
@media (min-width: 700px) { .cat-drinks { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
.cat-drink {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.cat-drink__name { font-weight: 600; }
.cat-drink__price { font-size: var(--fs-14); color: var(--fg-muted); font-variant-numeric: tabular-nums lining-nums; }

/* ---------------------------- QUOTE CARD ---------------------------- */
.qc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.qc-close { display: none; }
.quote-card:focus { outline: none; }
.quote-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.qc-sub { margin-top: var(--s-2); font-size: var(--fs-14); color: var(--fg-muted); }
.qc-totals { margin-top: var(--s-6); }
.qc-totals .quote-card__stats { margin-top: var(--s-2); }
.quote-card__stats dd { margin: 0; }
.qc-pieces { margin-top: var(--s-3); font-size: var(--fs-14); font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums lining-nums; }
.qc-msgs { display: grid; gap: var(--s-2); }
.qc-msgs:not(:empty) { margin-top: var(--s-4); }
.qc-group { margin-top: var(--s-6); }
.qc-group__title { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); }
.qc-group .quote-card__platters { margin-top: var(--s-2); }
.qc-line { display: flex; justify-content: space-between; gap: var(--s-4); }
.qc-line__label { min-width: 0; }
.qc-line__amt { flex: none; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.qc-block:empty, .qc-copy-status:empty { display: none; }
.qc-block { font-size: var(--fs-14); color: var(--warn-fg); }
.qc-copy-status { font-size: var(--fs-14); color: var(--wasabi-fg); }
/* The button stays focusable when the quote is not ready (pressing it says what to fix), so
   it must stay readable: the outline style, cream on indigo 13.8:1, instead of a faded fill. */
#qc-request[aria-disabled="true"] { --_bg: transparent; --_fg: var(--fg); --_bd: var(--line-strong); opacity: 1; cursor: not-allowed; }
.qc-callus__title { margin-top: var(--s-4); font-size: var(--fs-22); font-weight: 700; line-height: 1.3; }
.qc-callus__title + .small { margin-top: var(--s-2); }

/* Mobile: the card becomes a bottom sheet opened from the mobile bar */
.qc-backdrop { display: none; }
@media (max-width: 999.98px) {
  .quote-card {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
    max-height: 88vh; max-height: 88svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-card) var(--r-card) 0 0;
    padding: var(--s-6) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom));
    transform: translateY(105%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  }
  body.quote-open .quote-card { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease), visibility 0s; }
  .qc-close { display: inline-flex; }
  .qc-backdrop { display: block; position: fixed; inset: 0; z-index: 1140; background: rgba(26, 28, 44, .55); }
  .qc-backdrop[hidden] { display: none; }
  body.quote-open { overflow: hidden; }
}

/* ---------------------------- ORDER FORM ---------------------------- */
.order { margin-top: var(--s-20); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.order[hidden] { display: none; }
.order__inner {
  max-width: 920px;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--e-2);
}
@media (min-width: 900px) { .order__inner { padding: var(--s-12); } }
.order__head > * + * { margin-top: var(--s-4); }
.order__head h2:focus { outline: none; }
.order__head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.order__summary { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }
.order__form { margin-top: var(--s-8); }
.order__form[hidden] { display: none; }
.order__grid { display: grid; gap: var(--s-5) var(--s-6); }
@media (min-width: 700px) {
  .order__grid { grid-template-columns: 1fr 1fr; }
  .order__span { grid-column: 1 / -1; }
}
.order__delivery[hidden] { display: none; }
.req { color: var(--accent); }
.opt { font-weight: 400; color: var(--fg-muted); }
.field__error[hidden] { display: none; }
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--s-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.order__fulfil { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
@media (min-width: 560px) { .order__fulfil { grid-template-columns: 1fr 1fr; } }
.fulfil-opt { position: relative; display: block; cursor: pointer; }
.fulfil-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fulfil-opt__box {
  display: grid; gap: 2px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.fulfil-opt:hover .fulfil-opt__box { border-color: var(--fg); }
.fulfil-opt__title { font-weight: 700; }
.fulfil-opt__meta { font-size: var(--fs-14); color: var(--fg-muted); }
.fulfil-opt__input:checked + .fulfil-opt__box { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.fulfil-opt__input:focus-visible + .fulfil-opt__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.order__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.order__actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.order__actions .small { max-width: 44ch; }
.order__preview-tag { font-weight: 400; opacity: .8; }
.order__success { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.order__success:focus { outline: none; }
.order__ref { margin-top: var(--s-6); font-size: var(--fs-18); font-weight: 600; }
.order__ref .num { color: var(--accent); letter-spacing: .02em; }
#order-errors:not(:empty) { margin-top: var(--s-6); }

/* --------------------------- CATERING MENU --------------------------- */
.cat-menu__figure { width: 100%; max-width: 420px; }
@media (min-width: 900px) { .cat-menu__figure { width: 360px; } }
.cm-pkgs { display: grid; gap: var(--s-10) var(--s-16); margin-top: var(--s-6); }
@media (min-width: 900px) { .cm-pkgs { grid-template-columns: 1fr 1fr; } }
.cm-pkg__head { padding-bottom: var(--s-2); }
.cm-pkg__blurb { font-size: var(--fs-14); color: var(--fg-muted); }
.cm-notes { margin-top: var(--s-3); display: grid; gap: var(--s-1); font-size: var(--fs-14); color: var(--fg-muted); }
.cm-notes li { padding-left: var(--s-4); position: relative; }
.cm-notes li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--accent); }
.cm-rolls { display: grid; gap: var(--s-10) var(--s-16); margin-top: var(--s-6); }
.cm-basic { margin-top: var(--s-4); columns: 2; column-gap: var(--s-6); }
.cm-basic li { break-inside: avoid; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.cm-sizes { display: inline-flex; gap: var(--s-3); }
.cm-size__k { font-size: var(--fs-12); font-weight: 600; color: var(--fg-muted); letter-spacing: .06em; }
.cm-pair { display: grid; gap: var(--s-20) var(--s-16); margin-top: var(--s-20); }
.cm-pair .menu-section + .menu-section { margin-top: 0; }
@media (min-width: 900px) { .cm-pair { grid-template-columns: 1fr 1fr; } }
.cat-disclaimer { margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--line-strong); max-width: 90ch; }
@media (max-width: 420px) {
  .cm-sizes { gap: var(--s-2); font-size: var(--fs-16); }
}

/* --------------------------- HOW IT WORKS --------------------------- */
.cat-how { align-items: start; }
@media (min-width: 900px) { .cat-how__media { position: sticky; top: calc(var(--header-h) + var(--s-8)); } }
.cat-how__img img { object-position: 50% 30%; }
.cat-steps { list-style: none; display: grid; }
.cat-steps__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
}
.cat-steps__item:last-child { border-bottom: 1px solid var(--line); }
.cat-steps__num { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-28); line-height: 1.1; color: var(--accent); font-variant-numeric: lining-nums; }
.cat-steps__item h3 + p { margin-top: var(--s-2); }

/* ------------------------------ CONTACT ------------------------------ */
.cat-contact { align-items: start; }
.cat-contact__phone {
  display: inline-block; margin-top: var(--s-2);
  font-size: var(--fs-56); font-weight: 900; line-height: 1; letter-spacing: -.03em;
  color: var(--fg);
}
.cat-contact__phone:hover { color: var(--accent); }
.cat-contact__addr { font-style: normal; line-height: 1.6; }
.cat-hours { margin-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.cat-hours__row { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.cat-hours__row dt { font-weight: 700; }
.cat-hours__row dd { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--fg-muted); }
.cat-hours__row dd span:first-child { color: var(--fg); }

/* Mobile bar spacing for the action button */
.mobile-bar__action { min-height: 44px; }

/* Contrast note: this file introduces no new colour values except the
   sheet backdrop (non-text). Text pairs used here — --accent / --fg-muted /
   --wasabi-fg / --warn-fg / --accent-on-bed on cream, paper, #FFFDF7 and
   indigo — are verified with a contrast script during the build (all >= 4.5:1). */

/* Legend spacing: float the legend so it joins normal flow (fieldset legends
   otherwise ignore sibling margins), then let the hint sit close beneath it. */
.calc-step > .calc-step__head { float: left; margin-bottom: var(--s-2); }
.calc-step > .calc-step__head + * { clear: both; }
.calc-step > .calc-step__hint { margin: 0 0 var(--s-6); }
.calc-step > .calc-step__head + ul { padding-top: var(--s-4); }
.cat-item .segmented__opt { display: inline-flex; align-items: baseline; gap: var(--s-1); white-space: nowrap; }

/* Hero: muted text over photography is raised to .92 so it clears AA even in
   the worst case (scrim .72 over pure white = 4.92:1; .78 would be 4.05:1). */
.cat-hero { --fg-muted: rgba(242, 232, 207, .92); }

/* =====================================================================
   Review fixes (2026-10-07). Overrides that arguably belong in style.css are
   scoped here so the shared file stays untouched; each is marked.
   ===================================================================== */

/* Order form: fields keep their natural height instead of stretching to the
   tallest cell in the row (style.css .field is a stretch grid). [style.css candidate] */
.order__grid { align-items: start; }
.order__grid .field { align-content: start; }
.order__grid input.input[type="date"], .order__grid input.input[type="time"], .order__grid select.input { height: 48px; }

/* Desktop quote card: never taller than the viewport, so the total can't
   scroll away. The card scrolls internally on very large orders. */
@media (min-width: 1000px) {
  .quote-card {
    max-height: calc(100vh - var(--header-h) - 2 * var(--s-6));
    max-height: calc(100svh - var(--header-h) - 2 * var(--s-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}

/* Mobile sheet under reduced motion: no transition at all, so visibility
   flips immediately and focus can move into the sheet. */
@media (prefers-reduced-motion: reduce) {
  .quote-card, body.quote-open .quote-card { transition: none !important; }
}

/* Sides S/M/L: every option is a centred flex box of identical height. */
.cat-item .segmented label { display: flex; }
.cat-item .segmented__opt { display: flex; align-items: center; justify-content: center; height: 36px; line-height: 1; }

/* Mobile bottom: the reserved space lives inside the indigo footer, so no
   cream strip shows between the footer and the fixed bar. [style.css candidate] */
body.has-mobile-bar { padding-bottom: 0; }
@media (max-width: 999.98px) {
  .js body.has-mobile-bar .footer { padding-bottom: calc(var(--s-8) + 70px + env(safe-area-inset-bottom)); }
}

/* Copy that only makes sense with the live calculator */
html:not(.js) .js-only { display: none; }

/* Package cards: keep "6 / 8 / 10" together */
.nowrap { white-space: nowrap; }

/* Catering menu: editorial balance */
.cm-rolls { gap: var(--s-12); }
.cm-basic { columns: 2; }
@media (min-width: 700px)  { .cm-basic { columns: 3; column-gap: var(--s-8); } }
@media (min-width: 1100px) { .cm-basic { columns: 4; } }
@media (max-width: 420px)  { .cm-basic { columns: 2; column-gap: var(--s-4); } .cm-basic li { font-size: var(--fs-14); } }
@media (min-width: 900px) {
  .cm-sig { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-16); }
}

/* =====================================================================
   Refinement pass (2026-11-10)
   ===================================================================== */

/* Catering menu: each platter size lists exactly what it holds. Rolls show
   the roll count and the pieces once cut; nigiri and sashimi are pieces. */
.menu-section__note { max-width: 44ch; font-size: var(--fs-14); color: var(--fg-muted); }
.cm-tier__items { margin-top: var(--s-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-6); font-size: var(--fs-14); line-height: 1.5; }
.cm-tier__items > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.cm-tier__items dt { color: var(--fg-muted); }
.cm-tier__items dd { font-weight: 600; text-align: right; }
.cm-tier__pieces { font-weight: 400; color: var(--fg-muted); }
.cm-tier__pieces::before { content: "· "; }
.cm-tier__total { margin-top: var(--s-2); font-size: var(--fs-14); font-weight: 600; color: var(--accent); }
@media (max-width: 420px) { .cm-tier__items { grid-template-columns: 1fr; } }
@media (min-width: 480px) { .menu-list--2col-s { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }

/* Phone: the hero states the offer and the two actions; the facts list tightens
   so the calculator starts sooner. */
@media (max-width: 599px) {
  .cat-hero { min-height: 0; padding-bottom: var(--s-8); }
  .cat-hero__lede { margin-top: var(--s-4); }
  .cat-hero__ctas { margin-top: var(--s-6); }
  .cat-hero__ctas .btn { flex: 1 1 100%; }
  .cat-hero__grid { gap: var(--s-8); }
  .cat-facts__item { padding: var(--s-3) 0; }
  .cat-quote__aside { max-width: none; }
  .cat-guests .stepper--lg { flex: 1 1 auto; max-width: 280px; }
  .cat-guests .stepper--lg .stepper__input { flex: 1 1 auto; min-width: 64px; }
  .pkg-extra .stepper { flex: none; }
  .order__actions .btn { width: 100%; }
}

/* Package cards: one column until there is room for two readable breakdowns */
@media (min-width: 700px) and (max-width: 1239px) { .cat-pkgs { grid-template-columns: 1fr; } }
.toggle-card__head { min-height: 72px; }

/* Mobile bar: the label carries guests and piece count, so let it wrap cleanly */
.mobile-bar > div { min-width: 0; }
/* The label wraps rather than being cut off, at any width or text spacing. */
.mobile-bar__label { white-space: normal; }


/* Order request. With JavaScript the page posts the calculator's selection and the form's
   words-only fields are hidden. Without it the same form posts as plain HTML: the calculator
   cannot run, so the customer describes the order and a note says so. */
.order-nojs { display: none; }
html:not(.js) .order-nojs { display: flex; }
html:not(.js) .order__summary { display: none; }
.js .order-nojs-fields { display: none; }
.order__ref-code { color: var(--accent); letter-spacing: .02em; }
.order__success .cta-row { margin-block: var(--s-2) 0; }
.order__form.is-sending { opacity: .6; pointer-events: none; }
.order__text { margin-top: var(--s-4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-12); line-height: 1.5; white-space: pre; overflow: auto; }
.order__success > * + * { margin-top: var(--s-4); }

/* Link from another page's article to the calculator */
.cat-hero__grid .breadcrumb a { color: var(--fg); }


/* =====================================================================
   Accessibility audit, 2026-11-11 (WCAG 2.1 AA)
   ===================================================================== */

/* Hero text over the photograph. The shared scrim is too light where the copy sits (the photo
   is pale wood), so this hero gets a floor under every piece of text. Measured on the built
   page by scripts/a11y-check.mjs: every element is at least 4.5:1 against the lightest pixels
   behind it, at 375, 768, 1024, 1280 and 1440 wide.
     - below 1000px the copy and the facts stack, so the whole hero is a flat .86 indigo;
     - from 1000px the copy column is .86 to .84, and the facts column, which sits outside
       it, gets its own .86 panel. */
.cat-hero .hero__scrim { background: rgba(26, 28, 44, .86); }
@media (min-width: 1000px) {
  .cat-hero .hero__scrim {
    background:
      linear-gradient(180deg, rgba(26, 28, 44, .55) 0%, rgba(26, 28, 44, 0) 22%),
      linear-gradient(90deg, rgba(26, 28, 44, .88) 0, rgba(26, 28, 44, .86) calc(var(--gutter) + 800px), rgba(26, 28, 44, .5) calc(var(--gutter) + 1100px), rgba(26, 28, 44, .3) 100%),
      linear-gradient(0deg, rgba(26, 28, 44, .6) 0%, rgba(26, 28, 44, 0) 40%);
  }
  .cat-facts { padding: var(--s-2) var(--s-6); border-top: 0; border-radius: var(--r-card); background: rgba(26, 28, 44, .88); }
  .cat-facts__item:last-child { border-bottom: 0; }
}

/* Keyboard focus must not land underneath the fixed quote bar: when the browser scrolls a
   focused control into view, it now stops above the bar. */
@media (max-width: 999.98px) {
  html { scroll-padding-bottom: 104px; }
}

/* At very short viewports (a desktop zoomed to 400%) a fixed bar would take most of the
   screen, so it joins the page flow, right under the calculator. */
@media (max-height: 480px) and (max-width: 999.98px) {
  .mobile-bar { position: static; margin-top: var(--s-8); border-radius: var(--r-card); box-shadow: none; }
  html { scroll-padding-bottom: 0; }
  .js body.has-mobile-bar .footer { padding-bottom: var(--s-8); }
}

.order__required-note { margin-top: var(--s-6); }
.order__required-note + .order__form { margin-top: var(--s-4); }