/* =====================================================================
   Healthy Kiwi Dinners — static clone
   Edit brand tokens in :root to retheme the whole site.
   ===================================================================== */
:root{
  --green:#1c8b3e;
  --green-dark:#15722f;
  --orange:#e07e1e;
  --yellow:#f4b400;
  --ink:#242424;
  --muted:#777;
  --line:#e5e5e5;
  --maxw:1200px;
  --font:"Cabin",Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.6;font-size:16px;background:#fff;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;line-height:1.2}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:700;padding:12px 28px;border:0;border-radius:2px;cursor:pointer;font-family:inherit;font-size:15px;transition:background .2s}
.btn:hover{background:var(--green-dark)}

/* ---------- Topbar ---------- */
.topbar{background:var(--green);color:#fff;font-size:14px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px;flex-wrap:wrap}
.topbar .phone{font-weight:600;font-size:24px}
.topbar .phone a{color:#fff}
.topbar .menus{display:flex;gap:20px}
/* Source renders these as light buttons: white text on the green bar, padded. */
.topbar .menus a{color:#fff;font-weight:600;font-size:13px;letter-spacing:normal;padding:5px 20px;text-transform:uppercase;border-radius:2px;transition:background .2s}
.topbar .menus a:hover{background:rgba(255,255,255,.15)}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.08)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:131px;gap:16px}
.logo img{height:105px;width:auto}
.main-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
.main-nav a{font-weight:700;font-size:13px;letter-spacing:.02em;color:#333;padding:6px 0;text-transform:uppercase}
.main-nav a:hover{color:#111}
/* Active/current page link is orange in the source (matches brand), not green —
   but only for a direct top-level page match (e.g. Home). The source leaves the
   DINNERS parent grey on its submenu pages, so don't orange a .has-sub parent. */
.main-nav li.active:not(.has-sub)>a{color:#db7716}
.main-nav .has-sub{position:relative}
.main-nav .submenu{position:absolute;top:100%;left:-12px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.14);min-width:200px;padding:8px 0;display:none;flex-direction:column}
.main-nav .has-sub:hover .submenu{display:flex}
.main-nav .submenu a{padding:9px 18px;font-size:13px}
.main-nav .submenu a:hover{background:#f4f4f4}
.nav-toggle{display:none;background:var(--green);border:0;color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
.nav-backdrop{display:none}

/* ---------- Hero (home) — designed banner images (headline is baked into the JPG) ---------- */
.hero{position:relative;overflow:hidden;background:var(--green)}
.hero-slide{display:none}
.hero-slide.active{display:block;height:600px}
.hero-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-dots{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:3}
.hero-dots button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0}
.hero-dots button.active{background:#fff}
/* Side carousel arrows (match the source's left/right chevron affordance). */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.hero-arrow:hover{background:rgba(0,0,0,.55)}
.hero-arrow.prev{left:14px}
.hero-arrow.next{right:14px}

/* ---------- Promo cards (home) ---------- */
/* Source row: 1192px wide, three 384px cards with 20px gaps; cards 530px tall.
   max-width 1232 = 1192 inner + 40px container padding, so cards land at 384px. */
.promos{max-width:1232px;margin:0 auto;padding:50px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.promo{padding:34px;text-align:center;color:#fff;min-height:530px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.promo img{height:80px;width:auto;margin-bottom:18px}
.promo h2,.promo h3,.promo h4{color:inherit;margin:0}
/* Title block: one consistent 27px/600 run, literal casing (no forced uppercase). */
.promo .big{font-size:27px;font-weight:600;text-transform:none;line-height:1.4}
.promo .big .lead-sm{display:block;font-size:27px;font-weight:600;text-transform:none}
.promo .mid{font-size:24px;font-weight:600;margin:18px 0}
.promo .sm{font-size:24px;font-weight:600;margin:18px 0}
.promo p{font-size:20px;font-weight:400;line-height:1.6;margin-top:18px}
.promo.orange{background:#db7716}
.promo.green{background:var(--green)}
.promo.yellow{background:#fcb903;color:var(--ink)}
.promo.orange .accent{color:#1c8b3e}
/* Orange card spaces its content top-to-bottom with the note pinned near the base. */
.promo.orange{justify-content:space-between}
.promo-body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:1 1 auto}
/* Green card title is a 30px/600 uppercase run bracketed by hairline rules. */
.promo.green .big{font-size:30px;border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.6);padding:16px 0;width:80%;text-transform:uppercase;margin:8px 0 0}
/* Yellow card: all four blocks are bold ink headings (18px), GLUTEN line is 22px. */
.promo.yellow .sm{color:var(--ink);font-weight:600;font-size:18px;line-height:1.4;margin:0}
.promo.yellow .sm.lg{font-size:22px}
.promo .note{font-size:20px;font-weight:400;margin-top:0;opacity:1}

/* ---------- Page-title band (inner pages) ---------- */
.page-title{position:relative;min-height:300px;display:grid;place-items:center;text-align:center;color:#fff;background-size:cover;background-position:center}
.page-title::before{content:"";position:absolute;inset:0;background:rgba(28,139,62,.78)}
/* Fresh: the source banner is the dark roast-dinner-plates photo (Frozen-Meals-inner.jpg,
   shipped as banner-frozen.jpg) on a near-black base with only a faint dark overlay — NO
   green tint. Shorter ~232px band and the larger/lighter 68px headline (mirrors desserts). */
.page-fresh::before{background:rgba(0,0,0,.32)}
.page-fresh{min-height:232px}
.page-fresh h1{font-size:68px;font-weight:600;letter-spacing:normal}
/* Frozen: original banner is the warm roast-dinner photo (same image as fresh)
   under a near-neutral dark scrim (NOT a green wash) so the warm orange/carrot
   tones read through like the source (measured banner avg ~rgb(126,83,34)).
   Shorter ~232px band and the larger/lighter 68px headline. */
.page-frozen::before{background:rgba(0,0,0,.08)}
.page-frozen{min-height:232px}
/* Salad: source banner (Salads-inner.jpg) has NO green wash — vegetables read
   through vividly with only the photo's own shading. Use a very light neutral
   darken for H1 legibility, a shorter ~232px band, and the larger/lighter 68px
   headline (mirrors desserts/fresh). */
.page-salad::before{background:rgba(0,0,0,.18)}
.page-salad{min-height:232px}
/* Higher specificity than the global `.page-title h1` (which is declared later)
   so the larger/lighter 68px source headline wins. */
.page-title.page-salad h1{font-size:68px;font-weight:600;letter-spacing:normal}
/* Sandwiches: source banner photo reads through with only a faint NEUTRAL darken
   (no green tint), a shorter ~232px band, and the larger/lighter 68px headline
   (mirrors desserts/fresh/salad). */
.page-sandwich::before{background:rgba(0,0,0,.06)}
.page-sandwich{min-height:232px}
.page-sandwich h1{font-size:68px;font-weight:600;letter-spacing:normal}
/* Extras: source banner photo reads through at full brightness with NO green tint
   (live ::before is not generated). A very light neutral darken keeps the white H1
   legible. Shorter ~232px band and the larger/lighter 68px headline (mirrors desserts). */
.page-extras::before{background:rgba(0,0,0,.06)}
.page-extras{min-height:232px}
/* Higher specificity than the global `.page-title h1` (declared later) so the
   larger/lighter 68px source headline wins (mirrors the salad rule). */
.page-title.page-extras h1{font-size:68px;font-weight:600;letter-spacing:normal}
/* Desserts: the original banner is a dark food photo with no green tint — use a
   subtle dark scrim for legibility instead of the default near-opaque green. */
/* Source .page-title-default has NO overlay — the dark food photo reads at full
   brightness on a near-black base. Use only a very light neutral darken to keep the
   white H1 legible (was rgba(0,0,0,.32), which dimmed the platter/fruit/soups). */
.page-desserts::before{background:rgba(0,0,0,.12)}
/* Original "DESSERTS" headline is larger (68px) and lighter weight (600) than the
   site default. Use higher specificity than the generic `.page-title h1` (declared
   later, equal specificity) so the desserts size wins (mirrors salad/extras). */
.page-title.page-desserts h1{font-size:68px;font-weight:600}
/* Source banner breadcrumb is 11px/600 uppercase with NO underline on the link. */
.page-desserts .breadcrumbs{font-size:11px;font-weight:600;text-transform:uppercase}
.page-desserts .breadcrumbs a{text-decoration:none}
/* Original desserts banner is ~232px tall (not the 300px default). */
.page-desserts{min-height:232px}
/* Contact: source banner has NO overlay — the natural vegetable photo reads
   through with no green tint. Source band is ~232px tall (same as desserts) and
   the "Contact us" H1 is 68px/600/normal tracking, mixed-case. Scoped to this page. */
.page-contact::before{background:rgba(0,0,0,0)}
.page-contact{min-height:232px}
.page-contact .breadcrumbs{text-transform:uppercase}
.page-title .inner{position:relative;z-index:1;padding:20px}
.page-title h1{font-size:52px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.page-contact h1{font-size:68px;font-weight:600;letter-spacing:normal;text-transform:none}
/* Frozen headline matches the source: larger (68px) and lighter (600), normal tracking. */
.page-frozen h1{font-size:68px;font-weight:600;letter-spacing:normal}
.breadcrumbs{font-size:14px;opacity:.95}
.breadcrumbs a{color:#fff;text-decoration:underline}
/* Source breadcrumb links/current are 11px uppercase (Cabin 600); scoped to fresh. */
.page-fresh .breadcrumbs{font-size:11px;text-transform:uppercase;font-weight:600}

/* ---------- Generic sections ---------- */
.section{padding:64px 0}
.section .lead{max-width:900px;margin:0 auto 8px;text-align:center;color:#555}
.section h2.title{text-align:center;font-size:30px;margin-bottom:30px}

/* ---------- Meal pages ---------- */
.meal-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.price-tabs{display:flex;margin-bottom:22px;border-radius:3px;overflow:hidden;width:max-content;max-width:100%}
.price-tabs span{background:#ededed;padding:11px 26px;font-weight:700;font-size:18px;color:#333}
.price-tabs span.active{background:#3a3a3a;color:#fff}
.meal-sub{font-size:20px;font-weight:600;margin:0 0 18px;color:#333}
.meal-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px;margin:0 0 28px}
.meal-cols ul{list-style:none;margin:0;padding:0}
.meal-cols li{padding:6px 0;font-size:17px}
.price-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:17px;max-width:520px}
.price-row .amt{font-weight:700;color:var(--green)}
.heating{margin-top:34px}
.heating h2{font-size:22px;text-transform:uppercase;color:var(--green)}
.meal-photo img{width:100%;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.meal-photo figcaption{text-align:center;font-weight:700;margin-top:10px;color:#333}
.allcat{font-weight:700;color:var(--green);margin:24px 0 10px;font-size:18px}

/* ---------- Fresh Dinners page-specific overrides (scoped, do not affect other meal pages) ---------- */
/* Source has only a ~40px gap above the price tabs (band ends y=405, content starts y=445),
   not the shared .section 64px top padding. Tighten to match overall page length (~1012px). */
.meal-page-fresh.section{padding:40px 0 48px}
/* Source columns are EQUAL (text 586px + photo 586px, ~20px gap), not the shared 1.15/.85 split. */
.meal-page-fresh .meal-layout{grid-template-columns:1fr 1fr;gap:20px}
/* Price tabs fill the full column as three equal touching segments (one bar). */
.meal-page-fresh .price-tabs{width:100%;max-width:none}
.meal-page-fresh .price-tabs span{flex:1 1 0;text-align:center;font-size:24px;font-weight:600;line-height:24px;padding:20px 0}
/* Grey scale darkens monotonically left->right (matches source: Small light, Medium mid, Large darkest). */
.meal-page-fresh .price-tabs span:nth-child(1){background:#e6e6e6;color:#242424}
.meal-page-fresh .price-tabs span:nth-child(2),
.meal-page-fresh .price-tabs span.active{background:#6f6f6f;color:#fff}
.meal-page-fresh .price-tabs span:nth-child(3){background:#4d4d4d;color:#fff}
/* Sub-heading is pure black, 24px/600, left-aligned (source renders it as an H2 at 24px line-height). */
.meal-page-fresh .meal-sub{font-size:24px;line-height:24px;font-weight:600;color:#000;margin:0 0 16px}
/* Plain two-column meal list: no tick glyphs, no divider rules; 20px grey items like source. */
.meal-page-fresh .meal-cols li{padding:0;font-size:20px;line-height:32px;color:#777;border-bottom:0}
.meal-page-fresh .meal-cols li::before{content:none}
/* Heating instructions: centered block with underlined heading; source gap above is ~20px. */
.meal-page-fresh .heating{text-align:center;margin-top:20px}
.meal-page-fresh .heating h2{text-decoration:underline;text-underline-offset:3px}
/* Meal photo fills the right column (source carousel footprint). The "Roast Lamb" label is
   baked into the JPG (bottom-centre), matching the original overlay — hide the figcaption.
   Shipping a clean single photo, so no carousel chevron/dots (source carousel is broken). */
.meal-page-fresh .meal-photo{position:relative;margin:0}
.meal-page-fresh .meal-photo img{width:100%}
.meal-page-fresh .meal-photo figcaption{display:none}
/* ---------- Salads page-specific overrides (scoped) ---------- */
/* Source content sits in the wider woodmart container (~1240px → ~44px gutters). */
.meal-page-salad > .container{max-width:1240px}
/* Intro paragraphs are larger, muted grey, left-aligned (source = 20px / #777 / lh 32px). */
.meal-page-salad > .container > p{font-size:20px;line-height:1.6;color:#777}
/* Full-width intro paragraphs sit above an even 2-column grid (text left, photo right). */
.meal-page-salad .meal-layout{grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
/* "Includes:" subhead is a larger black heading (source = 24px / #000). */
.meal-page-salad .meal-sub{font-size:24px;font-weight:600;color:#000;line-height:1.2}
/* Plain two-column meal list: no tick glyphs, no divider rules; larger muted grey
   rows at the source 32px pitch (source = 20px / #777 / lh 32px). Columns 20px apart. */
.meal-page-salad .meal-cols{gap:0 20px}
.meal-page-salad .meal-cols li{padding:0;font-size:20px;line-height:32px;color:#777;border-bottom:0}
.meal-page-salad .meal-cols li::before{content:none}
/* Price tabs fill the full left column as three equal ~64px-tall cells, centered
   24px/600 text (source). Grey gradient (no green): Small light → Large dark. */
.meal-page-salad .price-tabs{display:flex;width:100%;max-width:none}
.meal-page-salad .price-tabs span{flex:1;text-align:center;padding:20px 0;font-size:24px;line-height:24px;font-weight:600;color:#fff}
.meal-page-salad .price-tabs span:nth-child(1){background:#d4d4d4;color:#242424}
.meal-page-salad .price-tabs span:nth-child(2){background:#5b5b5b;color:#eee}
.meal-page-salad .price-tabs span:nth-child(3){background:#414141;color:#fff}
/* The salad photo is a single-image carousel with overlaid arrows + dots below. */
.meal-page-salad .meal-photo{margin:0}
.meal-page-salad .carousel-dots{display:flex;justify-content:center;gap:9px;margin-top:14px}
.meal-page-salad .carousel-dots i{width:9px;height:9px;border-radius:50%;background:#cfcfcf;display:block}
.meal-page-salad .carousel-dots i.active{background:#888}

/* ---------- Sandwiches page-specific overrides (scoped) ---------- */
/* Source content block has only a ~40px gap below the band (band ends y=405,
   intro starts y=445), not the shared .section 64px top padding. */
.meal-page-sandwich{padding:40px 0}
/* Intro paragraph: original meal-page intro copy is larger (20px / lh 32px),
   muted grey, left aligned (3 wrapped lines on desktop). */
.meal-page-sandwich > .container > p{color:#777;text-align:left;font-size:20px;line-height:1.6}
/* Intro paragraph spans full width above an even two-column row (prices left,
   image placeholder right). Two ~586px columns yield the source geometry. */
.meal-page-sandwich .meal-layout{grid-template-columns:1fr 1fr;gap:40px;margin-top:26px}
/* "Freshly made with wholemeal bread" is a full-width MID-GREY filled bar
   (source rgba(17,17,17,.21) over white ≈ rgb(201,201,201)) with black 24px/600
   left-aligned text. */
.meal-page-sandwich .meal-sub{background:#c9c9c9;padding:14px 20px;border-radius:3px;font-size:24px;line-height:1.25;font-weight:600;color:#000;margin:0 0 22px}
/* Price rows are a tight two-sub-column grid inside the left column (labels at
   x=44, amounts at x=347 → ~283px label column). No divider lines, 20px text. */
.meal-page-sandwich .price-row{display:grid;grid-template-columns:283px 283px;gap:0;justify-content:start;max-width:none;border-bottom:0;font-size:20px;line-height:32px}
.meal-page-sandwich .price-row .amt{color:#777;font-weight:400}
/* Source colours the labels differently: row 1 muted grey, row 2 black. */
.meal-page-sandwich .price-row:first-child span:first-child{color:#777}
.meal-page-sandwich .price-row:nth-child(2) span:first-child{color:#000}
/* The right column shows the real "Sandwich alone" photo (626x450), downloaded
   from the live source (HTTP 200) — it fills the column at the source's square-cornered,
   no-shadow Elementor image treatment, top-aligned with the grey bar. */
.meal-page-sandwich .meal-photo{margin:0}
.meal-page-sandwich .meal-photo img{width:100%;height:auto;border-radius:0;box-shadow:none}

/* ---------- Extras page-specific overrides (scoped) ---------- */
/* Source content block has only a ~40px gap below the band (band ends y=405,
   intro starts y=445), not the shared .section 64px top padding. */
.meal-page-extras{padding:40px 0}
/* Intro paragraphs: original copy is larger (20px / lh 32px), muted grey, left
   aligned — identical to the sandwiches/desserts intro treatment. */
.meal-page-extras > .container > p{font-size:20px;line-height:1.6;color:#777}
/* Intro paragraphs span the full width above an even 2-column row (price list
   left, food collage photo right). ~30px gap intro->row, ~20px column gutter
   (source: row begins y=623, columns x=44 and x=650, each 586px). */
.meal-page-extras .meal-layout{grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
/* Price list is a real two-column table (NOT flex space-between): labels left in
   a fixed ~399px cell, amounts left-aligned in a column starting ~x=455. Both the
   label and the amount are muted grey at normal weight (no brand green, not bold),
   22px text, no divider lines, ~60px row pitch (source: 15px cell padding + 22px). */
.meal-page-extras .price-row{display:grid;grid-template-columns:399px auto;gap:0;justify-content:start;max-width:none;border-bottom:0;font-size:22px;line-height:1.4;padding:14px 0;color:#777}
.meal-page-extras .price-row .amt{color:#777;font-weight:400}
/* The collage photo fills the right column with square corners and no shadow
   (source Elementor swiper image: border-radius 0, box-shadow none). */
.meal-page-extras .meal-photo{margin:0}
.meal-page-extras .meal-photo img{width:100%;height:auto;border-radius:0;box-shadow:none}

/* ---------- Desserts page-specific overrides (scoped) ---------- */
/* Original content block has ~40px top/bottom padding, not the 64px section default. */
.meal-page-desserts{padding:40px 0}
/* Source content sits in the full Woodmart container (~1222px → ~15px gutters), so the
   intro starts near the left edge (x=44, w=1192) and wraps to 3 lines — NOT the inset
   880px/centered block the clone shipped. */
.meal-page-desserts > .container{max-width:1222px;padding:0 15px}
/* Intro paragraph matches the original: muted-grey body copy at 20px / lh 32px / #777
   (this wraps to 3 lines at the full 1192px width like the source). */
.meal-page-desserts > .container > p{font-size:20px;line-height:32px;color:#777}
/* Source content row is a 2-column 50/50 grid (each cell 586px, ~20px gutter): price
   table LEFT, recovered "desserts 3" photo RIGHT. Sits ~30px below the intro. */
.meal-page-desserts .meal-layout{grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;align-items:start}
/* Price rows: the source is a borderless 2-sub-column table — label cell (~472px) with
   the amount left-aligned in a column starting at ~x=509 (relative offset 472), NOT
   pushed to the far right by flex. Both label and amount are 22px muted grey at normal
   weight (no brand green / bold); ~60px row pitch (source TD h=61). */
.meal-page-desserts .price-row{display:grid;grid-template-columns:472px auto;gap:0;justify-content:start;font-size:22px;color:#777;padding:15px 0;max-width:none;border-bottom:0}
.meal-page-desserts .price-row .amt{color:#777;font-weight:400}
/* Right column: the recovered canonical desserts-3.jpg (HTTP 200; the live carousel
   src 404s). Fills the column with the square-cornered, no-shadow Elementor image
   treatment used by the sibling meal-list pages (sandwiches/extras). */
.meal-page-desserts .desserts-extra-img{margin:0}
.meal-page-desserts .desserts-extra-img img{width:100%;height:auto;border-radius:0;box-shadow:none}

/* ---------- Frozen Dinners page-specific overrides (scoped) ---------- */
/* Original content block has ~40px top/bottom padding, not the 64px section default. */
.meal-page-frozen{padding:40px 0}
/* Layout: intro paragraphs + heating span the FULL content width above a
   two-column row (menu lists left, meal carousel right). Matches the original,
   where the photo begins aligned with the first category bar (not the intro). */
.meal-page-frozen .meal-intro{margin:0 0 8px}
.meal-page-frozen .meal-intro p{font-size:20px;line-height:32px;color:#777}
/* Heating block: centered, dark-ink underlined heading, larger centered body.
   Source rhythm: ~20px gap intro->heading, ~33px per body line. */
.meal-page-frozen .heating{margin-top:20px;text-align:center}
.meal-page-frozen .heating h2{color:#242424;font-size:24px;font-weight:600;text-decoration:underline;text-underline-offset:3px;margin:0 0 16px}
.meal-page-frozen .heating p{font-size:20px;line-height:1;color:#000;margin:0 0 16px}
.meal-page-frozen .heating b{font-weight:600}
/* Two-column menu row sits below the full-width intro. Two ~586px columns with a
   ~20px gutter (matches the source: menu block ~586px, gap ~20px, carousel ~586px).
   Photo top aligns with the first category bar via align-items:start. */
.meal-page-frozen .meal-layout{grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:30px}
/* Two-segment grey category bar (~586px: 352 + 234), ~88px tall. Left segment is
   light grey with a centered two-line ink heading; right segment is mid-dark grey
   with centered white "All $15". Replaces the hug-content .price-tabs pills. */
.meal-page-frozen .cat-bar{display:grid;grid-template-columns:352px 234px;max-width:100%;margin:0 0 22px;border-radius:3px;overflow:hidden}
.meal-page-frozen .cat-bar span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:88px;padding:8px 14px;font-size:24px;font-weight:600;line-height:1.15}
.meal-page-frozen .cat-bar .cat-label{background:#cdcdcd;color:#242424}
.meal-page-frozen .cat-bar .cat-price{background:#696969;color:#fff}
/* Meal lists: larger muted-grey text on a 32px rhythm, plain (no ticks/dividers). */
.meal-page-frozen .meal-cols{grid-template-columns:1fr 1fr;gap:0 24px;margin:0 0 28px}
/* The second menu block (3 items) is a single full-width column in the source,
   each item on one line (not a 2-col grid that would wrap the long items). */
.meal-page-frozen .meal-cols.single-col{grid-template-columns:1fr}
.meal-page-frozen .meal-cols li{padding:0;font-size:20px;line-height:32px;color:#777;border-bottom:0}
.meal-page-frozen .meal-cols li::before{content:none}
/* Carousel: ~586x421 (~1.39:1), top aligned in the right column. */
.meal-page-frozen .meal-photo{margin:0}

/* Multi-slide carousel (frozen) */
.meal-carousel[data-carousel]{aspect-ratio:626/450}
.meal-carousel .carousel-track{position:relative;width:100%;height:100%}
.meal-carousel .carousel-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;opacity:0;transition:opacity .35s ease}
.meal-carousel .carousel-slide.is-active{opacity:1}
.carousel-dots{display:flex;justify-content:center;gap:9px;margin-top:14px}
.carousel-dots i{width:9px;height:9px;border-radius:50%;background:#cfcfcf;display:block;cursor:pointer}
.carousel-dots i.is-active{background:#888}

/* Mobile-only in-content print button (hidden on desktop). */
.mobile-print-menu{display:none}

/* Single-image carousel (frozen/meal pages) */
.meal-carousel{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.meal-carousel img{display:block;width:100%;border-radius:0;box-shadow:none}
.meal-carousel .carousel-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#fff;font-size:34px;font-weight:600;letter-spacing:.01em;text-shadow:0 2px 8px rgba(0,0,0,.55);pointer-events:none}
.meal-carousel .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.meal-carousel .carousel-arrow:hover{background:rgba(0,0,0,.6)}
.meal-carousel .carousel-arrow.prev{left:12px}
.meal-carousel .carousel-arrow.next{right:12px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
/* Source headings (Address:/Telephone/Trading Hours) are muted grey 25px/600 — the
   same grey as the body copy, not dark ink. */
.contact-info h3{font-size:25px;font-weight:600;color:var(--muted);line-height:1.4}
/* Source body copy: 20px / 32px line-height / #777. Inline <strong> (Saturday etc.)
   inherits 20px/600 grey — matching the source's smaller sub-day headings. */
.contact-info p{margin:0 0 18px;font-size:20px;line-height:32px;color:var(--muted)}
.contact-info p strong{font-weight:600}
/* Inline Telephone heading (kept on one line with the number, like the source). */
.contact-h{font-size:25px;font-weight:600;color:var(--muted)}
/* Source eyebrow: light grey, normal weight, no tracking, uppercase via markup. */
.subtitle{text-transform:uppercase;letter-spacing:normal;font-size:14px;color:#a5a5a5;font-weight:400;margin-bottom:6px}
.contact-form label{display:block;margin-bottom:16px;font-weight:600;font-size:14px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Source fields are pill-rounded, transparent, 2px faint border. */
.contact-form input,.contact-form textarea{width:100%;margin-top:6px;padding:9px 16px;border:2px solid rgba(0,0,0,.1);border-radius:30px;background:transparent;font-family:inherit;font-size:15px}
.contact-form textarea{resize:vertical;border-radius:16px;padding:12px 16px}
/* Source submit button is a narrow 13px rectangle (scoped so global .btn is untouched). */
.contact-form .btn{font-size:13px;border-radius:0;padding:0 22px;height:42px;line-height:42px}
/* Source map is full-bleed edge-to-edge (x=0, full viewport width), 500px tall. */
.map-embed{margin-top:48px;width:100vw;margin-left:calc(50% - 50vw)}
.map-embed iframe{width:100%;height:500px;border:0;display:block;background:#e8e8e8}

/* ---------- Footer ---------- */
.site-footer{background:var(--green);color:rgba(255,255,255,.8);text-align:center;padding:18px 0;font-size:14px}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  /* The original hides the green phone/print-menu topbar on mobile (all pages). */
  .topbar{display:none}
  .site-header .container{min-height:74px}
  .logo img{height:52px}
  /* Mobile: green hamburger sits on the LEFT, logo on the RIGHT (matches original). */
  .nav-toggle{display:block;order:-1}
  .logo{order:0;margin-left:auto}
  .main-nav{position:fixed;top:0;right:0;bottom:0;width:280px;background:#fff;transform:translateX(100%);transition:transform .3s ease;z-index:300;padding:72px 22px;overflow:auto;box-shadow:-6px 0 24px rgba(0,0,0,.22)}
  .main-nav.open{transform:translateX(0)}
  .main-nav ul{flex-direction:column;gap:2px;align-items:stretch}
  .main-nav li{border-bottom:1px solid var(--line)}
  .main-nav a{display:block;padding:12px 4px}
  .main-nav .submenu{position:static;display:none;box-shadow:none;padding:0 0 6px 16px;min-width:0}
  .main-nav .has-sub.sub-open .submenu{display:flex}
  .nav-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:290}
  /* Source mobile hero is a fixed 300px-tall banner. Our banner is a single baked
     JPG (headline text is part of the image), so use `contain` on the green field
     to keep the "HOT AND COLD MEALS" headline fully readable (cover would crop it),
     while matching the source's 300px height so the promo cards below line up. */
  .hero-slide.active{display:block;height:300px;min-height:300px}
  .hero-slide img{height:100%;object-fit:contain;object-position:center}
  .hero{margin-bottom:0}
  /* Source leaves ~50px of white space between the hero and the first card. */
  .promos{grid-template-columns:1fr;gap:20px;padding:50px 15px 20px}
  /* Per-card mobile heights match the source (orange 460, green 530, yellow 413). */
  .promo{min-height:0;padding:40px 30px}
  .promo.orange{min-height:460px}
  .promo.green{min-height:530px}
  .promo.yellow{min-height:413px}
  .meal-layout,.contact-grid,.meal-cols,.contact-form .row{grid-template-columns:1fr}
  .page-title h1{font-size:38px}
  /* Contact: the source mobile banner is a short (~115px) vegetable photo strip,
     not the 232px desktop band, with a smaller ~30px headline (mirrors the sibling
     desserts/fresh mobile banner treatment). Scoped to this page. */
  .page-contact{min-height:115px}
  .page-contact h1{font-size:30px;margin-bottom:6px}
  /* Fresh Dinners: collapse the scoped 1fr 1fr grid to one column so the photo
     stacks below the content, then stack price tabs as full-width bars on mobile. */
  .meal-page-fresh .meal-layout{grid-template-columns:1fr;margin-top:14px}
  .meal-page-fresh .meal-photo{margin-top:18px}
  .meal-page-fresh .price-tabs{flex-direction:column;width:100%;max-width:none}
  .meal-page-fresh .price-tabs span{width:100%;text-align:center;padding:14px;font-size:20px}
  /* Fresh: the source mobile banner is a short (~115px) photo strip, not the
     232px desktop band, and the headline is smaller. Scoped to this page. */
  .page-fresh{min-height:115px}
  .page-fresh h1{font-size:34px;margin-bottom:6px}
  /* Salads: collapse the (scoped 1fr 1fr) grid to one column so the photo stacks
     below the list, and stack the price tabs as full-width bars like the original. */
  .meal-page-salad .meal-layout{grid-template-columns:1fr;margin-top:18px}
  .meal-page-salad .price-tabs{flex-direction:column;width:100%;max-width:none}
  .meal-page-salad .price-tabs span{width:100%;text-align:center;padding:14px;font-size:20px}
  /* Sandwiches: collapse the (scoped 1fr 1fr) grid to one column so prices are
     full-width rows and the (empty) photo figure stacks below them. */
  .meal-page-sandwich .meal-layout{grid-template-columns:1fr;margin-top:18px}
  .meal-page-sandwich .meal-photo{margin-top:10px}
  /* Mobile price rows: keep the two-sub-column grid with a fixed ~234px label
     column so the amount sits just right of the label (source amount left ≈ x=249),
     NOT pinned to the screen edge. */
  .meal-page-sandwich .price-row{grid-template-columns:234px auto;gap:0}
  /* Sandwiches: the original's mobile banner is a short (~103px) photo strip, not
     the 300px desktop band, and the headline is 36px/600. Scoped to this page. */
  .page-sandwich{min-height:103px}
  .page-sandwich h1{font-size:36px;font-weight:600;margin-bottom:6px}
  /* Extras: collapse the (scoped 1fr 1fr) grid to one column so the collage
     photo stacks below the price list, matching the original mobile layout. */
  .meal-page-extras .meal-layout{grid-template-columns:1fr;margin-top:18px}
  .meal-page-extras .meal-photo{margin-top:18px}
  /* Extras: the original's mobile banner is a short (~103px) photo strip, not the
     300px desktop band. Scoped to this page so other pages are untouched. */
  .page-extras{min-height:103px}
  /* Match the desktop rule's specificity (.page-title.page-extras) so this mobile
     size actually wins inside the media query. */
  .page-title.page-extras h1{font-size:32px;font-weight:600;margin-bottom:6px}
  /* Extras: the original mobile renders the body copy + price rows with a more
     generous vertical rhythm (~61px price-row pitch, larger muted-grey label text)
     so the content column is taller and the collage stacks lower. Match it here
     only. Mobile price rows spread label (left) and amount (right) within the
     single column, still grey/normal-weight with no divider lines. */
  .meal-page-extras > .container > p{font-size:20px;line-height:1.6;color:#777}
  /* Mobile price rows: fixed ~235px label column so the amount sits just right of
     the label (source amount left ≈ x=262 with labels at x=27), NOT pinned to the
     screen edge. Grey/normal-weight, no dividers, ~61px pitch. */
  .meal-page-extras .price-row{grid-template-columns:235px auto;font-size:22px;padding:15px 0}
  /* Desserts: the original mobile banner is a short (~115px) photo strip, not the
     232px desktop band, and the headline is 36px. Match the desktop rule's
     specificity (.page-title.page-desserts) so this mobile size actually wins. */
  .page-desserts{min-height:115px}
  .page-title.page-desserts h1{font-size:36px;margin-bottom:6px}
  /* Desserts: the original mobile view uses larger body + price-row type with a
     more generous vertical rhythm (price labels wrap to two lines on long items).
     Match it here only so other pages keep their compact mobile sizing. */
  .meal-page-desserts > .container > p{font-size:20px;line-height:1.65}
  .meal-page-desserts > .container{padding:0 20px}
  /* Mobile price rows: source uses a ~250px label column (long labels wrap to two
     lines) with the amount in a column just to its right (source amount left ≈ x=290),
     NOT pinned to the screen edge. Override the 472px desktop label column. */
  .meal-page-desserts .price-row{grid-template-columns:248px auto;font-size:20px;padding:16px 0;max-width:none}
  /* Collapse the (scoped 1fr 1fr) grid to one column so the recovered "desserts 3"
     photo stacks below the price rows on mobile — matches the source, which loads the
     responsive 768x576 image at natural 4:3 below the list (x=15, w=345). Without this
     the desktop 2-col rule (higher specificity) keeps the image squeezed into a sliver. */
  .meal-page-desserts .meal-layout{grid-template-columns:1fr;margin-top:18px}
  .meal-page-desserts .desserts-extra-img{margin-top:24px}
  /* Frozen: the original mobile banner is a short (~115px) photo strip, smaller H1. */
  .page-frozen{min-height:115px}
  .page-frozen h1{font-size:34px;margin-bottom:6px}
  /* Frozen: in-content green PRINT FROZEN MENU button is shown ONLY on mobile,
     centered between the banner and the intro copy (topbar print links are hidden).
     Source button is ~192x39, so trim the default .btn padding a touch. */
  .meal-page-frozen .mobile-print-menu{display:block;width:max-content;margin:0 auto 22px;padding:9px 22px}
  /* Frozen: collapse the menu row to one column; the carousel stacks below the lists. */
  .meal-page-frozen .meal-layout{grid-template-columns:1fr;margin-top:14px}
  .meal-page-frozen .meal-photo{margin-top:18px}
  /* Frozen: the source stacks the two category-bar segments vertically on mobile
     (light heading segment on top, dark "All $15" segment full-width below). */
  .meal-page-frozen .cat-bar{grid-template-columns:1fr;width:100%}
  .meal-page-frozen .cat-bar span{min-height:0;padding:16px 14px;font-size:22px}
  .meal-page-frozen .cat-bar .cat-label{padding:18px 14px}
  /* Frozen: the source renders each meal list as a SINGLE column on mobile
     (one item per line), not the desktop two-column grid. */
  .meal-page-frozen .meal-cols{grid-template-columns:1fr}
}