/* ============================================================
   ELIJAH'S "MODERN" PAGE STYLE  (approved Oct 9, 2026)
   Source: Christmas Dinners redesign, variation 3 "Order-first"
   (Version B "Clean and modern" with a quick-order hero panel,
   jump tabs, dark bands and a pinned order bar).
   Scope: everything lives under .mx and uses mx- class names, so it
   never touches the sitewide nav, seasonal banner or footer.
   Fonts: DM Sans 400/500/600/700 (Playfair stays for the nav logo).
   ============================================================ */

.mx {
  --mx-ink: #15120F;
  --mx-body: #3D3833;
  --mx-muted: #6E675F;
  --mx-line: #E8E4DD;
  --mx-line-2: #E2DDD5;
  --mx-bar: #D9D4CC;
  --mx-soft: #F5F3EF;
  --mx-chip: #F2EFEA;
  --mx-accent: #B3202A;
  --mx-accent-hover: #9A1B24;
  --mx-white: #FFFFFF;
  background: var(--mx-white);
  color: var(--mx-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Resets use :where() so they carry zero specificity and every mx- class below wins. */
:where(.mx) *, :where(.mx) *::before, :where(.mx) *::after { box-sizing: border-box; }
:where(.mx) :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
:where(.mx) :where(ul, ol) { list-style: none; }
:where(.mx) a { color: inherit; }
:where(.mx) img { display: block; max-width: 100%; height: auto; } /* height:auto beats the width/height attributes */
.mx h1, .mx h2, .mx h3 { font-family: 'DM Sans', system-ui, sans-serif; color: var(--mx-ink); font-style: normal; text-transform: none; }
.mx a:focus-visible, .mx summary:focus-visible { outline: 3px solid var(--mx-accent); outline-offset: 3px; border-radius: 6px; }
.mx svg { flex-shrink: 0; }

/* ─── Layout ─── */
.mx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.mx-section { padding: clamp(52px, 5.6vw, 80px) 0; }
.mx-section--soft { background: var(--mx-soft); }
.mx-section--flush-top { padding-top: 0; }

/* ─── Type ─── */
.mx-eyebrow { margin: 0 0 10px; color: var(--mx-accent); font-size: 14px; font-weight: 600; }
.mx-h2 { font-weight: 700; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.mx-h2--sm { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.025em; }
.mx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.mx-head__title { flex: 1 1 520px; min-width: 0; }
.mx-head__aside { flex: 0 1 380px; color: var(--mx-muted); font-size: 16px; }
.mx-head__aside a { color: var(--mx-ink); font-weight: 600; white-space: nowrap; }
.mx-link { color: var(--mx-accent); }
.mx-nowrap { white-space: nowrap; }

/* ─── Buttons ─── */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: 14px; border: 0;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.mx-btn--primary { background: var(--mx-accent); color: var(--mx-white); }
.mx-btn--primary:hover { background: var(--mx-accent-hover); }
.mx-btn--soft { background: var(--mx-chip); color: var(--mx-ink); font-weight: 500; }
.mx-btn--soft:hover { background: #E7E2DA; }
.mx-btn--dark { background: var(--mx-ink); color: var(--mx-white); }
.mx-btn--dark:hover { background: #2B2621; }
.mx-btn--white { background: var(--mx-white); color: var(--mx-accent); font-weight: 700; }
.mx-btn--ghost-white { background: transparent; color: var(--mx-white); border: 1.5px solid rgba(255, 255, 255, 0.7); font-weight: 500; }
.mx-btn--ghost-white:hover { background: rgba(255, 255, 255, 0.1); }
.mx-btn--card { display: flex; width: 100%; min-height: 52px; font-size: 16px; }
.mx-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mx-btns > .mx-btn { flex: 1 1 200px; }

/* ─── Hero: text column + quick-order panel ─── */
.mx-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); }
.mx-crumb { margin: 0 0 clamp(20px, 3vw, 32px); font-size: 13px; color: var(--mx-muted); }
.mx-crumb a { color: var(--mx-muted); text-decoration: none; }
.mx-crumb a:hover { color: var(--mx-ink); }
.mx-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 36px clamp(32px, 5vw, 80px); }
.mx-hero__text { flex: 1.15 1 500px; min-width: 0; }
.mx-hero__panel { flex: 1 1 420px; min-width: 0; }
.mx-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--mx-accent); font-size: 14px; font-weight: 600; }
.mx-h1 { font-weight: 700; font-size: clamp(42px, 5.6vw, 78px); line-height: 1.0; letter-spacing: -0.035em; }
.mx-h1__sub { display: block; margin-top: 12px; font-weight: 500; font-size: 0.42em; line-height: 1.25; letter-spacing: -0.015em; color: var(--mx-muted); }
.mx-lead { margin-top: 22px; max-width: 520px; font-size: clamp(17px, 1.4vw, 19px); color: var(--mx-body); line-height: 1.55; }
.mx-hero .mx-btns { margin-top: 26px; max-width: 580px; }
.mx-trust { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; font-size: 14.5px; color: var(--mx-body); }
.mx-trust a { display: inline-flex; align-items: center; gap: 6px; color: var(--mx-ink); font-weight: 600; }

/* Quick-order panel ("Pick your dinner") */
.mx-quick { background: var(--mx-white); border: 1px solid var(--mx-line); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(21, 18, 15, 0.10); }
.mx .mx-quick__img { width: 100%; height: clamp(180px, 17vw, 240px); object-fit: cover; }
.mx-quick__body { padding: 18px 22px 20px; }
.mx-quick__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.mx-quick__title { font-weight: 700; font-size: 20px; letter-spacing: -0.015em; }
.mx-quick__meta { font-size: 13.5px; color: var(--mx-muted); }
.mx-quick__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--mx-line); }
.mx .mx-quick__thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.mx-quick__name { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; line-height: 1.3; }
.mx-quick__sub { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--mx-muted); }
.mx-quick__price { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.mx-quick__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--mx-accent); color: var(--mx-white); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.mx-quick__btn:hover { background: var(--mx-accent-hover); }
.mx-quick__foot { padding-top: 12px; border-top: 1px solid var(--mx-line); font-size: 13.5px; color: var(--mx-muted); }
@media (max-width: 480px) { /* phones: give the item name the room; thumbs go */
  .mx .mx-quick__thumb { display: none; }
  .mx-quick__row { gap: 12px; }
  .mx-quick__price { font-size: 18px; }
  .mx-quick__btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
}

/* ─── Jump tabs (sticky under the fixed 68 px site nav) ─── */
.mx-tabs { position: sticky; top: 68px; z-index: 50; background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mx-tabs__inner { display: flex; align-items: center; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.mx-tabs__inner::-webkit-scrollbar { display: none; }
.mx-tabs__label { flex-shrink: 0; margin-right: 6px; font-size: 14px; color: var(--mx-muted); }
.mx-tab { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--mx-chip); color: var(--mx-ink); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.mx-tab:hover { background: #E7E2DA; }
.mx-tab--active { background: var(--mx-ink); color: var(--mx-white); }
.mx-tab--active:hover { background: #2B2621; }
.mx [id] { scroll-margin-top: 140px; } /* anchor jumps land below the nav + tabs */

/* ─── Timeline (dates / availability) ─── */
.mx-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(20px, 2vw, 28px) clamp(14px, 1.6vw, 20px); margin-top: clamp(32px, 4vw, 48px); }
.mx-timeline__bar { height: 6px; border-radius: 999px; background: var(--mx-bar); }
.mx-timeline__bar--hot { background: var(--mx-accent); }
.mx-timeline__date { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--mx-muted); }
.mx-timeline__date--hot { color: var(--mx-accent); }
.mx-timeline__title { margin-top: 4px; font-weight: 700; font-size: clamp(18px, 1.7vw, 22px); letter-spacing: -0.015em; line-height: 1.25; }
.mx-timeline__text { margin-top: 6px; font-size: 15px; color: var(--mx-body); line-height: 1.5; }

/* ─── Product cards ─── */
.mx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.mx-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } /* two wide cards per row, for 2 or 4 packages */
.mx-card { display: flex; flex-direction: column; padding: 10px; border-radius: 24px; background: var(--mx-white); }
.mx-section:not(.mx-section--soft) .mx-card { border: 1px solid var(--mx-line); }
.mx-card__media { position: relative; }
.mx-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; }
.mx-badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 10px; background: var(--mx-white); color: var(--mx-ink); font-size: 13px; font-weight: 600; line-height: 1.3; }
.mx-badge--accent { background: var(--mx-accent); color: var(--mx-white); }
.mx-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 16px 16px; }
.mx-card__title { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; }
.mx-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; }
.mx-price__num { font-weight: 700; font-size: 40px; letter-spacing: -0.03em; line-height: 1; }
.mx-price__unit { font-size: 15px; color: var(--mx-muted); }
.mx-card__note { margin-top: 6px; font-size: 14.5px; color: var(--mx-muted); }
.mx-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mx-line); font-size: 15.5px; line-height: 1.45; color: var(--mx-body); }
.mx-checks li { display: flex; gap: 10px; }
.mx-checks svg { margin-top: 2px; color: var(--mx-accent); }
.mx-card__cta { margin-top: auto; padding-top: 22px; }

/* Chip panel (e.g. "Choose your 2 sides") */
.mx-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 20px; padding: clamp(20px, 2.4vw, 28px); border-radius: 24px; background: var(--mx-white); }
.mx-section:not(.mx-section--soft) .mx-panel { background: var(--mx-soft); }
.mx-panel__title { font-weight: 700; font-size: 20px; letter-spacing: -0.015em; line-height: 1.2; }
.mx-panel__sub { margin-top: 2px; font-size: 14px; color: var(--mx-muted); }
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px; }
.mx-chip { padding: 9px 16px; border-radius: 10px; background: var(--mx-soft); font-size: 15px; }
.mx-section:not(.mx-section--soft) .mx-chip { background: var(--mx-white); }
.mx-panel__note { flex: 1 1 100%; font-size: 14px; color: var(--mx-muted); }

/* ─── Split: text column + tall photo ─── */
.mx-split { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(32px, 5vw, 72px); }
.mx-split__main { flex: 1 1 460px; min-width: 0; }
.mx-split__media { flex: 1 1 380px; min-width: 0; }
.mx .mx-split__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 24px; }

/* Price list */
.mx-pricelist { margin-top: 28px; border-top: 1px solid var(--mx-line); font-size: 16px; }
.mx-pricelist__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mx-line); }
.mx-pricelist__meta { color: var(--mx-muted); font-size: 14px; }
.mx-pricelist__price { font-weight: 600; white-space: nowrap; }
.mx-tip { margin-top: 22px; font-size: 15px; color: var(--mx-body); }

/* ─── Numbered steps + info row ─── */
.mx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.mx-step { padding: clamp(24px, 2.6vw, 32px); border-radius: 24px; background: var(--mx-white); }
.mx-section:not(.mx-section--soft) .mx-step { background: var(--mx-soft); }
.mx-step__num { font-weight: 700; font-size: 44px; letter-spacing: -0.04em; line-height: 1; color: var(--mx-accent); }
.mx-step__title { margin: 18px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.mx-step__text { font-size: 15.5px; color: var(--mx-body); line-height: 1.55; }
.mx-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 32px; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--mx-line-2); font-size: 15.5px; line-height: 1.5; color: var(--mx-body); }
.mx-info__item { display: flex; gap: 14px; }
.mx-info__item strong { color: var(--mx-ink); }

/* ─── Feature: photo + text with big stats (secondary audience) ─── */
.mx-feature { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px); }
.mx-feature__media { flex: 1 1 440px; min-width: 0; }
.mx-feature__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 24px; }
.mx-feature__body { flex: 1 1 460px; min-width: 0; }
.mx-feature__text { margin-top: 18px; color: var(--mx-body); }
.mx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin-top: 28px; padding: 24px 0; border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line); }
.mx-stat__num { font-weight: 700; font-size: 36px; letter-spacing: -0.03em; line-height: 1; }
.mx-stat__num small { font-size: 0.6em; font-weight: 600; color: var(--mx-muted); letter-spacing: -0.02em; }
.mx-stat__text { margin-top: 8px; font-size: 15px; color: var(--mx-body); }
.mx-stat__meta { margin-top: 2px; font-size: 13.5px; color: var(--mx-muted); }
.mx-stat__meta a { color: var(--mx-accent); }
.mx-fineprint { margin-top: 20px; font-size: 13.5px; color: var(--mx-muted); }

/* ─── Link cards (related pages / other occasions) ─── */
.mx-linkcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 28px; }
.mx-linkcard { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--mx-line); border-radius: 24px; color: var(--mx-ink); text-decoration: none; transition: border-color .15s ease; }
.mx-linkcard:hover { border-color: var(--mx-bar); }
.mx-linkcard__kicker { font-size: 14px; font-weight: 600; color: var(--mx-accent); }
.mx-linkcard__title { margin-top: 6px; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; }
.mx-linkcard__text { margin-top: 8px; font-size: 15.5px; color: var(--mx-body); line-height: 1.55; }
.mx-linkcard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 15px; }

/* ─── Reviews ─── */
.mx-textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--mx-ink); font-weight: 600; font-size: 16px; }
.mx-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.mx-quote { padding: clamp(26px, 3vw, 40px); border-radius: 24px; background: var(--mx-white); }
.mx-section:not(.mx-section--soft) .mx-quote { background: var(--mx-soft); }
.mx-quote blockquote { font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.mx-quote figcaption { margin-top: 20px; font-size: 14px; color: var(--mx-muted); }
.mx-quote figcaption strong { color: var(--mx-ink); }

/* ─── FAQ: two columns of collapsed questions ─── */
.mx-faq { display: flex; flex-wrap: wrap; gap: 0 48px; margin-top: clamp(28px, 3.4vw, 44px); }
.mx-faq__col { flex: 1 1 400px; min-width: 0; border-top: 1px solid var(--mx-line); }
.mx-faq details { border-bottom: 1px solid var(--mx-line); }
.mx-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; font-weight: 600; font-size: 17px; line-height: 1.4; }
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary svg { transition: transform .2s ease; }
.mx-faq details[open] summary svg { transform: rotate(180deg); }
.mx-faq details p { margin: 0 0 22px; color: var(--mx-body); font-size: 16px; }
.mx-faq details a { color: var(--mx-accent); }

/* ─── Closing CTA block ─── */
.mx-cta-section { padding: 0 0 clamp(48px, 6vw, 80px); }
.mx-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px); border-radius: clamp(24px, 3vw, 36px); background: var(--mx-accent); color: var(--mx-white); }
.mx-cta__star { position: absolute; right: -110px; top: -130px; width: clamp(200px, 24vw, 340px); height: auto; fill: #BF2C35; }
.mx-cta__main { position: relative; flex: 1 1 480px; min-width: 0; }
.mx-cta__kicker { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #FFD9DB; }
.mx .mx-cta h2 { color: var(--mx-white); font-weight: 700; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.03; letter-spacing: -0.035em; }
.mx-cta__text { margin-top: 16px; max-width: 520px; color: #FFE7E8; }
.mx-cta__actions { position: relative; flex: 0 1 340px; display: flex; flex-direction: column; gap: 10px; }
.mx-cta__actions .mx-btn { display: flex; min-height: 58px; }

/* ─── Dark bands (availability timeline, secondary-audience feature) ─── */
.mx-section--dark { background: var(--mx-ink); color: var(--mx-white); }
.mx-section--dark .mx-eyebrow { color: #FF9EA4; }
.mx .mx-section--dark h2, .mx .mx-section--dark h3 { color: var(--mx-white); }
.mx-section--dark .mx-head__aside { color: #CFC8BF; }
.mx-section--dark .mx-timeline__bar { background: #3A332D; }
.mx-section--dark .mx-timeline__bar--hot { background: #E0464F; }
.mx-section--dark .mx-timeline__date { color: #CFC8BF; }
.mx-section--dark .mx-timeline__date--hot { color: #FF9EA4; }
.mx-section--dark .mx-timeline__text { color: #CFC8BF; }
.mx-section--dark .mx-feature__text, .mx-section--dark .mx-stat__text { color: #CFC8BF; }
.mx-section--dark .mx-stats { border-color: #3A332D; }
.mx-section--dark .mx-stat__num small, .mx-section--dark .mx-stat__meta, .mx-section--dark .mx-fineprint { color: #A69E94; }
.mx-section--dark .mx-stat__meta a { color: #FF9EA4; }
.mx-section.mx-section--timeline { padding: clamp(48px, 5vw, 72px) 0; }

/* ─── Pinned order bar (last element in <body>; replaces the old .sticky-mobile-cta) ─── */
.mx-orderbar { position: sticky; bottom: 0; z-index: 150; background: var(--mx-white); border-top: 1px solid var(--mx-line); box-shadow: 0 -10px 30px rgba(21, 18, 15, 0.08); }
.mx-orderbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-top: 12px; padding-bottom: 12px; }
.mx-orderbar__text { font-size: 15px; line-height: 1.35; }
.mx-orderbar__text span { color: var(--mx-muted); }
.mx-orderbar__actions { display: flex; gap: 8px; flex: 0 1 auto; }
.mx-orderbar .mx-btn { min-height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
@media (max-width: 600px) {
  .mx-orderbar__text { display: none; }
  .mx-orderbar__actions { flex: 1 1 100%; }
  .mx-orderbar__actions .mx-btn { flex: 1 1 0; padding: 0 12px; }
}