/* Private Chefs Atelier — Menu Builder.
   Every rule is scoped to a .mb- class or #mb- id so nothing here can reach
   the rest of the site. Colours, type, radii and easing all come from the
   tokens already defined in pca.css — no new palette, no new font. */

.mb-prog{display:flex;flex-wrap:wrap;gap:6px 26px;list-style:none;margin:0 0 48px;padding:0;
  border-bottom:1px solid var(--hair-d);padding-bottom:20px}
.mb-prog__i{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-35)}
.mb-prog__i.is-done{color:var(--c-55)}
.mb-prog__i.is-on{color:var(--gold)}

.mb-step{scroll-margin-top:80px}
.mb-step h2{margin-top:0}
.mb-step h2:focus-visible{outline:1px solid var(--gold);outline-offset:8px}

.mb-field{display:block;margin-bottom:26px}
.mb-field>span{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.mb-field input[type=number],.mb-field input[type=text],.mb-field input[type=date],
.mb-field textarea{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--egg);
  background:transparent;border:0;border-bottom:1px solid var(--hair-d);padding:14px 0;
  border-radius:0;transition:border-color .4s var(--e-out)}
.mb-field input:focus,.mb-field textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 1px 0 0 var(--gold)}
.mb-field textarea{min-height:110px;resize:vertical}
.mb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:640px){.mb-grid2{grid-template-columns:1fr}}

/* choice cards — buttons, never clickable divs */
.mb-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:10px 0 40px}
@media(max-width:760px){.mb-choices{grid-template-columns:1fr}}
.mb-choice{text-align:left;display:block;width:100%;background:transparent;cursor:pointer;
  border:1px solid var(--hair-d);border-radius:var(--radius);padding:26px 24px;
  transition:border-color .4s var(--e-out),background .4s var(--e-out)}
.mb-choice:hover{border-color:var(--gold-h)}
.mb-choice[aria-pressed=true]{border-color:var(--gold);background:rgba(170,151,103,.06)}
.mb-choice__t{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--egg)}
.mb-choice[aria-pressed=true] .mb-choice__t{color:var(--gold)}
.mb-choice__d{display:block;margin-top:12px;font-size:.9rem;color:var(--dim-d);letter-spacing:.01em}
.mb-choice[aria-pressed=true] .mb-choice__t::after{content:" ·  selected";letter-spacing:.12em}

/* search + filters */
.mb-search{margin:0 0 26px}
.mb-search input{width:100%;font-family:var(--sans);font-size:1rem;color:var(--egg);
  background:transparent;border:0;border-bottom:1px solid var(--hair-d);padding:16px 0;border-radius:0}
.mb-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 1px 0 0 var(--gold)}
.mb-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
@media(max-width:760px){
  .mb-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:6px}
  .mb-filters::-webkit-scrollbar{display:none}
}
.mb-filter{white-space:nowrap;background:transparent;cursor:pointer;color:var(--c-35);
  font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--hair-d);border-radius:999px;padding:11px 18px;
  transition:color .35s var(--e-out),border-color .35s var(--e-out)}
.mb-filter:hover{color:var(--egg)}
.mb-filter[aria-pressed=true]{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* dish cards */
.mb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;
  background:var(--hair-d)}
.mb-card{background:var(--ink);padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.mb-card.is-on{background:rgba(170,151,103,.05)}
.mb-card__n{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--egg);margin:0;font-weight:400}
.mb-card.is-on .mb-card__n{color:var(--gold)}
.mb-card__d{margin:0;font-size:.9rem;line-height:1.62;color:var(--dim-d)}
.mb-card__f{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.mb-al{display:flex;gap:5px;flex-wrap:wrap}
.mb-al__i{font-family:var(--sans);font-size:.56rem;letter-spacing:.1em;color:var(--c-35);
  border:1px solid var(--hair-d);border-radius:3px;padding:3px 5px;text-decoration:none;cursor:help}
.mb-add{background:transparent;cursor:pointer;border:1px solid var(--hair-d);border-radius:999px;
  padding:9px 16px;font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--egg);white-space:nowrap;
  transition:border-color .35s var(--e-out),color .35s var(--e-out)}
.mb-add:hover{border-color:var(--gold);color:var(--gold)}
.mb-add[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.mb-add[aria-pressed=true] .mb-add__t::after{content:" \2713"}

.mb-empty{padding:48px 4px;text-align:center}
.mb-empty p{color:var(--dim-d)}

/* summary — desktop rail, mobile bar */
.mb-layout{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
@media(max-width:1100px){.mb-layout{grid-template-columns:1fr}}
.mb-rail{position:sticky;top:96px}
@media(max-width:1100px){.mb-rail{display:none}}
.mb-sum{border:1px solid var(--hair-d);border-radius:var(--radius);padding:26px 24px}
.mb-sum h3{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 6px}
.mb-sum__count{font-size:.82rem;color:var(--c-35);margin:0 0 18px}
.mb-sum__list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.mb-sum__list li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:.88rem;color:var(--dim-d);border-bottom:1px solid var(--hair-d);padding-bottom:9px}
.mb-sum__list li.is-pending em{color:var(--gold);font-style:normal;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.mb-rm{background:transparent;border:0;cursor:pointer;color:var(--c-35);font-size:1rem;
  line-height:1;padding:2px 4px}
.mb-rm:hover{color:var(--gold)}
.mb-sum__pp{font-family:var(--display);font-size:1.5rem;color:var(--egg);margin:0}
.mb-sum__pp--q{font-size:.9rem;font-family:var(--sans);color:var(--c-35)}
.mb-sum__vat{font-size:.76rem;color:var(--c-35);margin:8px 0 0;line-height:1.6}

.mb-bar{position:fixed;left:0;right:0;bottom:0;z-index:97;background:var(--char);
  border-top:1px solid var(--hair-d);padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Below 820px the site's own Book Now / WhatsApp bar (.bar in pca.css,
   z-index 96, 60px of content plus the safe-area inset) is displayed and
   fixed to the same edge. The builder summary is lifted clear of it so the
   two stack rather than collide, and the page gets enough bottom padding
   that neither bar can cover content or the final CTA. */
@media(max-width:820px){
  .mb-bar{bottom:calc(60px + env(safe-area-inset-bottom));padding-bottom:14px}
  .mb-sheet{bottom:0;padding-bottom:calc(26px + 60px + env(safe-area-inset-bottom))}
  body[data-page="builder"]{padding-bottom:calc(128px + env(safe-area-inset-bottom))}
}
/* 821-1100px: the site bar is hidden, so the builder summary returns to the
   true bottom of the viewport and carries the safe-area inset itself. */
@media(min-width:821px) and (max-width:1100px){
  .mb-bar{bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  body[data-page="builder"]{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media(min-width:1101px){.mb-bar{display:none}}
.mb-bar__t{font-size:.82rem;color:var(--egg)}
.mb-sheet{position:fixed;left:0;right:0;bottom:0;z-index:98;background:var(--ink);
  border-top:1px solid var(--gold-h);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));max-height:72vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
@media(min-width:1101px){.mb-sheet{display:none}}

/* allergen legend — its own marquee, the homepage one is untouched */
.mb-legend{overflow:hidden;border-block:1px solid var(--hair-d);padding:14px 0;margin:44px 0}
.mb-legend__t{display:flex;width:max-content;animation:mbLegend 52s linear infinite}
.mb-legend__i{font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--c-35);white-space:nowrap;padding-right:0}
@keyframes mbLegend{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .mb-legend{overflow:visible}
  .mb-legend__t{width:auto;flex-wrap:wrap;animation:none;gap:6px 18px}
  .mb-legend__i:nth-child(2){display:none}
}

/* services, kids, review */
.mb-opts{display:grid;gap:1px;background:var(--hair-d);border-block:1px solid var(--hair-d);margin:30px 0}
.mb-opt{background:var(--ink);padding:24px;display:flex;gap:18px;align-items:flex-start}
.mb-opt input[type=checkbox]{margin-top:5px;width:17px;height:17px;accent-color:var(--gold);flex:none}
.mb-opt__b{flex:1}
.mb-opt__t{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--egg)}
.mb-opt__d{margin:9px 0 0;font-size:.88rem;color:var(--dim-d);line-height:1.62}
.mb-opt__p{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;color:var(--gold);
  white-space:nowrap;margin-left:auto;padding-left:14px}
.mb-opt__calc{display:block;margin-top:7px;font-size:.76rem;color:var(--c-35)}
.mb-qty{width:78px;font-family:var(--sans);font-size:.95rem;color:var(--egg);background:transparent;
  border:0;border-bottom:1px solid var(--hair-d);padding:9px 0;text-align:center}
.mb-qty:focus{outline:none;border-color:var(--gold)}

.mb-rev__b{border-top:1px solid var(--hair-d);padding:26px 0}
.mb-rev__b h3{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.mb-rev__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;
  font-size:.92rem;color:var(--dim-d)}
.mb-rev__p{margin:0;font-size:.92rem;color:var(--dim-d)}
.mb-price{width:100%;border-collapse:collapse;margin-top:6px}
.mb-price th{text-align:left;font-weight:400;font-family:var(--sans);font-size:.8rem;
  letter-spacing:.04em;color:var(--dim-d);padding:9px 0}
.mb-price td{text-align:right;font-family:var(--sans);font-size:.86rem;color:var(--egg);padding:9px 0}
.mb-price__s th,.mb-price__s td{border-top:1px solid var(--hair-d);padding-top:16px}
.mb-price__t th,.mb-price__t td{border-top:1px solid var(--gold-h);padding-top:16px;
  color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}

.mb-note{font-size:.78rem;color:var(--c-35);line-height:1.7;margin:16px 0 0}
.mb-errors{border:1px solid #b4674e;border-radius:var(--radius);padding:20px 22px;margin:28px 0}
.mb-errors ul{margin:10px 0 0;padding-left:20px;font-size:.88rem;color:var(--dim-d)}
.mb-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

/* ══════════════════════════════════════════════════════════════════
   V51 · VISUAL REFINEMENT
   Everything below is scoped to .mb-* or #mb-* and loads only on
   /build-your-menu/. pca.css is untouched.
   ══════════════════════════════════════════════════════════════════ */

/* ── 6 · the filter bug, at its root ────────────────────────────────
   .mb-filters sets display:flex, which overrides the [hidden] default of
   display:none. The secondary row therefore stayed on screen while ALL
   DISHES was active, and its chips looked clickable but did nothing. */
#mb-subfilters[hidden]{display:none!important}

/* ── 23 · nothing may exceed the viewport ─────────────────────────── */
.mb-step,.mb-layout,.mb-cards,.mb-card,.mb-opts,.mb-opt,.mb-searchzone,
.mb-sum,.mb-rev__b,.mb-price,.mb-bar,.mb-sheet{min-width:0;max-width:100%;box-sizing:border-box}
.mb-card,.mb-opt,.mb-sum{overflow-wrap:anywhere}
.mb-field input,.mb-field textarea,.mb-search input{max-width:100%;box-sizing:border-box}

/* ── 2 · gold architectural geometry · three moments ────────────────
   One circle primitive, centre pinned outside the host on both axes, so the
   visible stroke always enters one edge and leaves another and can never
   close into a ring. Decorative only: behind content, inert, aria-hidden. */
.mb-geo{position:relative}
.mb-arc{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  border-radius:inherit}
.mb-arc::after{content:"";position:absolute;pointer-events:none;box-sizing:content-box;
  width:calc(var(--ar) + var(--ar));height:0;padding-top:calc(var(--ar) + var(--ar));
  border-radius:50%;border:1.2px solid rgba(196,180,143,.66);mix-blend-mode:screen}
.mb-arc--s::after{border-width:.75px;border-color:rgba(196,180,143,.42)}
.mb-arc--p::after{--ar:74vw;--ax:9vw;--ay:36vw;
  left:calc(0vw - var(--ar) - var(--ax));top:0;margin-top:calc(0vw - var(--ar) - var(--ay))}
.mb-arc--s::after{--ar:96vw;--ax:5vw;--ay:52vw;
  left:calc(0vw - var(--ar) - var(--ax));bottom:0;margin-bottom:calc(0vw - var(--ar) - var(--ay))}
.mb-arc--r::after{--ar:62vw;--ax:14vw;--ay:26vw;
  right:calc(0vw - var(--ar) - var(--ax));top:0;margin-top:calc(0vw - var(--ar) - var(--ay))}
.mb-geo>.wrap,.mb-geo>*:not(.mb-arc){position:relative;z-index:1}
@media(max-width:760px){
  /* simplified rather than cropped: one stroke, larger radius, shallower */
  .mb-arc--s{display:none}
  .mb-arc--p::after{--ar:190vw;--ax:8vw;--ay:150vw}
  .mb-arc--r::after{--ar:190vw;--ax:12vw;--ay:150vw}
}
@media(prefers-reduced-motion:reduce){.mb-arc::after{mix-blend-mode:normal}}

/* ── 24 · desktop catalogue · three editorial columns ──────────────── */
.mb-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;background:none}
@media(max-width:1100px){.mb-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.mb-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* ── 5 · one column below 640px, no card may peek past the edge ───── */
@media(max-width:640px){.mb-cards{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ── 3,4 · card refinement ─────────────────────────────────────────── */
.mb-card{background:rgba(237,232,222,.014);border:1px solid var(--hair-d);
  border-radius:var(--radius);padding:30px 28px;gap:14px;width:100%;
  transition:border-color .45s var(--e-out),background .45s var(--e-out)}
.mb-card:hover{border-color:var(--gold-h)}
.mb-card:focus-within{border-color:var(--gold)}
.mb-card.is-on{background:rgba(170,151,103,.055);border-color:var(--gold)}
.mb-card__n{font-size:.78rem;letter-spacing:.15em;line-height:1.5}
.mb-card__d{font-size:.95rem;line-height:1.68;color:var(--dim-d)}
.mb-card__f{padding-top:18px;border-top:1px solid var(--hair-d)}
.mb-card.is-on .mb-card__f{border-top-color:var(--gold-h)}
@media(max-width:640px){.mb-card{padding:24px 22px}}

/* ── 16 · selection controls designed for PCA ─────────────────────── */
.mb-opt input[type=checkbox]{appearance:none;-webkit-appearance:none;width:19px;height:19px;
  border:1px solid var(--hair-d);border-radius:3px;background:transparent;cursor:pointer;
  position:relative;transition:border-color .35s var(--e-out)}
.mb-opt input[type=checkbox]:hover{border-color:var(--gold-h)}
.mb-opt input[type=checkbox]:checked{border-color:var(--gold)}
.mb-opt input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid var(--gold);border-width:0 1.4px 1.4px 0;transform:rotate(42deg)}
.mb-opt input[type=checkbox]:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* ── 15 · enhancements as an editorial two-column composition ─────── */
.mb-opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:none;
  border-block:0;margin:34px 0}
@media(max-width:900px){.mb-opts{grid-template-columns:minmax(0,1fr)}}
.mb-opt{border:1px solid var(--hair-d);border-radius:var(--radius);padding:26px 24px;
  align-items:flex-start;transition:border-color .45s var(--e-out)}
.mb-opt:hover{border-color:var(--gold-h)}
.mb-opt:focus-within{border-color:var(--gold)}
.mb-opt--hero{grid-column:1/-1;border-color:var(--gold-h);background:rgba(170,151,103,.04)}
.mb-opt--hero .mb-opt__t{font-size:.74rem;color:var(--gold)}
.mb-opt.is-hint{border-color:var(--gold)}
.mb-opt__p{align-self:flex-start}
@media(max-width:520px){
  .mb-opt{flex-wrap:wrap}
  .mb-opt__p{margin-left:0;padding-left:0;width:100%;padding-top:6px}
}

/* ── 14 · locked glassware ─────────────────────────────────────────── */
.mb-opt.is-locked{border-style:dashed}
.mb-opt.is-locked .mb-opt__t,.mb-opt.is-locked .mb-opt__d,.mb-opt.is-locked .mb-opt__p{
  color:var(--c-35)}
.mb-opt.is-locked input[type=checkbox]{border-style:dashed;cursor:not-allowed}
.mb-lock{margin:10px 0 0;font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-35)}
.mb-lock.is-alert{color:var(--gold)}

/* ── 10 · the search zone as the entrance to the collection ───────── */
.mb-searchzone{border-block:1px solid var(--hair-d);padding:26px 0 24px;margin:0 0 30px}
.mb-searchzone .eyebrow{display:block;margin-bottom:10px}
.mb-search{margin:0}
.mb-search input{font-size:1.06rem;padding:10px 0 14px;border-bottom-color:var(--hair-d)}
@media(max-width:640px){.mb-search input{font-size:1rem}}

/* ── 9 · mobile filter rail stays inside the viewport ─────────────── */
.mb-filters{gap:9px;margin-bottom:26px}
.mb-filter{padding:12px 20px;font-size:.62rem}
@media(max-width:760px){
  .mb-filters{max-width:100%;scroll-snap-type:x proximity}
  .mb-filter{scroll-snap-align:start;padding:13px 18px}
}

/* ── 17 · step indicator states ────────────────────────────────────── */
.mb-prog{gap:8px 22px;margin-bottom:54px;max-width:100%}
@media(max-width:760px){
  .mb-prog{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .mb-prog::-webkit-scrollbar{display:none}
  .mb-prog__i{white-space:nowrap}
}
.mb-prog__i.is-on{color:var(--gold);letter-spacing:.22em}

/* ── 18 · step 01 selection state ──────────────────────────────────── */
.mb-choice{padding:30px 28px}
.mb-choice[aria-pressed=true]{background:rgba(170,151,103,.06);border-color:var(--gold)}
.mb-choice__d{font-size:.94rem;line-height:1.66}

/* ── 12 · the sticky rail reads as a private-dining summary ────────── */
.mb-rail{top:104px}
.mb-sum{border:0;border-top:1px solid var(--gold-h);border-radius:0;padding:28px 0 0}
.mb-sum h3{font-size:.64rem;letter-spacing:.22em;margin-bottom:10px}
.mb-sum__count{margin-bottom:24px}
.mb-sum__list li{padding-bottom:11px;font-size:.9rem}
.mb-sum__pp{font-size:1.72rem;margin-top:22px}
.mb-sum__vat{margin-top:10px}

/* ── 11 · the allergen legend joins the gold language ─────────────── */
.mb-legend{border-block-color:var(--gold-h);margin:56px 0 40px;padding:16px 0}
.mb-legend__i{color:var(--c-55)}

/* ── 20 · canapé counter reads editorially, not app-like ──────────── */
.mb-sum__pp{font-family:var(--display)}

/* ── 21 · review reads as a proposal, not a receipt ───────────────── */
.mb-rev__b{padding:34px 0;border-top-color:var(--hair-d)}
.mb-rev__b--p{border-top:1px solid var(--gold-h)}
.mb-rev__l{gap:9px;font-size:.95rem}
.mb-price th,.mb-price td{padding:13px 0;font-size:.9rem}
.mb-price__t th,.mb-price__t td{padding-top:22px;font-size:1.05rem;letter-spacing:.12em}
.mb-price__t td{font-family:var(--display);font-size:1.6rem;letter-spacing:0}
@media(max-width:520px){.mb-price__t td{font-size:1.3rem}}

/* ── 13 · mobile summary text never clips ──────────────────────────── */
.mb-bar__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-bar .btn{flex:none;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════
   V52 · VISIBLE DISH VALUES · LIVE SUMMARY · OCCASION PICKER
   Scoped to .mb-* / #mb-* and loaded only on /build-your-menu/.
   ══════════════════════════════════════════════════════════════════ */

/* ── 5,17 · the price sits with the allergens, never above the name ─ */
.mb-card__f{flex-wrap:wrap;gap:12px 14px}
.mb-card__p{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;color:var(--gold);
  white-space:nowrap;margin-left:auto}
.mb-card.is-on .mb-card__p{color:var(--gold)}
.mb-card__f .mb-add{flex:none}
@media(max-width:400px){
  .mb-al{order:1;flex-basis:100%}
  .mb-card__p{margin-left:0}
}

/* ── 6 · the minimum, stated once ─────────────────────────────────── */
.mb-min{border-left:1px solid var(--gold-h);padding:2px 0 2px 16px;margin:0 0 26px;
  max-width:64ch}

/* ── 12 · canapé pricing header ───────────────────────────────────── */
.mb-canhead{border-block:1px solid var(--gold-h);padding:20px 0;margin:0 0 28px}
.mb-canhead__t{margin:0;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.mb-canhead__d{margin:10px 0 0;font-size:.88rem;color:var(--dim-d)}

/* ── 7 · the summary reads as a menu, not a basket ────────────────── */
.mb-sum__list{max-height:min(46vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-right:4px}
.mb-sum__list li{gap:10px}
.mb-sum__n{flex:1;min-width:0}
.mb-sum__v{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;color:var(--c-35);
  white-space:nowrap}
.mb-sum__q{margin:0 0 18px;font-size:.9rem;color:var(--c-35)}
.mb-sum__rows{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0 0 20px}
.mb-sum__rows dt{font-size:.82rem;color:var(--dim-d);margin:0}
.mb-sum__rows dd{margin:0;font-family:var(--sans);font-size:.82rem;color:var(--egg);
  text-align:right;white-space:nowrap}
.mb-sum__lbl{margin:0;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.mb-sum__pp{margin-top:8px}

/* ── 15 · the occasion picker, in the existing chip language ──────── */
.mb-occ{border:0;padding:0;margin:0 0 30px;min-width:0}
.mb-occ legend{padding:0;margin-bottom:14px}
.mb-occ__l{flex-wrap:wrap;margin-bottom:0;max-width:100%}
@media(max-width:760px){.mb-occ__l{flex-wrap:wrap;overflow:visible}}
.mb-occ__c[aria-checked=true]{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* ── 20 · review values align without becoming a receipt ──────────── */
.mb-rev__l--v li{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.mb-rev__l--v b{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;font-weight:400;
  color:var(--c-35);white-space:nowrap}
.mb-price--m{margin-top:22px;border-top:1px solid var(--hair-d)}
.mb-price--m th,.mb-price--m td{padding:11px 0;font-size:.86rem}
.mb-price--m .mb-price__s th,.mb-price--m .mb-price__s td{color:var(--gold);
  border-top-color:var(--gold-h)}

/* ── 9 · nothing new may exceed the viewport ──────────────────────── */
.mb-canhead,.mb-min,.mb-occ,.mb-sum__rows,.mb-price--m{max-width:100%;box-sizing:border-box}
.mb-sum__rows dd,.mb-card__p{overflow-wrap:normal}

/* ══════════════════════════════════════════════════════════════════
   V53 · HERO, CHIP OCCASION, WAITER STEPPER, WIDER DESKTOP GRID
   ══════════════════════════════════════════════════════════════════ */

/* ── catalogue: four columns on very wide screens, never more ─────── */
@media(min-width:1600px){.mb-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}

/* ── extra-waiter stepper ─────────────────────────────────────────── */
.mb-step2{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--hair-d);
  border-radius:999px;padding:3px;min-width:0}
.mb-step2__b{width:36px;height:36px;border:0;border-radius:999px;background:transparent;
  color:var(--egg);font-size:1rem;line-height:1;cursor:pointer;
  transition:color .3s var(--e-out),background .3s var(--e-out)}
.mb-step2__b:hover{color:var(--gold)}
.mb-step2__b:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.mb-step2 .mb-qty{width:44px;border:0;padding:0;text-align:center;font-size:.95rem}
.mb-step2 .mb-qty:focus{outline:none}

/* ── occasion chips reuse the Book Now language verbatim ──────────── */
.mb-occ .chips{max-width:100%}
.mb-occ legend{margin-bottom:14px}

/* ── native date field keeps PCA styling ──────────────────────────── */
.mb-field input[type=date]{color-scheme:dark;font-family:var(--sans);letter-spacing:.02em}
.mb-field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.45;
  cursor:pointer}
.mb-field input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.85}

/* ── zero-result state ────────────────────────────────────────────── */
#mb-empty p{font-size:1rem;color:var(--dim-d)}

/* ══════════════════════════════════════════════════════════════════
   V54 · THE LAYOUT ROOT CAUSE, AND THE FIX

   Measured in Chromium on the V53 build, at a 390px viewport:

     .mb-layout > div  (the catalogue column)  =  2203px wide
     document.scrollWidth                      =  2223px
     viewport                                  =   390px

   The catalogue column is a grid item, so its min-width resolves to
   `auto`, i.e. its min-content width. Hiding each child in turn showed
   the dominant contributor to be .mb-legend, whose track is
   `width:max-content` holding two non-wrapping allergen strips
   (2203px). A grid item cannot shrink below min-content, so the track
   grew to 2203px and pushed the summary rail off-screen. The site's
   page-level overflow hiding then simply cropped the result, which is
   exactly why the phone looked "cut".

   The fix is to let the grid items shrink. With `min-width:0` applied
   to `.mb-layout > *`, the same measurement returned a 349px column and
   a 390px scrollWidth. The legend's own `overflow:hidden` then clips the
   marquee as it was always meant to.

   No new overflow hiding is introduced anywhere by this block.
   ══════════════════════════════════════════════════════════════════ */
.mb-layout{grid-template-columns:minmax(0,1fr) minmax(280px,320px);align-items:start}
.mb-layout>*{min-width:0;max-width:100%}
@media(max-width:1100px){.mb-layout{grid-template-columns:minmax(0,1fr)}}

/* the same protection for every other builder grid and flex container, so a
   single wide child can never widen the page again */
.mb-cards>*,.mb-opts>*,.mb-choices>*,.mb-grid2>*,.mb-card__f>*,.mb-opt>*,
.mb-sum__list>*,.mb-prog>*,.mb-filters>*,.mb-occ .chips>*{min-width:0}
.mb-legend,.faq,.mb-searchzone,.mb-empty,.mb-canhead,.mb-min,.mb-kids,.mb-nav,
#mb-cat-wrap,#mb-grid{min-width:0;max-width:100%;box-sizing:border-box}
.mb-legend__t{max-width:none}
.mb-card__n,.mb-card__d,.mb-sum__n,.mb-rev__l li{overflow-wrap:anywhere;word-break:normal}

/* ── 5 · hidden must really mean hidden ────────────────────────────
   .mb-bar declares display:flex, which outranks the [hidden] default of
   display:none, so the bar could show on steps where it must not. */
.mb-bar[hidden],.mb-sheet[hidden],.mb-modal[hidden]{display:none!important}

/* ── 8 · the empty state reads as a decision, not a dead end ──────── */
.mb-empty__a{justify-content:center;margin-top:26px}
@media(max-width:520px){.mb-empty__a{flex-direction:column;align-items:stretch}}

/* ── 9 · the Start Again confirmation ─────────────────────────────── */
.mb-modal{position:fixed;inset:0;z-index:210;display:flex;align-items:center;
  justify-content:center;padding:24px}
.mb-modal__s{position:absolute;inset:0;background:rgba(20,23,26,.86);
  backdrop-filter:blur(6px)}
.mb-modal__d{position:relative;z-index:1;width:min(440px,100%);box-sizing:border-box;
  background:var(--ink);border:1px solid var(--gold-h);border-radius:var(--radius-lg);
  padding:36px 32px}
.mb-modal__h{margin:0;font-family:var(--display);font-size:1.5rem;color:var(--egg)}
.mb-modal__p{margin:16px 0 0;font-size:.95rem;line-height:1.66;color:var(--dim-d)}
.mb-modal .mb-nav{margin-top:30px}
.mb-modal .btn{flex:1;justify-content:center;text-align:center}
@media(max-width:420px){.mb-modal .mb-nav{flex-direction:column}.mb-modal .btn{flex:none}}

/* ══════════════════════════════════════════════════════════════════
   V55 · ENHANCEMENT ITEMISATION IN THE FINAL REVIEW
   The enhancements list now reuses the same name/value rhythm the
   selected menu already uses (.mb-rev__l--v). Nothing new is designed;
   this only lets a long enhancement label wrap gracefully beside its
   amount on a phone, so the figure can never be pushed off-screen.
   ══════════════════════════════════════════════════════════════════ */
.mb-rev__l--v li{flex-wrap:wrap;row-gap:2px}
.mb-rev__l--v li>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mb-rev__l--v li>b{flex:0 0 auto;margin-left:auto;max-width:100%}