/* =========================================================================
   Maquis 237 - design system
   Direction: ENAMELWARE. Every maquis in Douala serves on speckled enamel
   basins: glaze-white body, a hard painted rim in cobalt or red, and a
   chipped speckle. So the page is glaze, the rules are rims, the panels
   are basins, and every dish is served on a round plate.
   Signature: the plate - dish photography masked to a circle inside a
   cobalt ring, the way it arrives at the table.
   ========================================================================= */

/* ---------- 1. tokens ---------------------------------------------------- */
:root{
  /* colour - enamel */
  --glaze:     #FCFBF7;
  --glaze-2:   #F3F0E7;
  --glaze-3:   #E9E4D6;
  --ink:       #14161C;
  --ink-dim:   #55596A;
  --cobalt:    var(--sb-accent);
  --cobalt-d:  var(--sb-accent-quiet);
  --pepper:    var(--sb-secondary, #D9261E);
  --jade:      var(--sb-deep);
  --sun:       var(--sb-secondary-pale, #F5C542);
  --rim:       rgba(20,22,28,.13);   /* decorative hairlines and rules */
  --edge:      rgba(20,22,28,.42);   /* interactive boundaries, clears 3:1 on glaze */
  --rim-soft:  rgba(20,22,28,.07);
  /* depth comes from light, not from an outline */
  --lift:      0 1px 2px rgba(20,22,28,.04), 0 10px 26px -14px rgba(20,22,28,.20);
  --lift-hi:   0 2px 4px rgba(20,22,28,.05), 0 22px 44px -20px rgba(20,22,28,.28);

  /* type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 48px);
  --max:    1220px;
  --max-narrow: 760px;
  --sec-y:clamp(48px,6vw,80px);
  --r:      24px;
  --r-sm:   14px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.3,1);
  --fast: 150ms;
  --med:  240ms;

  /* the chipped-enamel speckle, reused on every coloured block */
  --speck: radial-gradient(circle at 18% 24%, rgba(255,255,255,.20) 0 1.4px, transparent 1.5px),
           radial-gradient(circle at 63% 71%, rgba(255,255,255,.16) 0 1.1px, transparent 1.2px),
           radial-gradient(circle at 84% 33%, rgba(255,255,255,.13) 0 1.6px, transparent 1.7px);

  /* --- the engine's roles ------------------------------------------
     Fixed names, identical in every template, so one piece of code can
     re-skin any of them. The engine writes only the accent three, and
     only after checking them against --sb-scheme: this palette sits on
     a dark ground, so a colour that reads here may vanish elsewhere.
     The rest are exposed so contrast can be checked, not overwritten. */
  --sb-scheme: dark;
  --sb-accent:       #1B4FD8;
  --sb-accent-quiet: #143BA6;
  --sb-ground:       var(--ink);
  --sb-surface:      var(--glaze-2);
  --sb-surface-alt:  var(--glaze-3);
  --sb-ink:          var(--glaze);
  --sb-ink-dim:      var(--ink-dim);
  --sb-deep:         #14161C;
  --sb-deep-ink:     var(--glaze);
  --sb-accent-ink:   #fff;
  --sb-edge:         var(--edge);

}

/* ---------- 2. reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  border-top:var(--sb-secondary-width,0) solid var(--sb-secondary,transparent);
  background:var(--glaze);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,.5vw + 15px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* `hidden` creates a vertical scroll container and breaks the sticky header. */
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; background:var(--glaze-2); }
/* Any author rule that sets `display` beats the UA rule behind the `hidden`
   attribute. .split/.grid/.duo all do, so hidden panels would still paint. */
[hidden]{ display:none !important; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:750; line-height:1.04; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
:target{ scroll-margin-top:110px; }

/* dark-ground contexts, declared once */
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero){ --dark-ground:1; }

:focus-visible{ outline:3px solid var(--cobalt); outline-offset:3px; border-radius:4px; }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) :focus-visible{ outline-color:var(--sun); }

.skip{
  position:absolute; left:12px; top:-70px; z-index:200;
  background:var(--ink); color:var(--glaze);
  padding:12px 20px; border-radius:var(--r-pill);
  font-weight:600; text-decoration:none; transition:top var(--fast) var(--ease);
}
.skip:focus{ top:12px; }
.vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. type ------------------------------------------------------ */
/* Archivo is variable on wdth: the display sizes run WIDE, which is the
   opposite register to a condensed poster face and carries the whole voice. */
.d1{ font-size:clamp(2.9rem,7.6vw,5.9rem); font-stretch:118%; font-weight:800; line-height:.98; letter-spacing:-.035em; }
.d2{ font-size:clamp(2rem,4.4vw,3.3rem);   font-stretch:112%; font-weight:780; line-height:1.03; letter-spacing:-.028em; }
.d3{ font-size:clamp(1.4rem,2.3vw,1.95rem);font-stretch:108%; font-weight:750; line-height:1.1;  letter-spacing:-.022em; }
.d4{ font-size:clamp(1.1rem,1.4vw,1.28rem);font-stretch:104%; font-weight:700; line-height:1.2;  letter-spacing:-.015em; }

/* the tracked-caps section label is gone; headings carry the sections alone.
   These two keep a quiet small-label role where it is doing real work. */
.sheet-cat{ font-size:.82rem; color:var(--ink-dim); margin:0 0 6px; }
.quote-by{ font-size:.86rem; color:var(--band-ink,rgba(255,255,255,.82)); margin:22px 0 0; }

.lede{ font-size:clamp(1.05rem,1.2vw,1.2rem); line-height:1.56; color:var(--ink-dim); }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .lede{ color:var(--band-ink,#fff); }
.fine{ font-size:.85rem; line-height:1.5; color:var(--ink-dim); }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .fine{ color:var(--band-ink,#fff); }
.fr{ font-style:italic; color:var(--ink-dim); }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .fr{ color:var(--band-ink,#fff); }

/* ---------- 4. layout ---------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--max-narrow); }
/* spans the viewport, keeping only the gutter - used by the hero */
.wrap--full{ max-width:none; }
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(34px,4vw,56px); }
:is(.on-glaze2,.tone-soft){ background:var(--glaze-2); }
:is(.on-cobalt,.tone-soft-alt){ background:var(--cobalt); background-image:var(--speck); color:var(--band-ink); --band-ink:var(--sb-on-accent,#fff); --band-link:var(--sb-on-accent,var(--sun)); --band-ground:var(--cobalt); }
:is(.on-ink,.tone-deep){ background:var(--ink); background-image:var(--speck); color:#fff; }
:is(.on-pepper,.tone-accent){ background:var(--pepper); background-image:var(--speck); color:var(--band-ink); --band-ink:var(--sb-on-secondary,#fff); --band-link:var(--sb-on-secondary,var(--sun)); --band-ground:var(--pepper); }
.stack > * + *{ margin-top:var(--gap,18px); }

.sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:clamp(28px,3.6vw,48px); }
.sec-head p{ max-width:52ch; }

.duo{ display:grid; gap:clamp(24px,3.6vw,56px); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){
  .duo{ grid-template-columns:1fr 1fr; }
  .duo--wide-left{ grid-template-columns:1.15fr .85fr; }
  .duo--wide-right{ grid-template-columns:.85fr 1.15fr; }
}
.trio{ display:grid; gap:clamp(18px,2.4vw,30px); grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr)); }
.grid{ display:grid; gap:clamp(18px,2.2vw,28px); grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); }
/* six cards read better as 3x2 than as a ragged 4+2 */
@media (min-width:1040px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }
.split{ display:grid; gap:clamp(24px,3.2vw,44px); grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){ .split{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } }

/* ---------- 5. THE BASIN + THE PLATE (signature) ------------------------- */
/* a basin: glaze panel lifted off the page, painted rim band across the top */
.basin{
  position:relative;
  background:var(--glaze);
  border-radius:var(--r);
  padding:clamp(26px,3.4vw,44px);
  overflow:hidden;
  box-shadow:var(--lift);
}
.basin::before{
  content:''; position:absolute; inset:0 0 auto 0; height:12px;
  background:var(--rim-colour,var(--cobalt)); background-image:var(--speck);
}
.basin--pepper{ --rim-colour:var(--pepper); --rim-ink:var(--sb-on-secondary,#fff); }
.basin--jade{ --rim-colour:var(--jade); --rim-ink:#fff; }
.basin--sun{ --rim-colour:var(--sun); }
.basin > *{ position:relative; }
.basin__label{
  display:inline-block; margin-bottom:14px;
  font-family:var(--display); font-weight:750; font-stretch:100%;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rim-ink,var(--sb-on-accent,#fff)); background:var(--rim-colour,var(--cobalt));
  padding:6px 12px; border-radius:var(--r-pill);
}
.basin--sun .basin__label{ color:var(--ink); }

/* a filled basin, for the loud blocks */
.basin--filled{ background:var(--fill,var(--cobalt)); background-image:var(--speck); color:var(--band-ink); --band-ink:var(--sb-on-accent,#fff); --band-link:var(--sb-on-accent,var(--sun)); --band-ground:var(--cobalt); }
.basin--filled::before{ display:none; }
.basin--filled.basin--pepper{ --fill:var(--pepper); --band-ink:var(--sb-on-secondary,#fff); --band-link:var(--sb-on-secondary,var(--sun)); --band-ground:var(--pepper); }
.basin--filled.basin--ink{ --fill:var(--ink); --band-ink:#fff; --band-link:var(--sun); --band-ground:var(--ink); }

/* the plate: dish photography served round, inside a painted ring */
.plate{
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius:50%; overflow:hidden;
  border:3px solid var(--ring,var(--cobalt));
  background:var(--glaze-2);
  transition:transform var(--med) var(--ease);
}
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate--pepper{ --ring:var(--pepper); }
.plate--jade{ --ring:var(--jade); }
.plate--sun{ --ring:var(--sun); }

/* scene photography keeps the basin radius, not a circle */
.pan{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--glaze-2); box-shadow:var(--lift); }
.pan img{ width:100%; height:100%; object-fit:cover; }
.pan--tall{ aspect-ratio:4/5; }
.pan--wide{ aspect-ratio:16/10; }
.pan--sq{ aspect-ratio:1/1; }
.pan figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 18px 14px; color:#fff; font-size:.85rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  background:linear-gradient(180deg,transparent,rgba(10,12,16,.55) 45%,rgba(10,12,16,.92));
}

/* ---------- 6. buttons --------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:13px 26px;
  background:var(--bg); color:var(--fg);
  border:2px solid var(--bd); border-radius:var(--r-pill);
  font-family:var(--display); font-weight:750; font-stretch:104%;
  font-size:.95rem; text-decoration:none; cursor:pointer;
  transition:transform var(--fast) var(--ease), background var(--fast), color var(--fast), border-color var(--fast);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn[disabled],.btn[aria-disabled='true']{ opacity:.4; cursor:not-allowed; transform:none; }
.btn--cobalt{ --bg:var(--cobalt); --fg:var(--sb-on-accent,#fff); --bd:var(--cobalt); }
.btn--pepper{ --bg:var(--pepper); --fg:var(--sb-on-secondary,#fff); --bd:var(--pepper); }
.btn--sun{ --bg:var(--sun); --fg:var(--ink); --bd:var(--sun); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--edge); }
.btn--ghost:hover{ --bg:var(--ink); --fg:#fff; }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .btn--ghost{ --fg:var(--band-ink,#fff); --bd:var(--band-ink,#fff); }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .btn--ghost:hover{ --bg:var(--band-ink,#fff); --fg:var(--band-ground,var(--ink)); }
.btn--block{ width:100%; }
.btn--sm{ min-height:42px; padding:9px 18px; font-size:.87rem; }

.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:750; font-stretch:104%; font-size:.94rem;
  color:var(--sb-accent-text,var(--cobalt-d)); text-decoration:none;
  border-bottom:2px solid currentColor; padding-bottom:2px;
  transition:gap var(--fast) var(--ease);
}
.tlink:hover{ gap:13px; }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .tlink{ color:var(--band-link,var(--sun)); }

/* ---------- 6b. announcement bar (standard section 1) -------------------- */
.announce{ background:var(--cobalt); background-image:var(--speck); color:var(--sb-on-accent,#fff); font-size:.82rem; }
.announce__row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:4px 20px; padding-block:9px;
}
.announce__mid{ text-align:center; }
.announce__end{ text-align:right; }
@media (max-width:760px){
  .announce{ font-size:.76rem; }
  .announce__row{ grid-template-columns:1fr auto; }
  .announce__end{ display:none; }
}
@media (max-width:430px){
  .announce__row{ grid-template-columns:1fr; text-align:center; }
  .announce__mid{ display:none; }
}

/* ---------- 7. header ---------------------------------------------------- */
.site-head{ position:sticky; top:0; z-index:60; background:var(--glaze); border-bottom:1px solid var(--rim); }
.site-head__bar{ display:flex; align-items:center; gap:clamp(12px,3vw,36px); min-height:72px; padding-block:10px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto; }
.site-head .brand--lockup{ flex-direction:column; align-items:flex-start; gap:2px; }
.site-head .brand--lockup .brand__sub{ margin-top:0; line-height:1.2; }
.brand__mark{ height:40px; width:auto; max-width:160px; flex:none; object-fit:contain; object-position:left center; background:transparent; }  /* height fixed, width is whatever the merchant's logo is */
.brand__name{ font-family:var(--display); font-weight:800; font-stretch:112%; font-size:1.2rem; letter-spacing:-.03em; line-height:1; }
.brand__sub{ display:block; font-family:var(--display); font-weight:600; font-stretch:100%; font-size:.58rem; letter-spacing:.19em; text-transform:uppercase; color:var(--sb-accent-text,var(--cobalt-d)); margin-top:4px; }

.nav{ display:flex; align-items:center; gap:clamp(10px,1.8vw,26px); }
.nav a{
  font-family:var(--display); font-weight:650; font-stretch:104%; font-size:.94rem;
  text-decoration:none; color:var(--ink-dim); padding:7px 2px;
  border-bottom:3px solid transparent; transition:color var(--fast), border-color var(--fast);
}
.nav a:hover{ color:var(--ink); }
.nav a[aria-current='page']{ color:var(--ink); border-bottom-color:var(--pepper); }

.head-actions{ display:flex; align-items:center; gap:10px; }
.cart-btn{
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:9px 18px;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--edge); border-radius:var(--r-pill);
  font-family:var(--display); font-weight:750; font-stretch:104%; font-size:.9rem;
  cursor:pointer; text-decoration:none; transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.cart-btn:hover{ background:var(--ink); color:#fff; }
.cart-btn[data-filled='1']{ background:var(--pepper); border-color:var(--pepper); color:var(--sb-on-secondary,#fff); }
.cart-btn__count{ font-variant-numeric:tabular-nums; }
.cart-btn.is-bumped{ animation:bump 420ms var(--ease); }
@keyframes bump{ 0%,100%{transform:scale(1)} 32%{transform:scale(1.13)} }

.burger{ display:none; width:46px; height:46px; place-items:center; background:transparent; border:1.5px solid var(--edge); border-radius:var(--r-pill); color:var(--ink); cursor:pointer; }
.burger span{ position:relative; display:block; width:18px; height:2px; background:currentColor; box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor; }

@media (max-width:900px){
  .burger{ display:grid; }
  .nav{
    position:fixed; inset:0 0 0 auto; z-index:70; width:min(80vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:2px; padding:104px 26px 26px;
    background:var(--glaze); border-left:1px solid var(--rim); box-shadow:var(--lift-hi);
    transform:translateX(103%); transition:transform var(--med) var(--ease);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav[data-open='1']{ transform:translateX(0); }
  .nav a{ width:100%; font-size:1.28rem; padding:15px 0; border-bottom:1px solid var(--rim); }
  .nav a[aria-current='page']{ border-bottom-color:var(--pepper); }
  /* the header must stay above the drawer or the burger that closes it is buried */
  .head-actions{ position:relative; z-index:80; }
  /* keep the basket and close action viewport-fixed while an off-canvas menu is open */
  .site-head:has(.burger[aria-expanded='true']) .head-actions{
    position:fixed;
    top:14px;
    right:max(20px,env(safe-area-inset-right));
    z-index:80;
  }
  .burger[aria-expanded='true']{ background:var(--pepper); border-color:var(--pepper); color:var(--sb-on-secondary,#fff); }
  .burger[aria-expanded='true'] span{ box-shadow:none; transform:rotate(45deg); }
  .burger[aria-expanded='true'] span::after{ content:''; position:absolute; left:0; top:0; width:18px; height:2px; background:currentColor; transform:rotate(-90deg); }
  .nav-scrim{ position:fixed; inset:0; z-index:65; background:rgba(10,12,16,.55); opacity:0; pointer-events:none; transition:opacity var(--med) var(--ease); }
  .nav-scrim[data-open='1']{ opacity:1; pointer-events:auto; }
}
.nav-scrim{ display:none; }
@media (max-width:900px){ .nav-scrim{ display:block; } }
/* on a narrow phone the quarter/city line wraps and crowds the basket */
@media (max-width:460px){
  .site-head .brand__sub{ display:none; }
  .site-head__bar{ gap:10px; }
  .cart-btn{ padding:9px 14px; }
}

/* ---------- 8. hero ------------------------------------------------------ */
/* split, not full-bleed: type on glaze, the fire served on a plate */
/* full-bleed photograph, text sitting in the dark side of the scrim */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; align-items:center;
  min-height:min(82vh,700px);
  background:var(--ink); color:#fff;
}
.hero__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,10,14,.86) 0%, rgba(8,10,14,.74) 36%, rgba(8,10,14,.30) 70%, rgba(8,10,14,.10) 100%),
    linear-gradient(180deg, rgba(8,10,14,.34) 0%, rgba(8,10,14,.10) 45%, rgba(8,10,14,.58) 100%);
}
.hero__inner{ position:relative; z-index:2; padding-block:clamp(56px,8vw,96px); }
.hero__body{ max-width:640px; }
.hero__title{ margin-bottom:20px; text-wrap:balance; }
.hero__title em{ font-style:normal; color:var(--sun); }
.hero__lede{ max-width:42ch; margin-bottom:28px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:640px){ .hero{ min-height:auto; } }

/* ---------- 10. dish card ------------------------------------------------ */
.card{
  display:flex; flex-direction:column; text-align:center;
  padding:22px 18px 20px;
  background:var(--glaze); border:1px solid var(--rim); border-radius:var(--r);
  box-shadow:var(--lift);
  transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--lift-hi); }
.card:hover .plate{ transform:rotate(-4deg) scale(1.02); }
.card__plate{ position:relative; width:min(100%,190px); margin:0 auto 16px; }
.card__flag{
  position:absolute; top:2px; left:50%; transform:translateX(-50%); z-index:2;
  background:var(--sun); color:var(--ink);
  font-family:var(--display); font-weight:750; font-stretch:100%;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
/* mirrors the favourite pill at the top of the plate, so it reads as a
   deliberate badge rather than a smudge on the rim */
.card__heat{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:4px;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--ink); box-shadow:var(--lift);
}
.card__heat i{ width:6px; height:6px; border-radius:50%; background:var(--pepper); }
.card__name{ font-family:var(--display); font-weight:780; font-stretch:106%; font-size:1.08rem; line-height:1.15; }
/* a button that reads as text: opens the dish sheet without a second page */
.linkish{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; text-align:inherit;
  border-bottom:2px solid transparent; transition:color var(--fast), border-color var(--fast);
}
.linkish:hover{ color:var(--sb-accent-text,var(--cobalt-d)); border-bottom-color:currentColor; }
.card__fr{ font-size:.8rem; font-style:italic; color:var(--ink-dim); margin-top:3px; }
.card__blurb{ font-size:.88rem; line-height:1.48; color:var(--ink-dim); margin-top:10px; }
.card__tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px; }
.tag{
  font-size:.67rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  color:var(--ink-dim); border:1.5px solid var(--rim); border-radius:var(--r-pill); padding:3px 9px;
}
.card__foot{ margin-top:auto; padding-top:16px; }

/* the price is stamped on a pill, the way it is chalked on a basin rim */
.pricetag{
  display:inline-flex; align-items:baseline; gap:4px;
  font-family:var(--display); font-weight:800; font-stretch:104%; font-size:1.02rem;
  background:var(--ink); color:#fff; padding:6px 14px; border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
}
.pricetag small{ font-size:.68em; font-weight:600; opacity:.75; }
.card__unit{ display:block; font-size:.76rem; color:var(--ink-dim); margin-top:8px; }

.buy{ display:flex; gap:8px; margin-top:14px; }
.stepper{ display:flex; align-items:center; border:1.5px solid var(--edge); border-radius:var(--r-pill); overflow:hidden; flex:none; }
.stepper button{ width:38px; height:42px; background:transparent; border:0; cursor:pointer; font-family:var(--display); font-weight:800; font-size:1.05rem; line-height:1; transition:background var(--fast); }
.stepper button:hover{ background:var(--glaze-3); }
.stepper output{ min-width:30px; text-align:center; font-variant-numeric:tabular-nums; font-family:var(--display); font-weight:750; }
.buy .btn{ flex:1; }

/* ---------- 11. dish dialog (replaces 17 dish pages) --------------------- */
.sheet{
  width:min(880px,94vw); max-height:88vh; padding:0;
  border:0; border-radius:var(--r);
  background:var(--glaze); color:var(--ink); overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(20,22,28,.55);
}
.sheet::backdrop{ background:rgba(10,12,16,.62); }
.sheet__body{ max-height:88vh; overflow-y:auto; padding:clamp(22px,3vw,36px); }
.sheet__grid{ display:grid; gap:clamp(20px,3vw,36px); grid-template-columns:1fr; }
@media (min-width:720px){ .sheet__grid{ grid-template-columns:.85fr 1.15fr; align-items:start; } }
.sheet__close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; display:grid; place-items:center;
  background:var(--glaze); color:var(--ink); border:1.5px solid var(--edge);
  border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
}
.sheet__close:hover{ background:var(--ink); color:#fff; }
.facts{ display:grid; border-top:1px solid var(--rim); margin-top:20px; }
.facts div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--rim-soft); font-size:.92rem; }
.facts dt{ color:var(--ink-dim); }
.facts dd{ margin:0; font-weight:600; text-align:right; }

.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{
  flex:1 1 130px; min-height:62px; padding:9px 13px; text-align:left;
  background:var(--glaze); border:1.5px solid var(--edge); border-radius:var(--r-sm); cursor:pointer;
  transition:border-color var(--fast), background var(--fast);
}
.opt:hover{ border-color:var(--ink); }
.opt[aria-pressed='true']{ border-color:var(--cobalt); background:rgba(27,79,216,.07); background:color-mix(in srgb,var(--cobalt) 7%,transparent); }
.opt b{ display:block; font-family:var(--display); font-weight:750; font-size:.98rem; }
.opt span{ display:block; font-size:.77rem; color:var(--ink-dim); }

/* ---------- 12. menu page filters ---------------------------------------- */
.filterbar{ position:sticky; top:72px; z-index:40; background:var(--glaze); border-bottom:1px solid var(--rim); padding-block:14px; }
.filterbar__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-right:auto; }
.chip{
  min-height:42px; padding:9px 18px;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--edge); border-radius:var(--r-pill);
  font-family:var(--display); font-weight:750; font-stretch:104%; font-size:.88rem;
  cursor:pointer; transition:background var(--fast), border-color var(--fast), color var(--fast);
}
.chip:hover{ border-color:var(--ink); }
.chip[aria-pressed='true']{ background:var(--ink); border-color:var(--ink); color:#fff; }
.search input{ min-height:42px; width:min(230px,52vw); padding:9px 16px; background:var(--glaze); border:1.5px solid var(--edge); border-radius:var(--r-pill); }
.search input:focus{ border-color:var(--ink); }
.count{ font-size:.86rem; color:var(--ink-dim); }

.menu-group{ padding-top:clamp(36px,4.6vw,58px); }
.menu-group__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:24px; padding-bottom:12px; border-bottom:2px solid var(--rim); }

.empty{ padding:52px 24px; text-align:center; border:2px dashed var(--rim); border-radius:var(--r); }
.empty h3{ font-size:1.25rem; margin-bottom:8px; }

/* ---------- 13. steps ---------------------------------------------------- */
.steps{ counter-reset:step; display:grid; gap:clamp(18px,2.6vw,30px); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.step{ position:relative; padding-top:12px; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:inline-grid; place-items:center; width:46px; height:46px; margin-bottom:16px;
  background:var(--sun); border-radius:50%;
  font-family:var(--display); font-weight:800; font-size:1rem; color:var(--ink);
}
.step h3{ font-size:1.12rem; margin-bottom:8px; }

/* ---------- 14. order page ----------------------------------------------- */
.rail-steps{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.rail-steps li{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:700; font-stretch:104%; font-size:.84rem;
  padding:8px 16px; border:2px solid var(--rim); border-radius:var(--r-pill); color:var(--ink-dim);
}
.rail-steps li[aria-current='step']{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rail-steps li[data-done='1']{ border-color:var(--jade); color:var(--jade); }

.panel{ background:var(--glaze); border:1px solid var(--rim); border-radius:var(--r); padding:clamp(20px,2.6vw,30px); box-shadow:var(--lift); }
.panel--sun{ background:var(--glaze-2); }
.panel + .panel{ margin-top:20px; }
.panel__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--rim); }
.panel__head h2{ font-size:1.25rem; }
.summary{ position:sticky; top:100px; }
@media (max-width:959px){ .summary{ position:static; } }

.lines{ display:grid; }
.line{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--rim-soft); }
.line:first-child{ padding-top:0; }
.line__img{ width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--glaze-2); }
.line__name{ font-family:var(--display); font-weight:750; font-stretch:104%; font-size:1rem; line-height:1.2; }
.line__meta{ font-size:.82rem; color:var(--ink-dim); margin-top:2px; }
.basin--filled .line__meta{ color:var(--band-ink,#fff); }
.line__ctrl{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.line__end{ text-align:right; }
.line__total{ font-family:var(--display); font-weight:800; font-stretch:104%; font-size:1rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.linkbtn{ background:none; border:0; padding:4px 0; cursor:pointer; font-size:.82rem; color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px; }
.linkbtn:hover{ color:var(--sb-secondary-text,var(--pepper)); }

.totals div{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:.95rem; }
.totals div.is-total{ margin-top:6px; padding-top:15px; border-top:1.5px solid var(--rim); font-family:var(--display); font-weight:800; font-stretch:106%; font-size:1.28rem; }
.totals dt{ color:var(--ink-dim); }
.totals dd{ margin:0; font-variant-numeric:tabular-nums; font-weight:600; }
.totals .is-total dt{ color:var(--ink); }
.totals .is-free{ color:var(--jade); font-weight:700; }

.segments{ display:flex; gap:8px; }
.segment{
  flex:1; min-height:60px; padding:9px 12px; text-align:center;
  background:var(--glaze); border:1.5px solid var(--edge); border-radius:var(--r-sm); cursor:pointer;
  transition:border-color var(--fast), background var(--fast), color var(--fast);
}
.segment:hover{ border-color:var(--ink); }
.segment[aria-pressed='true']{ border-color:var(--ink); background:var(--ink); color:#fff; }
.segment b{ display:block; font-family:var(--display); font-weight:750; font-size:.96rem; }
.segment span{ display:block; font-size:.76rem; opacity:.74; }

/* ---------- 15. forms ---------------------------------------------------- */
.field{ display:block; margin-bottom:16px; }
.field > span{ display:block; font-size:.84rem; font-weight:600; margin-bottom:6px; }
.field .hint{ font-weight:400; color:var(--ink-dim); }
.field input, .field select, .field textarea{
  width:100%; min-height:50px; padding:12px 16px;
  background:var(--glaze); border:1.5px solid var(--edge); border-radius:var(--r-sm);
  transition:border-color var(--fast);
}
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ink); }
.field input[aria-invalid='true'], .field select[aria-invalid='true']{ border-color:#D9261E; }
.field .err{ display:block; font-size:.8rem; color:#D9261E; margin-top:5px; font-weight:600; }
.field-row{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width:620px){ .field-row{ grid-template-columns:1fr 1fr; } }
.radios{ display:grid; gap:8px; }
.radio{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; cursor:pointer; border:1.5px solid var(--edge); border-radius:var(--r-sm); transition:border-color var(--fast), background var(--fast); }
.radio:hover{ border-color:var(--ink); }
.radio:has(input:checked){ border-color:var(--cobalt); background:rgba(27,79,216,.06); background:color-mix(in srgb,var(--cobalt) 6%,transparent); }
.radio input{ margin-top:4px; width:18px; height:18px; accent-color:var(--cobalt); flex:none; }
.radio b{ display:block; font-weight:600; }
.radio span{ display:block; font-size:.82rem; color:var(--ink-dim); }
.formnote{ font-size:.84rem; color:var(--ink-dim); margin-top:14px; }
.formnote code{ background:var(--glaze-3); padding:1px 5px; border-radius:4px; font-size:.92em; }

/* ---------- 16. hours + tables ------------------------------------------- */
.hours th, .hours td{ text-align:left; padding:12px 0; border-bottom:1px solid var(--rim); font-size:.94rem; }
.hours th{ font-weight:600; }
.hours td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.hours tr[data-today='1']{ color:var(--sb-accent-text,var(--cobalt-d)); font-weight:700; }
.hours tr[data-today='1'] th::after{ content:' Today'; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; }
.hours tr[data-shut='1'] td{ color:var(--ink-dim); }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .hours th,
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .hours td{ border-bottom-color:rgba(255,255,255,.26); }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .hours tr[data-today='1']{ color:var(--band-link,var(--sun)); }
:is(:is(.on-cobalt,.tone-soft-alt),:is(.on-ink,.tone-deep),:is(.on-pepper,.tone-accent),.basin--filled,.site-foot,.hero) .hours tr[data-shut='1'] td{ color:var(--band-ink,rgba(255,255,255,.7)); }

/* ---------- 17. footer --------------------------------------------------- */
.site-foot{ background:var(--ink); background-image:var(--speck); color:#fff; padding-block:clamp(48px,6vw,76px) 24px; }
.site-foot .brand{ color:#fff; }
.site-foot .brand__sub{ color:var(--sun); }
.foot-grid{ display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.foot-grid h3{ font-family:var(--display); font-weight:750; font-stretch:100%; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sun); margin-bottom:14px; }
.foot-grid a{ text-decoration:none; color:#fff; }
.foot-grid a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot-grid li + li{ margin-top:9px; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.22); font-size:.8rem; color:#fff; }

/* ---------- 18. toast ---------------------------------------------------- */
.toast-host{ position:fixed; left:0; right:0; bottom:18px; z-index:120; display:grid; justify-items:center; gap:8px; padding-inline:16px; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:12px; max-width:min(440px,100%);
  padding:13px 20px; background:var(--ink); color:#fff;
  border-radius:var(--r-pill);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.6);
  font-size:.92rem; pointer-events:auto; animation:toastIn 240ms var(--ease);
}
.toast b{ font-family:var(--display); font-weight:750; }
.toast a{ color:var(--sun); margin-left:auto; white-space:nowrap; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------- 19. motion --------------------------------------------------- */
/* visible by default; only the .js class opts into hide-then-reveal */
.js [data-reveal]{ opacity:0; transform:translateY(14px); }
.js [data-reveal].is-in{ opacity:1; transform:none; transition:opacity 620ms var(--ease), transform 620ms var(--ease); }
.js [data-reveal-stagger] > *{ opacity:0; transform:translateY(12px); }
.js [data-reveal-stagger].is-in > *{ opacity:1; transform:none; transition:opacity 540ms var(--ease), transform 540ms var(--ease); }
.js [data-reveal-stagger].is-in > *:nth-child(2){ transition-delay:70ms; }
.js [data-reveal-stagger].is-in > *:nth-child(3){ transition-delay:140ms; }
.js [data-reveal-stagger].is-in > *:nth-child(4){ transition-delay:210ms; }
.js [data-reveal-stagger].is-in > *:nth-child(5){ transition-delay:280ms; }
.js .hero__body > *{ animation:rise 700ms var(--ease) both; }
.js .hero__body > *:nth-child(2){ animation-delay:70ms; }
.js .hero__body > *:nth-child(3){ animation-delay:140ms; }
.js .hero__body > *:nth-child(4){ animation-delay:210ms; }
.js .hero__body > *:nth-child(5){ animation-delay:280ms; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .js [data-reveal],.js [data-reveal-stagger] > *{ opacity:1; transform:none; }
}

/* ---------- 20. print ---------------------------------------------------- */
@media print{
  .site-head,.site-foot,.filterbar,.buy,.toast-host,.hero__cta{ display:none!important; }
  body{ background:#fff; }
  .card{ break-inside:avoid; }
}

/* Neutral brand shell: customer colours belong to content, not logo chrome. */
.site-head{background:#fff!important;color:#191919!important;border-bottom:1px solid #ddd!important}
.site-foot{background:#fff!important;background-image:none!important;color:#191919!important;border-top:1px solid #ddd!important}
.site-head :is(.brand,.brand__name,.nav a,.cart-btn),.site-foot :is(.brand,.brand__name,h2,h3,h4,a,p,li,small){color:#191919!important}
.site-head .brand__sub,.site-foot .brand__sub{color:#565656!important}
.site-head .brand__mark,.site-foot .brand__mark{background:transparent!important}
.site-foot :is(.foot-bottom,.foot__bottom){border-color:#ddd!important}
/* French pages: the decorative labels follow the page language. */
html[lang="fr"] .hours tr[data-today='1'] th::after{content:' Aujourd\2019 hui'}

/* Screenshot-led polish: keep the page moving and preserve cart contrast. */
.site-head .cart-btn[data-filled='1']{
  background:var(--pepper)!important;
  border-color:var(--pepper)!important;
  color:var(--sb-on-secondary,#fff)!important;
}
section#visit > .sb-location-map--embedded{
  margin-top:clamp(18px,2vw,28px)!important;
}

/* Keep a location-only visit panel on the same desktop axis as its map. */
#visit > .duo:not(:has(> div:first-child > *)) > :first-child{
  display:none!important;
}
@media (min-width:900px){
  #visit > .duo:not(:has(> div:first-child > *)) > .basin{
    grid-column:1/-1;
    width:min(100%,582px);
    justify-self:center;
  }
}

/* >>> colour 2026-09-26 */
/* Colour pass (Tumi 2026-09-26: every coloured part follows the intake
   colours; with none, the design's own). */
:root{ --primary:var(--cobalt); --on-primary:var(--sb-on-accent,#fff); --primary-text:var(--sb-accent-text,var(--cobalt-d)); }
.burger .vh{ width:1px; height:1px; background:none; box-shadow:none; }
.hero .btn--pepper{ --bg:var(--sb-secondary-lift,var(--pepper)); --bd:var(--sb-secondary-lift,var(--pepper)); --fg:var(--sb-on-secondary-lift,#fff); }
/* Visual pass (2026-09-26, phone and laptop). */
/* The dishes fill their rows (three columns otherwise): four sit four across
   on a laptop, two and two below; two sit two across; five sit three and
   two, the two centred under the three. */
@media (min-width:1040px) and (max-width:1199px){
  .grid--3:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1200px){
  .grid--3:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1040px){
  .grid--3:has(> :nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--3:has(> :nth-child(5):last-child){ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .grid--3:has(> :nth-child(5):last-child) > *{ grid-column:span 2; }
  .grid--3:has(> :nth-child(5):last-child) > :nth-child(4){ grid-column:2 / span 2; }
}
/* The engines' headings at the scale of the design's own section headings. */
.eng-head h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1; max-width:none; margin-bottom:.3em; font-stretch:112%; font-weight:780; letter-spacing:-.028em; }
/* Every dish photograph square, at the top of its card, never stretched to the
   card's height (Tumi 2026-09-26); the words fill the rest of the card. */
:root body .card .card__plate{ height:auto !important; align-self:start !important; }
:root body .card .card__plate .plate{ height:auto !important; min-height:0 !important; aspect-ratio:1 / 1 !important; }
/* The hero photograph on a wide screen: its focus in the upper part (heads
   and faces stay in), and the frame at least 42% of the width tall (within
   the screen), so little of the photo's height is cut away. */
@media (min-width:900px){ :root body .hero .hero__img{ object-position:50% 28%; } }
@media (min-width:1200px){ :root body .hero{ min-height:max(min(82vh,700px), min(42vw, calc(100svh - 110px))); } }
/* <<< colour 2026-09-26 */

/* >>> standard 2026-09-25 */
/* ---- The finished sites' standard (goal 2026-09-25) ----------------------
   Every engine is on these pages now: the header lists up to eleven pages,
   the footer twelve. Sections at most 68px a side (40px on a phone), the
   footer's pages in two columns, headings across their column, and a dish
   with no photograph drawn as a full card, never an empty photo box. */
:root{ --sec-y:clamp(40px,5vw,68px); }
.section{ padding-block:clamp(40px,5vw,68px); }
.section--tight{ padding-block:clamp(36px,4.4vw,56px); }
.section.eng-sec{ padding-block:clamp(36px,4vw,52px); }
.section h2,.section .h2,.section .d2,.section .display{ max-width:none; }
.card:not(:has(.card__plate)){ grid-template-columns:1fr; }
.card:not(:has(.card__plate)) .card__body,.card:not(:has(.card__plate)) .card__foot{ grid-column:1/-1; }
.nav a{ white-space:nowrap; }
/* Both editors: a tap anywhere on the hero beside the words reaches the
   photo, and a photograph keeps its frame inside the editor's wrapper. */
.hero__scrim,.hero__inner,.hero__body{ pointer-events:none; }
.hero__body > *{ pointer-events:auto; }
:is(.pan,.plate,figure) > [data-paurtal-img-wrap]{ display:block !important; width:100%; height:100%; }
@media (min-width:1025px){
  .nav{ gap:clamp(8px,.95vw,16px); flex-wrap:nowrap; justify-content:flex-end; }
  .nav a{ font-size:13.5px; letter-spacing:0; }
}
@media (min-width:1025px) and (max-width:1279px){ .nav{ flex-wrap:wrap; row-gap:2px; } }
/* The visit band: a column left empty (no opening hours listed) goes, and
   the map is as wide as the page's words. */
#visit .duo > div:not(:has(*)){ display:none; }
#visit .duo:has(> div:not(:has(*))){ grid-template-columns:1fr; }
#visit .duo:has(> div:not(:has(*))) > div{ max-width:none; width:100%; }
#visit .sec-head h2{ white-space:normal; max-width:none; }
#visit > .sb-location-map--embedded{ width:100%; max-width:var(--max); margin:28px auto 0; padding-inline:var(--gutter); }
.section[data-section="quote"] .wrap--narrow{ max-width:var(--max); }
.foot-links{ columns:2; column-gap:28px; margin:0; padding:0; list-style:none; }
.foot-links li{ break-inside:avoid; margin:0 0 10px; }
@media (max-width:700px){
  .section{ padding-block:40px; }
  .section--tight{ padding-block:36px; }
}

/* Nothing wider than the screen (a hard shadow pushed the page sideways),
   and the ordering steps across the page's width. */
body{ overflow-x:clip; }
.section[data-section="how_to_order"] .wrap--narrow{ max-width:var(--max); }
/* <<< standard 2026-09-25 */