/*
Theme Name: Mama's Ladas
Theme URI: https://sitereboots.com/
Author: Site Reboots
Description: Block theme for Mama's Ladas — enchilada shop and wine bar,
  116 W 11th St, downtown Sioux Falls, open since 2001. Built around the
  mismatched enamel plates their food actually arrives on.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: mamasladas
*/

@import url("assets/mechanics.css");

/* ===========================================================================
   TOKENS

   Everything here is measured off their own photographs. The site they were
   harvested from is a third-party page that prints "Unofficial Website" on it,
   so its navy and its Yanone Kaffeesatz are an aggregator's template defaults
   and were discarded on provenance.

   What all eight of their photographs have in common is the crockery: bright
   mismatched enamel plates, teal and brick red and cobalt, on warm oak, in a
   dim room. So the page is the plate. The ground is enamel teal and every
   section is something set down on it.

   Contrast, all verified with palette.py check:
     paper   on ink    11.97   ink-2 10.23
     cream   on ink    11.16   ink-2  9.53
     muted   on ink     6.72   ink-2  5.74
     glaze   on ink     7.37   ink-2  6.30
     cocoa   on paper  12.30   paper-2 10.28
     oak     on paper   5.79   paper-2  4.84
     clay    on paper   6.26   paper-2  5.24   <- inline links, clears BOTH
     paper   on chile   5.04                   <- the button and its label
     chile   on paper-2 4.21   <- FAILS. chile is a FILL only, never text.
   ========================================================================= */
:root{
  --ml-ink:#122C33;        /* enamel teal, the page ground                   */
  --ml-ink-2:#19383F;      /* raised plate, second dark band                 */
  --ml-rim:#2E5A64;        /* the enamel rim, measured off their plate       */
  --ml-glaze:#7FC3CB;      /* eyebrows and links on the teal bands           */
  --ml-cream:#D8E3E2;      /* body text on teal                              */
  --ml-muted:#9DB4B6;      /* secondary text on teal                         */
  --ml-paper:#F4E7CE;      /* masa, off their tortilla chips. PANEL, not ground */
  --ml-paper-2:#E7D3B2;    /* toasted corn                                   */
  --ml-cocoa:#33231A;      /* body text on masa                              */
  --ml-oak:#6A5445;        /* secondary text on masa                         */
  --ml-chile:#B5301F;      /* CTA fill. Never text on paper-2                */
  --ml-clay:#9A2B20;       /* inline links on masa                           */
  --ml-tomato:#C3392C;     /* the slice mark. Never carries text             */
  --ml-rule:#D7C2A0;       /* hairlines on masa                              */

  /* The motif, as a paintable value: one tomato slice, which is sitting dead
     centre on five of their eight dishes. Bullets, markers, back-to-top. */
  --ml-slice:radial-gradient(circle at 50% 50%,
      var(--ml-paper) 0 15%, #D4503C 15% 56%, var(--ml-chile) 56% 100%);

  /* ---- the mechanics.css contract. All four are required. ---- */
  --ml-focus:#7FC3CB;
  --ml-nav-bg:#122C33;     /* must be opaque */
  --ml-burger:#F4E7CE;
  --ml-header-h:76px;      /* starting guess; site.js measures the real one */
}

/* ===========================================================================
   BASE
   ========================================================================= */
body{background:var(--ml-ink);color:var(--ml-cream)}

.ml-lede{
  font-size:clamp(1.15rem,1.9vw,1.3125rem);
  line-height:1.56;color:var(--ml-cream);max-width:40ch;
}
.ml-note{font-size:.9375rem;color:var(--ml-muted)}

/* Eyebrow. The agency's is uppercase, letterspaced and rust; this is
   lowercase, sentence case, untracked and led by a tomato slice. */
.ml-eyebrow{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 .85rem;
  font-family:var(--wp--preset--font-family--text);
  font-size:1rem;font-weight:700;
  text-transform:none;letter-spacing:normal;
  color:var(--ml-glaze);
}
.ml-eyebrow::before{
  content:"";flex:0 0 auto;width:1.05em;height:1.05em;border-radius:50%;
  background:var(--ml-slice);
}
.ml-slice{
  display:inline-block;width:.95em;height:.95em;border-radius:50%;
  background:var(--ml-slice);vertical-align:-.12em;
}

/* ===========================================================================
   BANDS

   Rhythm: teal → masa → raised teal → corn → photo → teal footer.
   A teal band is never the last one before the teal footer. The page closes
   on the photograph of the room, which carries an image and so reads as its
   own slab rather than fusing into the footer.
   ========================================================================= */
.ml-band{
  position:relative;
  padding-block:clamp(3.25rem,7vw,5.5rem);
  background:var(--ml-ink);
  color:var(--ml-cream);
}
.ml-band--raised{background:var(--ml-ink-2)}
.ml-band--paper{background:var(--ml-paper);color:var(--ml-cocoa)}
.ml-band--corn{background:var(--ml-paper-2);color:var(--ml-cocoa)}
.ml-band--tight{padding-block:clamp(2.25rem,4.5vw,3.5rem)}

/* mechanics.css sets `.ml-band > *{margin-left:max(0px,(100% - contentSize)/2)
   !important}` to stop WordPress centring narrow paragraphs next to a
   full-width heading. Our own wrapper IS the band width, so that rule shunts it
   right and leaves it with no side gutter on a phone. Both fixed here, and the
   !important is needed to beat the !important there. */
.ml-band > .ml-wrap{
  max-width:80rem;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-inline:1.25rem;
}
@media (min-width:52rem){ .ml-band > .ml-wrap{padding-inline:1.75rem} }
.ml-wrap--narrow{max-width:54rem}
/* A stray paragraph in a narrow wrap would otherwise run the full 54rem. */
.ml-wrap--narrow > p{max-width:42rem}

/* A hairline of plate rim on the seam between two teal bands, so they do not
   fuse. Same trick the real crockery uses. */
.ml-band--raised::before,
.ml-band--seam::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--ml-rim);
}

.ml-band--paper :is(h1,h2,h3,h4),
.ml-band--corn  :is(h1,h2,h3,h4){color:var(--ml-cocoa)}
.ml-band--paper .ml-eyebrow,
.ml-band--corn  .ml-eyebrow{color:var(--ml-clay)}
.ml-band--paper .ml-lede,
.ml-band--corn  .ml-lede{color:var(--ml-cocoa)}
.ml-band--paper .ml-note,
.ml-band--corn  .ml-note{color:var(--ml-oak)}
.ml-band--paper a:not(.ml-btn):not(.ml-tile),
.ml-band--corn  a:not(.ml-btn):not(.ml-tile){color:var(--ml-clay)}
.ml-band--paper a:not(.ml-btn):not(.ml-tile):hover,
.ml-band--corn  a:not(.ml-btn):not(.ml-tile):hover{color:var(--ml-cocoa)}

.ml-prose{max-width:38rem}
.ml-prose p{margin:0 0 1.1rem}
.ml-prose h2{margin:2.25rem 0 .9rem}
.ml-prose h3{margin:1.9rem 0 .6rem}
.ml-band--paper .ml-prose, .ml-band--corn .ml-prose{color:var(--ml-cocoa)}

.ml-h2{margin:0 0 1rem}
.ml-sectionhead{max-width:46rem;margin:0 0 clamp(1.75rem,3.5vw,2.5rem)}

/* ===========================================================================
   HEADER
   ========================================================================= */
.ml-header{background:var(--ml-ink);border-bottom:1px solid var(--ml-rim)}
.ml-headbar{
  /* A literal value. --ml-header-h is an OUTPUT of this element: site.js
     measures the bar and publishes it, so reading it back in here makes each
     settle a little taller than the last. */
  min-height:76px;
  max-width:80rem;margin-inline:auto;padding:.7rem 1.25rem;
}
@media (min-width:52rem){ .ml-headbar{padding-inline:1.75rem} }

.ml-brand{gap:.7rem;color:var(--ml-paper)}
.ml-brand__mark{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--ml-slice);
}
.ml-brand__name{
  display:block;
  font-family:var(--wp--preset--font-family--display);
  font-weight:900;font-size:1.6rem;line-height:1.02;letter-spacing:-.01em;
  color:var(--ml-paper);
}
.ml-brand__sub{
  display:block;font-size:.78rem;font-weight:600;line-height:1.3;
  color:var(--ml-glaze);
}
@media (max-width:30rem){ .ml-brand__sub{display:none} }

.ml-nav__link{
  color:var(--ml-cream);text-decoration:none;
  font-weight:600;font-size:1rem;
}
.ml-nav__link:hover{color:var(--ml-glaze)}
.ml-nav__link[aria-current="page"]{color:var(--ml-glaze)}

/* Desktop navigation ONLY. A media query adds no specificity and style.css
   loads after mechanics.css, so an unscoped display rule here would override
   the mobile panel at every width, phone included. */
@media (min-width:52.0625rem){
  .ml-header .ml-nav__inner{display:flex;align-items:center;gap:1.4rem}
  /* The spring belongs to the nav, not the brand: mechanics.css puts
     margin-right:auto on .ml-brand, which shoves the logo hard left and
     crushes the links against the call to action. (0,2,0) beats it. */
  .ml-header .ml-brand{margin-right:1.75rem}
  .ml-header .ml-nav{margin-right:auto}
  .ml-header .ml-nav__link{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:52rem){
  .ml-header .ml-nav__link{
    color:var(--ml-paper);font-size:1.3rem;font-weight:700;
    font-family:var(--wp--preset--font-family--display);
    border-bottom:1px solid var(--ml-rim);
  }
  .ml-header .ml-nav__foot{display:grid;gap:.7rem}
}


/* ===========================================================================
   BUTTONS — pill, flat, no border anywhere on this site
   ========================================================================= */
.ml-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.55rem 1.5rem;
  border:0;border-radius:999px;
  font-family:var(--wp--preset--font-family--text);
  font-weight:700;font-size:1.0625rem;line-height:1.2;text-align:center;
  text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.ml-btn--chile{background:var(--ml-chile);color:var(--ml-paper)}
.ml-btn--chile:hover{background:var(--ml-clay);color:var(--ml-paper)}
.ml-btn--cream{background:var(--ml-paper);color:var(--ml-ink)}
.ml-btn--cream:hover{background:var(--ml-glaze);color:var(--ml-ink)}
.ml-btn--ghost{background:transparent;color:var(--ml-glaze);box-shadow:inset 0 0 0 2px var(--ml-rim)}
.ml-btn--ghost:hover{background:var(--ml-rim);color:var(--ml-paper)}
.ml-band--paper .ml-btn--ghost,
.ml-band--corn  .ml-btn--ghost{color:var(--ml-clay);box-shadow:inset 0 0 0 2px var(--ml-rule)}
.ml-band--paper .ml-btn--ghost:hover,
.ml-band--corn  .ml-btn--ghost:hover{background:var(--ml-clay);color:var(--ml-paper)}

.ml-btnrow{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* The header call to action. Declared AFTER .ml-btn and scoped to the header,
   because .ml-btn sets display:inline-flex at the same specificity and would
   otherwise win on source order and show this pill next to the burger on a
   phone. (0,2,0) settles it either way. */
.ml-header .ml-headcta{display:none}
@media (min-width:52.0625rem){ .ml-header .ml-headcta{display:inline-flex} }

/* WordPress's own button block, so an editor-added button matches. */
.wp-block-button__link{min-height:52px;display:inline-flex;align-items:center;
  justify-content:center;padding:.55rem 1.5rem;font-weight:700}

/* ===========================================================================
   THE PLATE — the one structural component on this site

   A panel is a flat fill with a hairline ring set 6px inside its own edge,
   which is what the rim of an enamel plate looks like. The ring lives on a
   pseudo-element, so the panel itself carries NO border: a white panel with a
   2px dark border at a small radius is one of the agency's five tells and this
   is deliberately not that.
   ========================================================================= */
.ml-panel{
  position:relative;
  border:0;border-radius:20px;
  background:var(--ml-paper);color:var(--ml-cocoa);
  padding:1.75rem 1.6rem;
  min-width:0;   /* a padded grid item will otherwise widen its own track */
}
.ml-panel::before{
  content:"";position:absolute;inset:6px;border-radius:14px;
  border:1px solid rgba(51,35,26,.22);
  pointer-events:none;
}
.ml-panel :is(h2,h3,h4){color:var(--ml-cocoa);margin:0 0 .6rem}
.ml-panel p{margin:0 0 .85rem}
.ml-panel p:last-child{margin-bottom:0}

.ml-panel--corn{background:var(--ml-paper-2)}
.ml-panel--teal{background:var(--ml-rim);color:var(--ml-paper)}
.ml-panel--teal::before{border-color:rgba(244,231,206,.38)}
.ml-panel--teal :is(h2,h3,h4){color:var(--ml-paper)}
.ml-panel--chile{background:var(--ml-chile);color:var(--ml-paper)}
.ml-panel--chile::before{border-color:rgba(244,231,206,.42)}
.ml-panel--chile :is(h2,h3,h4){color:var(--ml-paper)}
.ml-panel--chile a{color:var(--ml-paper);text-decoration:underline}

/* A link inside a teal or chile plate sits on a DARK fill, but the band around
   it is light, so `.ml-band--paper a:not(.ml-btn):not(.ml-tile)` (0,3,1) was
   painting it clay red on teal: 1.01 against the rim, which is invisible.
   These have to match that specificity and come after it. */
.ml-band--paper .ml-panel--teal a:not(.ml-btn),
.ml-band--corn  .ml-panel--teal a:not(.ml-btn),
.ml-band--paper .ml-panel--chile a:not(.ml-btn),
.ml-band--corn  .ml-panel--chile a:not(.ml-btn){
  color:var(--ml-paper);text-decoration:underline;
}
/* Same trap as the links above, for every other token that a light band
   recolours. A teal or chile plate is a DARK fill sitting on a LIGHT band, so
   the band's rules have to be undone inside it or the eyebrow comes out clay
   red on teal at 1.01. (0,3,0) beats the band's (0,2,0). */
.ml-band--paper .ml-panel--teal .ml-eyebrow,
.ml-band--corn  .ml-panel--teal .ml-eyebrow,
.ml-band--paper .ml-panel--chile .ml-eyebrow,
.ml-band--corn  .ml-panel--chile .ml-eyebrow{color:var(--ml-paper)}
.ml-band--paper .ml-panel--teal .ml-note,
.ml-band--corn  .ml-panel--teal .ml-note,
.ml-band--paper .ml-panel--chile .ml-note,
.ml-band--corn  .ml-panel--chile .ml-note{color:var(--ml-paper)}
.ml-band--paper .ml-panel--teal .ml-lede,
.ml-band--corn  .ml-panel--teal .ml-lede,
.ml-band--paper .ml-panel--chile .ml-lede,
.ml-band--corn  .ml-panel--chile .ml-lede{color:var(--ml-paper)}

.ml-band--paper .ml-panel--teal a:not(.ml-btn):hover,
.ml-band--corn  .ml-panel--teal a:not(.ml-btn):hover,
.ml-band--paper .ml-panel--chile a:not(.ml-btn):hover,
.ml-band--corn  .ml-panel--chile a:not(.ml-btn):hover{color:var(--ml-glaze)}

.ml-grid{display:grid;gap:1.25rem}
@media (min-width:46rem){ .ml-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:58rem){ .ml-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ml-grid > *{min-width:0}

/* ===========================================================================
   THE DISC — a photograph cropped round, with the plate rim on it

   None of their photographs is big enough for a full-bleed hero: they top out
   at 500x375 and photos.py reports zero card-grade files. A 360px circle cut
   out of a 500px source is sharp, so the crop shape is the answer rather than
   a heavier gradient.
   ========================================================================= */
.ml-disc{position:relative;display:block;border-radius:50%;overflow:visible}
.ml-disc img{
  display:block;width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:50%;
}
.ml-disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 5px var(--ml-rim), inset 0 0 0 7px rgba(244,231,206,.5);
}

.ml-discrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:40rem){ .ml-discrow{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ml-disccap{margin:.8rem 0 0;font-size:.9375rem;font-weight:600;text-align:center}
.ml-band--paper .ml-disccap,.ml-band--corn .ml-disccap{color:var(--ml-oak)}
.ml-band:not(.ml-band--paper):not(.ml-band--corn) .ml-disccap{color:var(--ml-muted)}

/* ===========================================================================
   HERO — flat enamel teal, the wordmark, and three plates laid on it
   ========================================================================= */
.ml-hero{background:var(--ml-ink);padding-block:clamp(2.75rem,6vw,4.75rem)}
.ml-hero__in{max-width:80rem;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:52rem){ .ml-hero__in{padding-inline:1.75rem} }
.ml-hero__grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media (min-width:56rem){ .ml-hero__grid{grid-template-columns:1.05fr .95fr} }
.ml-hero__grid > *{min-width:0}

.ml-hero h1{
  margin:0 0 1.1rem;
  font-family:var(--wp--preset--font-family--display);
  font-weight:900;line-height:1;letter-spacing:-.015em;
  font-size:clamp(3.25rem,10vw,5.75rem);
  color:var(--ml-paper);
}
.ml-hero h1 em{display:block;font-style:normal;color:var(--ml-glaze)}

.ml-hero__facts{
  display:flex;flex-wrap:wrap;gap:.6rem 1.35rem;
  margin:1.9rem 0 0;padding:0;list-style:none;
}
.ml-hero__facts li{
  display:flex;align-items:center;gap:.5rem;
  font-size:1rem;font-weight:600;color:var(--ml-cream);
}
.ml-hero__facts li::before{
  content:"";flex:0 0 auto;width:.85em;height:.85em;border-radius:50%;
  background:var(--ml-slice);
}

.ml-plates{position:relative;width:100%;max-width:32rem;margin-inline:auto;aspect-ratio:1}
.ml-plates .ml-disc{position:absolute}
.ml-plates .ml-disc--a{width:60%;left:0;top:2%;z-index:1}
.ml-plates .ml-disc--b{width:45%;right:1%;top:20%;z-index:2}
.ml-plates .ml-disc--c{width:42%;left:26%;bottom:1%;z-index:3}

/* ===========================================================================
   THE MENU — every enchilada on their card is priced full and half, which is
   unusual and is theirs, so the page is built out of that pair.
   ========================================================================= */
.ml-menu{margin:0;padding:0;list-style:none}
.ml-dish{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.3rem 1.75rem;align-items:start;
  padding-block:1.2rem;
  border-top:1px solid var(--ml-rule);
}
.ml-dish:first-child{border-top:0;padding-top:.35rem}
.ml-dish__name{
  grid-column:1;margin:0;
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:1.3125rem;line-height:1.22;color:var(--ml-cocoa);
}
.ml-dish__desc{grid-column:1;margin:0;font-size:1rem;line-height:1.55;color:var(--ml-oak)}
.ml-dish__prices{
  grid-column:2;grid-row:1 / span 2;
  display:flex;gap:1rem;align-items:flex-start;
}
.ml-price{text-align:center;min-width:3.4rem}
.ml-price__k{
  display:block;margin-bottom:.1rem;
  font-size:.75rem;font-weight:700;line-height:1;color:var(--ml-oak);
}
.ml-price__v{
  display:block;
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:1.3125rem;line-height:1.1;
  /* Vollkorn's default figures are old-style, which is lovely in a headline
     and wrong on a price: the 3 and the 5 drop below the baseline and $3.50
     has to be read twice. Lining figures here only. */
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--ml-chile);
}
.ml-price--half .ml-price__v{color:var(--ml-oak)}
.ml-dish--single .ml-price__k{visibility:hidden}

@media (max-width:34rem){
  .ml-dish{grid-template-columns:minmax(0,1fr)}
  .ml-dish__prices{grid-column:1;grid-row:auto;margin-top:.55rem;justify-content:flex-start}
  .ml-price{text-align:left;min-width:0;margin-right:1rem}
}

.ml-menuhead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:0 0 .35rem;
}
.ml-menuhead h3{margin:0}
.ml-menuhead .ml-note{margin:0}

/* ===========================================================================
   SMALL PARTS
   ========================================================================= */
.ml-hours{width:100%;border-collapse:collapse;font-size:1.0625rem}
.ml-hours th,.ml-hours td{padding:.55rem 0;text-align:left;border-top:1px solid var(--ml-rule)}
.ml-hours tr:first-child th,.ml-hours tr:first-child td{border-top:0}
.ml-hours th{font-weight:600;color:var(--ml-cocoa)}
.ml-hours td{text-align:right;font-weight:700;font-variant-numeric:lining-nums tabular-nums;color:var(--ml-cocoa)}
.ml-hours tr[data-shut] td{color:var(--ml-oak);font-weight:600}

.ml-ticks{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.ml-ticks li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.55}
.ml-ticks li::before{
  content:"";flex:0 0 auto;width:.95em;height:.95em;margin-top:.3em;
  border-radius:50%;background:var(--ml-slice);
}

.ml-quote{
  margin:0;padding:0;border:0;
  font-family:var(--wp--preset--font-family--display);
  font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.36;
  color:var(--ml-paper);
}
.ml-band--paper .ml-quote,.ml-band--corn .ml-quote{color:var(--ml-cocoa)}
.ml-quote cite{
  display:block;margin-top:.9rem;
  font-family:var(--wp--preset--font-family--text);
  font-style:normal;font-weight:700;font-size:.9375rem;color:var(--ml-glaze);
}
.ml-band--paper .ml-quote cite,.ml-band--corn .ml-quote cite{color:var(--ml-clay)}

/* The closing band: the room, under a teal scrim, so the page does not finish
   on a flat dark slab that fuses into the footer. */
.ml-photoband{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(4rem,9vw,6.5rem)}
.ml-photoband::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/img/room.webp") center/cover no-repeat;
}
.ml-photoband::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(18,44,51,.94) 0 42%,rgba(18,44,51,.72) 100%);
}
@media (max-width:40rem){
  .ml-photoband::before{background-image:url("assets/img/room-portrait.webp")}
  .ml-photoband::after{background:linear-gradient(180deg,rgba(18,44,51,.80) 0 30%,rgba(18,44,51,.95) 100%)}
}
.ml-photoband h2{color:var(--ml-paper)}

/* ===========================================================================
   FOOTER
   ========================================================================= */
.ml-footer{background:var(--ml-ink-2);color:var(--ml-cream);border-top:1px solid var(--ml-rim)}
.ml-footer__in{max-width:80rem;margin-inline:auto;padding:clamp(2.75rem,6vw,4rem) 1.25rem 1.5rem}
@media (min-width:52rem){ .ml-footer__in{padding-inline:1.75rem} }
.ml-footer__grid{display:grid;gap:2rem}
@media (min-width:40rem){ .ml-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:64rem){ .ml-footer__grid{grid-template-columns:1.4fr 1fr 1fr} }
.ml-footer__grid > *{min-width:0}
.ml-footer h2{font-size:1.0625rem;font-weight:700;margin:0 0 .75rem;
  font-family:var(--wp--preset--font-family--text);color:var(--ml-glaze)}
.ml-footer ul{margin:0;padding:0;list-style:none}
.ml-footer a{color:var(--ml-cream);text-decoration:none}
.ml-footer a:hover{color:var(--ml-glaze);text-decoration:underline}
.ml-footer p{margin:0 0 .8rem;color:var(--ml-muted);font-size:1rem}
.ml-footer__brand{display:flex;align-items:center;gap:.65rem;margin-bottom:.9rem}
.ml-footer__brand span{width:30px;height:30px;border-radius:50%;background:var(--ml-slice);flex:0 0 auto}
.ml-footer__brand strong{
  font-family:var(--wp--preset--font-family--display);
  font-weight:900;font-size:1.4rem;color:var(--ml-paper);
}
.ml-footer__bar{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--ml-rim);
  font-size:.875rem;color:var(--ml-muted);
}

/* ---- phone quick actions + back to top ---- */
.ml-ab{
  border:0;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;font-family:var(--wp--preset--font-family--text);
}
.ml-ab--chile{background:var(--ml-chile);color:var(--ml-paper)}
.ml-ab--cream{background:var(--ml-paper);color:var(--ml-ink)}
.ml-actionbar__inner{
  /* so the pills never sit on bare page colour mid-scroll */
  filter:drop-shadow(0 6px 16px rgba(10,24,28,.45));
}
.ml-top{
  border:0;border-radius:50%;background:var(--ml-paper);
  box-shadow:0 6px 18px rgba(10,24,28,.45);
}
.ml-top span{display:block;width:22px;height:22px;border-radius:50%;background:var(--ml-slice)}

/* ===========================================================================
   FORM
   ========================================================================= */
.ml-form{max-width:44rem}
.ml-form h3{margin:0 0 .6rem}
.ml-form__intro{margin:0 0 1.6rem;color:var(--ml-oak)}
.ml-field{margin:0 0 1.1rem}
.ml-field-row{display:grid;gap:0 1.1rem}
@media (min-width:38rem){ .ml-field-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ml-field-row > *{min-width:0}
.ml-field label{display:block;margin-bottom:.4rem;font-weight:700;color:var(--ml-cocoa)}
.ml-hint{display:block;font-weight:400;font-size:.875rem;color:var(--ml-oak)}
.ml-field input,.ml-field select,.ml-field textarea{
  width:100%;min-height:52px;padding:.7rem .9rem;
  font-family:inherit;font-size:1.0625rem;color:var(--ml-cocoa);
  background:#FFFBF2;border:1px solid var(--ml-rule);border-radius:12px;
}
.ml-field textarea{min-height:9rem;resize:vertical}
.ml-field input:focus-visible,.ml-field select:focus-visible,.ml-field textarea:focus-visible{
  outline:3px solid var(--ml-clay);outline-offset:2px;border-color:var(--ml-clay);
}
.ml-submit{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.55rem 1.75rem;margin-top:.4rem;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--ml-chile);color:var(--ml-paper);
  font-family:var(--wp--preset--font-family--text);font-weight:700;font-size:1.0625rem;
}
.ml-submit:hover{background:var(--ml-clay)}
.ml-form__fine{margin:1rem 0 0;font-size:.875rem;color:var(--ml-oak)}
.ml-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ml-note--ok,.ml-note--err{
  padding:1rem 1.1rem;border-radius:14px;margin:0 0 1.5rem;font-size:1rem;
}
.ml-note--ok{background:#E3EFE0;color:#24402A}
.ml-note--err{background:#F6DED9;color:#73241A}

/* ===========================================================================
   DEMO NOTICE — the strip the 030 plugin prints. Keep it legible and out of
   the way of the design.
   ========================================================================= */
.ml-demo-notice,.ml-demo-foot{font-family:var(--wp--preset--font-family--text)}

/* ===========================================================================
   ORDERING

   Built phone first. Takeout is ordered standing up, one-handed, often
   outside, so every control here is at least 48px and the running total is
   never more than a thumb away.
   ========================================================================= */

.ml-order{max-width:46rem}
.ml-order__msg{margin:0 0 1.5rem}
.ml-order__notice{
  margin:0 0 1.5rem;padding:.85rem 1rem;border-radius:14px;
  background:var(--ml-paper-2);color:var(--ml-cocoa);font-weight:600;
}
.ml-ordsec{margin:0 0 2.5rem}
.ml-ordsec__h{margin:0 0 1.1rem}

.ml-ordish{margin:0 0 1.5rem}
.ml-ordish__name{margin:0 0 .15rem;font-size:1.25rem}
.ml-ordish__desc{margin:0 0 .7rem;font-size:1rem;line-height:1.5;color:var(--ml-oak)}
.ml-band--paper .ml-ordish__desc{color:var(--ml-oak)}

.ml-vars{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}

/* One orderable thing: what it is, what it costs, how many. The whole row is
   a label, so a tap anywhere on the left half lands in the number field. */
.ml-var{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem .75rem .6rem 1rem;
  border-radius:16px;background:var(--ml-paper);
  position:relative;min-height:60px;
}
.ml-band--paper .ml-var{background:#FBF4E6}
.ml-var::before{
  content:"";position:absolute;inset:5px;border-radius:11px;
  border:1px solid rgba(51,35,26,.16);pointer-events:none;
}
.ml-var[data-ml-on="true"]{background:var(--ml-paper-2)}
.ml-var[data-ml-on="true"]::before{border-color:var(--ml-chile)}
.ml-var__label{
  display:flex;align-items:baseline;gap:.25rem .75rem;flex-wrap:wrap;
  min-width:0;flex:1 1 auto;cursor:pointer;
}
/* A dish with one size only: the heading above is the label, so the row is
   just the price and the stepper and can be shorter. */
.ml-var--only{min-height:52px;padding-block:.4rem}
.ml-var__what{font-weight:600;color:var(--ml-cocoa);font-size:1.0625rem}
.ml-var__price{
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:1.0625rem;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--ml-chile);
}

/* ---- the stepper ---- */
.ml-stepper{display:flex;align-items:center;gap:.25rem;flex:0 0 auto}
.ml-stepper__in{
  width:3.25rem;min-height:48px;padding:.3rem;
  text-align:center;font-family:inherit;font-size:1.0625rem;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--ml-cocoa);background:#FFFBF2;
  border:1px solid var(--ml-rule);border-radius:12px;
  -moz-appearance:textfield;appearance:textfield;
}
/* The native spinners are a 10px target and they sit exactly where a thumb
   lands. The stepper buttons replace them. */
.ml-stepper__in::-webkit-outer-spin-button,
.ml-stepper__in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ml-stepper[data-ml-on="true"] .ml-stepper__in{border-color:var(--ml-chile);color:var(--ml-chile)}
.ml-stepper__btn{
  width:48px;height:48px;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;
  background:var(--ml-paper-2);color:var(--ml-cocoa);
  font-size:1.35rem;line-height:1;font-weight:700;
}
.ml-stepper__btn:hover{background:var(--ml-chile);color:var(--ml-paper)}
.ml-stepper__btn--more{background:var(--ml-chile);color:var(--ml-paper)}
.ml-stepper__btn--more:hover{background:var(--ml-clay)}
/* Until order.js runs there are no buttons, so the field must not look like
   it is missing something. */
.ml-stepper:not([data-ml-ready]) .ml-stepper__in{width:4.5rem}

.ml-soldout{
  display:inline-block;margin-left:.5rem;padding:.1rem .5rem;
  border-radius:999px;background:var(--ml-paper-2);color:var(--ml-clay);
  font-family:var(--wp--preset--font-family--text);
  font-size:.75rem;font-weight:700;vertical-align:middle;
}

.ml-order__pay{
  margin:1.4rem 0 1.2rem;padding:.9rem 1rem;border-radius:14px;
  background:var(--ml-paper-2);color:var(--ml-cocoa);font-size:1rem;line-height:1.5;
}
.ml-order__send{width:100%}
@media (min-width:38rem){ .ml-order__send{width:auto;min-width:16rem} }

/* ---- the sticky total ---- */
/* Sits in the same slot as the site-wide quick action bar, which stands down
   on this page, and reuses --ml-ab-h and body[data-ab] so back-to-top and the
   demo badge step over it exactly as they do everywhere else. */
.ml-orderbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));
  background:var(--ml-ink-2);border-top:1px solid var(--ml-rim);
  transform:translateY(calc(100% + 1rem));
  transition:transform .24s cubic-bezier(.22,.61,.36,1);
}
.ml-orderbar[data-show="true"]{transform:none}
.ml-orderbar__in{
  display:flex;align-items:center;gap:.75rem;
  max-width:46rem;margin:0 auto;
}
.ml-orderbar__sum{
  margin:0;display:flex;flex-direction:column;line-height:1.2;
  flex:1 1 auto;min-width:0;
}
.ml-orderbar__sum span{font-size:.8125rem;color:var(--ml-muted)}
.ml-orderbar__sum strong{
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:1.4rem;color:var(--ml-paper);
  font-variant-numeric:lining-nums tabular-nums;
}
.ml-orderbar__go{flex:0 0 auto;min-height:48px;padding-inline:1.15rem;font-size:1rem}
@media (prefers-reduced-motion:reduce){ .ml-orderbar{transition:none} }
/* Once the collection panel is on screen the bar is repeating a control that
   is already under the reader's thumb, so order.js stands it down there too. */
@media (min-width:52.0625rem){ .ml-orderbar{display:none} }
/* Belt as well as braces: even with the bar up, the last thing in the form has
   to be reachable. A fixed bar over a submit button is the classic version of
   this bug and it only shows up on a phone, at the bottom of the page. */
@media (max-width:52rem){
  .ml-orderform{padding-bottom:calc(var(--ml-ab-h, 72px) + 1rem)}

  /* mechanics.css drops the quick-action bar and back-to-top when the mobile
     nav opens, because the panel is z-90 and they are 95 and 96. The order bar
     is 95 and mechanics.css has never heard of it, so it would hang over the
     open menu. It is this site's component, so the rule belongs here rather
     than in the shared file. */
  body:has(.ml-burger__box:checked) .ml-orderbar,
  body[data-nav="open"] .ml-orderbar{display:none!important}
}

/* ---- the receipt ---- */
.ml-rcpt__when{font-size:1.125rem;margin:0 0 1.1rem}
.ml-rcpt__lines{
  margin:0 0 1rem;padding:1rem 0 0;list-style:none;
  border-top:1px solid rgba(244,231,206,.3);
}
.ml-rcpt__line{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.35rem 0;font-size:1.0625rem;
}
.ml-rcpt__line span:last-child{
  font-variant-numeric:lining-nums tabular-nums;flex:0 0 auto;
}
.ml-rcpt__total{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  margin:0 0 1rem;padding-top:.9rem;
  border-top:1px solid rgba(244,231,206,.3);
}
.ml-rcpt__total strong{
  font-family:var(--wp--preset--font-family--display);
  font-weight:800;font-size:1.6rem;
  font-variant-numeric:lining-nums tabular-nums;
}
.ml-rcpt__where{margin:0;font-size:1rem;color:var(--ml-paper)}
.ml-order--done .ml-note{margin-top:1.25rem}