/*
 * Mise en Place — VeloCMS theme (slug: "mise-en-place")
 * 1:1 port of the founder's Claude-Design canvas "Mise en Place Theme.dc.html".
 *
 * "A well-run kitchen's sense of order." Step numerals as typographic objects,
 * an ingredient rail in a tinted olive column, brick-red for every action.
 * For recipe, coffee, tea, wine, spirits and cigar writers.
 *
 * Palette: paper #EFE9DC · olive #5B6236 · brick #A6432E · charcoal #22201C ·
 * shell #1B1916 (canvas bg only, not shipped in the theme surface itself).
 * Display: Young Serif (400 only, by design) · Body/UI: Karla · Mono: JetBrains Mono
 *
 * All values below are copied verbatim from the design's inline styles and the
 * "7 · Engineering notes" spec block (color tokens, contrast ratios, spacing/
 * radius scale, hover table, motion keyframes, mobile-drawer spec, RTL rules).
 * No rounding, no reinterpretation.
 *
 * Scoped to [data-theme="mise-en-place"] (NOT main-scoped) so /shop and
 * /products/* resolve the same tokens. P-094 token bridge at the bottom.
 */

/* ═══════════════════ COLOR TOKENS (engineering notes §Tokens) ═══════════════════ */
[data-theme="mise-en-place"] {
  /* canonical — --vb-color-* from the design's data-screen-label wrappers */
  --mep-bg: #EFE9DC;            /* paper — oklch(0.935 0.020 95) */
  --mep-text: #22201C;          /* charcoal — oklch(0.253 0.008 85) */
  --mep-primary: #A6432E;       /* brick — oklch(0.502 0.123 32) */
  --mep-accent: #5B6236;        /* olive — oklch(0.477 0.072 118) */

  /* derived (engineering notes) */
  --mep-tint: #E3DFCC;          /* color-mix(in oklab, accent 12%, bg) — image plate bg */
  --mep-primary-hover: #8F3A28; /* brick pressed/hover */
  --mep-hairline: rgba(34, 32, 28, 0.15);
  --mep-hairline-soft: rgba(34, 32, 28, 0.12);
  --mep-muted: #6B6558;         /* meta text — 4.8:1 on paper */
  --mep-body: #33302A;          /* prose body text */
  --mep-nav-idle: #514C42;      /* idle nav link color */
  --mep-cream: #EFE9DC;         /* on dark surfaces (footer) */
  --mep-cream-muted: #B8B1A0;   /* footer secondary text */
  --mep-cream-faint: #8E8878;   /* footer copyright text */
  --mep-cream-label: #C9CFA3;   /* footer/accent-band section labels (tinted olive-cream) */
  --mep-shell: #22201C;         /* footer + code-block background (same as text token) */
  --mep-amp: #D98A6F;           /* footer brand ampersand accent */

  /* pill / chip surfaces */
  --mep-chip-bg: rgba(91, 98, 54, 0.14);   /* olive-tinted chip background */
  --mep-chip-fg: #454A26;                  /* olive-tinted chip text */
  --mep-chip-border: rgba(91, 98, 54, 0.45);

  /* fonts (registered — getThemeFontVars("mise-en-place")) */
  --mep-heading-font: var(--font-young-serif), "Iowan Old Style",
    "Palatino Linotype", Georgia, serif;
  --mep-body-font: var(--font-karla), "Avenir Next", "Helvetica Neue",
    system-ui, sans-serif;
  --mep-mono-font: var(--font-jetbrains-mono), ui-monospace, "SFMono-Regular",
    Consolas, monospace;

  /* layout scale (engineering notes §Spacing & radius) */
  --mep-container: 1328px;
  --mep-container-product: 1240px;
  --mep-container-article: 1152px;
  --mep-container-prose: 760px;
  --mep-gutter: 48px;
  --mep-gutter-mobile: 20px;

  /* also expose the engine --velo-* names so any shared component that reads
     them inherits the Mise en Place palette. (The bespoke MiseEnPlaceMobileMenu
     drawer reads --mep-* directly; these remain for shared consumers.) */
  --velo-bg: var(--mep-bg);
  --velo-fg: var(--mep-text);
  --velo-border: var(--mep-hairline);
  --velo-accent: var(--mep-primary);
}

/* Body font inheritance for the whole theme surface */
[data-theme="mise-en-place"] {
  font-family: var(--mep-body-font);
  color: var(--mep-text);
  background: var(--mep-bg);
}

/* ═══════════════════ MOTION — entrances only (design <style> block) ═══════════════════ */
@keyframes mep-rise {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}
@keyframes mep-pan {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* NB: opacity is never animated — SSR content is fully visible on first frame
   (P-068). Entrance = translateY, 600ms cubic-bezier(0.22,1,0.36,1) both,
   sibling stagger 80ms, hero only (engineering notes §Motion & video slot). */
[data-theme="mise-en-place"] .mep-anim-copy {
  animation: mep-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-theme="mise-en-place"] .mep-anim-media {
  animation: mep-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}
/* ambient hero-loop pan stand-in (video plays this via animation on the element
   itself; poster gets the same pan so the "watch the kitchen" affordance reads
   consistently even before a real <video> lands) */
[data-theme="mise-en-place"] .mep-pan {
  animation: mep-pan 10s linear infinite alternate;
}

/* No bounces, no springs, no pulses (engineering notes: "No pulses, no springs,
   no bounces"). Reduced motion forces everything to 0.01ms verbatim per the
   design's inline <style> guard. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="mise-en-place"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════ CHROME — header ═══════════════════ */
[data-theme="mise-en-place"] .mep-header {
  border-block-end: 1px solid var(--mep-hairline);
  background: var(--mep-bg);
  position: sticky;
  top: 0;
  z-index: 40; /* matches engineering notes header z-index */
}
[data-theme="mise-en-place"] .mep-nav-inner {
  max-width: var(--mep-container);
  margin: 0 auto;
  padding: 0 var(--mep-gutter);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
[data-theme="mise-en-place"] .mep-brand {
  font-family: var(--mep-heading-font);
  font-size: 23px;
  color: var(--mep-text);
  text-decoration: none;
}
[data-theme="mise-en-place"] .mep-brand-amp {
  color: var(--mep-primary);
}
[data-theme="mise-en-place"] .mep-nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}
[data-theme="mise-en-place"] .mep-nav-link {
  font-family: var(--mep-body-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mep-nav-idle);
  text-decoration: none;
  transition: color 150ms ease-out;
}
[data-theme="mise-en-place"] .mep-nav-link:hover {
  color: var(--mep-primary);
}
[data-theme="mise-en-place"] .mep-nav-link.is-active {
  color: var(--mep-primary);
}
[data-theme="mise-en-place"] .mep-nav-right {
  display: flex;
  gap: 24px;
  align-items: center;
}
[data-theme="mise-en-place"] .mep-cart-link {
  position: relative;
  display: flex;
  color: var(--mep-text);
  text-decoration: none;
}
[data-theme="mise-en-place"] .mep-cart-badge {
  position: absolute;
  top: -7px;
  inset-inline-end: -9px;
  background: var(--mep-primary);
  color: #FFFFFF;
  font-family: var(--mep-body-font);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* bespoke mobile hamburger trigger (MiseEnPlaceMobileMenu) — hidden ≥ lg,
   shown below (mirrors the old shared ThemeMobileMenu lg:hidden). The 44×44
   tap target + the design's charcoal 22px icon (.dc.html line 362). */
[data-theme="mise-en-place"] .mep-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--mep-text);
  cursor: pointer;
}
@media (max-width: 1023px) {
  [data-theme="mise-en-place"] .mep-hamburger {
    display: flex;
  }
}

/* in-drawer nav link hover — brick, matching the desktop nav (.dc.html
   line 380 style-hover). Active items are already brick via inline color. */
[data-theme="mise-en-place"] .mep-drawer-link:hover {
  color: var(--mep-primary) !important;
}

/* ═══════════════════ BUTTONS / CTAs ═══════════════════ */
[data-theme="mise-en-place"] .mep-cta-primary {
  font-family: var(--mep-body-font);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--mep-primary);
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
  display: inline-block;
  text-align: center;
}
[data-theme="mise-en-place"] .mep-cta-primary:hover {
  background-color: var(--mep-primary-hover);
}
[data-theme="mise-en-place"] .mep-cta-primary:active {
  transform: translateY(1px);
}
[data-theme="mise-en-place"] .mep-cta-primary-lg {
  font-family: var(--mep-body-font);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--mep-primary);
  padding: 15px 24px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
  display: inline-block;
  text-align: center;
}
[data-theme="mise-en-place"] .mep-cta-primary-lg:hover {
  background-color: var(--mep-primary-hover);
}
[data-theme="mise-en-place"] .mep-cta-primary-lg:active {
  transform: translateY(1px);
}
/* outline CTA (Buy now) — fills charcoal + cream text on hover */
[data-theme="mise-en-place"] .mep-cta-outline {
  font-family: var(--mep-body-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--mep-text);
  border: 1.5px solid var(--mep-text);
  padding: 13.5px 24px;
  border-radius: 6px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
  display: inline-block;
  text-align: center;
}
[data-theme="mise-en-place"] .mep-cta-outline:hover {
  background-color: var(--mep-shell);
  color: var(--mep-cream);
}
/* ghost text link with arrow (Start with the basics / All entries) */
[data-theme="mise-en-place"] .mep-link-arrow {
  font-family: var(--mep-body-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--mep-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 150ms ease-out;
}
[data-theme="mise-en-place"] .mep-link-arrow:hover {
  color: var(--mep-primary);
}

/* ═══════════════════ FOCUS (all) ═══════════════════ */
[data-theme="mise-en-place"] a:focus-visible,
[data-theme="mise-en-place"] button:focus-visible,
[data-theme="mise-en-place"] input:focus-visible,
[data-theme="mise-en-place"] textarea:focus-visible {
  outline: 2px solid var(--mep-primary);
  outline-offset: 2px;
}

/* ═══════════════════ CATEGORY PILLS ═══════════════════ */
[data-theme="mise-en-place"] .mep-pill {
  font-family: var(--mep-body-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--mep-nav-idle);
  border: 1px solid rgba(34, 32, 28, 0.25);
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  background: transparent;
  transition: background-color 150ms ease-out;
  white-space: nowrap;
}
[data-theme="mise-en-place"] .mep-pill:hover {
  background-color: rgba(91, 98, 54, 0.12);
}
[data-theme="mise-en-place"] .mep-pill.is-active {
  color: #FFFFFF;
  background: var(--mep-primary);
  border: 1px solid var(--mep-primary);
  padding: 9px 18px;
}

/* ═══════════════════ CHIP (recipe meta / spec badges) ═══════════════════ */
[data-theme="mise-en-place"] .mep-chip {
  font-family: var(--mep-body-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--mep-chip-fg);
  background: var(--mep-chip-bg);
  padding: 4px 10px;
  border-radius: 999px;
}
[data-theme="mise-en-place"] .mep-chip-outline {
  font-family: var(--mep-body-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--mep-chip-fg);
  border: 1px solid var(--mep-chip-border);
  padding: 3px 10px;
  border-radius: 999px;
}
[data-theme="mise-en-place"] .mep-chip-sm {
  font-family: var(--mep-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mep-chip-fg);
  background: var(--mep-chip-bg);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ═══════════════════ POST / PRODUCT CARDS ═══════════════════ */
[data-theme="mise-en-place"] .mep-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
[data-theme="mise-en-place"] .mep-card-plate {
  overflow: hidden;
  border-radius: 8px;
  background: var(--mep-tint);
}
[data-theme="mise-en-place"] .mep-card-img {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="mise-en-place"] .mep-card:hover .mep-card-img {
  transform: scale(1.04);
}
[data-theme="mise-en-place"] .mep-card-title {
  font-family: var(--mep-heading-font);
  font-weight: 400;
  transition: color 150ms ease-out;
}
[data-theme="mise-en-place"] .mep-card:hover .mep-card-title {
  color: var(--mep-primary);
}

/* ═══════════════════ PROSE (post / page body) ═══════════════════ */
[data-theme="mise-en-place"] .mep-prose {
  font-size: 17px;
  line-height: 1.7;
  max-width: 65ch;
  color: var(--mep-body);
}
[data-theme="mise-en-place"] .mep-prose p {
  margin: 0 0 24px;
}
[data-theme="mise-en-place"] .mep-prose h2 {
  font-family: var(--mep-heading-font);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin: 40px 0 16px;
}
[data-theme="mise-en-place"] .mep-prose h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 36px 0 14px;
  color: var(--mep-text);
}
[data-theme="mise-en-place"] .mep-prose blockquote {
  margin: 36px 0;
  padding-inline-start: 24px;
  border-inline-start: 3px solid var(--mep-accent);
}
[data-theme="mise-en-place"] .mep-prose blockquote p {
  font-family: var(--mep-heading-font);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  color: var(--mep-text);
}
[data-theme="mise-en-place"] .mep-prose blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  color: var(--mep-muted);
  margin-top: 12px;
}
[data-theme="mise-en-place"] .mep-prose pre {
  background: var(--mep-shell);
  color: var(--mep-cream);
  font-family: var(--mep-mono-font);
  font-size: 13px;
  line-height: 1.65;
  padding: 24px 26px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0 0 36px;
}
[data-theme="mise-en-place"] .mep-prose code {
  font-family: var(--mep-mono-font);
  font-size: 14px;
  background: var(--mep-chip-bg);
  color: var(--mep-chip-fg);
  padding: 2px 6px;
  border-radius: 4px;
}
[data-theme="mise-en-place"] .mep-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
[data-theme="mise-en-place"] .mep-prose img {
  display: block;
  width: 100%;
  height: auto;
}
[data-theme="mise-en-place"] .mep-prose a {
  color: var(--mep-accent);
}

/* step numerals — the design's typographic method rows (88px numeral column
   desktop / 64px mobile via inline grid-template-columns, kept in the layout
   component since the column width varies desktop/mobile) */
[data-theme="mise-en-place"] .mep-step-num {
  font-family: var(--mep-heading-font);
  font-weight: 400;
  line-height: 0.85;
  color: var(--mep-accent);
}

/* ═══════════════════ INGREDIENT RAIL (aside) ═══════════════════ */
[data-theme="mise-en-place"] .mep-rail {
  background: var(--mep-tint);
  border-block-start: 3px solid var(--mep-accent);
  padding: 26px 28px 20px;
}
[data-theme="mise-en-place"] .mep-rail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-block-end: 1px solid rgba(91, 98, 54, 0.25);
}
[data-theme="mise-en-place"] .mep-rail-row:last-of-type {
  border-block-end: none;
}
[data-theme="mise-en-place"] .mep-rail-qty {
  font-family: var(--mep-mono-font);
  font-size: 13px;
  color: var(--mep-accent);
  white-space: nowrap;
}

/* ═══════════════════ FOOTER ═══════════════════ */
[data-theme="mise-en-place"] .mep-footer {
  background: var(--mep-shell);
  color: var(--mep-cream);
}
[data-theme="mise-en-place"] .mep-footer-inner {
  max-width: var(--mep-container);
  margin: 0 auto;
  padding: 64px 48px 28px;
}
[data-theme="mise-en-place"] .mep-footer-brand {
  font-family: var(--mep-heading-font);
  font-size: 22px;
}
[data-theme="mise-en-place"] .mep-footer-label {
  font-family: var(--mep-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mep-cream-label);
  margin-bottom: 6px;
}
[data-theme="mise-en-place"] .mep-footer-link {
  display: block;
  font-size: 14px;
  color: var(--mep-cream-muted);
  text-decoration: none;
  margin-top: 10px;
  transition: color 150ms ease-out;
}
[data-theme="mise-en-place"] .mep-footer-link:hover {
  color: var(--mep-cream);
}
[data-theme="mise-en-place"] .mep-footer-bottom {
  border-block-start: 1px solid rgba(239, 233, 220, 0.14);
  padding-block-start: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
[data-theme="mise-en-place"] .mep-footer-meta {
  font-size: 13px;
  color: var(--mep-cream-faint);
}

/* compact footer (blog/post/page/shop/product — single-row letterhead) */
[data-theme="mise-en-place"] .mep-footer-compact-inner {
  max-width: var(--mep-container);
  margin: 0 auto;
  padding: 32px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ═══════════════════ INPUTS (subscribe) ═══════════════════ */
[data-theme="mise-en-place"] .mep-input {
  background: var(--mep-bg);
  border: none;
  border-radius: 6px;
  padding: 13px 15px;
  font-family: var(--mep-body-font);
  font-size: 15px;
  color: var(--mep-text);
  outline: none;
}

/* ═══════════════════ RESPONSIVE (mobile 390) ═══════════════════ */
/* Desktop nav + right-side collapse below lg (1024px); hamburger shown by the
   shared ThemeMobileMenu (lg:hidden). Mirror the design's mobile 390 screens
   (engineering notes §Mobile drawer & RTL + the 6 "— Mobile 390" data-screen-
   label frames). Inline JSX `style=` beats a non-!important @media rule, so
   every overridden property below is !important — matches the pattern
   established in the sibling Claude-Design themes (stillpoint/workbench). */
@media (max-width: 1023px) {
  [data-theme="mise-en-place"] .mep-nav-links {
    display: none;
  }
  [data-theme="mise-en-place"] .mep-nav-inner {
    height: 60px;
    padding: 0 12px 0 8px;
  }

  /* ─── Home hero: 2-col grid -> stacked, 62px h1 -> 38px (mobile "Home") ─── */
  [data-theme="mise-en-place"] .mep-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 36px 20px 44px !important;
  }
  [data-theme="mise-en-place"] .mep-hero-h1 {
    font-size: 38px !important;
    line-height: 1.08 !important;
    margin: 14px 0 16px !important;
  }

  /* ─── Section gutters: 48px -> 20px on Home's "Latest" band + inner
       padding matches the mobile screen (0 20px 44px) ─── */
  [data-theme="mise-en-place"] .mep-section-inner {
    padding-inline: 20px !important;
    padding-bottom: 44px !important;
  }
  [data-theme="mise-en-place"] .mep-section-h2 {
    font-size: 24px !important;
  }

  /* ─── Home "Latest from the journal" / mise band grids: 3-col -> 1-col
       stacked list (mobile screen shows a single-column flex list) ─── */
  [data-theme="mise-en-place"] .mep-latest-grid,
  [data-theme="mise-en-place"] .mep-mise-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ─── "This week's mise" olive band: side-by-side head -> stacked,
       34px h2 -> 26px, lede hidden (mobile screen omits it, band goes
       straight from h2 to the recipe card) ─── */
  [data-theme="mise-en-place"] .mep-mise-section {
    padding: 40px 20px 44px !important;
  }
  [data-theme="mise-en-place"] .mep-mise-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  [data-theme="mise-en-place"] .mep-mise-h2 {
    font-size: 26px !important;
    margin: 10px 0 0 !important;
  }
  [data-theme="mise-en-place"] .mep-mise-lede {
    display: none !important;
  }

  /* ─── Blog index masthead: 52px h1 -> 34px, post grid 3-col -> 1-col ─── */
  [data-theme="mise-en-place"] .mep-listing-main {
    padding: 36px 20px 56px !important;
  }
  [data-theme="mise-en-place"] .mep-listing-h1 {
    font-size: 34px !important;
    line-height: 1.08 !important;
    margin: 12px 0 20px !important;
  }
  [data-theme="mise-en-place"] .mep-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ─── Post detail: 54px h1 -> 31px, 2-col article+rail grid -> 1-col
       (rail drops below prose), subscribe box 2-col -> 1-col ─── */
  [data-theme="mise-en-place"] .mep-article {
    padding: 32px 20px 0 !important;
  }
  [data-theme="mise-en-place"] .mep-post-h1 {
    font-size: 31px !important;
    line-height: 1.12 !important;
    margin: 12px 0 18px !important;
  }
  [data-theme="mise-en-place"] .mep-post-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-theme="mise-en-place"] .mep-subscribe-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 28px 24px !important;
  }

  /* ─── Generic page (About): 46px h1 -> 32px, single column already ─── */
  [data-theme="mise-en-place"] .mep-page-main {
    padding: 36px 20px 56px !important;
  }
  [data-theme="mise-en-place"] .mep-page-h1 {
    font-size: 32px !important;
    line-height: 1.12 !important;
    margin: 12px 0 20px !important;
  }

  /* ─── Shop listing: 46px h1 -> 32px, 3-col grid -> 2-col (mobile screen
       shows a 2-up product grid) ─── */
  [data-theme="mise-en-place"] .mep-shop-main {
    padding: 36px 20px 56px !important;
  }
  [data-theme="mise-en-place"] .mep-shop-h1 {
    font-size: 32px !important;
    line-height: 1.12 !important;
    margin: 12px 0 20px !important;
  }
  [data-theme="mise-en-place"] .mep-shop-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 16px !important;
  }

  /* ─── Product detail: 40px h1 -> 29px, 2-col gallery+info grid -> 1-col
       stacked (gallery first, then info), thumbnails shrink to 64px ─── */
  [data-theme="mise-en-place"] .mep-product-main {
    padding: 24px 20px 56px !important;
  }
  [data-theme="mise-en-place"] .mep-product-h1 {
    font-size: 29px !important;
    line-height: 1.15 !important;
    margin: 10px 0 6px !important;
  }
  [data-theme="mise-en-place"] .mep-product-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [data-theme="mise-en-place"] .mep-gallery-thumb {
    width: 64px !important;
    height: 64px !important;
  }
  [data-theme="mise-en-place"] .mep-buy-row {
    flex-direction: column !important;
  }

  /* ─── Footer: 4-col grid -> 2-col (mobile screen shows Explore + Shop
       only, side by side) ─── */
  [data-theme="mise-en-place"] .mep-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  [data-theme="mise-en-place"] .mep-footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
  [data-theme="mise-en-place"] .mep-footer-grid > div:nth-child(4) {
    display: none;
  }
  [data-theme="mise-en-place"] .mep-footer-inner {
    padding: 40px 20px 24px !important;
  }
}

/* wide strips never overflow the document (P-140) */
[data-theme="mise-en-place"] .mep-pill-scroll {
  overflow-x: auto;
}

/* ═══════════════════ RTL (engineering notes §Mobile drawer & RTL) ═══════════════════ */
/* "RTL: rails use border-inline-start, badges inset-inline-end, prev/next
   built on logical padding. Only the ← → glyphs and arrow SVGs flip." */
[dir="rtl"] [data-theme="mise-en-place"] .mep-arrow {
  transform: scaleX(-1);
}

/* ═══════════════════ P-094 TOKEN BRIDGE ═══════════════════ */
/* The commerce archetype + shared components consume the universal
   --vb-color-* vocabulary. Map Mise en Place palette → --vb-color-* at the
   global [data-theme="mise-en-place"] scope (NOT main-scoped) so /shop and
   /products/* resolve. Values lifted verbatim from the design's inline
   --vb-color-* declarations on the data-screen-label wrappers. */
[data-theme="mise-en-place"] {
  --vb-color-primary: #A6432E;      /* brick — CTA fill */
  --vb-color-primary-fg: #FFFFFF;   /* white label on brick — 6.1:1 (engineering notes §Tokens contrast table) */
  --vb-color-bg: #EFE9DC;           /* paper */
  --vb-color-fg: #22201C;           /* charcoal */
  --vb-color-accent: #5B6236;       /* olive */
}