/* ============================================================
   MyFoodExplorer — main.css  v3
   Mobile-first · CSS custom properties · Production-ready
   ============================================================ */

/* ── Custom Properties (layout tokens added for Part 2 controls) ── */
:root {
  /* Colours */
  --mfe-primary:      #FF6B35;
  --mfe-primary-dark: #e55a24;
  --mfe-accent:       #FFA500;
  --mfe-text:         #2D2D2D;
  --mfe-text-light:   #6B7280;
  --mfe-text-muted:   #9CA3AF;
  --mfe-bg:           #FFFFFF;
  --mfe-bg-alt:       #FFF8F0;
  --mfe-bg-card:      #FFFFFF;
  --mfe-border:       #E5E7EB;
  --mfe-border-light: #F3F4F6;

  /* Shape */
  --mfe-radius:       12px;
  --mfe-radius-sm:    8px;
  --mfe-radius-md:    10px;
  --mfe-radius-lg:    20px;

  /* Shadows */
  --mfe-shadow:       0 2px 12px rgba(0,0,0,.07);
  --mfe-shadow-md:    0 4px 20px rgba(0,0,0,.10);
  --mfe-shadow-lg:    0 8px 40px rgba(0,0,0,.13);
  --mfe-shadow-card:  0 2px 16px rgba(255,107,53,.08);

  /* Typography */
  --mfe-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --mfe-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Layout — overridable from customizer (Part 2) */
  --mfe-max-width:       1240px;
  --mfe-content-max:     820px;
  --mfe-sidebar-width:   320px;
  --mfe-gap:             1.5rem;
  --mfe-section-spacing: 3rem;
  --mfe-card-radius:     12px;
  --mfe-card-spacing:    1rem;
  --mfe-grid-gap:        1.5rem;
  --mfe-recipe-img-ratio: 4/3;
  --mfe-cat-img-ratio:    1/1;
  --mfe-header-height:   64px;

  /* Typography scale — overridable */
  --mfe-type-scale-desktop: 1;
  --mfe-type-scale-mobile:  1;

  /* Transition */
  --mfe-transition: .2s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* MOBILE FIX: prevent horizontal overflow at the root */
  overflow-x: hidden;
}
body {
  font-family: var(--mfe-font-body);
  font-size: calc(16px * var(--mfe-type-scale-mobile));
  line-height: 1.7;
  color: var(--mfe-text);
  background: var(--mfe-bg);
  -webkit-font-smoothing: antialiased;
  /* FIX: overflow-x:hidden on body is the correct approach.
     Removed max-width:100vw — it includes scrollbar width and can cause
     a 1px horizontal overflow on some browsers. overflow-x:hidden is sufficient. */
  overflow-x: hidden;
}

/* MOBILE FIX: Ensure no element exceeds viewport */
img, video, iframe, embed, object, table {
  max-width: 100%;
}
img { height: auto; display: block; }

a { color: var(--mfe-primary); text-decoration: none; transition: color var(--mfe-transition); }
a:hover { color: var(--mfe-primary-dark); }
ul, ol { padding-left: 1.5rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mfe-font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--mfe-text);
  margin-bottom: .5rem;
  /* MOBILE FIX: prevent long words from overflowing */
  overflow-wrap: break-word;
  word-break: break-word;
}
h1 { font-size: clamp(1.6rem, 4vw, calc(2.8rem * var(--mfe-type-scale-desktop))); }
h2 { font-size: clamp(1.3rem, 3vw, calc(2rem   * var(--mfe-type-scale-desktop))); }
h3 { font-size: clamp(1.1rem, 2vw, calc(1.4rem * var(--mfe-type-scale-desktop))); }
h4 { font-size: calc(1.1rem * var(--mfe-type-scale-desktop)); }

p { margin-bottom: 1rem; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

/* ── Utility ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.container {
  width: 100%;
  max-width: var(--mfe-max-width);
  margin-inline: auto;
  /* MOBILE FIX: consistent safe gutters that never overflow */
  padding-inline: clamp(.75rem, 4vw, 1.25rem);
}
.container-sm { max-width: 860px; }
.text-center  { text-align: center; }
.text-muted   { color: var(--mfe-text-muted); }

/* ── Reading Progress Bar ── */
#mfe-progress-bar {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%;
  background: var(--mfe-primary);
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
  /* MOBILE FIX: must not cause a horizontal scrollbar */
  max-width: 100vw;
}

/* ── Header ── */
.mfe-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mfe-border-light);
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
  /* MOBILE FIX: contain header to viewport */
  width: 100%;
  max-width: 100vw;
}
.mfe-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* MOBILE FIX: use min-height instead of fixed height to avoid CLS */
  min-height: var(--mfe-header-height);
  padding-block: .6rem;
  max-width: var(--mfe-max-width);
  margin-inline: auto;
  padding-inline: clamp(.75rem, 4vw, 1.25rem);
}
.mfe-logo { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.mfe-logo img { height: 48px; width: auto; }
.mfe-logo-text {
  font-family: var(--mfe-font-heading); font-size: 1.4rem; font-weight: 700;
  color: var(--mfe-text); white-space: nowrap;
}
.mfe-logo-text span { color: var(--mfe-primary); }

/* ── Desktop Nav ── */
.mfe-header-nav { display: none; flex: 1; justify-content: center; min-width: 0; }
.mfe-header-nav .mfe-primary-menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0; margin: 0;
  /* MOBILE FIX: wrap if menu is very long */
  flex-wrap: nowrap;
}
/* Top-level item */
.mfe-header-nav .mfe-primary-menu > li { position: relative; }
.mfe-header-nav .mfe-primary-menu > li > a {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--mfe-text);
  padding: .45rem .8rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: background var(--mfe-transition), color var(--mfe-transition);
  text-decoration: none;
}
.mfe-header-nav .mfe-primary-menu > li > a:hover,
.mfe-header-nav .mfe-primary-menu > li.current-menu-item > a,
.mfe-header-nav .mfe-primary-menu > li.current-menu-ancestor > a {
  background: var(--mfe-bg-alt);
  color: var(--mfe-primary);
}
/* Chevron */
.mfe-header-nav .mfe-chevron {
  display: inline-flex; align-items: center;
  transition: transform .22s ease; pointer-events: none;
}
.mfe-header-nav .mfe-primary-menu > li.mfe-menu-open > a .mfe-chevron,
.mfe-header-nav .mfe-primary-menu > li:hover > a .mfe-chevron {
  transform: rotate(180deg);
}
/* Dropdown */
.mfe-header-nav .mfe-sub-menu {
  display: block;
  visibility: hidden; opacity: 0; pointer-events: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--mfe-bg);
  border: 1px solid var(--mfe-border-light);
  border-radius: var(--mfe-radius-md);
  box-shadow: 0 8px 28px rgba(0,0,0,.11);
  list-style: none; padding: .4rem 0; margin: 0;
  z-index: 600;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  /* MOBILE FIX: contain dropdown to viewport */
  max-width: 90vw;
}
/* Nested sub-menus */
.mfe-header-nav .mfe-sub-menu .mfe-sub-menu {
  top: -.4rem; left: 100%;
  transform: translateX(4px) translateY(-4px);
}
/* Show state */
.mfe-header-nav .mfe-primary-menu > li:hover > .mfe-sub-menu,
.mfe-header-nav .mfe-primary-menu > li.mfe-menu-open > .mfe-sub-menu,
.mfe-header-nav .mfe-sub-menu > li:hover > .mfe-sub-menu {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mfe-header-nav .mfe-sub-menu > li:hover > .mfe-sub-menu {
  transform: translateX(4px) translateY(0);
}
/* Dropdown links */
.mfe-header-nav .mfe-sub-menu a {
  display: block;
  padding: .55rem 1.1rem;
  font-size: .875rem; font-weight: 500; color: var(--mfe-text);
  white-space: nowrap; text-decoration: none;
  transition: background var(--mfe-transition), color var(--mfe-transition);
}
.mfe-header-nav .mfe-sub-menu a:hover,
.mfe-header-nav .mfe-sub-menu li.current-menu-item > a {
  background: var(--mfe-bg-alt); color: var(--mfe-primary);
}
.mfe-header-nav .mfe-sub-menu li.menu-item-has-children > a::after {
  content: '›'; float: right; margin-left: .5rem; font-size: 1rem; color: var(--mfe-text-muted);
}

/* Header actions */
.mfe-header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-shrink: 0; }
.mfe-header-search-btn, .mfe-mobile-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--mfe-bg-alt); border: none; cursor: pointer;
  color: var(--mfe-text); transition: background var(--mfe-transition);
  /* MOBILE FIX: guaranteed touch target 44px */
  min-width: 44px; min-height: 44px;
}
.mfe-header-search-btn:hover, .mfe-mobile-menu-btn:hover { background: var(--mfe-border); }
.mfe-header-search-btn svg, .mfe-mobile-menu-btn svg { width: 20px; height: 20px; }

/* ── Search overlay ── */
.mfe-search-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.6);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 80px;
  /* MOBILE FIX: prevent overlay from causing layout shift on open */
  overscroll-behavior: contain;
}
.mfe-search-overlay.active { display: flex; }
.mfe-search-box {
  background: var(--mfe-bg); border-radius: var(--mfe-radius-lg);
  padding: 1.5rem; width: min(680px, 94%);
  box-shadow: var(--mfe-shadow-lg);
  /* MOBILE FIX: ensure box does not exceed screen */
  max-height: 80vh; overflow-y: auto;
}
.mfe-search-input-wrap { display: flex; align-items: center; gap: .75rem; }
.mfe-search-input-wrap svg { color: var(--mfe-text-muted); width: 22px; height: 22px; flex-shrink: 0; }
.mfe-search-input-wrap input {
  flex: 1; border: none; outline: none; font-size: 1.2rem;
  color: var(--mfe-text); font-family: var(--mfe-font-body); background: transparent;
  /* MOBILE FIX: prevent zoom on input focus on iOS */
  font-size: max(1rem, 16px);
}
.mfe-search-results { margin-top: 1rem; max-height: 400px; overflow-y: auto; }
.mfe-search-result-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; border-radius: var(--mfe-radius-sm);
  transition: background var(--mfe-transition); text-decoration: none;
}
.mfe-search-result-item:hover { background: var(--mfe-bg-alt); }
.mfe-search-result-item img { width: 52px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.mfe-search-result-title { font-weight: 600; font-size: .9rem; color: var(--mfe-text); display: block; }
.mfe-search-result-meta  { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .1rem; }
.mfe-search-result-cat   { font-size: .72rem; font-weight: 700; color: var(--mfe-primary); text-transform: uppercase; letter-spacing: .04em; }
.mfe-search-result-time  { font-size: .78rem; color: var(--mfe-text-muted); }

/* ── Mobile menu ── */
.mfe-mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 550;
  background: var(--mfe-bg); flex-direction: column;
  padding: 5rem 1.5rem 2rem; overflow-y: auto;
  /* MOBILE FIX: prevent body scroll when open */
  overscroll-behavior: contain;
}
.mfe-mobile-menu.active { display: flex; }
.mfe-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mfe-mobile-menu li { border-bottom: 1px solid var(--mfe-border-light); }
.mfe-mobile-menu > ul > li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 0; font-size: 1.1rem; font-weight: 600; color: var(--mfe-text);
  text-decoration: none;
  /* MOBILE FIX: guaranteed touch target */
  min-height: 44px;
}
.mfe-mobile-menu .mfe-sub-menu {
  display: none; padding-left: 1rem;
  border-top: 1px solid var(--mfe-border-light);
}
.mfe-mobile-menu .mfe-sub-menu.mfe-sub-open { display: block; }
.mfe-mobile-menu .mfe-sub-menu li { border-bottom: 1px solid var(--mfe-border-light); }
.mfe-mobile-menu .mfe-sub-menu li:last-child { border-bottom: none; }
.mfe-mobile-menu .mfe-sub-menu a {
  display: block; padding: .7rem 0; font-size: 1rem; font-weight: 500;
  color: var(--mfe-text); text-decoration: none; min-height: 44px;
}
.mfe-mobile-menu .mfe-chevron { display: inline-flex; align-items: center; transition: transform .2s ease; pointer-events: none; }
.mfe-mobile-menu li.mfe-menu-open > a .mfe-chevron { transform: rotate(180deg); }
.mfe-mobile-close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: none; border: none; font-size: 1.8rem; cursor: pointer;
  color: var(--mfe-text);
  /* MOBILE FIX: touch target */
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════
   ADVERTISEMENT SYSTEM v4.2 — DEVICE + NETWORK ARCHITECTURE
   ────────────────────────────────────────────────────────────────────────
   Three independent systems with a priority switch:
     1. Desktop Ads  (.mfe-ad-desktop)  — visible ≥768px, hidden on mobile
     2. Mobile Ads   (.mfe-ad-mobile)   — visible ≤767px, hidden on desktop
     3. Network Ads  (.mfe-ad-network)  — visible all devices (auto-injected)

   PRIORITY: If Network Ads enabled → Desktop + Mobile custom ads disabled.
             If Network Ads disabled → Desktop + Mobile custom ads active.

   PRINCIPLE: Theme adapts to ad. Ad never adapts to theme.
   NO forced dimensions on any ad element:
     ✗ no min-height   ✗ no max-height   ✗ no hard width caps
     ✗ no iframe height overrides   ✗ no ins height overrides
   Only img/video get max-width:100% for horizontal overflow safety.
   ════════════════════════════════════════════════════════════════════════ */

/* Universal ad label — small, muted, above the ad */
.mfe-ad-label {
  font-size: .65rem; color: var(--mfe-text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  display: block; margin-bottom: .25rem; text-align: center;
}

/* ── Universal ad wrapper — clean container, NO forced dimensions ── */
.mfe-ad-wrapper {
  display: block;
  text-align: center;
  margin: 1rem auto;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

/* Inner slot — holds the actual ad code. Clean block, no flex collapse. */
.mfe-ad-wrapper .mfe-ad-slot {
  display: block;
  text-align: center;
  overflow: visible;
  line-height: 0;
}

/* Ad units — ONLY img/video get max-width:100% for overflow safety.
   iframe / ins / div: ad network controls ALL dimensions. Theme never overrides. */
.mfe-ad-wrapper .mfe-ad-slot img,
.mfe-ad-wrapper .mfe-ad-slot video {
  max-width: 100%;
  height: auto;
}
.mfe-ad-wrapper .mfe-ad-slot ins { display: block; margin: 0 auto; }

/* ── Device visibility (CSS-controlled, not server-side) ── */
.mfe-ad-desktop { display: block; }     /* visible by default (desktop) */
.mfe-ad-mobile  { display: none;  }     /* hidden by default (desktop)  */
.mfe-ad-network { display: block; }     /* visible all devices          */

@media (max-width: 767px) {
  .mfe-ad-desktop { display: none;  }   /* hidden on mobile */
  .mfe-ad-mobile  { display: block; }   /* visible on mobile */
}

/* ── Zone-specific spacing ONLY (no sizes, no overflow, no backgrounds) ── */
.mfe-ad-zone-header  { margin: .5rem auto; }
.mfe-ad-zone-content { margin: 1.5rem auto; }
.mfe-ad-zone-sidebar { margin: 0 0 1.25rem; }
.mfe-ad-zone-footer  { margin: .5rem auto; }

/* Per-recipe custom ad — inherits desktop content zone, just add spacing */
.mfe-ad-zone-recipe-custom { margin-top: 1rem; }

/* Sidebar: ensure parent .mfe-widget never clips ad content */
.mfe-widget.mfe-ad-sidebar,
.mfe-widget .mfe-ad-wrapper { overflow: visible; }

/* ── Mobile sticky / anchor ad ── mobile only, closeable ── */
.mfe-ad-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px 44px 6px 8px;
  background: var(--mfe-bg);
  border-top: 1px solid var(--mfe-border);
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  box-sizing: border-box;
}
.mfe-ad-sticky .mfe-ad-sticky-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 100%; margin: 0 auto; overflow: visible;
}
.mfe-ad-sticky .mfe-ad-sticky-close {
  position: absolute; top: 4px; right: 6px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mfe-border); color: var(--mfe-text);
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0;
}
.mfe-ad-sticky .mfe-ad-sticky-close:hover { background: var(--mfe-text); color: #fff; }
.mfe-ad-sticky.mfe-ad-sticky--closed { display: none !important; }
body.mfe-sticky-ad-on { padding-bottom: 100px; }
@media (max-width: 767px) {
  .mfe-ad-sticky { display: flex; }
  body.mfe-sticky-ad-on .mfe-mobile-bar { bottom: 100px; }
  body.mfe-sticky-ad-on .mfe-footer--bottom-bar { bottom: 100px; }
  body.mfe-sticky-ad-on.mfe-footer-bottombar-active { padding-bottom: calc(100px + 60px); }
}

/* ── Preview-mode placeholders (only shown when preview mode ON) ── */
.mfe-ad-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; background: var(--mfe-bg-alt);
  border: 2px dashed var(--mfe-border); border-radius: var(--mfe-radius-sm);
  padding: 1.5rem 1rem; text-align: center; box-sizing: border-box;
}
.mfe-ad-placeholder-label  { font-size: .65rem; font-weight: 700; color: var(--mfe-text-muted); text-transform: uppercase; letter-spacing: .1em; }
.mfe-ad-placeholder-name   { font-size: .78rem; font-weight: 600; color: var(--mfe-text-light); }
.mfe-ad-placeholder-device { font-size: .7rem; color: var(--mfe-border); }

/* ── Breadcrumbs ── */
.mfe-breadcrumbs { padding: .75rem 0; font-size: .82rem; color: var(--mfe-text-muted); }
.mfe-breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: .25rem;
  list-style: none; padding: 0; margin: 0; align-items: center;
}
.mfe-breadcrumbs li + li::before { content: '/'; margin-right: .25rem; color: var(--mfe-border); }
.mfe-breadcrumbs a { color: var(--mfe-text-muted); }
.mfe-breadcrumbs a:hover { color: var(--mfe-primary); }
.mfe-breadcrumbs .current { color: var(--mfe-text-light); }

/* ── Buttons ── */
.mfe-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .65rem 1.25rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
  border: 2px solid transparent; cursor: pointer; transition: all var(--mfe-transition);
  text-decoration: none; white-space: nowrap; font-family: var(--mfe-font-body);
  /* MOBILE FIX: guaranteed touch target */
  min-height: 44px;
}
.mfe-btn-primary { background: var(--mfe-primary); color: #fff; border-color: var(--mfe-primary); }
.mfe-btn-primary:hover { background: var(--mfe-primary-dark); border-color: var(--mfe-primary-dark); color: #fff; text-decoration: none; }
.mfe-btn-outline { background: transparent; color: var(--mfe-primary); border-color: var(--mfe-primary); }
.mfe-btn-outline:hover { background: var(--mfe-primary); color: #fff; text-decoration: none; }
.mfe-btn-ghost { background: var(--mfe-bg-alt); color: var(--mfe-text); border-color: var(--mfe-border); }
.mfe-btn-ghost:hover { background: var(--mfe-border); color: var(--mfe-text); text-decoration: none; }
.mfe-btn-jump { background: var(--mfe-primary); color: #fff; border-color: var(--mfe-primary); border-radius: 50px; }
.mfe-btn-jump:hover { background: var(--mfe-primary-dark); color: #fff; text-decoration: none; }
.mfe-btn-print { background: var(--mfe-bg-alt); color: var(--mfe-text-light); border-color: var(--mfe-border); border-radius: 50px; }
.mfe-btn-print:hover { background: var(--mfe-border); color: var(--mfe-text); text-decoration: none; }
.mfe-btn-sm { padding: .4rem .9rem; font-size: .8rem; min-height: 36px; }
.mfe-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Save Recipe Button */
.mfe-btn-save-recipe { border-radius: 50px; color: var(--mfe-text); border-color: var(--mfe-border); }
.mfe-btn-save-recipe svg { transition: fill .2s ease, stroke .2s ease; }
.mfe-btn-save-recipe:hover { border-color: var(--mfe-primary); color: var(--mfe-primary); background: var(--mfe-bg-alt); text-decoration: none; }
.mfe-btn-save-recipe:hover svg { stroke: var(--mfe-primary); }
.mfe-btn-save-recipe.mfe-btn-saved { background: var(--mfe-primary); border-color: var(--mfe-primary); color: #fff; }
.mfe-btn-save-recipe.mfe-btn-saved svg { fill: #fff; stroke: #fff; }
.mfe-btn-save-recipe.mfe-btn-saved:hover { background: var(--mfe-primary-dark); border-color: var(--mfe-primary-dark); color: #fff; }
.mfe-btn-save-recipe:disabled { opacity: .7; cursor: wait; }

/* ── Section Headers ── */
.mfe-section { padding-block: var(--mfe-section-spacing); }
.mfe-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.75rem; gap: 1rem; flex-wrap: wrap;
}
.mfe-section-title {
  font-family: var(--mfe-font-heading); font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 700; color: var(--mfe-text);
  display: flex; align-items: center; gap: .5rem;
}
.mfe-section-title::after {
  content: ''; display: inline-block; width: 32px; height: 3px;
  background: var(--mfe-primary); border-radius: 2px; margin-left: .25rem;
}
.mfe-view-all { font-size: .85rem; font-weight: 600; color: var(--mfe-primary); display: flex; align-items: center; gap: .25rem; }
.mfe-view-all:hover { text-decoration: underline; }

/* ── Recipe Cards ── */
.mfe-recipes-grid {
  display: grid;
  /* MOBILE FIX: use min() to prevent cards narrower than 280px while still single-column on tiny screens */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--mfe-grid-gap);
}
.mfe-recipes-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.mfe-recipes-grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

.mfe-recipe-card {
  background: var(--mfe-bg-card);
  border-radius: var(--mfe-card-radius);
  overflow: hidden;
  box-shadow: var(--mfe-shadow);
  transition: transform var(--mfe-transition), box-shadow var(--mfe-transition);
  display: flex; flex-direction: column;
  /* MOBILE FIX: prevent card from causing horizontal scroll */
  min-width: 0;
}
.mfe-recipe-card:hover { transform: translateY(-4px); box-shadow: var(--mfe-shadow-md); }

/* MOBILE FIX: aspect-ratio with explicit contain so images never overflow */
.mfe-card-image-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: var(--mfe-recipe-img-ratio, 4/3);
  /* CLS FIX: reserve space before image loads */
  background: var(--mfe-bg-alt);
}
.mfe-card-image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
  /* MOBILE FIX: avoid CLS by preventing img from collapsing before load */
  display: block;
}
.mfe-recipe-card:hover .mfe-card-image-wrap img { transform: scale(1.04); }

.mfe-card-badge {
  position: absolute; top: .75rem; left: .75rem;
  background: var(--mfe-primary); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 50px; text-transform: uppercase; letter-spacing: .04em;
}
.mfe-card-pin-save {
  position: absolute; top: .75rem; right: .75rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: #E60023; color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity var(--mfe-transition);
  text-decoration: none;
  /* MOBILE FIX: always visible on touch devices */
}
/* Show pin button on touch/mobile (hover not reliable on touch) */
@media (hover: none) {
  .mfe-card-pin-save { opacity: 1; }
}
.mfe-recipe-card:hover .mfe-card-pin-save { opacity: 1; }
.mfe-card-pin-save svg { width: 16px; height: 16px; }

.mfe-card-time-badge {
  position: absolute; bottom: .75rem; right: .75rem;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
  color: #fff; font-size: .75rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 50px;
  display: flex; align-items: center; gap: .3rem;
}
.mfe-card-time-badge svg { width: 12px; height: 12px; }
.mfe-card-body { padding: var(--mfe-card-spacing) calc(var(--mfe-card-spacing) * 1.1) calc(var(--mfe-card-spacing) * 1.2); flex: 1; display: flex; flex-direction: column; }
.mfe-card-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; flex-wrap: wrap; }
.mfe-card-cat { font-size: .72rem; font-weight: 700; color: var(--mfe-primary); text-transform: uppercase; letter-spacing: .04em; }
.mfe-card-stars { display: flex; align-items: center; gap: .2rem; }
.mfe-card-stars .star { width: 12px; height: 12px; }
.mfe-card-rating-val { font-size: .75rem; font-weight: 600; color: var(--mfe-text-light); }
.mfe-card-title {
  font-family: var(--mfe-font-heading); font-size: 1rem; font-weight: 700;
  color: var(--mfe-text); margin-bottom: .4rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* MOBILE FIX: break long words */
  overflow-wrap: break-word; word-break: break-word;
}
.mfe-card-title a { color: inherit; }
.mfe-card-title a:hover { color: var(--mfe-primary); }
.mfe-card-desc {
  font-size: .83rem; color: var(--mfe-text-light); line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: .75rem;
}
.mfe-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.mfe-card-info-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mfe-card-info-item { display: flex; align-items: center; gap: .25rem; font-size: .76rem; color: var(--mfe-text-muted); }
.mfe-card-info-item svg { width: 13px; height: 13px; color: var(--mfe-text-muted); }
.mfe-card-diff { font-size: .72rem; font-weight: 600; padding: .18rem .55rem; border-radius: 50px; }
.mfe-diff-easy   { background: #D1FAE5; color: #065F46; }
.mfe-diff-medium { background: #FEF3C7; color: #92400E; }
.mfe-diff-hard   { background: #FEE2E2; color: #991B1B; }

/* ── Stars ── */
.star polygon { fill: #D1D5DB; }
.star-full polygon, .star-half polygon { fill: #FBBF24; }
.mfe-stars { display: inline-flex; align-items: center; gap: 2px; }
.mfe-stars .star { width: 16px; height: 16px; }
.mfe-rating-value { font-weight: 700; font-size: .88rem; color: var(--mfe-text); margin-left: .2rem; }
.mfe-rating-count { font-size: .8rem; color: var(--mfe-text-muted); margin-left: .2rem; }
.mfe-stars-empty {
  font-size: .8rem; color: var(--mfe-text-muted); font-style: italic;
}

/* ── Homepage Hero ── */
.mfe-hero {
  position: relative; overflow: hidden;
  background: var(--mfe-bg-alt);
  border-radius: var(--mfe-radius-lg);
  margin-bottom: 2.5rem;
  /* MOBILE FIX: contain to viewport */
  width: 100%;
}
.mfe-hero-inner {
  display: grid; grid-template-columns: 1fr;
  min-height: 380px;
}
.mfe-hero-content {
  padding: 2rem 1.25rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 2;
  /* MOBILE FIX: prevent text from touching edges */
  min-width: 0;
}
.mfe-hero-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; color: var(--mfe-primary);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem;
  background: rgba(255,107,53,.1); padding: .3rem .7rem; border-radius: 50px;
  width: fit-content;
}
.mfe-hero-title {
  font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.15;
  margin-bottom: .75rem; color: var(--mfe-text);
  overflow-wrap: break-word;
}
.mfe-hero-desc { font-size: 1rem; color: var(--mfe-text-light); margin-bottom: 1.25rem; max-width: 480px; }
.mfe-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.mfe-hero-meta { display: flex; flex-wrap: wrap; gap: .75rem; }
.mfe-hero-meta-item { display: flex; align-items: center; gap: .35rem; font-size: .83rem; color: var(--mfe-text-light); }
.mfe-hero-meta-item svg { width: 15px; height: 15px; color: var(--mfe-primary); }
.mfe-hero-image {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
  /* CLS FIX */
  background: var(--mfe-bg-alt);
}
.mfe-hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ── Categories Grid ── */
.mfe-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(130px, calc(50% - .375rem)), 1fr));
  gap: .75rem;
}
.mfe-category-card {
  position: relative; overflow: hidden; border-radius: var(--mfe-radius);
  aspect-ratio: var(--mfe-cat-img-ratio, 1/1); cursor: pointer;
  transition: transform var(--mfe-transition), box-shadow var(--mfe-transition);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-decoration: none;
  /* CLS FIX: reserve space */
  background: var(--mfe-bg-alt);
}
.mfe-category-card:hover { transform: translateY(-3px); box-shadow: var(--mfe-shadow-md); }
.mfe-category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mfe-category-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
}
.mfe-category-name {
  position: relative; z-index: 2; color: #fff;
  font-size: .8rem; font-weight: 700; text-align: center;
  padding: .5rem .4rem .7rem; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.mfe-category-card-no-img {
  background: var(--mfe-bg-alt); aspect-ratio: var(--mfe-cat-img-ratio, 1/1); border-radius: var(--mfe-radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  text-decoration: none; transition: all var(--mfe-transition); border: 1.5px solid var(--mfe-border-light);
}
.mfe-category-card-no-img:hover { background: var(--mfe-primary); border-color: var(--mfe-primary); }
.mfe-category-card-no-img:hover .mfe-cat-icon,
.mfe-category-card-no-img:hover .mfe-cat-name { color: #fff; }
.mfe-cat-icon { font-size: 1.8rem; line-height: 1; }
.mfe-cat-name { font-size: .78rem; font-weight: 700; color: var(--mfe-text); text-align: center; }

/* ── Trending Pills ── */
.mfe-trending-wrap {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem;
  scrollbar-width: none; -ms-overflow-style: none;
  /* MOBILE FIX: prevent pills from causing page-level overflow */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.mfe-trending-wrap::-webkit-scrollbar { display: none; }
.mfe-trending-pill {
  flex-shrink: 0; padding: .35rem .9rem; border-radius: 50px;
  background: var(--mfe-bg-alt); font-size: .82rem; font-weight: 600; color: var(--mfe-text);
  border: 1.5px solid var(--mfe-border); text-decoration: none;
  transition: all var(--mfe-transition);
  /* MOBILE FIX: touch target */
  min-height: 36px; display: inline-flex; align-items: center;
}
.mfe-trending-pill:hover, .mfe-trending-pill.active {
  background: var(--mfe-primary); color: #fff; border-color: var(--mfe-primary); text-decoration: none;
}

/* ── Newsletter ── */
.mfe-newsletter {
  background: linear-gradient(135deg, var(--mfe-primary) 0%, #ff8c42 100%);
  border-radius: var(--mfe-radius-lg); padding: 2.5rem 1.25rem;
  text-align: center; color: #fff; margin-block: 2.5rem;
  /* MOBILE FIX: contain to viewport */
  overflow: hidden;
}
.mfe-newsletter-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.mfe-newsletter-title { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 700; margin-bottom: .5rem; color: #fff; }
.mfe-newsletter-desc { opacity: .9; margin-bottom: 1.25rem; font-size: .95rem; }
.mfe-newsletter-form {
  display: flex; gap: .5rem; max-width: 440px; margin-inline: auto;
  /* MOBILE FIX: always stack on tiny screens */
  flex-wrap: wrap;
}
.mfe-newsletter-form input[type=email] {
  flex: 1; min-width: 200px; padding: .7rem 1rem; border-radius: 8px;
  border: none; outline: none;
  /* MOBILE FIX: prevent iOS zoom */
  font-size: max(.95rem, 16px);
  /* MOBILE FIX: full-width on tiny screens */
  width: 100%;
}
.mfe-newsletter-form button {
  background: var(--mfe-text); color: #fff; padding: .7rem 1.4rem;
  border: none; border-radius: 8px; font-weight: 700; cursor: pointer;
  font-size: .9rem; transition: opacity var(--mfe-transition);
  /* MOBILE FIX: touch target + full-width when wraps */
  min-height: 44px; flex-shrink: 0;
}
.mfe-newsletter-form button:hover { opacity: .85; }
.mfe-newsletter-hp { display: none !important; } /* CSS backup; inline style already hides it */
.mfe-newsletter-message,
.mfe-newsletter-notice {
  margin: .85rem auto 0; max-width: 440px; font-size: .88rem; font-weight: 600;
  border-radius: 8px; padding: .55rem .9rem;
}
.mfe-newsletter-message:empty { display: none; }
.mfe-newsletter-notice-ok   { background: rgba(255,255,255,.18); color: #fff; }
.mfe-newsletter-notice-err  { background: rgba(0,0,0,.18); color: #fff; }

/* ── Sidebar & Layout ── */
.mfe-content-sidebar {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start;
}
/* FIX: all direct children of the grid need min-width:0 to prevent grid blowout.
   Without this, a wide child (e.g. discovery slider) forces the column past 100%. */
.mfe-content-sidebar > * { min-width: 0; }
.mfe-sidebar { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.mfe-widget {
  background: var(--mfe-bg-card); border-radius: var(--mfe-radius);
  padding: 1.25rem; box-shadow: var(--mfe-shadow);
  border: 1px solid var(--mfe-border-light);
  /* MOBILE FIX: prevent widget content overflowing */
  overflow: hidden; min-width: 0;
}
.mfe-widget-title {
  font-family: var(--mfe-font-heading); font-size: 1rem; font-weight: 700;
  margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--mfe-primary);
  display: block; overflow-wrap: break-word;
}
.mfe-sidebar-sticky { position: static; }

/* Legacy ad container classes — fully removed in v4.0 rebuild.
   The new .mfe-ad-wrapper system handles all ad zones. These old classes
   (.mfe-ad-content, .mfe-ad-sidebar, .mfe-ad-footer-wrap) are no longer
   output by any PHP function and need no CSS. Placeholder styles are defined
   once in the v4.0 ad system block above. */


/* ── Share Buttons ── */
.mfe-share-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.mfe-share-btn {
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: 6px; font-size: .8rem; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none; transition: opacity var(--mfe-transition);
  color: #fff;
  /* MOBILE FIX: touch target */
  min-height: 40px;
}
.mfe-share-btn:hover { opacity: .88; color: #fff; text-decoration: none; }
.mfe-share-btn svg { width: 15px; height: 15px; }
.mfe-share-pinterest { background: #E60023; }
.mfe-share-facebook  { background: #1877F2; }
.mfe-share-twitter   { background: #000000; }
.mfe-share-copy      { background: var(--mfe-text-light); }

/* Floating share */
.mfe-float-share {
  display: none; position: fixed; left: 1rem; top: 50%;
  transform: translateY(-50%); z-index: 100;
  flex-direction: column; gap: .4rem;
}
.mfe-float-share .mfe-share-btn {
  padding: .55rem; border-radius: 8px; justify-content: center; width: 40px; height: 40px;
}

/* ── Mobile Sticky Bottom Bar ── */
.mfe-mobile-bar {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--mfe-border); box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  /* MOBILE FIX: use env() for safe-area (iPhone X+) */
  padding: .5rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  gap: .4rem; justify-content: space-evenly;
  /* MOBILE FIX: prevent bar from causing scroll */
  width: 100%; max-width: 100vw;
}
.mfe-mobile-bar-btn {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  background: none; border: none; cursor: pointer; color: var(--mfe-text-light);
  font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .4rem; border-radius: 8px; transition: color var(--mfe-transition);
  text-decoration: none;
  /* MOBILE FIX: touch target */
  min-width: 44px; min-height: 44px; justify-content: center;
}
.mfe-mobile-bar-btn:hover, .mfe-mobile-bar-btn.active { color: var(--mfe-primary); }
.mfe-mobile-bar-btn svg { width: 22px; height: 22px; }
.mfe-mobile-bar-jump {
  background: var(--mfe-primary); color: #fff; border-radius: 50px;
  padding: .4rem 1rem; font-size: .75rem; flex-direction: row; gap: .3rem;
}
.mfe-mobile-bar-jump:hover { color: #fff; background: var(--mfe-primary-dark); text-decoration: none; }

/* ── Author Box ── */
.mfe-author-box {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: var(--mfe-bg-alt); border-radius: var(--mfe-radius);
  padding: 1.5rem; margin-block: 2rem;
  border: 1px solid var(--mfe-border-light);
  /* MOBILE FIX: allow wrap on narrow screens */
  flex-wrap: wrap;
}
.mfe-author-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mfe-author-info { min-width: 0; flex: 1; }
.mfe-author-label { font-size: .72rem; font-weight: 700; color: var(--mfe-primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.mfe-author-name  { font-family: var(--mfe-font-heading); font-size: 1.1rem; font-weight: 700; margin-bottom: .35rem; overflow-wrap: break-word; }
.mfe-author-bio   { font-size: .88rem; color: var(--mfe-text-light); }

/* ── Pagination ── */
.mfe-pagination {
  display: flex; justify-content: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap;
}
.mfe-pagination a, .mfe-pagination span {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--mfe-bg-alt); border: 1.5px solid var(--mfe-border);
  font-size: .9rem; font-weight: 600; color: var(--mfe-text);
  transition: all var(--mfe-transition);
  /* MOBILE FIX: touch target */
  min-width: 44px; min-height: 44px;
}
.mfe-pagination a:hover { background: var(--mfe-primary); color: #fff; border-color: var(--mfe-primary); text-decoration: none; }
.mfe-pagination .current { background: var(--mfe-primary); color: #fff; border-color: var(--mfe-primary); }

/* ── Load More ── */
.mfe-load-more-wrap { text-align: center; margin-top: 2rem; }
#mfe-load-more { min-width: 180px; }
#mfe-load-more.loading { opacity: .6; pointer-events: none; }

/* ── Footer ── */
.mfe-footer {
  background: var(--mfe-footer-bg, #1A1A1A);
  color: var(--mfe-footer-text, #D1D5DB);
  margin-top: var(--mfe-footer-margin-top, 48px);
  font-size: var(--mfe-footer-font-size, 14px);
  font-weight: var(--mfe-footer-font-weight, 400);
  line-height: var(--mfe-footer-line-height, 1.6);
  letter-spacing: var(--mfe-footer-letter-spacing, 0px);
}
.mfe-footer--sticky { position: sticky; bottom: 0; z-index: 40; }
.mfe-footer--bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin-top: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.15);
}
/* Reserve viewport space when the footer is in condensed Bottom Bar mode */
body.mfe-footer-bottombar-active { padding-bottom: calc(var(--mfe-footer-bottom-padding, 18px) * 2 + 24px); }

.mfe-footer-announcement {
  background: rgba(255,255,255,.06);
  padding: .6rem 1.5rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
}
.mfe-footer--light .mfe-footer-announcement { background: rgba(0,0,0,.05); }

.mfe-footer-top { padding-block: var(--mfe-footer-padding, 48px); }
.mfe-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--mfe-footer-column-gap, 32px); }

/* ── Layout variants ── */
.mfe-footer-grid--left { text-align: left; }
.mfe-footer-grid--center { text-align: center; }
.mfe-footer-grid--center .mfe-footer-social { justify-content: center; }
.mfe-footer-grid--center .mfe-footer-desc,
.mfe-footer-grid--center .mfe-footer-custom-content { margin-inline: auto; }
.mfe-footer-grid--right { text-align: right; }
.mfe-footer-grid--right .mfe-footer-social { justify-content: flex-end; }
.mfe-footer-grid--right .mfe-footer-desc,
.mfe-footer-grid--right .mfe-footer-custom-content { margin-left: auto; }
.mfe-footer-grid--full-width { grid-template-columns: 1fr; }
.mfe-footer-grid--split {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--mfe-footer-column-gap, 32px);
}
.mfe-footer-grid--split .mfe-footer-brand { flex: 1 1 280px; max-width: 360px; }
.mfe-footer-grid--split .mfe-footer-col { flex: 0 1 auto; }

.mfe-footer-brand .mfe-logo-text { color: var(--mfe-footer-heading, #fff); font-size: 1.3rem; }
.mfe-footer-brand .mfe-logo-text span { color: var(--mfe-primary); }
.mfe-footer-desc { font-size: .88rem; opacity: .85; margin-block: .75rem; max-width: 280px; }
.mfe-footer-custom-content { font-size: .88rem; opacity: .9; margin-block: .75rem; max-width: 320px; }
.mfe-footer-custom-content :is(p, div) { margin-bottom: .5rem; }

.mfe-footer-social { display: flex; gap: var(--mfe-footer-social-gap, 8px); flex-wrap: wrap; }
.mfe-footer-social a {
  width: calc(var(--mfe-footer-social-size, 17px) * 2.1);
  height: calc(var(--mfe-footer-social-size, 17px) * 2.1);
  border-radius: 8px;
  background: rgba(255,255,255,.07); color: var(--mfe-footer-text, #D1D5DB);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--mfe-transition), color var(--mfe-transition);
  /* MOBILE FIX: touch target */
  min-width: 44px; min-height: 44px;
}
.mfe-footer--light .mfe-footer-social a { background: rgba(0,0,0,.06); }
.mfe-footer-social a:hover { background: var(--mfe-primary); color: #fff; }
.mfe-footer-social svg { width: var(--mfe-footer-social-size, 17px); height: var(--mfe-footer-social-size, 17px); }

.mfe-footer-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1rem; padding: .65rem 1.4rem; border-radius: 8px;
  font-weight: 700; font-size: .9rem; text-decoration: none;
  min-height: 44px; transition: opacity var(--mfe-transition), background var(--mfe-transition), color var(--mfe-transition);
}
.mfe-footer-cta--solid { background: var(--mfe-primary); color: #fff; }
.mfe-footer-cta--solid:hover { opacity: .9; text-decoration: none; }
.mfe-footer-cta--outline { background: transparent; border: 1.5px solid var(--mfe-primary); color: var(--mfe-primary); }
.mfe-footer-cta--outline:hover { background: var(--mfe-primary); color: #fff; text-decoration: none; }

.mfe-footer-col-title { font-weight: 700; color: var(--mfe-footer-heading, #fff); margin-bottom: .75rem; font-size: .95rem; }
.mfe-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--mfe-footer-text-gap, 6px); }
.mfe-footer-col li a { font-size: .88rem; color: var(--mfe-footer-link, #9CA3AF); transition: color var(--mfe-transition); }
.mfe-footer-col li a:hover { color: var(--mfe-footer-link-hover, var(--mfe-primary)); }
.mfe-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding-block: var(--mfe-footer-bottom-padding, 18px);
  display: flex; flex-wrap: wrap; gap: var(--mfe-footer-text-gap, 8px); align-items: center; justify-content: center;
  font-size: .82rem; opacity: .8; text-align: center;
}
.mfe-footer--light .mfe-footer-bottom { border-top-color: rgba(0,0,0,.08); }
.mfe-footer-bottom--condensed { border-top: none; }
.mfe-footer-bottom a { color: var(--mfe-footer-link, #9CA3AF); }
.mfe-footer-bottom a:hover { color: var(--mfe-footer-link-hover, var(--mfe-primary)); }

/* ── 404 ── */
.mfe-404 { text-align: center; padding: 5rem 1.5rem; }
.mfe-404-emoji { font-size: 5rem; margin-bottom: 1rem; }
.mfe-404 h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: .5rem; }
.mfe-404 p { color: var(--mfe-text-light); max-width: 420px; margin-inline: auto; margin-bottom: 1.5rem; }

/* ── Archive ── */
.mfe-archive-header {
  background: var(--mfe-bg-alt); padding: 2.5rem 1.5rem;
  border-radius: var(--mfe-radius-lg); margin-bottom: 2rem; text-align: center;
  /* MOBILE FIX: contain to viewport */
  overflow: hidden;
}
.mfe-archive-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .5rem; overflow-wrap: break-word; }
.mfe-archive-desc  { color: var(--mfe-text-light); max-width: 560px; margin-inline: auto; }

/* ── Comments ── */
.mfe-comments { margin-top: 2.5rem; }
.mfe-comments .comment-form input[type=text],
.mfe-comments .comment-form input[type=email],
.mfe-comments .comment-form textarea {
  width: 100%; padding: .65rem 1rem; border: 1.5px solid var(--mfe-border);
  border-radius: var(--mfe-radius-sm); font-family: var(--mfe-font-body);
  outline: none; transition: border-color var(--mfe-transition);
  /* MOBILE FIX: prevent iOS zoom */
  font-size: max(.93rem, 16px);
}
.mfe-comments .comment-form input:focus,
.mfe-comments .comment-form textarea:focus { border-color: var(--mfe-primary); }
.mfe-comments .submit {
  background: var(--mfe-primary); color: #fff; padding: .65rem 1.5rem;
  border: none; border-radius: 8px; font-weight: 700; cursor: pointer;
  font-family: var(--mfe-font-body); font-size: .93rem; min-height: 44px;
}
.mfe-comments .comment-body { padding: 1rem 0; border-bottom: 1px solid var(--mfe-border-light); }
.mfe-comments .comment-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.mfe-comments .comment-author img { width: 40px; height: 40px; border-radius: 50%; }

/* ── Responsive breakpoints ── */

/* 480px: small phones → 2-col category grid */
@media (min-width: 480px) {
  .mfe-categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(33.33% - .5rem)), 1fr));
  }
}

/* 640px: medium tablets */
@media (min-width: 640px) {
  .mfe-hero-inner { grid-template-columns: 1fr 1fr; min-height: 460px; }
  .mfe-hero-image { aspect-ratio: auto; }
  .mfe-hero-content { padding: 3rem 2.5rem; }
  .mfe-categories-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px,100%), 1fr)); }
  .mfe-float-share { display: flex; }
  .mfe-footer-grid--grid { grid-template-columns: 1.5fr 1fr 1fr; }
  /* Newsletter form: side-by-side on wider */
  .mfe-newsletter-form input[type=email] { width: auto; }
}

/* 768px: desktop nav appears */
@media (min-width: 768px) {
  body { font-size: calc(16px * var(--mfe-type-scale-desktop)); }
  .mfe-header-nav { display: flex; }
  .mfe-mobile-menu-btn { display: none; }
  .mfe-content-sidebar {
    grid-template-columns: 1fr var(--mfe-sidebar-width);
  }
  .mfe-sidebar-sticky { position: sticky; top: calc(var(--mfe-header-height) + 1rem); }
  .mfe-mobile-bar { display: none; }
  body { padding-bottom: 0; }
}

/* 1024px: wide desktop */
@media (min-width: 1024px) {
  .mfe-hero-inner { grid-template-columns: 1fr 1.1fr; }
  .mfe-footer-grid--grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* Sticky header off toggle (applied via JS/customizer) */
.mfe-header-no-sticky { position: static !important; }

/* ── Scrolling fixes ── */
@media (max-width: 767px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mfe-float-share { display: none; }
  /* MOBILE FIX: prevent horizontal scroll on recipe cards grid */
  .mfe-recipes-grid,
  .mfe-recipes-grid-2,
  .mfe-recipes-grid-4 {
    grid-template-columns: 1fr;
  }
  /* MOBILE: ad containers use the v4.0 adaptive system (overflow-x:auto) */
  /* MOBILE FIX: hero full width */
  .mfe-hero { margin-inline: 0; border-radius: var(--mfe-radius); }
  /* MOBILE FIX: archive header padding */
  .mfe-archive-header { padding: 1.5rem 1rem; }
}

/* 2-column cards from 480px */
@media (min-width: 480px) and (max-width: 767px) {
  .mfe-recipes-grid,
  .mfe-recipes-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Print ── */
@media print {
  .mfe-header, .mfe-footer, .mfe-sidebar, .mfe-mobile-bar,
  .mfe-float-share, .mfe-share-buttons, #mfe-progress-bar,
  .mfe-related, .mfe-comments, .mfe-newsletter,
  .mfe-ad-wrapper, .mfe-ad-sticky,
  .mfe-ad-placeholder { display: none !important; }
  body.mfe-sticky-ad-on { padding-bottom: 0 !important; }
  .mfe-content-sidebar { display: block !important; }
  .mfe-recipe-main { max-width: 100% !important; }
  @page { margin: 1.5cm; }
}

/* ── Mobile ad activation ───────────────────────────────────────────────────
   Device visibility is handled by .mfe-ad-desktop / .mfe-ad-mobile classes
   in the ad system block above. No additional mobile rules needed here. */

/* ════════════════════════════════════════════════════════════════════════════
   POST / PAGE LAYOUT WIDTH + SHORTCODE COMPATIBILITY  (v4.2 architecture add-on)
   ════════════════════════════════════════════════════════════════════════════
   Driven by body classes added in inc/post-layout.php:
     body.mfe-layout-normal | .mfe-layout-half | .mfe-layout-full | .mfe-layout-tool
     body.mfe-has-shortcode            (any shortcode present)
     body.mfe-has-sc-<tag>             (per detected shortcode tag)

   GOALS (see PART 1–3 of the architecture brief):
     • Normal  = current layout, 100% unchanged (sidebar kept on posts).
     • Half    = narrow centered reading column for short/simple content.
     • Full    = wide container for calculators/tables; TEXT stays capped.
     • Tool    = no sidebar, expanded centered tool wrapper, shortcode-ready.
     • Content beauty: in Full/Tool, paragraphs/headings/lists stay capped at
       --mfe-content-max and centered; tool elements (forms, tables, sliders,
       [class*=tool]/[class*=calculator]/[class*=converter]) expand wide.
     • Shortcode safety: no width compression, no overflow, mobile responsive.

   This block is APPEND-ONLY — no existing rule above is altered.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Default entry-content width (= current behaviour) ────────────────────────
   Replaces the old inline style="max-width:var(--mfe-content-max)" on page.php.
   'normal' posts are unaffected (they use .mfe-post-content in blog.css). */
.mfe-entry-content {
  max-width: var(--mfe-content-max);
  margin-inline: auto;
}

/* ── HALF WIDTH: narrow centered reading column ─────────────────────────────── */
body.mfe-layout-half .mfe-entry-content,
body.mfe-layout-half .mfe-single-main,
body.mfe-layout-half .mfe-page-content {
  max-width: 640px;
  margin-inline: auto;
  width: 100%;
}
/* Single post: collapse the sidebar grid to one column when sidebar is gone. */
body.mfe-layout-half .mfe-content-sidebar { grid-template-columns: 1fr !important; }

/* ── FULL + TOOL: collapse sidebar grid to one centered column ──────────────── */
body.mfe-layout-full .mfe-content-sidebar,
body.mfe-layout-tool  .mfe-content-sidebar { grid-template-columns: 1fr !important; }

/* ── FULL CONTAINER WIDTH ───────────────────────────────────────────────────── */
body.mfe-layout-full .mfe-single-main,
body.mfe-layout-full .mfe-page-content {
  width: 100%;
  max-width: var(--mfe-max-width);
  margin-inline: auto;
}
body.mfe-layout-full .mfe-entry-content { max-width: var(--mfe-max-width); }

/* ── TOOL LAYOUT ──────────────────────────────────────────────────────────────
   Expanded, centered tool wrapper. The .mfe-entry-content is wide so tool
   shortcodes can fully expand; text blocks are capped below for readability. */
body.mfe-layout-tool .mfe-single-main,
body.mfe-layout-tool .mfe-page-content {
  width: 100%;
  max-width: var(--mfe-max-width);
  margin-inline: auto;
}
body.mfe-layout-tool .mfe-entry-content { max-width: var(--mfe-max-width); }

/* Optional explicit tool wrapper that future plugins MAY use for a clean,
   padded, centered card around their tool output. Fully optional — shortcodes
   also expand fine without it via the rules below. */
.mfe-tool-wrapper {
  width: 100%;
  max-width: var(--mfe-max-width);
  margin-inline: auto;
  background: var(--mfe-bg-card);
  border: 1px solid var(--mfe-border-light);
  border-radius: var(--mfe-radius);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--mfe-shadow);
}
.mfe-tool-wrapper + .mfe-tool-wrapper { margin-top: 2rem; }

/* ── CONTENT BEAUTY (PART 3): cap text blocks, keep tools wide ────────────────
   In Full + Tool, written content (p, headings, lists, blockquote, pre, img)
   stays within the readable --mfe-content-max and is centered. Tool-shaped
   elements (forms, tables, sliders, iframes, and elements whose class hints
   at a tool) are intentionally NOT capped → they expand to the full width. */
body.mfe-layout-full .mfe-entry-content > p,
body.mfe-layout-full .mfe-entry-content > h1,
body.mfe-layout-full .mfe-entry-content > h2,
body.mfe-layout-full .mfe-entry-content > h3,
body.mfe-layout-full .mfe-entry-content > h4,
body.mfe-layout-full .mfe-entry-content > h5,
body.mfe-layout-full .mfe-entry-content > h6,
body.mfe-layout-full .mfe-entry-content > ul,
body.mfe-layout-full .mfe-entry-content > ol,
body.mfe-layout-full .mfe-entry-content > blockquote,
body.mfe-layout-full .mfe-entry-content > pre,
body.mfe-layout-full .mfe-post-content > p,
body.mfe-layout-full .mfe-post-content > h1,
body.mfe-layout-full .mfe-post-content > h2,
body.mfe-layout-full .mfe-post-content > h3,
body.mfe-layout-full .mfe-post-content > h4,
body.mfe-layout-full .mfe-post-content > h5,
body.mfe-layout-full .mfe-post-content > h6,
body.mfe-layout-full .mfe-post-content > ul,
body.mfe-layout-full .mfe-post-content > ol,
body.mfe-layout-full .mfe-post-content > blockquote,
body.mfe-layout-full .mfe-post-content > pre,
body.mfe-layout-tool  .mfe-entry-content > p,
body.mfe-layout-tool  .mfe-entry-content > h1,
body.mfe-layout-tool  .mfe-entry-content > h2,
body.mfe-layout-tool  .mfe-entry-content > h3,
body.mfe-layout-tool  .mfe-entry-content > h4,
body.mfe-layout-tool  .mfe-entry-content > h5,
body.mfe-layout-tool  .mfe-entry-content > h6,
body.mfe-layout-tool  .mfe-entry-content > ul,
body.mfe-layout-tool  .mfe-entry-content > ol,
body.mfe-layout-tool  .mfe-entry-content > blockquote,
body.mfe-layout-tool  .mfe-entry-content > pre,
body.mfe-layout-tool  .mfe-post-content > p,
body.mfe-layout-tool  .mfe-post-content > h1,
body.mfe-layout-tool  .mfe-post-content > h2,
body.mfe-layout-tool  .mfe-post-content > h3,
body.mfe-layout-tool  .mfe-post-content > h4,
body.mfe-layout-tool  .mfe-post-content > h5,
body.mfe-layout-tool  .mfe-post-content > h6,
body.mfe-layout-tool  .mfe-post-content > ul,
body.mfe-layout-tool  .mfe-post-content > ol,
body.mfe-layout-tool  .mfe-post-content > blockquote,
body.mfe-layout-tool  .mfe-post-content > pre {
  max-width: var(--mfe-content-max);
  margin-inline: auto;
}
/* Centered, capped headings on wide layouts read better left-aligned with the
   text column — margin-inline:auto already centers them; keep text-align default. */

/* Keep the FAQ section readable on wide layouts too. */
body.mfe-layout-full .mfe-post-faq-section,
body.mfe-layout-tool  .mfe-post-faq-section {
  max-width: var(--mfe-content-max);
  margin-inline: auto;
}

/* ── SHORTCODE COMPATIBILITY (PART 2): let tools fully expand ─────────────────
   Forms, tables, sliders, iframes and tool-hinted elements expand to the full
   content width and never get compressed. Also harden against overflow. */
body.mfe-layout-full .mfe-entry-content form,
body.mfe-layout-full .mfe-entry-content table,
body.mfe-layout-full .mfe-entry-content iframe,
body.mfe-layout-full .mfe-entry-content .wp-block-table,
body.mfe-layout-full .mfe-entry-content figure,
body.mfe-layout-full .mfe-entry-content .wp-block-embed,
body.mfe-layout-full .mfe-entry-content [class*="calculator"],
body.mfe-layout-full .mfe-entry-content [class*="converter"],
body.mfe-layout-full .mfe-entry-content [class*="nutrition-tool"],
body.mfe-layout-full .mfe-entry-content [class*="tool-"],
body.mfe-layout-full .mfe-entry-content [class*="-tool"],
body.mfe-layout-full .mfe-entry-content [class*="mfe-tool"],
body.mfe-layout-tool  .mfe-entry-content form,
body.mfe-layout-tool  .mfe-entry-content table,
body.mfe-layout-tool  .mfe-entry-content iframe,
body.mfe-layout-tool  .mfe-entry-content .wp-block-table,
body.mfe-layout-tool  .mfe-entry-content figure,
body.mfe-layout-tool  .mfe-entry-content .wp-block-embed,
body.mfe-layout-tool  .mfe-entry-content [class*="calculator"],
body.mfe-layout-tool  .mfe-entry-content [class*="converter"],
body.mfe-layout-tool  .mfe-entry-content [class*="nutrition-tool"],
body.mfe-layout-tool  .mfe-entry-content [class*="tool-"],
body.mfe-layout-tool  .mfe-entry-content [class*="-tool"],
body.mfe-layout-tool  .mfe-entry-content [class*="mfe-tool"] {
  max-width: 100%;
  width: 100%;
}

/* Forms: full width, sane input sizing, no broken UI. */
body.mfe-layout-full .mfe-entry-content form,
body.mfe-layout-tool  .mfe-entry-content form { display: block; }
body.mfe-layout-full .mfe-entry-content input[type="text"],
body.mfe-layout-full .mfe-entry-content input[type="email"],
body.mfe-layout-full .mfe-entry-content input[type="number"],
body.mfe-layout-full .mfe-entry-content input[type="search"],
body.mfe-layout-full .mfe-entry-content input[type="tel"],
body.mfe-layout-full .mfe-entry-content input[type="url"],
body.mfe-layout-full .mfe-entry-content select,
body.mfe-layout-full .mfe-entry-content textarea,
body.mfe-layout-tool  .mfe-entry-content input[type="text"],
body.mfe-layout-tool  .mfe-entry-content input[type="email"],
body.mfe-layout-tool  .mfe-entry-content input[type="number"],
body.mfe-layout-tool  .mfe-entry-content input[type="search"],
body.mfe-layout-tool  .mfe-entry-content input[type="tel"],
body.mfe-layout-tool  .mfe-entry-content input[type="url"],
body.mfe-layout-tool  .mfe-entry-content select,
body.mfe-layout-tool  .mfe-entry-content textarea {
  width: 100%;
  max-width: 100%;
}

/* Tables & sliders: scroll horizontally instead of breaking the layout. */
body.mfe-layout-full .mfe-entry-content table,
body.mfe-layout-tool  .mfe-entry-content table { display: block; overflow-x: auto; white-space: nowrap; }
body.mfe-layout-full .mfe-entry-content .wp-block-table table,
body.mfe-layout-tool  .mfe-entry-content .wp-block-table table { display: table; white-space: normal; }

/* Overflow safety net for the whole content area on wide layouts. */
body.mfe-layout-full .mfe-entry-content,
body.mfe-layout-tool  .mfe-entry-content,
body.mfe-layout-full .mfe-post-content,
body.mfe-layout-tool  .mfe-post-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
  min-width: 0;
}
body.mfe-layout-full .mfe-entry-content img,
body.mfe-layout-tool  .mfe-entry-content img,
body.mfe-layout-full .mfe-post-content img,
body.mfe-layout-tool  .mfe-post-content img {
  max-width: 100%;
  height: auto;
}

/* ── When a shortcode is present, make sure its container never compresses ────
   Even on 'normal'/'half', a tool shortcode should not be width-clipped. */
body.mfe-has-shortcode .mfe-entry-content [class*="calculator"],
body.mfe-has-shortcode .mfe-entry-content [class*="converter"],
body.mfe-has-shortcode .mfe-entry-content [class*="nutrition-tool"],
body.mfe-has-shortcode .mfe-entry-content [class*="mfe-tool"],
body.mfe-has-shortcode .mfe-entry-content .mfe-tool-wrapper {
  min-width: 0;
  max-width: 100%;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* On mobile all layouts are single-column anyway; just keep things readable
     and let tools use the full viewport width. */
  body.mfe-layout-half .mfe-entry-content,
  body.mfe-layout-full .mfe-entry-content,
  body.mfe-layout-tool  .mfe-entry-content,
  body.mfe-layout-half .mfe-single-main,
  body.mfe-layout-full .mfe-single-main,
  body.mfe-layout-tool  .mfe-single-main,
  body.mfe-layout-half .mfe-page-content,
  body.mfe-layout-full .mfe-page-content,
  body.mfe-layout-tool  .mfe-page-content {
    max-width: 100%;
    padding-inline: 0;
  }
  .mfe-tool-wrapper { padding: 1rem; border-radius: var(--mfe-radius-sm); }
}

/* ── Print: tool layouts print cleanly too ──────────────────────────────────── */
@media print {
  body.mfe-layout-tool .mfe-content-sidebar,
  body.mfe-layout-full .mfe-content-sidebar { display: block !important; }
  .mfe-tool-wrapper { box-shadow: none; border: none; padding: 0; }
}