/*
Theme Name: Menus — Paper & Ember Child
Theme URI: https://menusprices.us
Author: Menus Editorial Team
Author URI: https://menusprices.us
Description: Paper & Ember — a unique, modern, lightweight child theme for restaurant menu sites. One theme serves both markets (USA / Germany); market differences come from the "Menus Market" Customizer settings, never from separate themes. Warm paper background, ember accent, editorial typography, menu cards designed for Google Images traffic.
Template: kadence
Version: 1.0.25
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: menus-paper-ember
Tags: custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ============================================================
   PAPER & EMBER — DESIGN TOKENS
   Contrast rule (approved): NEVER light text on a light
   background. Pale/peach surfaces always carry ink or
   deep-ember text. Light text only on ink/ember surfaces.
   ============================================================ */
:root{
  --paper:#FFF8EE;
  --paper-2:#FFF1DC;
  --card:#FFFDF8;
  --ink:#141414;
  --ink-soft:#3D3831;
  --ember:#C7431F;          /* deep ember: text-safe on paper */
  --ember-bright:#E4572E;   /* bright ember: fills/borders only */
  --ember-dark:#8F2B12;
  --peach:#F6CDBB;
  --peach-soft:#FBE3D3;
  --gold:#8A5A00;           /* deep gold: text-safe on paper */
  --gold-fill:#FFB800;
  --green:#1E7A4C;
  --line:#141414;
  --radius:20px;
  --radius-sm:12px;
  --font-display:"Bricolage Grotesque","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px;
  --shadow:0 10px 30px rgba(20,20,20,.10);
}

/* ---------- Base ---------- */
body.mpe{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* v1.0.3: horizontal-overflow guard. overflow-x:clip stops any
   stray wide element from giving phones a sideways-scrollable page,
   WITHOUT creating a scroll container — unlike overflow-x:hidden it
   does not break position:sticky (pill-nav, TOC, Quick Facts).
   Browsers without clip support simply get no guard (no hidden
   fallback, on purpose). */
@supports (overflow:clip){
  body.mpe{overflow-x:clip}
}
.mpe h1,.mpe h2,.mpe h3,.mpe h4{
  font-family:var(--font-display);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 .5em;
}
.mpe h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800}
.mpe h2{font-size:clamp(1.55rem,3.4vw,2.3rem);font-weight:750;margin-top:1.4em}
.mpe h3{font-size:1.25rem;font-weight:700}
.mpe a{color:var(--ember);text-decoration-thickness:2px;text-underline-offset:3px}
.mpe a:hover{color:var(--ember-dark)}
/* In-article links (v1.0.17): on branded posts they take the
   dark brand colour (primary on hover); the fallbacks are
   exactly today's ember / ember-dark, so unbranded posts are
   unchanged. Scoped to .mpe-article-body — nav, TOC and card
   links keep their own colours. */
.mpe-article-body a{color:var(--brand-dark,var(--ember))}
.mpe-article-body a:hover{color:var(--brand,var(--ember-dark))}
.mpe img{max-width:100%;height:auto}
.mpe ::selection{background:var(--ember-bright);color:#fff}
.mpe-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.mpe-eyebrow{
  font-family:var(--font-mono);font-size:.83rem;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ember);
  display:inline-flex;align-items:center;gap:.5em;
}
.mpe-eyebrow::before{content:"✦";color:var(--ember-bright)}
/* Mono label hygiene (v1.0.23): QA on two renderers showed a
   faint horizontal line through the small mono uppercase labels.
   Full audit of this sheet + Kadence global/content/parent CSS +
   the live page's inline styles found NO line-through, text-stroke
   or gradient rule that could paint it (Kadence's gradient link
   underlines are gated behind link-style-* body classes this site
   does not use, and the labels are not links). These declarations
   are a defensive pin so no present or future decoration/gradient
   rule — ours or a parent/plugin one — can ever draw across them. */
.mpe-eyebrow,.mpe-stat span,.mpe-qf-row dt,.mpe-toc h4,.mpe-tip b{
  text-decoration:none;-webkit-text-decoration:none;background-image:none;
}
.mpe-hl{background:var(--peach);padding:.02em .28em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mpe-price{font-family:var(--font-mono);font-weight:700;white-space:nowrap}
.mpe-btn{
  display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
  background:var(--ink);color:#FFF8EE;border:2px solid var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  padding:.72em 1.4em;border-radius:999px;text-decoration:none;
  transition:transform .15s ease,background .15s ease;
}
.mpe-btn:hover{background:var(--ember-dark);border-color:var(--ember-dark);color:#fff;transform:translateY(-2px)}
.mpe-btn--ember{background:var(--ember);border-color:var(--ember);color:#fff}
.mpe-btn--ember:hover{background:var(--ember-dark);border-color:var(--ember-dark)}
.mpe-btn--ghost{background:transparent;color:var(--ink)}
.mpe-btn--ghost:hover{background:var(--ink);color:#FFF8EE}

/* ---------- Header / nav ---------- */
.mpe .site-header{background:var(--paper);border-bottom:2px solid var(--ink)}
.mpe .site-branding .site-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.mpe .main-navigation a,.mpe .header-navigation a{
  font-family:var(--font-mono);font-size:.85rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;
}
.mpe .main-navigation a:hover,.mpe .header-navigation a:hover{color:var(--ember)}
.mpe-market-badge{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  background:var(--ink);color:#FFF8EE;border-radius:999px;padding:.35em .8em;text-transform:uppercase;
}

/* ---------- Editorial hero + search ---------- */
.mpe-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(600px 300px at 85% -50px,var(--peach-soft),transparent 70%),
    var(--paper);
  border-bottom:2px solid var(--ink);
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem);
}
.mpe-hero h1{max-width:14ch}
.mpe-hero .mpe-lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink-soft);max-width:56ch}
.mpe-search{
  display:flex;gap:8px;align-items:stretch;margin-top:1.6rem;max-width:640px;
  background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:6px;
  box-shadow:var(--shadow);
}
.mpe-search input[type="search"]{
  flex:1;min-width:0;border:0;background:transparent;padding:.6em 1em;
  font:inherit;color:var(--ink);outline:none;
}
.mpe-search input::placeholder{color:#6E675C}
.mpe-search button{
  border:0;cursor:pointer;border-radius:999px;padding:.6em 1.4em;
  background:var(--ember);color:#fff;font-family:var(--font-display);font-weight:700;
}
.mpe-search button:hover{background:var(--ember-dark)}
.mpe-quickchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.mpe-chip{
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--ink);
  background:var(--paper-2);border:1.5px solid var(--ink);border-radius:999px;
  padding:.35em .9em;text-decoration:none;
}
.mpe-chip:hover{background:var(--peach);color:var(--ink)}

/* Drifting badges (CSS-only animation) */
.mpe-badges{position:absolute;inset:0;pointer-events:none}
.mpe-badge{
  position:absolute;display:flex;flex-direction:column;align-items:center;
  background:var(--card);border:2px solid var(--ink);border-radius:16px;
  padding:.55rem .9rem;box-shadow:var(--shadow);text-align:center;
  animation:mpe-drift 7s ease-in-out infinite;
}
.mpe-badge b{font-family:var(--font-display);font-size:1.15rem;line-height:1;color:var(--ink)}
.mpe-badge span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ember);font-weight:700}
.mpe-badge--1{top:12%;right:6%}
.mpe-badge--2{top:52%;right:16%;animation-delay:-2.5s}
.mpe-badge--3{top:30%;right:30%;animation-delay:-4.5s}
@keyframes mpe-drift{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@media (max-width:900px){.mpe-badges{display:none}}

/* ---------- Bento / category tiles ---------- */
.mpe-section{padding:clamp(2rem,5vw,3.5rem) 0}
.mpe-section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.mpe-section-head .mpe-more{font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--ember)}
.mpe-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:1.4rem}
.mpe-tile{
  display:block;border:2px solid var(--ink);border-radius:var(--radius);
  padding:1.1rem;text-decoration:none;color:var(--ink);min-height:130px;
  transition:transform .15s ease;
}
.mpe-tile:hover{transform:translateY(-4px);color:var(--ink)}
.mpe-tile .mpe-tile-ico{font-size:1.7rem;line-height:1}
.mpe-tile b{display:block;font-family:var(--font-display);font-size:1.15rem;margin-top:.5rem}
.mpe-tile span{font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--ember);text-transform:uppercase;letter-spacing:.08em}
.mpe-tile--peach{background:var(--peach)}
.mpe-tile--paper2{background:var(--paper-2)}
.mpe-tile--gold{background:var(--gold-fill)}
.mpe-tile--ink{background:var(--ink);color:#FFF8EE}
.mpe-tile--ink b{color:#FFF8EE}
.mpe-tile--ink span{color:var(--peach)}
@media (max-width:820px){.mpe-tiles{grid-template-columns:repeat(2,1fr)}}

/* ---------- Post / trending cards ---------- */
.mpe-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem}
.mpe-card{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease;
}
.mpe-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink)}
.mpe-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.mpe-card-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.mpe-card-cat{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ember)}
.mpe-card h3{margin:0}
.mpe-card p{margin:0;color:var(--ink-soft);font-size:.95rem}
.mpe-card-meta{margin-top:auto;font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--ink)}
.mpe-card-meta .mpe-stars{color:var(--gold);letter-spacing:.1em}
@media (max-width:900px){.mpe-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.mpe-cards{grid-template-columns:1fr}}

/* ---------- Dark deals strip ---------- */
.mpe-deals{background:var(--ink);color:#FFF8EE;border-block:2px solid var(--ink)}
.mpe-deals h2{color:#FFF8EE}
.mpe-deals .mpe-eyebrow{color:var(--peach)}
.mpe-deals .mpe-eyebrow::before{color:var(--gold-fill)}
.mpe-deals-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.2rem}
.mpe-deal{
  border:2px solid #FFF8EE;border-radius:var(--radius);padding:1.1rem;color:#FFF8EE;text-decoration:none;display:block;
}
.mpe-deal:hover{background:#232323;color:#FFF8EE}
.mpe-deal .mpe-off{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--gold-fill);line-height:1}
.mpe-deal p{color:#EDE4D3;margin:.4rem 0 0}
.mpe-deal .mpe-code{font-family:var(--font-mono);font-weight:700;background:#FFF8EE;color:var(--ink);border-radius:8px;padding:.15em .6em;display:inline-block;margin-top:.6rem}
@media (max-width:820px){.mpe-deals-row{grid-template-columns:1fr}}

/* ---------- Newsletter ---------- */
.mpe-newsletter{
  background:var(--peach);border:2px solid var(--ink);border-radius:var(--radius);
  padding:clamp(1.4rem,4vw,2.2rem);text-align:center;
}
.mpe-newsletter p{color:var(--ink-soft);max-width:52ch;margin:.4rem auto 1.1rem}
.mpe-newsletter form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mpe-newsletter input[type="email"]{
  border:2px solid var(--ink);border-radius:999px;padding:.7em 1.2em;font:inherit;
  background:var(--card);color:var(--ink);min-width:min(320px,100%);
}

/* ---------- Single post shell ---------- */
.mpe-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--ember-bright);z-index:999}
.mpe-article-head{padding:2.2rem 0 1rem;border-bottom:2px solid var(--ink)}
.mpe-article-meta{font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--ember);text-transform:uppercase;letter-spacing:.1em}
.mpe-statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.2rem 0}
.mpe-stat{border:2px solid var(--ink);border-radius:var(--radius-sm);background:var(--card);padding:.8rem;text-align:center;min-width:0}
/* min-content traps (v1.0.4 audit): a long unbroken value (author
   name, month) must wrap inside its stat cell instead of forcing
   the grid — and the whole page — wider than a 360px phone. */
.mpe-stat b{display:block;font-family:var(--font-display);font-size:1.35rem;line-height:1.1;overflow-wrap:break-word;color:var(--brand-dark,var(--ink))}
.mpe-stat span{overflow-wrap:break-word}
.mpe-stat span{font-family:var(--font-mono);font-size:.73rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,var(--ember))}
@media (max-width:600px){.mpe-statstrip{grid-template-columns:repeat(2,1fr)}}
/* Hero trust line (v1.0.12): the small print that used to fill
   three of the four generic stat boxes (checked date, author,
   currency) now sits as one muted line directly under the H1,
   freeing the stat strip for per-post menu facts. */
.mpe-trustline{font-size:.85rem;color:var(--ink-soft);margin:.3rem 0 0}
/* Per-post stat sub-line (v1.0.12, from _mpe_hero_stats meta):
   the item detail under a hero stat's value + label. */
.mpe-stat small.mpe-stat-sub{display:block;font-size:.78rem;font-weight:400;color:var(--ink-soft);margin-top:.15rem;overflow-wrap:break-word}
/* Quick Facts panel (v1.0.12): on menu posts carrying
   _mpe_quick_facts meta this panel replaces the hero thumbnail —
   same paper-2 fill, 2px ink border and 20px radius as the image
   frame it stands in for, so the slot reads as deliberate.
   Rows are flex label/value pairs inside a 2-column grid. */
.mpe-quickfacts{background:var(--paper-2);border:2px solid var(--brand-dark,var(--ink));border-radius:20px;padding:1.1rem 1.25rem;margin-bottom:1.2rem}
.mpe-quickfacts-title{font-family:var(--font-display);font-size:1.35rem;font-weight:750;line-height:1.08;letter-spacing:-.015em;color:var(--brand-dark,var(--ink));margin:0 0 .6rem}
.mpe-quickfacts-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;margin:0}
@media (max-width:760px){.mpe-quickfacts-grid{grid-template-columns:1fr}}
.mpe-qf-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.45rem 0;border-bottom:1px solid rgba(20,20,20,.14);min-width:0}
/* v1.0.16: labels must never break mid-word — dt keeps a
   min-content floor (its longest word) and a capped share of the
   row, so long values wrap around the label, never through it. */
.mpe-qf-row dt{font-family:var(--font-mono);font-size:.83rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,var(--ember));flex:0 0 auto;flex-shrink:0;min-width:min-content;max-width:46%;overflow-wrap:normal;word-break:normal}
.mpe-qf-row dd{margin:0;text-align:right;font-weight:600;color:var(--ink);flex:1 1 auto;min-width:0;overflow-wrap:break-word}
@media (max-width:760px){.mpe-qf-row dt{max-width:44%}}
/* Small-print note for article content (v1.0.12): price-basis
   footnotes under the Quick Facts panel. */
.mpe-note{font-size:.85rem;color:var(--ink-soft);border-top:1px solid rgba(20,20,20,.14);padding-top:.6rem}
.mpe-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2rem;align-items:start;padding:1.5rem 0 3rem}
/* Grid-blowout cure (v1.0.5): below 900px the single column must
   stay minmax(0,1fr). Plain 1fr is minmax(auto,1fr) — its automatic
   minimum is the content's min-content width, so wide descendants
   (the bordered .mpe-tablewrap frames) stretched the whole column,
   and with it every paragraph line box, wider than a phone screen:
   body text was clipped mid-word at the right edge (the article
   head was unaffected — it is not a grid item). The grid items
   themselves also get min-width:0 (see .mpe-article-body below). */
@media (max-width:900px){.mpe-layout{grid-template-columns:minmax(0,1fr)}.mpe-sidebar{position:static;max-height:none;overflow:visible}}
/* Sidebar stick (v1.0.22): the ASIDE sticks, not the TOC box inside
   it — a sticky element can only travel within its containing
   block, and the old .mpe-toc sticky was trapped in a content-height
   aside. The aside caps at viewport height and scrolls internally
   when the TOC runs long; the ≤900px reset above keeps the stacked
   single-column sidebar out of that scroll box entirely. */
.mpe-sidebar{min-width:0;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}

/* Sticky category pill-nav (menu posts) — v1.0.17 RESTRUCTURE.
   History: v1.0.2–v1.0.9 wrapped the pills into multiple rows on
   desktop; v1.0.10 made the nav itself one sticky, sideways-
   scrollable row at every width (user decision 2026-10-21).
   v1.0.17 splits the two jobs that single element carried: an
   OUTER bar (.mpe-pillbar) owns position:sticky and a DARK
   background, an INNER strip (.mpe-pillnav) owns the sideways
   scroll. Sticky + overflow-x on the SAME element is a known
   iOS Safari failure class — the strip would not swipe on the
   user's phone — so the jobs now live on separate elements.
   Sticking for the whole article stays structural: in
   single.php the bar shares its .mpe-wrap parent with the
   layout grid, so the sticky containing block spans the full
   article height. The bar is dark on every post: the brand
   dark colour when the post carries _mpe_brand meta, ink
   otherwise. Pills are translucent cream on the dark bar; the
   ACTIVE pill flips to the brand accent (paper on unbranded
   posts) with dark text. theme.js measures the OUTER bar for
   --mpe-nav-offset and the settle loop, and scrolls the INNER
   strip for the scrollspy glide. */
.mpe-pillbar{
  position:sticky;top:12px;z-index:50;
  background:var(--brand-dark,var(--ink));
  border-radius:14px;padding:.55rem .6rem;
}
/* WordPress admin bar is 32px tall (46px at <=782px): keep the stuck
   bar fully below it for logged-in editors. */
body.admin-bar .mpe-pillbar{top:44px}
@media (max-width:782px){body.admin-bar .mpe-pillbar{top:58px}}
.mpe-pillnav{
  display:flex;flex-wrap:nowrap;gap:8px;
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;overscroll-behavior-x:contain;
  scrollbar-width:none;background:transparent;
}
.mpe-pillnav::-webkit-scrollbar{display:none}
.mpe-pillnav a{
  flex:0 0 auto;white-space:nowrap;max-width:100%;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  border:1.5px solid rgba(255,248,238,.45);border-radius:999px;padding:.4em 1em;
  color:#FFF8EE;text-decoration:none;background:rgba(255,248,238,.08);
}
/* v1.0.18: pin the pill TEXT to cream on hover/press — the global
   .mpe a:hover colour (ember-dark, same specificity, earlier in
   the file) otherwise recolours pill labels orange-red over the
   dark bar while the reader presses or hovers a pill. */
.mpe-pillnav a:hover,.mpe-pillnav a:active{background:rgba(255,248,238,.18);color:#FFF8EE}
.mpe-pillnav a.is-active{background:var(--brand-accent,var(--paper));color:var(--brand-dark,var(--ink));border-color:transparent}
/* The active pill keeps its accent fill + dark text on hover too. */
.mpe-pillnav a.is-active:hover,.mpe-pillnav a.is-active:active{background:var(--brand-accent,var(--paper));color:var(--brand-dark,var(--ink))}
/* Pill-nav sizing on phones: the single-row strip itself is the
   base behaviour at all widths (see the .mpe-pillnav rule above);
   at <=760px only the pill sizing tightens (smaller font, tighter
   padding). Since v1.0.6 the scrollspy scrolls THIS STRIP ITSELF
   (the nav element only, never the window) so the active pill
   stays visible as the reader moves through sections. v1.0.5: a
   pill wider than the phone screen truncates INSIDE its own
   border with an ellipsis (max-width:82vw) instead of running off
   the right edge cut mid-word at rest — that cap stays
   mobile-only; on desktop the strip scrolls instead of
   truncating. */
@media (max-width:760px){
  .mpe-pillnav a{font-size:.85rem;padding:.35em .85em;max-width:82vw;overflow:hidden;text-overflow:ellipsis}
}

/* Anchor landing offset (v1.0.8: MEASURED, set from theme.js):
   jumping to a section from the pill-nav (or TOC) must land the
   heading BELOW the sticky nav, not hidden behind it. Since
   v1.0.10 the nav is a single-row strip at every width, so its
   height is stable (sticky top + one pill row); theme.js still
   measures the pill bar (.mpe-pillbar — its offsetHeight + 100px
   of air + its sticky top offset) and publishes it as --mpe-nav-offset on
   <html>, and the rules below just consume it. The var fallbacks
   (176px desktop / 168px at <=760px, raised in v1.0.11 — native
   landings kept coming up ~90-100px short) keep landings sane when JS is
   off or the page has no pill-nav (blog / TOC layouts). No
   separate admin-bar rules are needed: the measured sticky top
   already includes the admin-bar offset (44px / 58px) because
   theme.js reads the nav's computed top. */
.mpe-article-body h2,.mpe-article-body h3{scroll-margin-top:var(--mpe-nav-offset,176px)}
@media (max-width:760px){
  .mpe-article-body h2,.mpe-article-body h3{scroll-margin-top:var(--mpe-nav-offset,168px)}
}

/* Content figures (v1.0.2, cap reduced in v1.0.3): centred and
   capped, so article images / designed menu-card images sit neatly
   under their tables instead of rendering at native width,
   left-aligned, with blank space on the right. v1.0.3: the cap
   drops 760px -> 600px (760px still dwarfed the text column and
   phones), and at <=640px figures take the full content-column
   width — never wider than the screen. Scoped to .mpe-content
   figures only — hero / header images and the sidebar are
   untouched. The .mpe-menucard component figure is excluded: it
   keeps its own 430px card width and its 150px plate-disc image
   must not be stretched. */
.mpe-content figure:not(.mpe-menucard){
  margin:1.5rem auto;text-align:center;
}
.mpe-content figure:not(.mpe-menucard) img{
  display:block;margin-left:auto;margin-right:auto;
  width:min(100%,600px);max-width:100%;height:auto;
}
@media (max-width:640px){
  .mpe-content figure:not(.mpe-menucard) img{width:100%}
}

/* ---------- Price rows / tables ---------- */
.mpe-article table,.mpe-content table{
  width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;background:var(--card);
  border:2px solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;font-size:.98rem;
}
/* Responsive table wrappers (v1.0.3): theme.js wraps every content
   table in .mpe-tablewrap (progressive enhancement — without JS the
   base rule above still applies). The WRAPPER owns the frame
   (border / radius / card background) and the outer margin, and
   clips by scrolling horizontally; the table inside drops its own
   frame and margin. Wide tables (6+ columns, e.g. the allergen
   and nutrition tables) get a 640px minimum width plus a sticky
   first column with the card background, so item names stay
   visible while scrolling sideways. Exactly-5-column tables get
   .mpe-tablewrap--fit and fit the phone screen (mobile rules
   below). Narrow tables keep width:100% with no minimum and fit
   the phone screen naturally. */
.mpe-tablewrap{
  position:relative;
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  margin:1rem 0 1.5rem;background:var(--card);
  border:2px solid var(--ink);border-radius:var(--radius-sm);
}
/* Scroll affordance (v1.0.21): scrollable wrappers fade out at
   the right edge while more columns hide off-screen, so the
   reader can tell the table continues. theme.js adds
   .mpe-scrolled once the wrapper is scrolled sideways (or when
   its content fits without scrolling) and the fade clears. */
.mpe-tablewrap--wide::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
  background:linear-gradient(to right,transparent,var(--paper));
  pointer-events:none;opacity:1;transition:opacity .3s;
}
.mpe-tablewrap--wide.mpe-scrolled::after{opacity:0}
.mpe-tablewrap>table{
  margin:0;border:0;border-radius:0;background:transparent;overflow:visible;
}
.mpe-tablewrap--wide>table{min-width:640px}
/* Extra-wide tables (v1.0.5): 7+ columns (e.g. the 8-column
   nutrition table) get real breathing room instead of squeezing
   into the content column with multi-line wrapped headers.
   theme.js adds .mpe-tablewrap--xwide alongside --wide; the
   wrapper scrolls horizontally, the sticky first column (below)
   keeps product names visible. */
.mpe-tablewrap--xwide>table{min-width:840px}
.mpe-tablewrap--wide th:first-child,
.mpe-tablewrap--wide td:first-child{
  position:sticky;left:0;z-index:1;background:var(--card);
  box-shadow:inset -2px 0 0 var(--ink);
}
.mpe-tablewrap--wide th:first-child{background:var(--brand-dark,var(--paper-2));z-index:2}
/* Mobile tightening: wrapped tables only (the [nutrition_facts]
   label table is never wrapped and keeps its own tight styling). */
@media (max-width:640px){
  .mpe-tablewrap>table{font-size:.92rem}
  .mpe-tablewrap th,.mpe-tablewrap td{padding:.5rem .6rem}
  /* Fit tables (v1.0.21): exactly-5-column tables fit the screen
     instead of scrolling — fixed layout, the item/name column
     takes 42% and the other four columns share the rest equally,
     with tighter type so every column is visible at a glance. */
  .mpe-tablewrap--fit>table{min-width:0;width:100%;table-layout:fixed;font-size:.82rem}
  .mpe-tablewrap--fit>table th,
  .mpe-tablewrap--fit>table td{padding:.45rem .4rem}
  .mpe-tablewrap--fit>table th:first-child,
  .mpe-tablewrap--fit>table td:first-child{width:42%;white-space:normal}
  .mpe-tablewrap--fit>table th{font-size:.68rem;letter-spacing:.02em;white-space:normal}
  .mpe-tablewrap--fit>table td{white-space:nowrap}
  /* Scrolling tables (6+ columns): cap the sticky name column
     so it never eats most of the phone screen mid-scroll. */
  .mpe-tablewrap--wide th:first-child,
  .mpe-tablewrap--wide td:first-child{max-width:46vw}
}
.mpe-article th,.mpe-content th{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  text-align:left;background:var(--brand-dark,var(--paper-2));color:var(--ink);padding:.7rem .9rem;border-bottom:2px solid var(--ink);
}
/* Branded posts (v1.0.17): the header row takes the dark brand
   colour above, so its text flips to cream — light text only
   ever sits on dark surfaces (the theme's contrast rule).
   Unbranded posts keep the paper-2 header with ink text,
   exactly as before. */
.mpe-branded .mpe-article th,.mpe-branded .mpe-content th{color:#FFF8EE}
/* Branded leftovers (v1.0.18): two ember accents the v1.0.17
   var-swap pass missed. Scoped to .mpe-branded so unbranded
   posts render exactly as before (ember, via the base rules). */
/* Meta-line category links above the H1 take the dark brand. */
.mpe-branded .mpe-article-meta a{color:var(--brand-dark)}
/* The intro drop cap takes the brand colour. */
.mpe-branded .mpe-article-body>p:first-of-type::first-letter{color:var(--brand)}
.mpe-article td,.mpe-content td{padding:.65rem .9rem;border-bottom:1px solid #EAD9C2;vertical-align:top}
.mpe-article tr:last-child td,.mpe-content tr:last-child td{border-bottom:0}
.mpe-row{display:flex;align-items:baseline;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #EAD9C2}
.mpe-row .mpe-dots{flex:1;border-bottom:2px dotted #B9A888;transform:translateY(-4px)}
.mpe-row .mpe-kcal{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--ember)}
.mpe-row .mpe-item b{font-family:var(--font-display)}
.mpe-row .mpe-item small{display:block;color:var(--ink-soft)}

/* ============================================================
   MENU CARD — the new signature component (Round 3 style)
   Distinct from frmenus (portrait/maroon/gold) and
   hackthemenu (wide infographic): round plate-photo disc,
   numbered rows, prices in dark pills, light strip with a
   rotated brand stamp carrying the site's OWN domain.
   Optimised to be screenshotted / found in Google Images.
   ============================================================ */
.mpe-menucard{
  margin:1.6rem auto 2rem;max-width:430px;background:var(--card);
  border:2.5px solid var(--ink);border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow);
}
.mpe-menucard-head{position:relative;padding:1.4rem 1.2rem .4rem;text-align:center}
.mpe-menucard-disc{
  width:150px;height:150px;margin:0 auto;border-radius:50%;object-fit:cover;
  border:3px solid var(--ink);box-shadow:0 0 0 8px var(--peach-soft),0 0 0 10.5px var(--ink);
  display:block;background:var(--paper-2);
}
.mpe-menucard-eyebrow{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-top:1rem}
.mpe-menucard-title{font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1.1;margin:.2rem 0 0}
.mpe-menucard-rows{list-style:none;margin:.8rem 0 0;padding:0 1.2rem}
.mpe-menucard-rows li{
  display:flex;align-items:center;gap:.7rem;padding:.55rem 0;
  border-bottom:1px dashed #CBB894;
}
.mpe-menucard-rows li:last-child{border-bottom:0}
.mpe-menucard-num{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:#FFF8EE;
  background:var(--ember);border-radius:50%;width:26px;height:26px;flex:0 0 26px;
  display:inline-flex;align-items:center;justify-content:center;
}
.mpe-menucard-item{flex:1;min-width:0}
.mpe-menucard-item b{font-family:var(--font-display);display:block;line-height:1.25}
.mpe-menucard-item small{color:var(--ink-soft);font-family:var(--font-mono);font-size:.72rem;font-weight:700}
.mpe-menucard-price{
  font-family:var(--font-mono);font-weight:700;font-size:.92rem;white-space:nowrap;
  background:var(--ink);color:#FFF8EE;border-radius:999px;padding:.32em .8em;
}
.mpe-menucard-strip{
  margin-top:1rem;background:var(--peach-soft);border-top:2px solid var(--ink);
  padding:.65rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
}
.mpe-menucard-strip .mpe-verified{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.mpe-menucard-stamp{
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.06em;
  color:var(--ember-dark);border:2px solid var(--ember);border-radius:8px;
  padding:.25em .6em;transform:rotate(-3deg);text-transform:uppercase;background:var(--card);
  white-space:nowrap;
}
.mpe-menucard--auto figcaption{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);text-align:center;padding:.5rem}
figure.mpe-menucard{padding:0}
figure.mpe-menucard img.mpe-menucard-disc{margin-top:1.4rem}

/* ============================================================
   MENU CARD v2 — MENU BOARD (v1.0.6, user order 2026-10-21)
   The v1 card (narrow 430px, round plate disc, numbered rows,
   price pills) did not read as a menu while scrolling: its
   width differed from the table above it and nothing tied the
   two together. Real restaurant menu boards / printed table
   menus share one grammar — a wide appetising photo panel, a
   bold category header band, then item...price rows in clean
   columns. v2 speaks that grammar in Paper & Ember colours:
   - card spans the FULL content width, exactly like its table;
   - photo becomes a wide banner across the top;
   - eyebrow + title move into a dark ink header band (the
     board's category panel header);
   - rows lose the numbers and pills: name + kcal on the left,
     a dotted leader, price in bold ink on the right — the
     printed-menu row. Two columns on wide screens.
   Markup is unchanged apart from the banner image size/class,
   so every existing [menu_card] upgrades in place.
   ============================================================ */
.mpe-menucard{
  max-width:100%;margin:1.2rem 0 2.2rem;border-radius:18px;
}
/* Pairing: a card that directly follows its table sits closer
   to it, so table + card read as one menu panel. */
.mpe-tablewrap + .mpe-menucard{margin-top:-.4rem}
figure.mpe-menucard img.mpe-menucard-disc{
  margin:0;width:100%;height:210px;object-fit:cover;display:block;
  border:0;border-radius:0;box-shadow:none;background:var(--paper-2);
}
@media (max-width:640px){
  figure.mpe-menucard img.mpe-menucard-disc{height:150px}
}
.mpe-menucard-head{
  background:var(--ink);color:#FFF8EE;text-align:left;
  padding:.8rem 1.2rem;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}
.mpe-menucard-head .mpe-menucard-eyebrow{color:var(--peach);margin:0}
.mpe-menucard-head .mpe-menucard-title{color:#FFF8EE;font-size:1.45rem}
.mpe-menucard-rows{
  padding:.4rem 1.2rem .6rem;
}
@media (min-width:761px){
  .mpe-menucard-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:2.2rem}
}
.mpe-menucard-rows li{align-items:baseline;border-bottom:0;padding:.5rem 0}
.mpe-menucard-num{display:none}
.mpe-menucard-item{border-bottom:2px dotted #B9A888;padding-bottom:.12rem;margin-right:.15rem}
.mpe-menucard-item b{display:inline}
.mpe-menucard-item small{display:inline;margin-left:.55rem}
.mpe-menucard-price{
  background:transparent;color:var(--ink);border-radius:0;padding:0;
  font-family:var(--font-display);font-size:1.05rem;font-weight:800;white-space:nowrap;
}
.mpe-menucard-strip{margin-top:.4rem}

/* ---------- Blog editorial ---------- */
.mpe-layout-blog .mpe-article-body{max-width:720px}
/* overflow-wrap (v1.0.3 audit): a long unbroken word or URL in
   article text must wrap instead of forcing horizontal overflow
   on a 360px phone. No visual change for normal text.
   min-width:0 + max-width:100% (v1.0.5): as a grid item of
   .mpe-layout the body must be allowed to shrink below its
   content's min-content width, otherwise wide children stretch
   every paragraph past the phone's right edge. The more specific
   .mpe-layout-blog cap (720px) above still wins on blog posts. */
.mpe-article-body{font-size:1.06rem;overflow-wrap:break-word;min-width:0;max-width:100%}
/* Image placeholder tone (v1.0.4): while an article image is still
   loading (lazy-load on a slow phone connection) its reserved box
   shows warm paper, never a black void. Once loaded, the photo
   paints over the background as normal. Aspect ratio needs no
   extra rule: .mpe img{height:auto} plus the width/height
   attributes WordPress emits give browsers the ratio to reserve. */
.mpe-article-body img{background:var(--paper-2)}
/* Body-top featured image (v1.0.23, user order): on non-menu
   layouts the featured image prints at the top of the body; a
   portrait source at natural aspect spanned ~2 phone screens.
   Fit it as a banner instead — full column width, 16/9 crop,
   cover, capped height. The inline border/radius/margin style
   from single.php still applies on top of this rule. */
.mpe-article-body .mpe-heroimg{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;max-height:460px;display:block}
.mpe-article-body>p:first-of-type::first-letter{
  font-family:var(--font-display);font-weight:800;font-size:3.4em;float:left;
  line-height:.85;padding:.06em .14em 0 0;color:var(--ember);
}
.mpe-pullquote{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1.3;
  border-left:6px solid var(--ember-bright);padding:.2rem 0 .2rem 1.1rem;margin:1.8rem 0;color:var(--ink);
}
.mpe-tip{
  background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--radius-sm);
  padding:1rem 1.1rem;margin:1.6rem 0;
}
.mpe-tip b{font-family:var(--font-mono);font-size:.8rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ember);display:block;margin-bottom:.3rem}
.mpe-toc{
  background:var(--card);border:2px solid var(--ink);
  border-radius:var(--radius);padding:1.1rem 1.2rem;
}
.mpe-toc h4{font-family:var(--font-mono);font-size:.8rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,var(--ember));margin:0 0 .6rem}
.mpe-toc ol{margin:0;padding-left:1.2rem}
.mpe-toc a{color:var(--ink);text-decoration:none}
.mpe-toc a:hover,.mpe-toc a.is-active{color:var(--brand,var(--ember));font-weight:700}
.mpe-authorcard{
  display:flex;gap:1rem;align-items:center;background:var(--card);
  border:2px solid var(--ink);border-radius:var(--radius);padding:1.1rem;margin:2rem 0;
}
.mpe-authorcard img{border-radius:50%;border:2px solid var(--ink);flex:0 0 auto}
.mpe-authorcard p{margin:.2rem 0 0;color:var(--ink-soft);font-size:.95rem}
.mpe-facts{
  background:var(--ink);color:#FFF8EE;border-radius:var(--radius);padding:1.2rem;position:sticky;top:16px;
}
.mpe-facts h4{color:var(--peach);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.mpe-facts dl{margin:0}
.mpe-facts dt{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--peach);overflow-wrap:break-word}
.mpe-facts dd{margin:0 0 .8rem;font-weight:600;color:#FFF8EE;overflow-wrap:break-word}
/* Hero min-content trap (v1.0.4 audit): a long unbroken word in the
   article title or lede wraps instead of widening the page. */
.mpe-article-head h1,.mpe-article-head .mpe-lede{overflow-wrap:break-word}
.mpe-faq details{border:2px solid var(--ink);border-radius:var(--radius-sm);background:var(--card);padding:.9rem 1.1rem;margin:.6rem 0}
.mpe-faq summary{font-family:var(--font-display);font-weight:700;cursor:pointer}
/* FAQ accents (v1.0.17 brand vars): the disclosure marker takes
   the brand primary on branded posts — the currentColor
   fallback keeps unbranded posts exactly as before (the marker
   inherits the summary's ink). Hover darkens to brand-dark on
   branded posts only; the inherit fallback preserves today's
   no-change hover on unbranded posts. */
.mpe-faq summary::marker{color:var(--brand,currentColor)}
.mpe-faq summary:hover{color:var(--brand-dark,inherit)}

/* ============================================================
   NUTRITION — approved fix: on mobile the facts label and
   macros stack FULL-WIDTH, never squeezed side-by-side.
   ============================================================ */
.mpe-nutrition-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:1.6rem;align-items:start;margin:1.4rem 0}
@media (max-width:760px){
  /* minmax(0,1fr), not plain 1fr — same v1.0.5 blowout cure as .mpe-layout */
  .mpe-nutrition-grid{grid-template-columns:minmax(0,1fr)}
  .mpe-factslabel{max-width:none;width:100%}
}
.mpe-factslabel{
  background:#fff;border:3px solid var(--ink);border-radius:6px;padding:1rem 1.1rem;color:var(--ink);
}
.mpe-factslabel h3{font-size:1.9rem;font-weight:800;border-bottom:12px solid var(--ink);padding-bottom:.3rem;margin:0}
.mpe-factslabel .mpe-serving{display:flex;justify-content:space-between;gap:1rem;border-bottom:6px solid var(--ink);padding:.35rem 0;font-weight:600}
.mpe-factslabel .mpe-calrow{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding:.3rem 0}
.mpe-factslabel .mpe-calrow b{font-size:2rem;font-family:var(--font-display)}
.mpe-factslabel table{border:0;margin:0;background:transparent}
.mpe-factslabel td,.mpe-factslabel th{border-bottom:1px solid #D8C7A8;padding:.35rem 0;background:transparent;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:.92rem}
.mpe-factslabel td:last-child,.mpe-factslabel th:last-child{text-align:right;font-weight:700;white-space:nowrap}
/* Label header contrast (v1.0.22): the label is a white FDA panel,
   but its "% Daily Value*" th inherited the generic header colour —
   cream #FFF8EE on branded posts — and vanished on white. Pin the
   label's header cells to ink on the label's own white; the
   .mpe-branded selector matches the cream rule's specificity and
   sits later in the sheet, so it wins where the two overlap. */
.mpe-factslabel th,
.mpe-branded .mpe-factslabel th{color:var(--ink);background:#fff}
.mpe-toggle{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;margin-bottom:1rem}
.mpe-toggle button{
  border:0;background:var(--card);color:var(--ink);cursor:pointer;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;padding:.55em 1.1em;
}
.mpe-toggle button.is-active{background:var(--ink);color:#FFF8EE}
.mpe-macro{margin:0 0 1rem}
.mpe-macro-head{display:flex;justify-content:space-between;gap:1rem;font-weight:600}
.mpe-macro-head .mpe-macro-val{font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.mpe-macro-bar{height:14px;background:var(--paper-2);border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;margin-top:.3rem}
.mpe-macro-fill{height:100%;background:var(--ember-bright)}
.mpe-macro--protein .mpe-macro-fill{background:var(--green)}
.mpe-macro--fat .mpe-macro-fill{background:var(--gold-fill)}
.mpe-macro--carbs .mpe-macro-fill{background:var(--ember-bright)}
.mpe-bigcal{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,8vw,4.6rem);line-height:1;color:var(--ink)}
.mpe-bigcal small{font-size:1.1rem;color:var(--ember);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;display:block}
.mpe-score{display:flex;align-items:center;gap:1rem;margin:1.2rem 0}
.mpe-score-ring{
  --p:84;width:92px;height:92px;border-radius:50%;flex:0 0 92px;
  background:conic-gradient(var(--green) calc(var(--p)*1%),var(--paper-2) 0);
  display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);
}
.mpe-score-ring b{background:var(--card);border-radius:50%;width:66px;height:66px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.2rem}
.mpe-allergens{display:flex;flex-wrap:wrap;gap:8px;margin:.8rem 0}
.mpe-allergen{
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;border:1.5px solid var(--ink);
  border-radius:999px;padding:.35em .9em;background:var(--card);color:var(--ink);
}
.mpe-allergen--warn{background:var(--peach);color:var(--ember-dark);border-color:var(--ember-dark)}

/* ============================================================
   COUPON — ticket cards with perforated edge + copy button
   ============================================================ */
.mpe-coupon{
  display:grid;grid-template-columns:170px minmax(0,1fr);background:var(--card);
  border:2.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;margin:1.2rem 0;
  box-shadow:var(--shadow);
}
.mpe-coupon-off{
  background:var(--ember);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.2rem .8rem;text-align:center;position:relative;
}
.mpe-coupon-off::after{
  content:"";position:absolute;top:0;right:-2px;height:100%;
  border-right:3px dashed var(--paper);
}
.mpe-coupon-off b{font-family:var(--font-display);font-size:2.3rem;line-height:1}
.mpe-coupon-off span{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mpe-coupon-body{padding:1.1rem 1.2rem}
.mpe-coupon-body h3{margin:0 0 .3rem}
.mpe-coupon-body p{margin:0;color:var(--ink-soft)}
.mpe-coupon-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:.9rem}
.mpe-coupon-code{
  font-family:var(--font-mono);font-weight:700;letter-spacing:.14em;font-size:1.05rem;
  border:2px dashed var(--ink);border-radius:10px;padding:.45em .9em;background:var(--paper-2);color:var(--ink);
}
.mpe-copybtn{
  border:2px solid var(--ink);background:var(--ink);color:#FFF8EE;cursor:pointer;
  border-radius:999px;padding:.55em 1.2em;font-family:var(--font-display);font-weight:700;
}
.mpe-copybtn:hover{background:var(--ember-dark);border-color:var(--ember-dark)}
.mpe-copybtn.is-copied{background:var(--green);border-color:var(--green);color:#fff}
.mpe-coupon-expiry{font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--ember);text-transform:uppercase;letter-spacing:.08em}
.mpe-coupon--expired{opacity:.62}
.mpe-coupon--expired .mpe-coupon-off{background:var(--ink-soft)}
.mpe-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.4rem 0}
.mpe-step{border:2px solid var(--ink);border-radius:var(--radius);background:var(--card);padding:1.1rem}
.mpe-step-num{
  width:40px;height:40px;border-radius:50%;background:var(--ember);color:#fff;
  font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.15rem;
}
@media (max-width:700px){
  /* minmax(0,1fr), not plain 1fr — same v1.0.5 blowout cure as .mpe-layout */
  .mpe-coupon{grid-template-columns:minmax(0,1fr)}
  .mpe-coupon-off::after{border-right:0;border-bottom:3px dashed var(--paper);top:auto;bottom:-2px;right:0;width:100%;height:0}
  .mpe-steps{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Reviews slider (v1.0.19) ----------
   [reviews_slider]: real Google reviews from the _mpe_reviews
   post meta, one card per view. The track is a flex row of
   100%-width slides; theme.js translates it (autoplay 5s,
   pause on hover/focus/touch, swipe). Without JS the viewport
   clip leaves the first review showing and the controls inert —
   the markup itself stays valid and readable. */
.mpe-reviews-slider{background:var(--card);border:1.5px solid var(--brand-dark,var(--ink));border-radius:16px;padding:1.1rem 1.25rem;margin:1.4rem 0}
.mpe-rs-viewport{overflow:hidden}
.mpe-rs-track{display:flex;transition:transform .6s ease}
.mpe-rs-slide{flex:0 0 100%;width:100%;box-sizing:border-box;margin:0;padding:.15rem .1rem}
.mpe-rs-stars{color:#C08A00;font-size:1.15rem;line-height:1;letter-spacing:.18em;margin-bottom:.55rem}
.mpe-rs-text{margin:0 0 .7rem;font-size:1.05rem;line-height:1.6;color:var(--ink)}
.mpe-rs-meta{font-size:.88rem;color:var(--ink-soft)}
.mpe-rs-name{font-weight:700;color:var(--ink)}
.mpe-rs-src{font-family:var(--font-mono);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,var(--ember))}
.mpe-rs-ui{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.95rem}
.mpe-rs-prev,.mpe-rs-next{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--font-body);font-size:1.35rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}
.mpe-rs-prev:hover,.mpe-rs-next:hover{background:var(--brand-dark,var(--ink));color:#FFF8EE}
.mpe-rs-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}
.mpe-rs-dot{width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer}
.mpe-rs-dot.is-active{background:var(--brand,var(--ember));border-color:var(--brand,var(--ember))}
@media (prefers-reduced-motion:reduce){.mpe-rs-track{transition:none}}
@media (max-width:640px){
  .mpe-reviews-slider{padding:.95rem 1rem}
  .mpe-rs-text{font-size:.98rem}
}

/* ---------- Footer (balanced columns) ---------- */
.mpe .site-footer{background:var(--ink);color:#FFF8EE}
/* v1.0.1: band that outputs the mpe-footer-1..4 sidebars (inc/footer.php).
   Ink background on purpose: the column styles below use light text
   (peach headings, #FFF8EE links) designed for the dark footer —
   a light band would break the theme's contrast rule. */
.mpe-footer-band{background:var(--ink);color:#FFF8EE;border-top:3px solid var(--ember-bright)}
.mpe-footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;padding:2.4rem 0 1.2rem}
@media (max-width:820px){.mpe-footer-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.mpe-footer-cols{grid-template-columns:1fr}}
.mpe-footer-cols h4{color:var(--peach);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.mpe-footer-cols a{color:#FFF8EE;text-decoration:none}
.mpe-footer-cols a:hover{color:var(--peach)}
.mpe-footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.mpe-footer-fine{border-top:1px solid #3D3831;padding:1rem 0 1.6rem;font-size:.85rem;color:#D8CFBE;text-align:center}

/* ---------- Utilities / motion ---------- */
.mpe-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mpe :focus-visible{outline:3px solid var(--ember-bright);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .mpe-badge{animation:none}
  .mpe-btn,.mpe-card,.mpe-tile{transition:none}
}
@media (max-width:390px){
  body.mpe{font-size:16px}
  .mpe-search{flex-direction:column;border-radius:20px}
  .mpe-search button{width:100%}
}