/* build b7335fb7c7 */
:root{--mum-build:"b7335fb7c7";}

/* ===================== tokens.css ===================== */
/* ============================================================================
   mum.com.au — DESIGN TOKENS  (Sprint 0 foundation)
   The single source of truth for colour, type, spacing, radius, shadow.
   Every component CSS references var(--…) — never a raw hex — so the whole
   system (and the brand accent) changes in one place.

   HOW TO USE
   1. Fonts: set them in Kadence → Customize → Typography (Headings =
      "Bricolage Grotesque", Base = "Hanken Grotesk"). That's the clean,
      performant route. If you can't, uncomment the @import on line 18.
   2. Paste this whole file at the TOP of Appearance → Customize → Additional
      CSS, ABOVE every other mum-* block. The :root section is safe to paste
      now — it only DEFINES variables; nothing changes visually until a
      component uses them.
   3. The OPTIONAL base layer at the bottom applies the system site-wide
      (cream canvas + the two fonts). It's commented out — enable it when
      you're ready for the global look to flip.
   ============================================================================ */

/* @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap'); */

:root {
  /* ---- CORE PALETTE ------------------------------------------------------ */
  --canvas:            #fffaf4;   /* cream page background */
  --surface:           #ffffff;   /* card / panel background */
  --ink:               #1f2421;   /* primary text / dark sections */
  --on-dark:           #fffaf4;   /* text on ink */
  --on-dark-muted:     #b9b3a8;   /* muted text on ink */

  /* Coral — PRIMARY ACCENT (CTAs, links, brand mark) */
  --coral:             #ff6a4d;
  --coral-soft:        #ff8e78;
  --coral-soft-2:      #ff9d86;
  --coral-border:      #ffd9cd;   /* 1px borders on coral pills */
  --coral-bg:          #fff0ea;   /* coral tint fill */
  --coral-bg-2:        #fff6f2;
  --coral-text:        #c43d22;   /* darker coral — passes WCAG AA as text on white/cream */
  --coral-deep:        #d1452b;   /* darker coral for BUTTON/badge fills — white text passes WCAG AA (4.57:1); bright --coral stays for decorative marks + bands */
  --brand-primary:     var(--coral);   /* <- the one-line brand switch */

  /* Teal — TRUST / "mum. Approved" */
  --teal:              #119d8b;
  --teal-text:         #3f7d68;   /* teal text on light */
  --teal-bg:           #e6f5f1;   /* teal chip fill */
  --teal-bg-2:         #eef6f4;

  /* Gold — "New & Notable" accent (secondary, not primary) */
  --gold:              #ffce3a;
  --gold-soft:         #ffe9b0;

  /* ---- TEXT SCALE -------------------------------------------------------- */
  --text:              #1f2421;
  --text-muted:        #5a564e;
  --text-soft:         #6f6a61;
  --text-faint:        #6f6a61;   /* meta / "N compared" — WCAG AA (~5.4:1 on white) */
  --nav-link:          #3a3f3b;   /* nav links — darker than text-muted, matches mockup */

  /* ---- BORDERS & SURFACES ------------------------------------------------ */
  --border:            #f0e7dc;   /* default hairline */
  --border-soft:       #f4ece1;
  --border-warm:       #e7ddd0;
  --border-warm-2:     #ecdfd0;
  --compare-label-bg:  #faf6f0;   /* compare-table label column */
  --our-pick-bg:       #fff8ef;   /* compare "Our Pick" column tint */

  /* ---- GRADIENTS --------------------------------------------------------- */
  --hero-grad:         linear-gradient(180deg, #fff3ec, #fffaf4);
  --winners-grad:      linear-gradient(180deg, #fff3ec, #ffe9df);

  /* ---- TYPOGRAPHY -------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-h1:        60px;   --ls-h1: -0.03em;   --lh-h1: 1.02;
  --fs-h2:        34px;   --ls-h2: -0.02em;
  --fs-card-title: 20px;  /* product / winner names (18–21) */
  --fs-body:      17px;   /* base body copy — regular 400 Hanken (design range 15–19) */
  --fs-meta:      13px;   /* byline / counts (13–14) */
  --fs-eyebrow:   11px;   --ls-eyebrow: 0.06em;   /* uppercase micro (.05–.08) */

  /* ---- SPACING & LAYOUT -------------------------------------------------- */
  --container:        1240px;
  --container-narrow: 1200px;   /* Product Compare */
  --pad-side:         40px;
  --section-y:        60px;
  --gap:              18px;
  --nav-h:            90px;   /* PRE-JS FALLBACK for the sticky nav height — drives EVERY sticky-below-nav
                                offset. mobile.js overrides this at runtime with the nav's REAL measured
                                height (font/width dependent), so these static values only matter with JS
                                off or for the first paint. ~90px = desktop nav; ≤1240 override below. */

  /* ---- Z-INDEX LADDER (mobile overlays; declared once so layers never fight) --
     nav < tray < scrim < drawer < sheet < overlay. The compare tray sits UNDER
     the scrim so any open layer dims it; the article progress bar (z-50) and
     mss-dropdown/mcmp-modal (z-50/60) all fall below the scrim. */
  --z-nav:      40;
  --z-tray:     60;   /* compare tray (must sit UNDER the scrim) */
  --z-scrim:    70;
  --z-drawer:   75;
  --z-sheet:    80;   /* filter bottom sheet */
  --z-overlay:  90;   /* full-screen search overlay — top of the stack */

  /* ---- RADIUS ------------------------------------------------------------ */
  --r-pill:   999px;
  --r-card:   16px;
  --r-card-lg: 18px;
  --r-tile:   14px;
  --r-input:  12px;
  --r-chip:   8px;

  /* ---- SHADOW ------------------------------------------------------------ */
  --sh-card:     0 8px 26px rgba(31, 36, 33, 0.08);
  --sh-soft:     0 6px 18px rgba(31, 36, 33, 0.08);
  --sh-search:   0 14px 30px rgba(31, 36, 33, 0.10);
  --sh-dropdown: 0 20px 50px rgba(31, 36, 33, 0.16);
  --sh-modal:    0 30px 80px rgba(31, 36, 33, 0.32);
}

/* Nav collapses to the hamburger drawer at ≤1240px (== --container; avoids the two-row
   wrap the full nav hits below the container width). This is the collapsed-nav PRE-JS
   FALLBACK height; mobile.js sets the exact measured height at runtime. Keep 1240 in
   sync with the nav breakpoint in nav_footer.css + the boundary mq in mobile.js. */
@media (max-width: 1240px) {
  :root { --nav-h: 63px; }
}

/* Mobile type scale + spacing (MOBILE_SPEC §1: H1 27–30, H2 18–23, card title 15–17,
   body 13.5–15.5, side padding 18px). Applies at the desktop→mobile breakpoint (768). */
@media (max-width: 768px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 23px;
    --fs-card-title: 16px;
    --fs-body: 15.5px;
    --pad-side: 18px;
    --section-y: 22px;
  }
}

/* ============================================================================
   OPTIONAL BASE LAYER — enable to flip the whole site to the system.
   Uncomment when you're ready for the global cream + Grotesk look.
   ----------------------------------------------------------------------------
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.mum-display { font-family: var(--font-display); }
a { color: var(--brand-primary); }
   ============================================================================ */

/* Badge/logo glyph (heart, shield) — inline SVG, scales with the badge font-size,
   fills via currentColor so it inherits the badge text colour. */
.mum-hi { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -0.13em; }
.entry-content .mum-hi { width: 1.05em; height: 1.05em; }
span:has(> .mum-hi) { display: inline-flex; align-items: center; gap: 0.3em; }


/* ===================== nav_footer.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — shared NAV + dark FOOTER (on the design tokens)
   Global chrome. Markup lives in a Kadence Header/Footer element;
   this styles it. Coral primary · ink footer.
   ═══════════════════════════════════════════════════════════ */

/* Hide Kadence's native header/footer — replaced by .mum-nav / .mum-footer
   (output via the nav_footer Code Snippet at wp_body_open / wp_footer). */
#masthead, #colophon { display: none !important; }

/* ---------- GLOBAL KEYBOARD FOCUS RING (WCAG 2.4.7) ----------
   Kadence ships a hide-focus-outline body class plus outline:0 that strips the
   keyboard focus indicator. Restore a visible coral ring for keyboard users only
   (:focus-visible, never plain :focus, so mouse clicks don't show a ring), and
   beat Kadence's specificity with !important. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.mum-cmp-toggle:focus-visible {
    outline: 2px solid var(--coral) !important;
    outline-offset: 2px !important;
}

/* ---------- LOGO LOCKUP (used in nav + footer) ---------- */
.mum-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.mum-logo-mark { display: inline-flex; width: 34px; height: 34px; background: var(--coral); border-radius: 11px; align-items: center; justify-content: center; }
.mum-logo-word { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
.mum-logo-word span { color: var(--coral); }

/* ---------- NAV ---------- */
.mum-nav { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); }
.mum-nav-inner {
    max-width: var(--container); margin: 0 auto;
    padding: 18px var(--pad-side);
    display: flex; align-items: center; gap: 22px; flex-wrap: nowrap;
}
.mum-nav-links { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.mum-nav-links a { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--nav-link); text-decoration: none; white-space: nowrap; }
.mum-nav-links a:hover { color: var(--ink); }
.mum-nav-links a.mum-nav-best { color: var(--teal); }
/* active page: teal + underline drawn with box-shadow (no layout height, keeps links on one baseline — README §4.1) */
.mum-nav-links a.active { color: var(--teal); box-shadow: 0 2px 0 var(--teal); }

.mum-nav-right { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; justify-content: flex-end; }
.mum-nav-search { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1.5px solid var(--border-warm); border-radius: 11px; padding: 8px 14px; flex: 1 1 130px; min-width: 130px; max-width: 460px; }
.mum-nav-search input { border: none; background: none; outline: none; font-family: var(--font-body); font-size: 14px; color: var(--ink); width: 100%; }
.mum-nav-search-ico { color: var(--text-faint); display: inline-flex; }
.mum-nav-signin { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.mum-nav-subscribe { font-size: 14px; font-weight: 700; color: #fff; background: var(--ink); padding: 9px 16px; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; }
.mum-nav-subscribe:hover { filter: brightness(1.18); }

/* Hamburger — 3 stacked bars (third shorter), 44×44 tap area; hidden on desktop.
   Full resets so Kadence's global <button> styling can't leak in (Fable S6). */
.mum-nav-burger {
    display: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    width: 44px; height: 44px; min-width: 0; padding: 0 0 0 11px; margin: 0;
    background: none; border: none; box-shadow: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.mum-nav-burger span { display: block; width: 21px; height: 2px; background: var(--ink); border-radius: 2px; }
.mum-nav-burger span:nth-child(3) { width: 13px; }
/* Mobile search glyph — 44×44, hidden on desktop (opens the full-screen overlay). */
.mum-nav-searchbtn {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 0; padding: 0; margin: 0;
    background: none; border: none; box-shadow: none; cursor: pointer; color: var(--ink);
    -webkit-appearance: none; appearance: none;
}

/* ── Mobile nav (≤1240): hamburger (left) · centred logo · ⌕ search (right) ──
   The desktop link row + search + Subscribe move into the slide-in drawer. Breakpoint
   raised 900→1240 (== --container): with brand fonts the full nav (6 links + search +
   Subscribe) needs the full container width; below that it used to wrap to 2 rows, so
   switch to the drawer instead. Keep this in sync with mobile.js's boundary mq. */
@media (max-width: 1240px) {
    .mum-nav-links, .mum-nav-right, .mum-nav-signin { display: none; }
    .mum-nav-inner { padding: 8px 16px 10px; gap: 8px; flex-wrap: nowrap; justify-content: space-between; }
    .mum-nav-burger { display: flex; }
    .mum-nav-searchbtn { display: inline-flex; }
    .mum-logo { gap: 7px; }
    .mum-logo-mark { width: 27px; height: 27px; border-radius: 9px; }
    .mum-logo-word { font-size: 19px; }
}

/* ── Mobile overlays: scrim + drawer + full-screen search (z-ladder from tokens) ──
   Emitted as body siblings by the nav snippet; driven by mobile.js (.is-open). Hidden
   by default so they never show on desktop. All buttons carry full resets (Fable S6). */
.mum-scrim {
    position: fixed; inset: 0; background: rgba(31, 36, 33, 0.5);
    opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease;
    z-index: var(--z-scrim);
}
.mum-scrim.is-open { opacity: 1; visibility: visible; }
html.mum-layer-open { overflow: hidden; }

.mum-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
    width: min(84vw, 320px); max-width: 320px;
    background: var(--surface); z-index: var(--z-drawer);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.24s ease, visibility 0.24s ease;
    display: flex; flex-direction: column; padding: 14px 0 calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 0 44px rgba(31, 36, 33, 0.22);
}
.mum-drawer.is-open { transform: translateX(0); visibility: visible; }
.mum-drawer-close {
    align-self: flex-end; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 0; margin: 0 6px 4px 0; padding: 0;
    background: none; border: none; box-shadow: none; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--ink); -webkit-appearance: none; appearance: none;
}
.mum-drawer-links { display: flex; flex-direction: column; }
.mum-drawer-links a {
    display: flex; align-items: center; min-height: 44px;
    font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--ink);
    text-decoration: none; padding: 12px 22px;
}
.mum-drawer-links a:hover { background: var(--coral-bg-2); }
.mum-drawer-links a.active { color: var(--teal); }
.mum-drawer-links a.mum-nav-best { color: var(--teal); }
.mum-drawer-sep { border: none; border-top: 1px solid var(--border); margin: 10px 22px; }
.mum-drawer-subscribe {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    margin: 10px 22px 0; padding: 12px; border-radius: var(--r-pill);
    background: var(--coral-deep); color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none;
}
.mum-drawer-subscribe:hover { filter: brightness(1.06); }

.mum-search-overlay {
    position: fixed; inset: 0; height: 100dvh; background: var(--canvas); z-index: var(--z-overlay);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mum-search-overlay.is-open { opacity: 1; visibility: visible; }
.mum-search-overlay-bar {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.mum-search-overlay-bar form { flex: 1; min-width: 0; display: flex; }
.mum-search-overlay-input {
    flex: 1; min-width: 0; width: 100%;
    border: 1.5px solid var(--border-warm); border-radius: var(--r-input);
    padding: 12px 14px; font-family: var(--font-body); font-size: 16px; color: var(--ink);
    background: var(--surface); outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.mum-search-overlay-close {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 0; padding: 0;
    background: none; border: none; box-shadow: none; cursor: pointer;
    font-size: 24px; line-height: 1; color: var(--ink); -webkit-appearance: none; appearance: none;
}
.mum-search-overlay-results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 20px; }

/* ---------- FOOTER ---------- */
.mum-footer { background: var(--ink); color: var(--on-dark); margin-top: 4rem; }
.mum-footer-inner {
    max-width: var(--container); margin: 0 auto;
    padding: 48px var(--pad-side) 32px;
    display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
}
.mum-footer-brand { max-width: 290px; }
.mum-footer-brand .mum-logo-word { color: #fff; }
.mum-footer-tag { color: var(--on-dark-muted); font-size: 15px; line-height: 1.6; margin: 14px 0 0; }
.mum-footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.mum-footer-cols h4 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-muted); margin: 0 0 14px; }
.mum-footer-cols a { display: block; font-size: 15px; color: var(--on-dark); text-decoration: none; margin-bottom: 10px; }
.mum-footer-cols a:hover { color: var(--coral); }
.mum-footer-base {
    max-width: var(--container); margin: 0 auto;
    padding: 18px var(--pad-side);
    border-top: 1px solid rgba(255, 250, 244, 0.12);
    color: var(--on-dark-muted); font-size: 13px;
}

@media (max-width: 768px) {
    .mum-footer-inner { flex-direction: column; gap: 28px; }
    .mum-footer-cols { gap: 32px; }
    .mum-footer-cols a { padding: 10px 0; margin-bottom: 2px; }  /* ≥44px tap rows (§2.17) */
}

/* ---------- PREV / NEXT POST NAVIGATION ----------
   Kadence emits <nav class="post-navigation"> after the article, unstyled and
   (because .single-post strips .content-container padding) full-bleed. Brand it
   as two coral-hover cards. The linked post's title is a bare text node in the
   <a>; .post-navigation-sub holds the Kadence direction arrow. */
.single-post .post-navigation { max-width: 980px; margin: 8px auto 56px; padding: 0 var(--pad-side); }
.single-post .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.single-post .post-navigation .nav-previous, .single-post .post-navigation .nav-next { min-width: 0; }
.single-post .post-navigation .nav-links a {
    display: flex; flex-direction: column; gap: 8px; height: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 16px 20px; text-decoration: none; color: var(--ink);
    font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.single-post .post-navigation .nav-links a:hover { border-color: var(--coral); box-shadow: var(--sh-soft); }
.single-post .post-navigation .nav-next a { text-align: right; align-items: flex-end; }
.single-post .post-navigation .post-navigation-sub { margin: 0; }
.single-post .post-navigation .post-navigation-sub small { display: inline-flex; align-items: center; color: var(--coral-text); }
.single-post .post-navigation .kadence-svg-icon { width: 22px; height: 22px; }
@media (max-width: 700px) {
    .single-post .post-navigation .nav-links { grid-template-columns: 1fr; }
    /* Kadence hard-sets grid-column:2 on .nav-next; with one column that pins next to an
       implicit 2nd track and collapses .nav-previous to 0 width (its title then overflows
       ON TOP of next). Reset placement so both flow into the single column as two rows. */
    .single-post .post-navigation .nav-previous,
    .single-post .post-navigation .nav-next { grid-column: auto; }
    .single-post .post-navigation .nav-next a { text-align: left; align-items: flex-start; }
}


/* ===================== sitesearch.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — SiteSearch typeahead dropdown (on the design tokens)
   Styles the dropdown that sitesearch.js builds under any
   .mum-nav-search input (and the homepage hero search).
   ═══════════════════════════════════════════════════════════ */

.mss-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 380px; max-width: min(380px, 92vw);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--sh-dropdown);
    max-height: 440px; overflow-y: auto; z-index: 50;
    display: none; padding: 8px;
}
.mss-dropdown.open { display: block; animation: mss-drop 0.14s ease; }
/* Nav search sits far-right on a wide bar: right-align so the panel doesn't overflow the viewport. Hero-search instance keeps the default left:0. */
.mum-nav-search .mss-dropdown { left: auto; right: 0; }
/* Mobile full-screen search overlay: the results pane IS the dropdown — static + full-width,
   no floating panel/shadow. Still hidden until .open (sitesearch renders on focus). */
.mss-dropdown--overlay {
    position: static; width: 100%; max-width: none; max-height: none;
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    z-index: auto; padding: 8px 16px 20px;
}
@keyframes mss-drop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mss-sec { padding: 6px 4px 8px; }
.mss-sec + .mss-sec { border-top: 1px solid var(--border-soft); }
.mss-h { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 2px 8px 8px; }

.mss-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; }
.mss-row:hover { background: var(--canvas); }

.mss-thumb { flex: none; width: 38px; height: 38px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--coral-bg); }
.mss-pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mss-pbrandline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mss-pbrand { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mss-pname { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mss-appr { flex: none; font-size: 9px; font-weight: 700; color: #fff; background: var(--teal); padding: 1px 6px; border-radius: var(--r-pill); white-space: nowrap; }
.mss-price { font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.mss-at { font-weight: 400; color: var(--text-soft); }
.mss-rrp, .mss-pending { flex: none; font-size: 10.5px; font-weight: 700; color: var(--text-faint); background: var(--border-soft); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.mss-rrp { background: none; padding: 0; font-weight: 600; }

.mss-gico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--teal-bg); color: var(--teal-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.mss-gmain { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mss-gtitle { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mss-gcat { font-size: 11px; color: var(--text-faint); }
.mss-gtag { flex: none; font-size: 12px; font-weight: 700; color: var(--text-faint); }

.mss-catico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--teal-bg); color: var(--teal-text); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.mss-catname { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mss-count { flex: none; font-size: 12px; color: var(--text-faint); }

.mss-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.mss-chip { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--coral); background: var(--coral-bg-2); border: 1px solid var(--coral-border); border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; }
.mss-chip:hover { background: var(--coral-bg); }

.mss-all { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; border-top: 1px solid var(--border-soft); background: var(--surface); }
.mss-all:hover { background: var(--coral-bg); }
.mss-all-ico { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--coral-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

.mss-empty { padding: 26px 16px; text-align: center; color: var(--text-soft); font-size: 14px; }
.mss-empty-ico { font-size: 26px; margin-bottom: 6px; }
.mss-empty-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.mss-empty-sub { font-size: 13.5px; color: var(--text-faint); margin: 4px 0 14px; }
.mss-browse { display: inline-block; margin-top: 4px; padding: 9px 18px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; }


/* ===================== compare_tray.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — Compare toggle (on cards) + Compare tray (Sprint 4)
   The localStorage selection bar that feeds the Product Compare page.
   ═══════════════════════════════════════════════════════════ */

/* ── Compare toggle on a card ── */
.mum-cmp-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--border-warm); border-radius: var(--r-pill);
    padding: 6px 12px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
    color: var(--text-muted); cursor: pointer; white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mum-cmp-toggle:hover { border-color: var(--coral-border); color: var(--coral-text); }
.mum-cmp-toggle-box {
    width: 15px; height: 15px; border: 1.5px solid var(--border-warm); border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #fff;
}
.mum-cmp-toggle.on { border-color: var(--teal); color: var(--teal-text); background: var(--teal-bg); }
.mum-cmp-toggle.on .mum-cmp-toggle-box { background: var(--teal); border-color: var(--teal); }
/* Tick drawn in CSS, not typed as a character. content:"\2713" (U+2713) renders in the inherited
   webfont (Hanken Grotesk), and text faces routinely omit that codepoint — when the fallback
   chain misses you get a garbled mark instead of a tick, which is exactly what showed up in the
   ticked Compare box. Two rotated borders depend on no font at all. */
.mum-cmp-toggle.on .mum-cmp-toggle-box::after {
    content: "";
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

/* ── Tray — fixed bottom ink bar, slides up when ≥1 selected ── */
.mum-cmp-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); transform: translateY(110%); transition: transform 0.22s ease; }
.mum-cmp-tray.open { transform: none; }
.mum-cmp-tray-inner { max-width: var(--container); margin: 0 auto; padding: 12px var(--pad-side); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mum-cmp-count { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; white-space: nowrap; }
.mum-cmp-chips { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.mum-cmp-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 250, 244, 0.10); color: var(--on-dark); font-size: 13px; font-weight: 600; padding: 6px 8px 6px 12px; border-radius: var(--r-pill); }
.mum-cmp-x { background: none; border: none; color: var(--on-dark-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.mum-cmp-x:hover { color: #fff; }
.mum-cmp-go { flex: none; background: var(--coral-deep); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 11px; text-decoration: none; white-space: nowrap; }
.mum-cmp-clear { flex: none; background: none; border: none; color: var(--on-dark-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.mum-cmp-clear:hover { color: #fff; }

/* keep the tray from covering page content while open */
body.mum-cmp-has-tray { padding-bottom: 78px; }

@media (max-width: 600px) {
    .mum-cmp-chips { display: none; }   /* compact on mobile: count + Compare button */
    .mum-cmp-tray-inner { gap: 10px; }
}


/* ===================== filter_rail.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — Category listing filter rail + 2-col layout (Sprint 4)
   ═══════════════════════════════════════════════════════════ */
/* .mum-compare also carries its 860px cap (loaded later in the bundle); both classes win the cascade */
.mum-compare.mum-compare--cf { max-width: var(--container); }
.mum-cf-layout { display: grid; grid-template-columns: 248px 1fr; gap: 36px; align-items: start; }
.mum-cf-results { min-width: 0; }
/* Results = 2-col card grid (brief). Cards drop their single-column flex stacking here.
   align-items:stretch + cards as flex columns → even-height rows (Chris: cards too long). */
.mum-compare--cf .mum-compare-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

/* ── Rail ── */
.mum-cf-rail { position: sticky; top: calc(var(--nav-h) + 25px); display: flex; flex-direction: column; gap: 20px; }
.mum-cf-group { display: flex; flex-direction: column; gap: 10px; }
.mum-cf-label { font-size: 0.8rem; font-weight: 700; color: var(--text-soft); }
.mum-cf-seg { display: flex; background: var(--border-soft); border-radius: var(--r-input); padding: 4px; }
.mum-cf-segbtn { flex: 1; border: none; background: none; font-family: var(--font-body); font-size: 0.81rem; font-weight: 600; color: var(--text-soft); padding: 9px 8px; border-radius: var(--r-chip); cursor: pointer; white-space: nowrap; }
.mum-cf-segbtn.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--sh-soft); }
.mum-cf-segn { color: var(--text-faint); font-weight: 600; margin-left: 2px; }
/* ── Dual-handle price range (min/max) ──
   Two stacked range inputs share one visual track. The base track + coral fill
   are drawn by the wrapper; each input is transparent except its thumb, so both
   thumbs sit on the same line. The coral fill spans --lo → --hi (set inline). */
.mum-cf-range { position: relative; height: 18px; margin: 4px 0 2px; }
.mum-cf-range-track,
.mum-cf-range-fill {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 4px; border-radius: 3px; pointer-events: none;
}
.mum-cf-range-track { left: 0; right: 0; background: #ece2d4; }
.mum-cf-range-fill { left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); background: var(--coral); }
.mum-cf-range input[type="range"] {
    position: absolute; left: 0; top: 0; width: 100%; height: 18px;
    margin: 0; padding: 0; background: none; border: none; outline: none; box-shadow: none;
    pointer-events: none; -webkit-appearance: none; appearance: none;
}
/* Kill the browser default focus ring / any Kadence form-input border (the "box").
   a11y focus is shown on the THUMB as a coral ring below, not around the whole input. */
.mum-cf-range input[type="range"]:focus,
.mum-cf-range input[type="range"]:focus-visible { outline: none; border: none; box-shadow: none; }
.mum-cf-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 18px; border: none; }
.mum-cf-range input[type="range"]::-moz-range-track { background: transparent; height: 18px; border: none; }
.mum-cf-range input[type="range"]::-moz-range-progress { background: transparent; }
.mum-cf-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
    width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
    background: #fff; border: 2px solid var(--ink); box-shadow: var(--sh-soft);
}
.mum-cf-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto; cursor: pointer;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--ink); box-shadow: var(--sh-soft);
}
.mum-cf-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--sh-soft), 0 0 0 3px rgba(255, 106, 77, 0.45); }
.mum-cf-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--sh-soft), 0 0 0 3px rgba(255, 106, 77, 0.45); }
.mum-cf-priceval { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--text-soft); }
.mum-cf-pricemin, .mum-cf-pricemax { font-weight: 600; color: var(--text-soft); }
.mum-cf-brands { display: flex; flex-wrap: wrap; gap: 8px; }
.mum-cf-brand { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 0.81rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--border-warm); border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; }
.mum-cf-brand span { color: var(--text-faint); font-size: 0.72rem; }
.mum-cf-brand.on { border-color: var(--coral); color: var(--coral-text); background: var(--coral-bg); }
.mum-cf-brand-more { color: var(--text-faint); cursor: default; }

/* ── Toggle switches (mum.com.au Approved / ACCC compliant) ── */
.mum-cf-switches { border-top: 1px solid var(--border); padding-top: 14px; gap: 14px; }
.mum-cf-switch { display: flex; align-items: center; gap: 11px; font-size: 0.875rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.mum-cf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mum-cf-switch-track { flex: none; width: 38px; height: 22px; border-radius: var(--r-pill); background: #e0d5c6; position: relative; transition: background 0.15s ease; }
.mum-cf-switch-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.mum-cf-switch input:checked + .mum-cf-switch-track { background: var(--teal); }
.mum-cf-switch input:checked + .mum-cf-switch-track::after { transform: translateX(16px); }
.mum-cf-switch input:focus-visible + .mum-cf-switch-track { outline: 2px solid var(--coral); outline-offset: 2px; }
.mum-cf-reset { align-self: flex-start; background: none; border: none; color: var(--coral-text); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 0; }

/* ── Results bar ── */
.mum-cf-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.mum-cf-count { font-size: 0.92rem; color: var(--text-muted); }
.mum-cf-count strong { color: var(--ink); }
/* Sort control: "Sort by" label + white pill + ▾ caret (CATEGORY_HUB spec). */
.mum-cf-sortwrap { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mum-cf-sortlabel { font-size: 0.85rem; color: var(--text-soft); white-space: nowrap; }
.mum-cf-sort {
    font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--ink);
    border: 1px solid var(--border-warm); border-radius: var(--r-input);
    padding: 8px 30px 8px 14px; background-color: var(--surface); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%239a9489' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}
.mum-cf-sort:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.mum-cf-mobtoggle { display: none; }
.mum-cf-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-soft); }
.mum-cf-empty button { background: none; border: none; color: var(--coral-text); font-weight: 700; cursor: pointer; }

/* ── "Show N more" fold ── */
/* !important is correct here and not laziness. This is a UTILITY class whose entire job is to beat
   a component's own display. `.mum-cf-hidden` and `.mum-compare-card` are BOTH single-class
   selectors, so specificity ties and source order decides — and filter_rail.css loads at position
   5 of the bundle while .mum-compare-card lands at 8, so `display:block` won every time.
   Consequence: the fold NEVER worked on a product card. Invisible on most hubs because they have
   fewer than 24 products so the fold never engaged, but on Baby Toys (95) the "Show 71 more"
   button rendered under an already-complete grid and did nothing when clicked — which is exactly
   how Chris found it on the tracked band. */
.mum-cf-hidden { display: none !important; }
.mum-cf-more-wrap { display: flex; justify-content: center; margin-top: 1.5rem; }
.mum-cf-more { border: 1.5px solid var(--ink); background: var(--on-dark); color: var(--ink); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; padding: 13px 28px; border-radius: var(--r-input); cursor: pointer; transition: background 0.15s ease; }
.mum-cf-more:hover { background: var(--coral-bg); }

/* ── Mobile: rail collapses behind a Filters button ── */
@media (max-width: 820px) {
    .mum-cf-layout { grid-template-columns: 1fr; gap: 16px; }
    .mum-cf-rail { position: static; display: none; border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; }
    .mum-cf-rail.open { display: flex; }
    .mum-cf-mobtoggle { display: inline-flex; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--border-warm); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; }
    /* Keep filters/sort reachable on long category lists: pin the results bar to the
       top as it scrolls. Negative side margin + matching padding lets the blurred
       cream band span the full content width cleanly (parent has no side padding). */
    .mum-cf-bar {
        position: sticky; top: var(--nav-h); z-index: 10;  /* sit BELOW the sticky nav, not behind it (C2) */
        background: rgba(255, 250, 244, .92); backdrop-filter: blur(8px);
        margin: 0 calc(-1 * var(--pad-side)); padding: 10px var(--pad-side);
        flex-wrap: wrap; row-gap: 8px;  /* H2 + sort can't share one row at ≤390 → wrap, no horizontal overflow */
    }
    /* 16px kills iOS Safari's focus auto-zoom (which would leave the page
       horizontally scrollable, breaking MOBILE_SPEC's no-horizontal-scroll rule).
       Desktop keeps the smaller 0.85rem from the base rule. */
    .mum-cf-sort { max-width: 100%; font-size: 16px; }
}


/* ===================== homepage.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — HOMEPAGE sections (Sprint 3, on the design tokens)
   Scoped under .entry-content so these rules out-specify Kadence's
   .entry-content h2/p/ul defaults (0,2,0 > 0,1,1). The page itself
   must be set to FULL WIDTH in Kadence so the bands can reach the edges.
   ═══════════════════════════════════════════════════════════ */

/* neutralise Kadence's content container on the homepage page only (any wrapper that holds .mum-home) */
.content-container:has(.mum-home), .site-main:has(.mum-home), .content-wrap:has(.mum-home), .entry:has(.mum-home), .entry-content-wrap:has(.mum-home), .entry-content:has(.mum-home), .single-content:has(.mum-home) { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.entry-content .mum-home { font-family: var(--font-body); color: var(--ink); }
.entry-content .mum-home * { box-sizing: border-box; }
/* Headings render as authored (sentence case) — neutralise the theme's global text-transform: capitalize */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { text-transform: none !important; }
.entry-content .mum-home-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-side); }
.entry-content .mum-home-sec { padding-top: 56px; padding-bottom: 56px; }  /* top/bottom only: when combined with .mum-home-wrap on one element (winners), don't clobber the wrap's side padding */
.entry-content .mum-home-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; line-height: 1.1; }
.entry-content .mum-home-sub2 { color: var(--text-soft); font-size: 16px; margin: 0; }
.entry-content .mum-home-sechead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.entry-content .mum-home-sechead .mum-home-h2 { margin: 0 0 6px; }
.entry-content .mum-home-allink { font-weight: 700; font-size: 15px; color: var(--coral); text-decoration: none; white-space: nowrap; }

/* ── Hero ── */
.entry-content .mum-home-hero { position: relative; z-index: 20; background: var(--hero-grad); padding: 64px var(--pad-side) 60px; }
.entry-content .mum-hero-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.entry-content .mum-hero-blob-gold { position: absolute; top: -60px; right: -40px; width: 280px; height: 280px; border-radius: 50%; background: var(--gold); opacity: 0.35; filter: blur(8px); }
.entry-content .mum-hero-blob-teal { position: absolute; bottom: -80px; left: 40%; width: 240px; height: 240px; border-radius: 50%; background: var(--teal); opacity: 0.16; filter: blur(6px); }
.entry-content .mum-hero-inner { position: relative; max-width: var(--container); margin: 0 auto; display: flex; gap: 52px; align-items: center; flex-wrap: wrap; }
.entry-content .mum-hero-left { flex: 1; min-width: 300px; max-width: 680px; }
.entry-content .mum-hero-right { flex: none; width: 362px; }
.entry-content .mum-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--coral-border); color: var(--coral-text); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 22px; white-space: nowrap; }
.entry-content .mum-hero-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.entry-content .mum-home-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 18px; text-wrap: balance; }
.entry-content .mum-home-hero h1 .c { color: var(--coral-text); }
.entry-content .mum-hero-sub { font-size: 19px; line-height: 1.5; color: var(--text-muted); max-width: 560px; margin: 0 0 28px; }
.entry-content .mum-hero-search { position: relative; max-width: 660px; z-index: 10; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; padding: 8px 8px 8px 18px; box-shadow: var(--sh-search); }
.entry-content .mum-hero-search-cat { appearance: none; -webkit-appearance: none; flex: none; border: none; border-right: 1px solid var(--border-warm); background-color: transparent; padding: 8px 28px 8px 6px; margin-right: 4px; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; max-width: 160px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%226%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20stroke%3D%22%239a9489%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 9px center; }
.entry-content .mum-hero-search-cat:focus { outline: none; }
.entry-content .mum-hero-search > svg { color: var(--text-faint); flex: none; }
.entry-content .mum-hero-search input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: none; padding: 8px 6px; }
.entry-content .mum-hero-search button { flex: none; background: var(--coral-deep); color: #fff; border: none; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 11px; cursor: pointer; }
.entry-content .mum-hero-chips { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.entry-content .mum-hero-chip { font-size: 13px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border-warm-2); border-radius: var(--r-pill); padding: 7px 14px; text-decoration: none; }

/* ── Product of the Week slider (hero right column) ── */
.entry-content .mum-pow { background: var(--surface); border-radius: 20px; box-shadow: 0 18px 44px rgba(31, 36, 33, 0.14); overflow: hidden; }
.entry-content .mum-pow-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; background: var(--ink); color: var(--on-dark); }
.entry-content .mum-pow-label { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.entry-content .mum-pow-star { color: var(--gold); font-size: 15px; }
.entry-content .mum-pow-arrows { display: flex; align-items: center; gap: 6px; }
.entry-content .mum-pow-arrow { width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(255, 250, 244, 0.14); color: var(--on-dark); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.entry-content .mum-pow-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.entry-content .mum-pow-track::-webkit-scrollbar { display: none; }
.entry-content .mum-pow-slide { flex: none; width: 100%; scroll-snap-align: start; }
.entry-content .mum-pow-img { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; }
.entry-content .mum-pow-appr { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill); background: var(--teal); color: #fff; font-weight: 700; font-size: 12px; }
.entry-content .mum-pow-body { padding: 20px; }
.entry-content .mum-pow-brandrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.entry-content .mum-pow-brand { font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.entry-content .mum-pow-stage { font-size: 10px; font-weight: 700; color: var(--teal-text); background: var(--teal-bg); border-radius: var(--r-pill); padding: 2px 8px; }
.entry-content .mum-pow-name { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); }
.entry-content .mum-pow-why { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 9px 0 16px; }
.entry-content .mum-pow-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding-top: 15px; }
.entry-content .mum-pow-pricebox { min-width: 0; }
.entry-content .mum-pow-from { font-size: 12px; color: var(--text-faint); }
.entry-content .mum-pow-price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
.entry-content .mum-pow-price .at { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.entry-content .mum-pow-pending { font-size: 13px; font-weight: 700; color: var(--text-faint); background: var(--border-soft); padding: 4px 10px; border-radius: var(--r-chip); display: inline-block; }
.entry-content .mum-pow-btn { flex: none; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 11px; text-decoration: none; white-space: nowrap; }
.entry-content .mum-pow-dots { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 0 16px; }
.entry-content .mum-pow-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: #e0d5c6; cursor: pointer; transition: all 0.2s ease; }
.entry-content .mum-pow-dot.on { width: 22px; background: var(--coral); }

/* ── Trust strip ── */
.entry-content .mum-home-trust { background: var(--ink); }
.entry-content .mum-trust-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-side); display: flex; flex-wrap: wrap; }
.entry-content .mum-trust-cell { flex: 1; min-width: 200px; padding: 20px 28px; display: flex; align-items: center; gap: 13px; border-left: 1px solid rgba(255, 250, 244, 0.12); }
.entry-content .mum-trust-cell:first-child { border-left: none; }
.entry-content .mum-trust-ico { font-size: 22px; flex: none; }
.entry-content .mum-trust-t { font-size: 15px; font-weight: 700; color: var(--on-dark); }
.entry-content .mum-trust-s { font-size: 13px; color: var(--on-dark-muted); }

/* ── Category grid ── */
.entry-content .mum-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.entry-content .mum-cat-tile { border: 1px solid var(--border); border-radius: var(--r-tile); overflow: hidden; text-decoration: none; background: var(--surface); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.entry-content .mum-cat-tile:hover { box-shadow: var(--sh-soft); transform: translateY(-2px); }
.entry-content .mum-cat-tile-head { height: 110px; display: flex; align-items: flex-end; padding: 12px; font-size: 30px; }
.entry-content .mum-cat-tile-head--photo { background-size: cover; background-position: center; background-color: var(--canvas); }
.entry-content .mum-cat-tile-body { padding: 14px 16px; }
.entry-content .mum-cat-tile-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.entry-content .mum-cat-tile-count { font-size: 13px; color: var(--text-faint); margin-top: 2px; }

/* ── mum. Approved winners ── */
.entry-content .mum-home-winners { background: var(--winners-grad); }
.entry-content .mum-win-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--on-dark); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 14px; }
.entry-content .mum-win-pill .heart { color: var(--coral-soft); }
.entry-content .mum-home-winners .mum-home-h2 { margin: 14px 0 4px; }
.entry-content .mum-home-winners .mum-home-sub2 { margin: 0 0 30px; }
/* Header row: heading block on the left, carousel arrows bottom-right (desktop). */
.entry-content .mum-wins-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.entry-content .mum-wins-head-l { min-width: 0; }
.entry-content .mum-wins-nav { display: flex; gap: 8px; flex: none; margin-bottom: 4px; }
.entry-content .mum-wins-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-soft); transition: border-color 0.15s ease, color 0.15s ease; padding: 0; }
.entry-content .mum-wins-arrow:hover { border-color: var(--coral); color: var(--coral-text); }
.entry-content .mum-wins-arrow:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.entry-content .mum-wins-arrow:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* Horizontal carousel: 3 cards + a peek on desktop, ~1 + peek on mobile; native
   scroll-snap so it swipes on touch and scrolls (thin scrollbar) on desktop. */
.entry-content .mum-wins-grid { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 4px 4px 16px; margin: 0 -4px; scroll-padding: 0 4px; scrollbar-width: thin; scrollbar-color: var(--coral-border) transparent; }
.entry-content .mum-wins-grid::-webkit-scrollbar { height: 8px; }
.entry-content .mum-wins-grid::-webkit-scrollbar-thumb { background: var(--coral-border); border-radius: 4px; }
.entry-content .mum-win-card { flex: 0 0 clamp(280px, 31%, 340px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card-lg); box-shadow: var(--sh-card); overflow: hidden; }
.entry-content .mum-win-img { height: 170px; position: relative; }
.entry-content .mum-win-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: var(--r-pill); }
.entry-content .mum-win-badge.appr { background: var(--teal); color: #fff; }
.entry-content .mum-win-badge.new { background: var(--gold); color: var(--ink); }
.entry-content .mum-win-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.entry-content .mum-win-brandrow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.entry-content .mum-win-brand { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.entry-content .mum-win-stage { font-size: 10px; font-weight: 700; color: var(--teal-text); background: var(--teal-bg); border-radius: var(--r-pill); padding: 2px 7px; }
.entry-content .mum-win-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.15; margin: 0; }
.entry-content .mum-win-desc { font-size: 13.5px; color: var(--text-soft); margin: 8px 0 14px; }
.entry-content .mum-win-foot { border-top: 1px solid var(--border); padding-top: 14px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entry-content .mum-win-price { font-size: 12px; color: var(--text-faint); }
.entry-content .mum-win-price .at { color: var(--text-faint); }
.entry-content .mum-win-std { font-size: 11px; color: var(--teal); font-weight: 700; margin-top: 1px; }
.entry-content .mum-win-rrp { font-size: 12px; color: var(--text-faint); }
.entry-content .mum-win-pending { font-size: 13px; font-weight: 700; color: var(--text-faint); background: var(--border-soft); padding: 4px 10px; border-radius: var(--r-chip); display: inline-block; }
.entry-content .mum-win-btn { flex: none; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.entry-content .mum-win-btn.out { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); }

/* ── Latest comparisons ── */
.entry-content .mum-latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.entry-content .mum-latest-card { text-decoration: none; display: block; }
.entry-content .mum-latest-img { height: 190px; border-radius: var(--r-card); background: var(--coral-bg); margin-bottom: 12px; background-size: cover; background-position: center; }
.entry-content .mum-latest-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.entry-content .mum-latest-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; margin: 4px 0 6px; }
.entry-content .mum-latest-meta { font-size: 13px; color: var(--text-faint); }

/* ── Newsletter ── */
.entry-content .mum-home-news { background: var(--coral); padding: 54px var(--pad-side); }
.entry-content .mum-news-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.entry-content .mum-news-copy { max-width: 560px; }
.entry-content .mum-news-h { font-family: var(--font-display); letter-spacing: -0.02em; font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.entry-content .mum-news-sub { color: #ffe4dc; font-size: 16px; margin: 0; }
.entry-content .mum-news-form { display: flex; gap: 10px; flex: none; }
.entry-content .mum-news-form input { border: none; outline: none; border-radius: var(--r-input); padding: 15px 18px; font-size: 16px; font-family: var(--font-body); width: 250px; }
.entry-content .mum-news-form button { background: var(--ink); color: #fff; border: none; font-weight: 700; font-size: 15px; padding: 15px 26px; border-radius: var(--r-input); font-family: var(--font-body); cursor: pointer; }

@media (max-width: 900px) {
    .entry-content .mum-cats-grid { grid-template-columns: 1fr 1fr; }
    .entry-content .mum-latest-grid { grid-template-columns: 1fr; }
    .entry-content .mum-win-card { flex-basis: 80vw; max-width: 320px; }
    .entry-content .mum-win-img { height: 150px; }
    .entry-content .mum-wins-head { display: block; }   /* stack; arrows hidden, swipe is primary */
    .entry-content .mum-wins-nav { display: none; }
    .entry-content .mum-news-form { width: 100%; }
    .entry-content .mum-news-form input { flex: 1; width: auto; min-width: 0; }
    /* Slider stacks directly under the hero content, full width (README 9). */
    .entry-content .mum-hero-inner { gap: 32px; }
    .entry-content .mum-hero-right { flex: 1 1 100%; width: 100%; }
    .entry-content .mum-pow { max-width: 460px; }
    /* Native swipe is primary on mobile: hide the arrows, add a "‹ swipe ›" hint (§2.6). */
    .entry-content .mum-pow-arrows { display: none; }
    .entry-content .mum-pow-head::after {
        content: "\2039  swipe \203A"; margin-left: auto;
        font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: rgba(255, 250, 244, 0.5); white-space: nowrap;
    }
}
@media (max-width: 768px) {
    .entry-content .mum-home-hero { padding: 40px var(--pad-side); }
    .entry-content .mum-home-sec { padding-top: 36px; padding-bottom: 36px; }
    .entry-content .mum-hero-search-cat { display: none; }
    .entry-content .mum-hero-search button { padding-top: 14px; padding-bottom: 14px; }  /* 44px tap target */
    .entry-content .mum-pow { max-width: none; }
    /* Trust strip: 4-across → centred 2x2 with cross dividers (§2.5). */
    .entry-content .mum-trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .entry-content .mum-trust-cell { min-width: 0; padding: 16px; justify-content: center; text-align: center; border-left: none; }
    .entry-content .mum-trust-cell:nth-child(even) { border-left: 1px solid rgba(255, 250, 244, 0.12); }
    .entry-content .mum-trust-cell:nth-child(n+3) { border-top: 1px solid rgba(255, 250, 244, 0.12); }
}


/* ===================== compare_page.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — Product Compare page (Sprint 4): the spec matrix
   Rows = canonical spec_standard fields · columns = top products.
   Source of truth: design_handoff_mum_redesign/designs/Product Compare.dc.html
   Label column is frozen (position:sticky;left:0) for the mobile swipe pattern.
   ═══════════════════════════════════════════════════════════ */
.mcmp { max-width: var(--container-narrow); margin: 0 auto; padding: 1rem var(--pad-side) 3rem; font-family: var(--font-body); color: var(--ink); }

/* ── PAGE HEADER ─────────────────────────────────────────── */
.mcmp-head { margin: 12px 0 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mcmp-head-l { min-width: 0; }
.mcmp-crumb { font-size: 13px; color: var(--text-faint); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.mcmp-crumb a { color: var(--text-faint); text-decoration: none; }
.mcmp-crumb-here { color: var(--teal); }
.mcmp-head h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.mcmp-head p { color: var(--text-soft); font-size: 15px; margin: 6px 0 0; }

/* ── HEADER ACTION ROW (Add / Reset / Share) ─────────────── */
.mcmp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mcmp-act { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 11px; font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; line-height: 1; }
.mcmp-act-add { border: 1.5px dashed var(--coral); background: var(--coral-bg-2); color: var(--coral); }
.mcmp-act-add:hover { background: var(--coral-bg); }
.mcmp-act-add[disabled] { opacity: 0.5; cursor: not-allowed; }
.mcmp-act-reset { border: 1.5px solid var(--border-warm); background: var(--surface); color: #3a3f3b; }
.mcmp-act-reset:hover { border-color: var(--text-faint); }
.mcmp-act-share { border: none; background: var(--ink); color: #fff; padding: 12.5px 18px; }
.mcmp-act-share:hover { background: #2c332e; }
.mcmp-act-share.copied { background: var(--teal); }

.mcmp-swipe { display: none; text-align: center; font-size: 12px; color: var(--text-faint); margin-bottom: 8px; }
.mcmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── COMPARISON CARD / GRID ──────────────────────────────── */
.mcmp-grid { display: grid; border: 1px solid var(--border); border-radius: var(--r-card-lg); overflow: hidden; background: var(--surface); min-width: 720px; }
/* Columns driven by data-cols (agent + compare_tray.js set it) so mobile @media can widen
   the product columns for the horizontal swipe — no inline style (Fable C4). Desktop = the
   old 200px label + equal 1fr product columns. */
.mcmp-grid[data-cols="1"] { grid-template-columns: 200px 1fr; }
.mcmp-grid[data-cols="2"] { grid-template-columns: 200px 1fr 1fr; }
.mcmp-grid[data-cols="3"] { grid-template-columns: 200px 1fr 1fr 1fr; }
.mcmp-grid[data-cols="4"] { grid-template-columns: 200px 1fr 1fr 1fr 1fr; }

.mcmp-cell { padding: 15px 18px; border-bottom: 1px solid var(--border-soft); font-size: 15px; color: var(--ink); }
.mcmp-val, .mcmp-phead { border-left: 1px solid var(--border-soft); }
.mcmp-label { background: var(--compare-label-bg); font-weight: 700; font-size: 14px; color: #46544f; position: sticky; left: 0; z-index: 1; }
.mcmp-pick { background: var(--our-pick-bg); }

/* corner + product-header row carry the 2px ink bottom border (mockup) */
.mcmp-corner { background: var(--surface); border-bottom: 2px solid var(--ink); position: sticky; left: 0; z-index: 2; display: flex; align-items: flex-end; padding: 20px 18px; font-size: 13px; font-weight: 700; color: var(--text-faint); }
.mcmp-phead { border-bottom: 2px solid var(--ink); background: var(--surface); display: flex; flex-direction: column; padding: 0; }
.mcmp-phead.mcmp-pick { background: var(--our-pick-bg); }
/* 28px top strip carrying the per-column ✕ remove tile (mockup) */
.mcmp-pstrip { height: 28px; display: flex; align-items: center; justify-content: flex-end; padding: 0 14px; }
.mcmp-premove { width: 22px; height: 22px; border: none; border-radius: 7px; background: #f4ece1; color: var(--text-faint); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-family: var(--font-body); }
.mcmp-phead.mcmp-pick .mcmp-premove { background: #efe7da; }
.mcmp-premove:hover { background: var(--coral-deep); color: #fff; }
.mcmp-phead-body { display: flex; flex-direction: column; flex: 1; padding: 0 18px 20px; }

.mcmp-pimg { position: relative; width: 100%; height: 120px; border-radius: 12px; margin-bottom: 14px; background-size: cover; background-position: center; }
.mcmp-pickpill { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 5px 11px; border-radius: var(--r-pill); box-shadow: 0 2px 6px rgba(17, 157, 139, 0.3); }
.mcmp-pickpill .mcmp-star { font-size: 10px; }
.mcmp-pbrand { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.mcmp-pname { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.15; margin: 3px 0 10px; }

/* price — Bricolage 800/22, pushed to the bottom of the flex column */
.mcmp-pprice { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin: auto 0 12px; }
.mcmp-pprice.v { color: var(--teal-text); }
.mcmp-pprice .at { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--text-soft); }
.mcmp-prrp, .mcmp-ppending { font-size: 13px; color: var(--text-faint); margin: auto 0 12px; }
.mcmp-ppending { font-style: italic; }

/* filled Read-review button — ink, coral on the Our Pick column */
.mcmp-pbtn { display: block; width: 100%; box-sizing: border-box; text-align: center; border: none; background: var(--ink); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 13px; padding: 11px; border-radius: 10px; text-decoration: none; }
.mcmp-pbtn-pick { background: var(--coral-deep); }

/* ── SPEC VALUES + BEST-IN-ROW CHIP ──────────────────────── */
.mcmp-dash { color: var(--text-faint); }
.mcmp-best { font-weight: 800; color: var(--teal); }
.mcmp-bestchip { font-size: 10px; font-weight: 700; color: var(--teal); background: var(--teal-bg); padding: 2px 6px; border-radius: 5px; margin-left: 4px; }
/* trust rows: teal ACCC tick + coral retailer buy-link (ACCC compliant / Where to buy matrix rows) */
.mcmp-accc { color: var(--teal); font-weight: 700; }
.mcmp-buy { color: var(--coral); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mcmp-buy:hover { text-decoration: underline; }

/* ── VERDICT (horizontal ink card + heart tile) ─────────── */
.mcmp-verdict { margin-top: 22px; background: var(--ink); color: var(--on-dark); border-radius: var(--r-card-lg); padding: 30px 34px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.mcmp-verdict-trophy { flex: none; width: 58px; height: 58px; border-radius: 14px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; }
.mcmp-verdict-trophy .mum-hi { width: 27px; height: 27px; }
.mcmp-verdict-body { flex: 1; min-width: 260px; }
.mcmp-verdict-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral-soft); margin-bottom: 6px; }
.mcmp-verdict-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--on-dark); margin: 0 0 7px; }
.mcmp-verdict-body p { margin: 0; font-size: 17px; line-height: 1.55; color: #e7e1d6; }
.mcmp-verdict-cta { flex: none; padding: 14px 26px; border-radius: 11px; background: var(--coral-deep); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }

/* ── ADD-A-PRODUCT PICKER MODAL ──────────────────────────── */
.mcmp-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mcmp-modal[hidden] { display: none; }
.mcmp-scrim { position: absolute; inset: 0; background: rgba(31, 36, 33, 0.5); }
.mcmp-card { position: relative; background: var(--canvas, #fffaf4); border-radius: 20px; width: 560px; max-width: 100%; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(31, 36, 33, 0.32); }
.mcmp-mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.mcmp-mtitle { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
.mcmp-mslots { font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.mcmp-mclose { flex: none; width: 34px; height: 34px; border: none; border-radius: 10px; background: #f4ece1; color: var(--text-soft); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-family: var(--font-body); }
.mcmp-mclose:hover { background: var(--border-warm); }
.mcmp-msearch-wrap { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.mcmp-msearch { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--border-warm); border-radius: 12px; padding: 11px 14px; }
.mcmp-msearch-ico { color: var(--text-faint); font-size: 17px; }
.mcmp-msearch-input { flex: 1; border: none; outline: none; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: transparent; }
.mcmp-mlist { overflow-y: auto; padding: 10px 14px 14px; }
.mcmp-mlist-h { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 10px 10px 6px; }
.mcmp-mrow { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 12px; cursor: pointer; }
.mcmp-mrow + .mcmp-mrow { border-top: 1px solid var(--border-soft); }
.mcmp-mrow:hover { background: var(--coral-bg-2); }
.mcmp-mthumb { flex: none; width: 52px; height: 52px; border-radius: 11px; background: linear-gradient(135deg, #fff3ee, #ffe2c2); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.mcmp-mrow-main { flex: 1; min-width: 0; }
.mcmp-mrow-name { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcmp-mrow-sub { font-size: 13px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcmp-mrow-price { font-weight: 800; font-size: 15px; color: var(--ink); margin-right: 6px; white-space: nowrap; }
.mcmp-mrow-price.pending { font-size: 11px; font-weight: 700; color: var(--text-faint); background: var(--border-soft); padding: 4px 9px; border-radius: 6px; }
.mcmp-madd { flex: none; padding: 9px 16px; border: none; border-radius: 10px; background: var(--ink); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 13px; cursor: pointer; }
.mcmp-madd:hover { background: #2c332e; }
.mcmp-mempty { padding: 22px 12px; text-align: center; font-size: 14px; color: var(--text-faint); }

@media (max-width: 768px) {
  .mcmp-swipe { display: block; }
  .mcmp-head h1 { font-size: 28px; }
  .mcmp-actions { width: 100%; }
  /* Frozen label column (narrower) + wide product columns so the next one peeks in (§2.13).
     min-width: max-content sizes the grid BOX to the sum of its (fixed vw) tracks — without it
     the block box collapses to the container width, the wide tracks overflow into the grid's
     own overflow:hidden, get clipped, and .mcmp-scroll has nothing to swipe (cols 2+ unreachable).
     !important on the column templates because legacy compare pages published before the
     data-cols refactor carry an inline style="grid-template-columns:200px 1fr…" that would
     otherwise beat this @media rule and squash every column (single-char wrapping). */
  .mcmp-grid { min-width: max-content; }
  .mcmp-grid[data-cols="1"] { grid-template-columns: 140px 74vw !important; }
  .mcmp-grid[data-cols="2"] { grid-template-columns: 140px 68vw 68vw !important; }
  .mcmp-grid[data-cols="3"] { grid-template-columns: 140px 66vw 66vw 66vw !important; }
  .mcmp-grid[data-cols="4"] { grid-template-columns: 140px 64vw 64vw 64vw 64vw !important; }
  /* Verdict card: stack the tile/body/CTA so the 260px body doesn't intrude into
     the padding and the CTA doesn't wrap alone under a lone tile. */
  .mcmp-verdict { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; }
  .mcmp-verdict-body { min-width: 0; }
  .mcmp-verdict-cta { width: 100%; text-align: center; box-sizing: border-box; }
}


/* ===================== compare_pages.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — CATEGORY COMPARISON PAGES (on the design tokens)
   Unified pill system · coral primary · teal trust · image-ready
   Replace ALL previous .mum-compare-* rules
   ═══════════════════════════════════════════════════════════ */

.mum-compare { max-width: 860px; margin: 0 auto; padding: 1rem 0 3rem; }

/* ── Header band: gradient, left-aligned, breadcrumb + H1 + intro + meta ── */
.mum-compare-header {
    background: var(--hero-grad);
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-card);
    text-align: left;
    margin-bottom: 1.75rem;
    padding: 2.25rem 2.25rem 1.85rem;
}
.mum-compare-crumbs {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.81rem; font-weight: 600; color: var(--text-faint);
    margin-bottom: 0.85rem;
}
.mum-compare-crumb-sep { color: var(--text-faint); }
.mum-compare-crumb-cat { color: var(--teal); }
.mum-compare-header h1 {
    font-family: var(--font-display); font-weight: 800;
    font-size: 2.625rem; letter-spacing: -0.025em; line-height: 1.05;
    color: var(--ink); margin: 0 0 0.75rem;
}
.mum-compare-intro {
    max-width: 680px; margin: 0 0 0.9rem; text-align: left;
    color: var(--text-muted); font-size: 1.0625rem; line-height: 1.55;
}
.mum-compare-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem;
    font-size: 0.81rem; font-weight: 600; color: var(--text-faint);
}
.mum-compare-meta-trust { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--teal); }
.mum-compare-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: #cabfb0; }

/* ── Cards ── */
.mum-compare-list { display: flex; flex-direction: column; gap: 1rem; }

/* Card = white container. Its body is a full-height flex column so the action bar
   pins to the bottom of every card (PRODUCT_CARD_SHELL_SPEC BUG1). The thumb lives in
   the head row beside the title ONLY; spec chips / featured / price / footer span the
   full card width below it (NOT indented past the thumb). */
.mum-compare-card {
    display: block; min-width: 0;
    padding: 1.35rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-soft);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mum-compare-card:hover { box-shadow: var(--sh-card); transform: translateY(-1px); }
/* All cards are uniform white. mum. Approved is shown ONLY by the teal pill in the
   meta row, NOT by a per-card tint (avoids the peach/coral checkerboard). The --top
   class is kept (other code/JS reads it) but carries no background/border treatment. */
.mum-compare-card--top {
    background: var(--surface);
    border: 1px solid var(--border);
}

/* Thumb (real photo OR gradient placeholder) — flex:none in the head row, ALWAYS
   rendered so the title's left edge and card heights stay aligned (BUG3). */
.mum-compare-img { flex: none; }
.mum-compare-img img {
    width: 78px; height: 78px; object-fit: cover;
    border-radius: 11px; border: 1px solid var(--border); background: var(--canvas);
}
.mum-compare-img--ph {
    width: 78px; height: 78px; border-radius: 11px;
    background: linear-gradient(135deg, #fff3ee, #ffd9cd);
    display: flex; align-items: center; justify-content: center;
}

/* Backward-compat for LEGACY in-article compare blocks (article_compare.py) that were
   published BEFORE this restructure: their cards carry the thumb as a DIRECT child of
   .mum-compare-card (before .mum-compare-body). Keep those rendering thumb-beside-body
   (the old 132px grid) so the new flex-column CSS doesn't stack them on published
   articles. New cards nest the thumb inside .mum-compare-card-head, so this direct-child
   :has() selector never matches them. Remove once legacy articles are retrofitted. */
.mum-compare-card:has(> .mum-compare-img) {
    display: grid; grid-template-columns: 132px 1fr; gap: 0 1.25rem; align-items: start;
}
.mum-compare-card:has(> .mum-compare-img) > .mum-compare-img img { width: 132px; height: 132px; }

/* Body = full-height flex column; the action bar pins to the bottom (margin-top:auto). */
.mum-compare-body { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.mum-compare-body > * { margin-top: 0; margin-bottom: 0.75rem; }
.mum-compare-body > *:last-child { margin-bottom: 0; }
.mum-compare-actionbar { margin-top: auto; }

/* ── Compact category / Hub grid (--cf): even-height cards, 74px thumb. ── */
.mum-compare--cf .mum-compare-card { height: 100%; padding: 1rem; }
.mum-compare--cf .mum-compare-body > * { margin-bottom: 0.55rem; }
.mum-compare--cf .mum-compare-img img,
.mum-compare--cf .mum-compare-img--ph { width: 74px; height: 74px; }
/* Verdict capped to a single short line (truncated server-side too). */
.mum-compare--cf .mum-compare-verdict {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 0.86rem; line-height: 1.4; margin-bottom: 0.5rem;
}

/* ── Pill system: FILLED · OUTLINED · TAG ── */
.mum-compare-badge {
    display: inline-block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #fff;
    background: var(--coral-deep);
    border-radius: var(--r-pill); padding: 0.24rem 0.75rem;
}

.mum-compare-stage, .mum-compare-spec {
    display: inline-block;
    font-size: 0.78rem; font-weight: 500; color: var(--text-soft);
    background: var(--compare-label-bg); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 0.24rem 0.75rem;
}
.mum-compare-spec-k { font-weight: 700; color: var(--text-soft); }

/* :not(--price) scoping is load-bearing. This rule's `color: ... !important` (needed to beat
   Kadence's link colours) also beat the FILLED coral price button, rendering dark ink text on the
   coral fill and dark red on hover — the primary CTA looked broken. The filled variant is styled
   in category_hub.css; this base rule is only for the plain "Read review ->" link. */
.mum-compare-cta:not(.mum-compare-cta--price) {
    display: inline-block;
    font-size: 13px; font-weight: 700;
    color: var(--ink) !important; text-decoration: none !important;
    border-bottom: 2px solid var(--coral); padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.mum-compare-cta:not(.mum-compare-cta--price):hover { color: var(--coral-text) !important; border-color: var(--coral); }
.mum-compare-cta:focus-visible,
.mum-compare-featured a:focus-visible,
.mum-compare-guides a:focus-visible {
    outline: 2px solid var(--coral); outline-offset: 2px;
}

/* ── Editorial block ── */
.mum-compare-badges { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.mum-compare-badges:empty { display: none; margin: 0; }

/* Card head — top row: 78px thumb (flex:none) + content (flex:1; min-width:0), 13px
   gap and nothing else. NO justify-content:space-between, NO spacer: the content sits
   flush-left immediately right of the thumb (PRODUCT_CARD_SHELL_SPEC §1). */
.mum-compare-card-head {
    display: flex; align-items: flex-start; gap: 0.85rem;
}
.mum-compare-card-title { flex: 1; min-width: 0; }

/* Brand row: uppercase brand + optional teal "✓ Approved" pill, inline */
.mum-compare-brandrow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem;
    margin-bottom: 0.2rem;
}
.mum-compare-brand {
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint);
}
.mum-compare-approved {
    display: inline-flex; align-items: center; gap: 0.3em;
    font-size: 0.625rem; font-weight: 700; color: #fff;
    background: var(--teal); border-radius: var(--r-pill); padding: 0.12rem 0.5rem;
    white-space: nowrap;
}
.mum-compare-card-title h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem; font-weight: 700; color: var(--ink);
    margin: 0; line-height: 1.15;
    /* clamp to 2 lines so a long name never makes the whole grid row taller (PRODUCT_CARD_SHELL_SPEC) */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Best-for chip under the name: coral ★ on top picks, teal on the rest */
.mum-compare-bestfor {
    display: inline-block; margin-top: 0.4rem; max-width: 100%;
    font-size: 0.72rem; font-weight: 700;
    color: var(--teal-text); background: var(--teal-bg);
    border-radius: var(--r-chip); padding: 0.18rem 0.55rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mum-compare-bestfor--star { color: var(--coral); background: var(--coral-bg); }

.mum-compare-verdict { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* Spec chips row, with a trailing teal "✓ ACCC" trust chip */
/* one row, no wrap; chips beyond the width clip so card height stays fixed (PRODUCT_CARD_SHELL_SPEC) */
/* One no-wrap row that SCROLLS horizontally (desktop + mobile) so long chips like
   "Terrain: Narrow doorway compatible" are reachable, not clipped. Scrollbar hidden. */
.mum-compare-specs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; align-items: center; gap: 0.45rem; scrollbar-width: none; -ms-overflow-style: none; }
.mum-compare-specs::-webkit-scrollbar { display: none; }
.mum-compare-specs > * { flex: none; }
.mum-compare-accc {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.75rem; font-weight: 700; color: var(--teal-text);
}

/* "Featured in {guide}" line — ONE guide, truncated to a single line in the grid
   so long article titles can't blow out card height. */
.mum-compare-featured { color: var(--text-faint); font-size: 0.78rem; }
.mum-compare-featured a { color: var(--ink) !important; font-weight: 600; text-decoration: none !important; border-bottom: 1px solid var(--border-warm); }
.mum-compare-featured a:hover { border-bottom-color: var(--coral); }
.mum-compare--cf .mum-compare-featured {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ── Action bar: price (commercial) row, footer (toggle + review) below ── */
.mum-compare-actionbar {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.6rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-soft);
}
.mum-compare-commercial {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    justify-content: flex-start;
}
.mum-compare-price { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: var(--ink); white-space: normal; }  /* normal (not nowrap): on a sale, was/save wrap to a 2nd line instead of clipping under the buy button; each price unit (.mum-compare-at/-was/-save) is itself nowrap so only whole units wrap. PRODUCT_CARD_SHELL_SPEC §4a: display font 800/18px */
.mum-compare-footrow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem;
    justify-content: space-between;
}

/* ── Guides + footer ── */
.mum-compare-guides {
    margin: 2.5rem auto 0; padding: 1.85rem 2rem 2rem; max-width: 640px;
    background: var(--coral-bg-2);
    border: 1px solid var(--coral-border); border-radius: var(--r-card); text-align: center;
}
.mum-compare-guides h2 { font-size: 1.25rem; margin: 0 0 0.7rem; }
.mum-compare-guides p { color: var(--text-muted); font-size: 0.96rem; line-height: 1.6; margin: 0 0 1rem; }
.mum-compare-guides ul { list-style: none; padding: 0; margin: 0; }
.mum-compare-guides li { margin: 0.55rem 0; line-height: 1.5; }
.mum-compare-guides a { color: var(--coral-text) !important; font-weight: 600; text-decoration: none !important; }
.mum-compare-guides a:hover { text-decoration: underline !important; }
.mum-compare-hub { font-size: 0.9rem; }

.mum-compare-footer {
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--text-faint); font-size: 0.88rem; line-height: 1.55;
    text-align: center;
}

/* ── Mobile (≤768, MOBILE_SPEC §2.8) ── */
@media (max-width: 768px) {
    .mum-compare-header h1 { font-size: 1.65rem; }
    .mum-compare-card { padding: 1.05rem 1.1rem; }
    /* Single-column card grid on phones. Cards keep the full shell: thumb-beside-title
       head row + one no-wrap spec-chip row (the base .mum-compare-specs already clips —
       do NOT re-grid the chips to 2-col, §2.8 wants one row). */
    .mum-compare-list,
    .mum-compare--cf .mum-compare-list { grid-template-columns: 1fr; }
    .mum-compare-commercial { justify-content: space-between; }
}
/* Keep the Verified price block a CONSISTENT two-column layout (info left, Check-price
   button right) for every card — the info column fills the space and wraps internally
   (the price wraps under the ✓ Verified pill) so the button never drops to its own line
   on some cards and not others. flex:none button never shrinks. */
.mum-compare-verified-info { flex: 1; }

/* A long chip must DEGRADE VISIBLY, not be amputated. The row is flex-wrap:nowrap with a hidden
   scrollbar (deliberate — wrapping re-opens the even-height bug), and with no ellipsis rule a chip
   like "Installation: ISOFIX, seatbelt, top tether" was simply cut at the card's padding edge,
   mid-word, with no affordance that anything was missing. The Hub card no longer renders chips at
   all (see render_card's docstring), but the SEARCH card does — its prototype has them — and this
   is the surface that showed the clip. */
.mum-compare-spec {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── INLINE PICK CARD (article body) — ONE-BAND STRIP ─────────────────────────────
   Chris, 2026-07-27: "they should be on one line rather than spread across two, or at
   least optimised for size". The card was ~200px tall in a 600px prose column.

   WHERE THE HEIGHT CAME FROM, since it is not this block: the SHARED card shell stacks
   .mum-compare-card-head above .mum-compare-actionbar with inter-row margins, and the
   "horizontal rule" people see is the actionbar's border-top, not an <hr>.

   A strict single TEXT line is arithmetically impossible here, and a naive flex-row
   PROVED it: the actions (price + Compare pill + CTA) genuinely need ~433px of the
   566px inner width, which left 115px for the thumb and name — the name then wrapped to
   one character per line and the card grew to 843px, four times WORSE than the stack it
   replaced. So the honest compaction is a one-BAND strip: identity left, actions right,
   with the name sitting ABOVE the price rather than beside it.

   CSS-ONLY BY DESIGN — display:contents flattens the existing wrappers onto one grid, so
   the cards already injected into live articles compact themselves on a bundle deploy,
   with no republishing.

   The brand overline is hidden: 623 of 666 current product names already contain the
   brand and 614 start with it, so it only repeated the name's first word. The teal
   "mum. Approved" pill STAYS — it is the #1-pick flag. */
.entry-content .mum-compare-card--pick {
    margin: 0.2rem 0 1.8rem;   /* attaches to ITS pick above, clear of the next heading */
    padding: 0.8rem 1rem;
}
.entry-content .mum-compare-card--pick:hover { transform: none; box-shadow: var(--sh-soft); }

/* Flatten head + actionbar so their children land on ONE grid. DOM untouched. */
.entry-content .mum-compare-card--pick .mum-compare-body {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas:
        "img title actions"
        "img price actions";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
}
.entry-content .mum-compare-card--pick .mum-compare-card-head,
.entry-content .mum-compare-card--pick .mum-compare-actionbar { display: contents; }
.entry-content .mum-compare-card--pick .mum-compare-img { grid-area: img; }
.entry-content .mum-compare-card--pick .mum-compare-card-title {
    grid-area: title; align-self: end; min-width: 0;
}
.entry-content .mum-compare-card--pick .mum-compare-commercial {
    grid-area: price; align-self: start; margin: 0; justify-content: flex-start;
}
.entry-content .mum-compare-card--pick .mum-compare-footrow {
    grid-area: actions; flex-wrap: nowrap; gap: 10px; margin: 0; width: auto;
}

/* 48px thumb: at 56px+ the image, not the text, sets the band height. */
.entry-content .mum-compare-card--pick .mum-compare-img,
.entry-content .mum-compare-card--pick .mum-compare-img img,
.entry-content .mum-compare-card--pick .mum-compare-img--ph {
    width: 48px; height: 48px; border-radius: 9px;
}

/* Name: clamped to 2 lines. Without this a long name is what blows the band open. */
.entry-content .mum-compare-card--pick .mum-compare-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.25;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.entry-content .mum-compare-card--pick .mum-compare-brand { display: none; }
.entry-content .mum-compare-card--pick .mum-compare-brandrow { margin: 0; }
.entry-content .mum-compare-card--pick .mum-compare-brandrow:empty { display: none; }

/* Top pick: a teal rail, reinforcing the teal Approved pill at zero row-width cost. */
.entry-content .mum-compare-card--pick.mum-compare-card--top { border-left: 3px solid var(--teal); }

@media (max-width: 560px) {
    /* Narrow column: actions drop to their own full-width row rather than squeeze. */
    .entry-content .mum-compare-card--pick .mum-compare-body {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-areas: "img title" "img price" "actions actions";
        row-gap: 6px;
    }
    .entry-content .mum-compare-card--pick .mum-compare-footrow {
        width: 100%; justify-content: space-between; margin-top: 4px;
    }
}

/* The product name on a card becomes a link once that product has its own /product/ page.
   It must read as the same heading it always was — this is a crawlable path and a convenience,
   not a call to action competing with the Check price button. Inherit colour and weight; earn
   the underline on hover only. */
.mum-compare-card-title h3 .mum-compare-namelink {
    color: inherit;
    text-decoration: none;
}
.mum-compare-card-title h3 .mum-compare-namelink:hover {
    color: var(--coral-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mum-compare-card-title h3 .mum-compare-namelink:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 2px;
    border-radius: 3px;
}


/* ===================== live_compare.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — Live buy button + in-article "Where to buy" block
   On the design tokens (tokens.css). Coral = primary, teal = trust.
   ═══════════════════════════════════════════════════════════ */

/* Primary BUY button — filled coral (the monetised primary action).
   flex:none so it never shrinks in the two-column verified block (spec §4a). */
.mum-compare-buy {
    display: inline-block; flex: none;
    font-size: 0.82rem; font-weight: 700;
    padding: 0.7rem 1.15rem; border-radius: 11px;
    color: #fff !important; text-decoration: none !important;
    background: var(--coral-deep);
    border: 1px solid var(--coral-deep); white-space: nowrap;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.mum-compare-buy:hover { filter: brightness(0.96); box-shadow: var(--sh-soft); }
.mum-compare-buy:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Sale bits shown next to a live price */
.mum-compare-was { color: var(--text-faint); text-decoration: line-through; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.mum-compare-save { color: var(--teal-text); font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.mum-compare-checked { display: block; flex: none; flex-basis: 100%; white-space: nowrap; color: var(--text-faint); font-size: 0.75rem; font-weight: 500; margin-top: 0.2rem; }

/* "Price pending" — a quiet placeholder, deliberately NOT styled like a price */
.mum-compare-pending { display: inline-block; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--text-faint); background: var(--border-soft); padding: 4px 10px; border-radius: var(--r-chip); }

/* "✓ Verified" — trust tag on a live, checked-at-retailer price (teal = the mum. Approved signal) */
.mum-compare-verified {
    display: inline-block; flex: none; white-space: nowrap;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--teal-text); background: var(--teal-bg);
    border-radius: var(--r-pill); vertical-align: middle;
}
/* Verified live-price = two-column block (spec §4a): info stacked left, Check price right.
   Never the tall stacked version (pill/price on one row, full-width button below). */
/* align-items:flex-end (not center): the block's BOTTOM is anchored a constant
   distance from the card bottom, but its height varies (1 line / cents-price wraps
   to 2 / sale wraps to 3), so a CENTERED button rode that variable height and the
   buy buttons didn't line up across cards. Bottom-aligning pins every button to the
   anchored bottom edge → buttons align regardless of how many price lines there are. */
.mum-compare-verified-block { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; }
.mum-compare-verified-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mum-compare-verified-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mum-compare-at { font-size: 0.78rem; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
/* "approx. RRP $X" — indicative recommended price; solid but quieter than a verified price, NOT italic like pending */
.mum-compare-rrp { font-size: 1rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }

/* In-article "Where to buy these picks" block wrapper */
.mum-live-compare {
    margin: 2.75rem 0 1.5rem;
    padding-top: 1.6rem;
    border-top: 2px solid var(--border);
}
.mum-live-compare-h { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: 0 0 0.3rem; }
.mum-live-compare-note { color: var(--text-faint); font-size: 0.92rem; line-height: 1.55; margin: 0 0 1.25rem; }

/* "Show all N picks" — cap the WTB list at WTB_VISIBLE cards; the rest collapse
   into a native <details> (no JS). Every product stays in the DOM (never-hide);
   the toggle only expands them in place. */
.mum-wtb-more { margin-top: 1rem; }
.mum-wtb-more-btn {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    width: fit-content; margin: 0 auto;
    padding: .7rem 1.4rem;
    font-size: .9rem; font-weight: 700;
    color: var(--coral-deep); background: var(--surface);
    border: 1.5px solid var(--coral); border-radius: var(--r-pill);
    cursor: pointer; list-style: none; user-select: none;
    transition: background .15s ease, box-shadow .15s ease;
}
.mum-wtb-more-btn::-webkit-details-marker { display: none; }   /* Safari triangle */
.mum-wtb-more-btn:hover { background: var(--coral-bg); box-shadow: var(--sh-soft); }
.mum-wtb-more-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.mum-wtb-more-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.mum-wtb-more-hide { display: none; }
.mum-wtb-more[open] .mum-wtb-more-show { display: none; }
.mum-wtb-more[open] .mum-wtb-more-hide { display: inline; }


/* ===================== article_cta.css ===================== */
/* ═══ mum.com.au — in-article "Compare all" CTA block (on the design tokens) ═══
   Replace ALL previous .mum-article-cta rules with this block */

.mum-article-cta {
    position: relative;
    display: block;
    float: none;
    margin: 2.5rem auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1.75rem 2rem 1.9rem;
    max-width: 560px;
    text-align: center;
    background: var(--coral-bg-2);
    border: 1px solid var(--coral-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-soft);
}

/* Brand eyebrow — small coral tag above the text */
.mum-article-cta::before {
    content: "mum. comparison";
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.22rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--coral);
    background: var(--surface);
    border: 1px solid var(--coral-border);
    border-radius: var(--r-pill);
}

.mum-article-cta-text {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.mum-article-cta-btn {
    display: inline-block;
    min-height: 44px;
    padding: 0.8rem 1.7rem;
    background: var(--coral-deep);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.97rem;
    line-height: 1.3;
    text-decoration: none !important;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-soft);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.mum-article-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-card);
    filter: brightness(0.97);
    color: #fff !important;
}

@media (max-width: 600px) {
    .mum-article-cta { padding: 1.4rem 1.1rem 1.5rem; margin: 2rem auto !important; }
    .mum-article-cta-btn { display: block; width: 100%; }
}


/* ===================== article.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — Article reading template (Sprint 5, on the design tokens)
   Base reading styles scoped to single posts (.single-post .entry-content)
   so they don't touch the homepage/category pages. The mum-* article
   components are article-only by nature, so left unscoped.
   ═══════════════════════════════════════════════════════════ */
.single-post .entry-content { font-family: var(--font-body); color: var(--ink); font-size: 1.06rem; line-height: 1.75; }
.single-post .entry-content h2 { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin: 2.2rem 0 0.8rem; scroll-margin-top: calc(var(--nav-h) + 20px); }
.single-post .entry-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink); margin: 1.6rem 0 0.6rem; }
.single-post .entry-content p { margin: 0 0 1.1rem; }
.single-post .entry-content a { color: var(--coral-text); text-decoration: underline; text-decoration-color: var(--coral-border); }
.single-post .entry-content a:hover { text-decoration-color: var(--coral); }
.single-post .entry-content ul, .single-post .entry-content ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.single-post .entry-content li { margin: 0.4rem 0; }
.single-post .entry-content blockquote { border-left: 3px solid var(--coral); background: var(--coral-bg-2); margin: 1.5rem 0; padding: 14px 18px; border-radius: 0 12px 12px 0; color: var(--text-muted); }

/* ── Verdict callout (top of article) ── */
.mum-verdict { background: var(--coral-bg-2); border: 1px solid var(--coral-border); border-radius: var(--r-card); padding: 16px 20px; margin: 1.5rem 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.mum-verdict strong { color: var(--coral-text); }

/* ── "What to look for" checklist ── */
.mum-checklist { list-style: none !important; padding-left: 0 !important; margin: 1.3rem 0 !important; }
.mum-checklist li { position: relative; padding-left: 30px; margin: 0.6rem 0; }
/* Tick drawn in CSS, not typed as a character — see compare_tray.css. This is the teal circle
   bullet; when U+2713 fell through the webfont it rendered as a garbled mark inside the circle. */
.mum-checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--teal-bg); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mum-checklist li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mum-checklist li { position: relative; }

/* ── FAQ accordion (native <details>, no JS) ── */
.mum-faq { border: 1px solid var(--border); border-radius: var(--r-card); margin: 0.6rem 0; background: var(--surface); overflow: hidden; }
.mum-faq summary { cursor: pointer; list-style: none; padding: 14px 46px 14px 18px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); position: relative; }
.mum-faq summary::-webkit-details-marker { display: none; }
.mum-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--coral); transition: transform 0.18s ease; }
.mum-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mum-faq[open] summary { color: var(--coral-text); }
.mum-faq p { padding: 0 18px 16px; margin: 0; color: var(--text-muted); line-height: 1.65; }

/* ── In-article comparison table ── */
.mum-cmp-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.92rem; }
.mum-cmp-table th { background: var(--ink); color: #fff; font-family: var(--font-body); font-weight: 700; text-align: left; padding: 11px 13px; font-size: 0.82rem; }
.mum-cmp-table td { padding: 11px 13px; border-bottom: 1px solid var(--border-soft); color: var(--ink); }
.mum-cmp-table tr:nth-child(even) td { background: var(--canvas); }
/* inline rank badges inside the Product cell */
.mum-rowbadge { display: inline-block; margin-left: 6px; font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); vertical-align: middle; white-space: nowrap; }
.mum-rb-top { background: var(--coral-deep); color: #fff; }
.mum-rb-budget { background: var(--gold); color: #6f5410; }
.mum-rb-premium { background: var(--teal); color: #fff; }

/* the injected "mum. Approved" badge image */
.single-post .entry-content img[src*="approved"], .single-post .entry-content img[src*="badge"] { max-width: 150px; height: auto; }

/* ═══════════════════════════════════════════════════════════
   IN-CONTENT REVIEW COMPONENTS (Review Article design brief)
   Quick verdict · Pick cards · Top-3 grid · Bottom line.
   Emitted by agent.py write_article; styled on the design tokens.
   Scoped under .single-post .entry-content so they only fire on posts;
   commercial actions are LINKS (no fabricated price/retailer).
   ═══════════════════════════════════════════════════════════ */

/* ── A) Quick verdict card ── */
.single-post .entry-content .mum-qv { background: var(--surface); border: 1px solid var(--coral-border); border-radius: var(--r-card-lg); padding: 24px; margin: 1.6rem 0 2rem; box-shadow: 0 10px 30px rgba(255, 106, 77, 0.08); }
.mum-qv-head { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.mum-qv-tick { color: var(--teal); }
.mum-qv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.mum-qv-tile { border-radius: var(--r-input); padding: 15px; }
.mum-qv-overall { background: var(--coral-bg-2); }
.mum-qv-budget { background: #f4ece1; }
.mum-qv-premium { background: var(--teal-bg); }
.mum-qv-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.mum-qv-overall .mum-qv-eyebrow { color: var(--coral-text); }
.mum-qv-budget .mum-qv-eyebrow { color: #9a7b2e; }
.mum-qv-premium .mum-qv-eyebrow { color: var(--teal-text); }
.mum-qv-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.15; color: var(--ink); }
.single-post .entry-content a.mum-qv-price { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--coral-text); text-decoration: none; }
.single-post .entry-content a.mum-qv-price:hover { text-decoration: underline; }

/* ── C) Pick cards ── */
.single-post .entry-content .mum-pick { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-lg); padding: 20px; margin: 0 0 18px; }
.mum-pick-budgetwin { border: 2px solid var(--gold); position: relative; }
.mum-pick-ribbon { position: absolute; top: -12px; left: 20px; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--gold); padding: 4px 11px; border-radius: var(--r-pill); }
.mum-pick-budgetwin .mum-pick-head { margin-top: 6px; }
.mum-pick-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.mum-pick-rank { flex: none; width: 34px; height: 34px; border-radius: var(--r-input); background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.mum-pick-headmain { flex: 1; min-width: 0; }
.mum-pick-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.15; color: var(--ink); }
.mum-pick-bestfor { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--teal-text); background: var(--teal-bg); padding: 3px 10px; border-radius: var(--r-chip); }
.mum-pick-body { display: flex; gap: 16px; }
.mum-pick-img { flex: none; width: 112px; height: 112px; border-radius: var(--r-input); background: linear-gradient(135deg, #fff3ee, var(--coral-border)); display: flex; align-items: center; justify-content: center; font-size: 46px; }
.mum-pick-copy { flex: 1; min-width: 0; }
.single-post .entry-content .mum-pick-copy p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.mum-pick-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.mum-pro { font-size: 13.5px; color: var(--ink); }
.mum-con { font-size: 13.5px; color: var(--text-soft); }
.mum-pro-i { color: var(--teal); font-weight: 800; margin-right: 4px; }
.mum-con-i { color: #d98a72; font-weight: 800; margin-right: 4px; }
.mum-pick-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.mum-pick-meta { font-size: 13px; color: var(--teal); font-weight: 700; }
.mum-pick-foot .mum-cmp-toggle { margin-left: auto; }
.single-post .entry-content a.mum-pick-cta { flex: none; padding: 11px 20px; border-radius: var(--r-input); background: var(--coral-deep); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.single-post .entry-content a.mum-pick-cta:hover { background: var(--coral-soft); text-decoration: none; }

/* ── E) Top-3 grid ── */
/* minmax(0,1fr), NOT 1fr. `1fr` means minmax(AUTO,1fr): a track cannot shrink below its
   content's min-content width, so one card with a nowrap "Buy at Baby Bunting →" button
   (min-content 177px, wrapper 213px) takes 254px of a 600px column while its siblings get
   191px, and the grid bursts 70px into the sticky sidebar. Measured live on
   /baby-carrier-guide/ 2026-08-01: 23 overflowing elements, gone at 0 with this + the
   buy-button wrap below. NB the primary cause of the /prams-guide/ break was a NESTED
   where-to-buy block (fixed in article_compare.insert_block); this is the second, real,
   independent cause — a clean article with no verified buy button never shows it. */
.single-post .entry-content .mum-top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 1.2rem 0 2rem; }
.mum-top3-card { border-radius: var(--r-card); padding: 20px; text-align: center; }
.mum-top3-overall { background: linear-gradient(180deg, var(--coral-bg-2), #fff); border: 1px solid var(--coral-border); }
.mum-top3-budget { background: linear-gradient(180deg, #fdf6e6, #fff); border: 1px solid #f3e2b8; }
.mum-top3-premium { background: linear-gradient(180deg, #e9f6f2, #fff); border: 1px solid #bfe5db; }
.mum-top3-emoji { font-size: 34px; margin-bottom: 8px; }
.mum-top3-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.mum-top3-overall .mum-top3-eyebrow { color: var(--coral-text); }
.mum-top3-budget .mum-top3-eyebrow { color: #9a7b2e; }
.mum-top3-premium .mum-top3-eyebrow { color: var(--teal-text); }
.mum-top3-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); margin: 6px 0 4px; }
.single-post .entry-content a.mum-top3-price { font-size: 13px; font-weight: 700; color: var(--coral-text); text-decoration: none; }
.single-post .entry-content a.mum-top3-price:hover { text-decoration: underline; }
.single-post .entry-content .mum-top3-why { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 10px 0 0; }

/* qv/top3 tiles reuse category_page_agent.price_block (same in-article price design
   as the "Where to buy" cards, so the honesty cascade never drifts). That block is
   built for a WIDE card row, so inside these ~1/3-width tiles it must stack: the
   pill/price/retailer sits over the Buy button instead of beside it. */
.single-post .entry-content .mum-qv-pricewrap,
.single-post .entry-content .mum-top3-pricewrap { margin-top: 10px; }
.single-post .entry-content .mum-qv-tile .mum-compare-verified-block,
.single-post .entry-content .mum-top3-card .mum-compare-verified-block { flex-direction: column; align-items: stretch; gap: 8px; }
.single-post .entry-content .mum-top3-card .mum-compare-verified-info { align-items: center; }
.single-post .entry-content .mum-qv-tile .mum-compare-buy,
/* The button must be allowed to WRAP in these narrow tiles. nowrap is right on a wide card
   but here it is what sets the min-content floor that broke the grid above; a long
   retailer name ("Buy at Baby Bunting →") cannot fit a ~189px column on one line. */
.single-post .entry-content .mum-top3-card .mum-compare-buy,
.single-post .entry-content .mum-qv-tile .mum-compare-buy { white-space: normal; }
.single-post .entry-content .mum-top3-card .mum-compare-buy { display: block; text-align: center; }

/* The price row (.mum-compare-from) is a flex row built for the WIDE hub card:
   "from | $109.99 | 3 retailers" with an 8px gap. Measured live, a qv tile column is 149px, and
   those three items need ~172px — so flex shrank each item and the text broke INSIDE the tokens:
   "fro/m" on two lines and "$109.9/9", i.e. a price split mid-number, which reads as a different
   price. (Chris, 2026-07-27.)
   Fix the wrapping, not the numbers: let the ROW wrap between items, and forbid wrapping WITHIN
   one. It falls to "from $109.99" / "3 retailers" instead of shredding the price. min-width:0 is
   required as well — a flex item's default min-width:auto lets it be squeezed below its content
   and is what permitted the mid-token break in the first place. */
.single-post .entry-content .mum-qv-pricewrap .mum-compare-from,
.single-post .entry-content .mum-top3-pricewrap .mum-compare-from {
    flex-wrap: wrap;
    gap: 2px 6px;
    row-gap: 2px;
}
.single-post .entry-content .mum-qv-pricewrap .mum-compare-from > *,
.single-post .entry-content .mum-top3-pricewrap .mum-compare-from > * {
    white-space: nowrap;
    min-width: 0;
    flex: 0 0 auto;
}
.single-post .entry-content .mum-qv-pricewrap .mum-compare-price,
.single-post .entry-content .mum-top3-pricewrap .mum-compare-price { font-size: 18px; }
/* top-3 tiles are centre-aligned, so the wrapped second line must centre too. */
.single-post .entry-content .mum-top3-pricewrap .mum-compare-from { justify-content: center; }
/* "approx. RRP $180" is a single long token pair on the no-offers tiles — keep it on one line
   rather than letting "approx." orphan. */
.single-post .entry-content .mum-qv-pricewrap .mum-compare-rrp,
.single-post .entry-content .mum-top3-pricewrap .mum-compare-rrp { white-space: nowrap; }

/* ── F) Bottom line card ── */
.single-post .entry-content .mum-bottomline { background: var(--ink); color: var(--on-dark); border-radius: var(--r-card-lg); padding: 28px; margin: 2rem 0 1.5rem; }
.mum-bottomline-h { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin-bottom: 10px; color: var(--on-dark); }
.single-post .entry-content .mum-bottomline p { margin: 0; font-size: 16px; line-height: 1.65; color: #d8d2c7; }
.single-post .entry-content .mum-bottomline b { color: var(--on-dark); }

/* ── Responsive: stack the grids on narrow screens ── */
@media (max-width: 700px) {
    .single-post .entry-content .mum-qv-grid,
    .single-post .entry-content .mum-top3 { grid-template-columns: 1fr; }
    .mum-pick-body { flex-direction: column; }
    .mum-pick-img { width: 100%; height: 130px; }
    .mum-pick-pc { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   REVIEW ARTICLE TEMPLATE CHROME — built by the article_template Code Snippet
   (hero · hero image · 2-col body + sticky TOC · keep-reading · newsletter · progress)
   ═══════════════════════════════════════════════════════════ */
/* Hide Kadence's native title/header (the hero renders the title) + neutralise the
   single-post content container so the hero band + 2-col layout own the width. */
/* This single-post template ships a Kadence sidebar + featured-image thumbnail +
   title; our hero/aside replace all three — hide them and collapse the
   content/sidebar grid so the article goes full-width. */
.single-post .entry-header,
.single-post #secondary, .single-post .primary-sidebar, .single-post .widget-area,
.single-post .post-thumbnail, .single-post .article-post-thumbnail, .single-post .kadence-thumbnail { display: none !important; }
.single-post .content-container, .single-post .content-container.site-container { display: block !important; grid-template-columns: 1fr !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.single-post .content-area, .single-post #primary, .single-post .site-main, .single-post .content-wrap, .single-post .entry, .single-post .entry-content-wrap, .single-post .entry-content { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Kadence's built-in "Similar Posts" (.entry-related) duplicates our branded
   .mum-keep "Keep reading" grid and renders unstyled + full-bleed (it reuses
   .content-container, which the override above strips of padding). Hide it —
   .mum-keep is the redesign's related module. */
.single-post .entry-related { display: none !important; }
.mum-article { font-family: var(--font-body); color: var(--ink); }
.mum-article * { box-sizing: border-box; }

/* Reading-progress bar */
.mum-art-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--coral); z-index: 50; transition: width 0.1s linear; }

/* Hero */
.mum-art-hero { background: var(--hero-grad); padding: 40px var(--pad-side) 30px; }
.mum-art-hero-in { max-width: 980px; margin: 0 auto; }
.mum-art-crumb { font-size: 13px; color: var(--text-faint); margin-bottom: 18px; }
.mum-art-crumb a { color: var(--text-faint); text-decoration: none; }
.mum-art-crumb a:last-of-type { color: var(--teal); }
.mum-art-crumb span { margin: 0 4px; }
.mum-art-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mum-art-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: var(--r-pill); }
.mum-art-pill.appr { background: var(--teal); color: #fff; }
.mum-art-pill.gold { background: var(--gold); color: var(--ink); }
.mum-art-title { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 22px; max-width: 820px; text-transform: none; }
.mum-art-byline { display: flex; align-items: center; gap: 12px; }
.mum-art-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--coral); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mum-art-by { display: flex; flex-direction: column; }
.mum-art-author { font-size: 15px; font-weight: 700; color: var(--ink); }
.mum-art-metaline { font-size: 13px; color: var(--text-faint); }

/* Hero image */
.mum-art-hero-imgwrap { max-width: 980px; margin: 24px auto 0; padding: 0 var(--pad-side); }
.mum-art-hero-img { height: 380px; border-radius: var(--r-card-lg); background-size: cover; background-position: center; background-color: var(--coral-bg); box-shadow: 0 16px 40px rgba(255, 106, 77, 0.18); }

/* 2-col body */
.mum-art-layout { max-width: 980px; margin: 40px auto 0; padding: 0 var(--pad-side); display: grid; grid-template-columns: 1fr 248px; gap: 52px; align-items: start; }
.mum-art-body { min-width: 0; font-size: 18px; line-height: 1.72; }
.mum-art-aside { position: sticky; top: calc(var(--nav-h) + 25px); display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - var(--nav-h) - 50px); }
/* #1-pick sits ABOVE the TOC in the rail so its Buy button is always on-screen —
   the ~11-link TOC can be tall enough to push the pick below a laptop fold. Applies
   on both breakpoints (harmless on mobile: the TOC collapses to one line there). */
.mum-art-aside .mum-art-pick1 { order: -1; flex: 0 0 auto; }
/* Only the TOC scrolls inside the height-capped rail — so the pick's Buy button AND
   the affiliate disclosure below it stay visible on short laptops, instead of the
   whole rail scrolling and burying the disclosure behind a nested scrollbar. */
.mum-art-aside .mum-art-disc { flex: 0 0 auto; }
.mum-art-aside .mum-toc { flex: 0 1 auto; min-height: 0; overflow-y: auto; }

/* TOC */
.mum-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; }
.mum-toc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
/* The TOC is a native <details>; style its <summary> label and hide the marker.
   Desktop: never collapsible (pointer-events:none). Mobile: tappable, with a
   chevron that rotates open/closed (the footer JS collapses it under 900px). */
.mum-toc > summary { list-style: none; }
.mum-toc > summary::-webkit-details-marker { display: none; }
@media (min-width: 901px) { .mum-toc > summary { pointer-events: none; } }
@media (max-width: 900px) {
    .mum-toc > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
    .mum-toc[open] > summary { margin-bottom: 12px; }
    .mum-toc > summary::after { content: "\203A"; color: var(--coral); font-size: 18px; transform: rotate(90deg); transition: transform .18s ease; }
    .mum-toc[open] > summary::after { transform: rotate(-90deg); }
}
/* .single-post scope so these beat the base reading-link colour (.single-post .entry-content a) */
.single-post .entry-content .mum-toc-link { display: block; font-size: 14px; color: var(--text-muted); text-decoration: none; padding: 6px 0 6px 14px; border-left: 2px solid var(--border); line-height: 1.35; }
.single-post .entry-content .mum-toc-link:hover { color: var(--ink); text-decoration: none; }
.single-post .entry-content .mum-toc-link.active { color: var(--coral-text); border-left-color: var(--coral); font-weight: 600; }
.single-post .entry-content .mum-art-disc a { color: var(--teal-text); text-decoration: none; }
.single-post .entry-content .mum-keep-card, .single-post .entry-content .mum-keep-card:hover { text-decoration: none; }

/* Affiliate disclosure */
.mum-art-disc { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.mum-art-disc a { color: var(--teal-text); }

/* Keep reading */
.mum-keep { border-top: 1px solid var(--border); margin-top: 48px; }
.mum-keep-in { max-width: 980px; margin: 0 auto; padding: 40px var(--pad-side) 0; }
.mum-keep-in h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--ink); margin: 0 0 20px; text-transform: none; }
.mum-keep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mum-keep-card { text-decoration: none; display: block; }
.mum-keep-img { display: block; height: 160px; border-radius: var(--r-tile); background: var(--coral-bg); background-size: cover; background-position: center; margin-bottom: 12px; }
.mum-keep-cat { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.mum-keep-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.25; }

/* Newsletter band */
.mum-art-news { background: var(--coral); margin-top: 56px; padding: 48px var(--pad-side); }
.mum-art-news-in { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.mum-art-news-copy h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: #fff; margin: 0 0 6px; text-transform: none; }
.mum-art-news-copy p { color: #ffe4dc; font-size: 15px; margin: 0; }
.mum-art-news-form { display: flex; gap: 8px; flex: none; }
.mum-art-news-form input { border: none; border-radius: 11px; padding: 13px 16px; font-size: 16px; font-family: var(--font-body); width: 250px; max-width: 100%; }
.mum-art-news-form button { background: var(--ink); color: #fff; border: none; font-weight: 700; padding: 13px 22px; border-radius: 11px; cursor: pointer; }

@media (max-width: 900px) {
    .mum-art-layout { grid-template-columns: 1fr; gap: 0; }
    /* order:-1 pulls the whole aside (pick + TOC + disclosure) ABOVE the body so it
       lands near the top, not after the entire article. Reset the desktop height cap
       so the static mobile aside never grows a nested scrollbar. */
    .mum-art-aside { position: static; order: -1; margin: 20px 0 28px; max-height: none; overflow: visible; }
    .mum-art-title { font-size: 32px; }
    .mum-art-hero-img { height: 220px; }
    .mum-keep-grid { grid-template-columns: 1fr; }
    .mum-art-news-in { flex-direction: column; align-items: flex-start; }
    .mum-art-news-form input { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   LEGAL / COMPANY PAGES — Privacy, Terms, Affiliate disclosure, How we choose
   Created by create_legal_pages.py; .mum-legal readable column on the tokens.
   ═══════════════════════════════════════════════════════════ */
/* full-width: hide the page sidebar + duplicate title, then centre a readable column */
.content-container:has(.mum-legal), .content-container.site-container:has(.mum-legal) { display: block !important; grid-template-columns: 1fr !important; max-width: none !important; }
.content-container:has(.mum-legal) #secondary, .content-container:has(.mum-legal) .primary-sidebar, .content-container:has(.mum-legal) .widget-area { display: none !important; }
.entry:has(.mum-legal) .entry-header, .content-area:has(.mum-legal) .entry-header, .site-main:has(.mum-legal) .entry-header { display: none !important; }
.site-main:has(.mum-legal), .content-area:has(.mum-legal), .entry-content:has(.mum-legal) { width: 100% !important; max-width: none !important; }

.mum-legal { max-width: 800px; margin: 0 auto; padding: 16px var(--pad-side) 64px; font-family: var(--font-body); color: var(--ink); }
.mum-legal-head { padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.mum-legal-head h1 { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 10px; line-height: 1.05; text-transform: none; }
.mum-legal-sub { color: var(--text-faint); font-size: 14px; line-height: 1.5; }
.mum-legal h2 { font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -0.01em; color: var(--ink); margin: 2.2rem 0 0.7rem; text-transform: none; }
.mum-legal h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin: 1.5rem 0 0.5rem; }
.mum-legal p { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0 0 1rem; }
.mum-legal ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.mum-legal li { font-size: 16px; line-height: 1.65; color: var(--text-muted); margin: 0.45rem 0; }
.mum-legal a { color: var(--coral-text); text-decoration: underline; text-decoration-color: var(--coral-border); }
.mum-legal a:hover { text-decoration-color: var(--coral); }
.mum-legal strong { color: var(--ink); }
.mum-legal-callout { background: var(--coral-bg-2); border: 1px solid var(--coral-border); border-radius: var(--r-card); padding: 18px 22px; margin: 0 0 1.8rem; }
.mum-legal-callout p { margin: 0; color: var(--ink); font-size: 16px; }

/* ═══════════════════════════════════════════════════════════
   QA pass: existing-article fallbacks + #1-pick sidebar card
   ═══════════════════════════════════════════════════════════ */
/* Hide the WordPress comments / "leave a reply" block on articles */
.single-post #comments, .single-post .comments-area, .single-post #respond, .single-post .comment-respond, .single-post .entry-comments { display: none !important; }

/* Style ANY table in an article (existing articles ship unclassed <table>s) */
.single-post .entry-content table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.95rem; border-radius: 12px; overflow: hidden; box-shadow: var(--sh-soft); }
.single-post .entry-content table th { background: var(--ink); color: #fff; font-family: var(--font-body); font-weight: 700; text-align: left; padding: 12px 14px; font-size: 0.85rem; }
.single-post .entry-content table td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--ink); vertical-align: top; }
.single-post .entry-content table tr:nth-child(even) td { background: var(--canvas); }
/* tables that lack a <thead>: treat the first row as the header */
.single-post .entry-content table:not(:has(thead)) tr:first-child td { background: var(--ink); color: #fff; font-weight: 700; }
.single-post .entry-content table:not(:has(thead)) tr:first-child:nth-child(even) td { background: var(--ink); }

/* ── §2.14a — article content tables scroll horizontally on mobile (were cut off) ──
   The table becomes its own scroll container (display:block + overflow-x:auto); cells
   nowrap so columns keep natural width and the row scrolls instead of squishing. The
   first column freezes (position:sticky; left:0) with ZEBRA-AWARE backgrounds so the
   pinned label never mismatches the row. Scoped ≤768; desktop keeps the boxed table. */
@media (max-width: 768px) {
    .single-post .entry-content table {
        /* width:max-content (was 100%): a display:block table with width:100% keeps its
           box at container width while the columns only content-size, leaving an empty
           gap INSIDE the table border (looked like a phantom column). max-content shrinks
           the box to its columns; max-width:100% + overflow-x still scrolls a wide table. */
        display: block; width: max-content; max-width: 100%; margin: 1.4rem 0;
        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        border-radius: 0; box-shadow: none;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .single-post .entry-content table::-webkit-scrollbar { display: none; }
    /* Let cell text WRAP (was blanket nowrap): nowrap turned 2-col prose tables into
       a single ~500px line forcing long horizontal scroll. Column min-widths keep
       genuinely wide (4+col) tables overflowing into the scroll container above,
       while 2-3-col prose tables now fit the viewport and wrap. */
    .single-post .entry-content table th,
    .single-post .entry-content table td { white-space: normal; min-width: 7.5em; vertical-align: top; }
    .single-post .entry-content table th:first-child,
    .single-post .entry-content table td:first-child { min-width: 8.5em; max-width: 46vw; }
    .single-post .entry-content table td:first-child {
        position: sticky; left: 0; z-index: 1;
        background: var(--surface); border-right: 1px solid var(--border);
    }
    .single-post .entry-content table tr:nth-child(even) td:first-child { background: var(--canvas); }
    .single-post .entry-content table th:first-child {
        position: sticky; left: 0; z-index: 2;
        background: var(--ink); border-right: 1px solid var(--ink);
    }
    .single-post .entry-content table:not(:has(thead)) tr:first-child td:first-child { background: var(--ink); }
}

/* #1-pick sidebar card — rendered by the article snippet from the <!--mum-pick1--> marker */
.mum-art-pick1 { background: var(--ink); color: var(--on-dark); border-radius: var(--r-card); padding: 18px 18px 20px; }
.mum-art-pick1-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: var(--r-pill); margin-bottom: 12px; }
.mum-art-pick1-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.2; margin-bottom: 4px; }
.mum-art-pick1-best { font-size: 12px; color: var(--on-dark-muted); margin-bottom: 12px; }
.mum-art-pick1-price { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #fff; margin-bottom: 12px; }
.mum-art-pick1-price span { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--on-dark-muted); }
.single-post .entry-content a.mum-art-pick1-btn { display: block; text-align: center; background: var(--coral-deep); color: #fff; font-weight: 700; font-size: 14px; padding: 11px; border-radius: 11px; text-decoration: none; }

/* ── PICK MEDIA (quick-verdict tiles + top-3 cards) ────────────────────────────────
   Replaces the retired emoji marks (🏆 💰 ✨) with the product's own photograph.
   Chris, 2026-07-26: "it should show product images instead of icons and emojies".
   Only 56% of resolvable picks have an image_url, so the placeholder is not an edge
   case — it is what the other 44% render, and it must occupy the SAME footprint or
   the tiles in a row stop lining up. Same gradient token the hub cards use. */
.single-post .entry-content .mum-pick-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0 0 10px;
    border-radius: 12px;
    overflow: hidden;
    /* WHITE, not the cream surface token. Product photography is a mix of transparent PNGs and
       JPEGs shot on white, so on a coloured tile (the quick-verdict tiles are pink / cream / mint)
       the white-background ones showed a hard white rectangle floating on the tint while the
       transparent ones blended — visibly inconsistent, and the clash Chris flagged. Putting every
       image on the SAME white plate makes it read as a deliberate photo card rather than an
       artefact, and it is what the retailer feeds' own shots expect. */
    background: #fff;
    padding: 8px;
    box-shadow: inset 0 0 0 1px rgba(31, 36, 33, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-post .entry-content .mum-pick-img img {
    width: 100%;
    height: 100%;
    /* CONTAIN, not cover: these are cut-out product shots on white. Cropping a pram to
       fill a 4:3 box amputates the handle, which is exactly the part a parent looks at. */
    object-fit: contain;
    display: block;
}
/* The placeholder keeps the tint (there is no photo to isolate), and drops the white plate. */
.single-post .entry-content .mum-pick-img--ph,
.single-post .entry-content .mum-pick-img.mum-compare-img--ph {
    background: linear-gradient(135deg, var(--coral-tint, #fff0ea), var(--surface-2, #fdf7f0));
    padding: 0;
    box-shadow: none;
}
/* Same treatment on the inline pick card's thumb, for the same reason. */
.single-post .entry-content .mum-compare-card--pick .mum-compare-img {
    background: #fff;
    padding: 5px;
    box-shadow: inset 0 0 0 1px rgba(31, 36, 33, 0.05);
    border-radius: 10px;
}
.single-post .entry-content .mum-compare-card--pick .mum-compare-img--ph {
    background: linear-gradient(135deg, var(--coral-tint, #fff0ea), var(--surface-2, #fdf7f0));
    padding: 0;
    box-shadow: none;
}

/* TILE CHECK-PRICE BUTTON (items 2 + 4, 2026-07-26).
   The tile CTA used to be an <a> pointing at the category hub, so "Check price" on a specific
   product dumped the reader on a list of everything (126 links did this). It is now a <button>
   that opens the same Check-price popup as the hub cards, and it only renders when the product
   actually has offers to compare. Styled to match a.mum-qv-price so the change is invisible
   except in where it takes you. */
.single-post .entry-content a.mum-tile-checkprice,
.single-post .entry-content button.mum-qv-price,
.single-post .entry-content button.mum-top3-price {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--coral-text);
    text-decoration: none;
    cursor: pointer;
}
.single-post .entry-content a.mum-tile-checkprice:hover,
.single-post .entry-content button.mum-qv-price:hover,
.single-post .entry-content button.mum-top3-price:hover { text-decoration: underline; }
.single-post .entry-content button.mum-qv-price:focus-visible,
.single-post .entry-content button.mum-top3-price:focus-visible {
    outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px;
}
/* The tile is now clickable as a whole (check_price.js resolves any [data-product] ancestor),
   so say so on hover — otherwise the affordance is invisible. */
.single-post .entry-content .mum-qv-tile[data-product],
.single-post .entry-content .mum-top3-card[data-product] { cursor: pointer; }

/* ── CTA INSIDE AN ARTICLE: beat the prose link styling ───────────────────────────────
   `.single-post .entry-content a` sets coral text + an underline (article.css:11), and at
   specificity (0,3,1) it beats `.mum-compare-cta--price` (0,1,0). The result on the pram
   cards was coral-on-coral text with the prose underline struck through it — the button
   read as EMPTY. The hub never hit this because it is not inside .entry-content.
   Scoped to the same depth so it wins without !important. */
.single-post .entry-content a.mum-compare-cta--price,
.single-post .entry-content a.mum-tile-checkprice.mum-compare-cta--price {
    color: #fff;
    background: var(--coral-deep);
    text-decoration: none;
    border: 0;
}
.single-post .entry-content a.mum-compare-cta--price:hover {
    color: #fff;
    background: var(--coral);
    text-decoration: none;
}
.single-post .entry-content a.mum-compare-cta--price:focus-visible {
    outline: 2px solid var(--coral); outline-offset: 3px;
}


/* ===================== best_of.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — BEST OF 2026 awards page (redesign, on the design tokens)
   Page CONTENT only (the global nav + dark footer come from the Kadence
   header/footer element). Every rule is scoped under .mum-bestof so the
   page styles never leak to the rest of the site.

   The page mixes full-bleed bands (dark hero, teal methodology, coral
   newsletter) with a cream body. Like the homepage, the Kadence content
   container is neutralised via :has(.mum-bestof) so the bands reach the
   page edges — set the WP page template to FULL WIDTH.
   ═══════════════════════════════════════════════════════════ */

/* Let the full-bleed bands reach the edges (same pattern as homepage.css). */
.content-container:has(.mum-bestof), .site-main:has(.mum-bestof),
.content-wrap:has(.mum-bestof), .entry:has(.mum-bestof),
.entry-content-wrap:has(.mum-bestof), .entry-content:has(.mum-bestof),
.single-content:has(.mum-bestof) {
    max-width: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
}

.mum-bestof { font-family: var(--font-body); color: var(--ink); background: var(--canvas); }
.mum-bestof * { box-sizing: border-box; }
/* Render headings as authored (the awards copy is sentence case). */
.mum-bestof h1, .mum-bestof h2, .mum-bestof h3 { text-transform: none !important; margin: 0; }

.mum-bestof .mum-bo-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-side); }
.mum-bestof .mum-bo-sec { padding: 56px 0 16px; }
.mum-bestof .mum-bo-h2 {
    font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2);
    letter-spacing: -0.02em; color: var(--ink); line-height: 1.1;
}

/* ───────────────────────── DARK HERO ───────────────────────── */
.mum-bestof .mum-bo-hero {
    position: relative; overflow: hidden;
    background: var(--ink); color: var(--on-dark);
    padding: 72px var(--pad-side) 80px;
}
.mum-bestof .mum-bo-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.mum-bestof .mum-bo-watermark {
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-display); font-weight: 800; font-size: 420px; line-height: 1;
    color: rgba(255, 206, 58, 0.06); letter-spacing: -0.04em;
    white-space: nowrap;   /* keep "2026" on ONE line — the 420px glyphs are wider than the hero, which clips overflow */
}
.mum-bestof .mum-bo-glow {
    position: absolute; top: -60px; right: -40px; width: 260px; height: 260px;
    border-radius: 50%; background: var(--gold); opacity: 0.10; filter: blur(10px);
}
.mum-bestof .mum-bo-hero-inner {
    position: relative; max-width: var(--container);
    margin: 0 auto; text-align: center;
}
.mum-bestof .mum-bo-seal {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; width: 96px; height: 96px; border-radius: 50%;
    border: 2px solid var(--gold); color: var(--gold); margin-bottom: 26px;
}
.mum-bestof .mum-bo-seal-star { font-size: 24px; line-height: 1; }
.mum-bestof .mum-bo-seal-appr { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.mum-bestof .mum-bo-seal-year { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--on-dark); }
.mum-bestof .mum-bo-eyebrow {
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
.mum-bestof .mum-bo-h1 {
    font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1.02;
    letter-spacing: -0.03em; margin: 0 auto 20px; max-width: 900px; text-wrap: balance;
}
.mum-bestof .mum-bo-lede {
    font-size: 19px; line-height: 1.5; color: var(--on-dark-muted);
    margin: 0 auto 36px; max-width: 600px;
}
.mum-bestof .mum-bo-stats {
    display: inline-flex; align-items: stretch; border: 1px solid rgba(255, 250, 244, 0.16);
    border-radius: 14px; overflow: hidden;
}
.mum-bestof .mum-bo-stat { padding: 16px 26px; border-right: 1px solid rgba(255, 250, 244, 0.16); }
.mum-bestof .mum-bo-stat:last-child { border-right: none; }
.mum-bestof .mum-bo-stat-n { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--gold); }
.mum-bestof .mum-bo-stat-l { font-size: 12.5px; color: var(--on-dark-muted); letter-spacing: 0.02em; }

/* shared ribbon + chips (used by feature + winner cards) */
.mum-bestof .mum-bo-ribbon {
    position: absolute; top: 13px; left: 13px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: var(--r-pill);
    background: var(--gold); color: var(--ink);
    font-weight: 800; font-size: 11.5px; letter-spacing: 0.02em;
}
.mum-bestof .mum-bo-ribbon--lg { top: 20px; left: 20px; padding: 8px 14px; font-size: 13px; gap: 7px; }
.mum-bestof .mum-bo-brandrow { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.mum-bestof .mum-bo-brand {
    font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-faint);
}
.mum-bestof .mum-bo-stage {
    font-size: 9.5px; font-weight: 700; color: var(--teal-text);
    background: var(--teal-bg); padding: 2px 7px; border-radius: var(--r-pill);
}
.mum-bestof .mum-bo-std { font-size: 11px; color: var(--teal-text); font-weight: 700; }
.mum-bestof .mum-bo-std--sm { font-size: 11px; margin-top: 1px; }
.mum-bestof .mum-bo-pending {
    font-size: 12px; font-weight: 600; color: var(--text-faint);
    background: var(--border-soft); padding: 3px 9px; border-radius: var(--r-chip);
}

/* ──────────────────── PRODUCT OF THE YEAR ──────────────────── */
.mum-bestof .mum-bo-sectitle {
    display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
    font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em;
}
.mum-bestof .mum-bo-rule { flex: 1; height: 1px; background: #ece2d4; }
.mum-bestof .mum-bo-feat {
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
    background: var(--surface); box-shadow: 0 12px 34px rgba(31, 36, 33, 0.10);
}
.mum-bestof .mum-bo-feat-img {
    position: relative; min-height: 380px;
    display: flex; align-items: center; justify-content: center;
}
.mum-bestof .mum-bo-feat-body { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.mum-bestof .mum-bo-feat-name {
    font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 14px;
}
.mum-bestof .mum-bo-feat-desc { font-size: 16.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 22px; }
.mum-bestof .mum-bo-trust {
    display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap;
}
.mum-bestof .mum-bo-trust-item { font-size: 13.5px; font-weight: 700; color: var(--teal-text); }
.mum-bestof .mum-bo-trust-cat { font-size: 13.5px; color: var(--text-faint); }
.mum-bestof .mum-bo-feat-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border); padding-top: 20px; gap: 16px; flex-wrap: wrap;
}
.mum-bestof .mum-bo-from { font-size: 12.5px; color: var(--text-faint); }
.mum-bestof .mum-bo-price { font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.mum-bestof .mum-bo-price .at { font-size: 13px; font-weight: 600; color: var(--text-faint); }
.mum-bestof .mum-bo-btn {
    flex: none; padding: 13px 24px; border-radius: 11px;
    background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: 14.5px;
    text-decoration: none; white-space: nowrap;
}

/* ──────────────────── 2026 CATEGORY WINNERS ─────────────────── */
.mum-bestof .mum-bo-winners { padding-top: 48px; }
.mum-bestof .mum-bo-winhead {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 26px; flex-wrap: wrap; gap: 10px;
}
.mum-bestof .mum-bo-sub { font-size: 16px; color: var(--text-soft); margin: 6px 0 0; }
.mum-bestof .mum-bo-seeall { font-weight: 700; font-size: 15px; color: var(--coral); text-decoration: none; white-space: nowrap; }
.mum-bestof .mum-bo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mum-bestof .mum-bo-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card-lg);
    overflow: hidden; box-shadow: 0 8px 26px rgba(31, 36, 33, 0.07);
    display: flex; flex-direction: column;
}
.mum-bestof .mum-bo-card-img {
    position: relative; height: 172px;
    display: flex; align-items: center; justify-content: center;
}
.mum-bestof .mum-bo-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.mum-bestof .mum-bo-cat {
    font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--coral); margin-bottom: 6px;
}
.mum-bestof .mum-bo-card-name {
    font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.15;
}
.mum-bestof .mum-bo-why { font-size: 13.5px; line-height: 1.5; color: var(--text-soft); margin: 8px 0 14px; }
.mum-bestof .mum-bo-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border); padding-top: 13px; gap: 10px; margin-top: auto;
}
.mum-bestof .mum-bo-wprice { font-size: 12px; color: var(--text-faint); }
.mum-bestof .mum-bo-rrp { font-size: 12px; }
.mum-bestof .mum-bo-rbtn {
    flex: none; padding: 9px 15px; border-radius: 10px;
    background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: 13px;
    text-decoration: none; white-space: nowrap;
}

/* ──────────────── HOW A PRODUCT WINS (teal band) ────────────── */
.mum-bestof .mum-bo-method {
    margin-top: 56px; padding: 56px var(--pad-side);
    background: var(--teal-bg); border-top: 1px solid #d2ebe4; border-bottom: 1px solid #d2ebe4;
}
.mum-bestof .mum-bo-method .mum-bo-wrap { padding: 0; }
.mum-bestof .mum-bo-method-eyebrow {
    font-family: var(--font-body); font-weight: 700; font-size: 13px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-text);
}
.mum-bestof .mum-bo-method .mum-bo-h2 { margin: 12px 0 8px; }
.mum-bestof .mum-bo-method-sub { font-size: 16px; color: var(--teal-text); margin: 0 0 30px; max-width: 640px; }
.mum-bestof .mum-bo-method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mum-bestof .mum-bo-method-card { background: var(--surface); border-radius: var(--r-card); padding: 22px; }
.mum-bestof .mum-bo-method-num { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--teal); }
.mum-bestof .mum-bo-method-t { font-weight: 700; font-size: 17px; margin: 8px 0 6px; }
.mum-bestof .mum-bo-method-b { font-size: 14px; line-height: 1.55; color: var(--text-soft); margin: 0; }

/* ───────────────────────── BROWSE CTA ──────────────────────── */
.mum-bestof .mum-bo-browse {
    background: var(--winners-grad); border: 1px solid var(--coral-border);
    border-radius: 20px; padding: 44px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.mum-bestof .mum-bo-browse-h {
    font-family: var(--font-display); font-weight: 800; font-size: 30px;
    letter-spacing: -0.02em; margin: 0 0 8px;
}
.mum-bestof .mum-bo-browse-sub { font-size: 16px; color: var(--text-soft); margin: 0; }
.mum-bestof .mum-bo-browse-btn {
    flex: none; padding: 15px 30px; border-radius: 12px;
    background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: 15px;
    text-decoration: none; white-space: nowrap;
}

/* ──────────────────── NEWSLETTER (coral band) ──────────────── */
.mum-bestof .mum-bo-news { padding: 54px var(--pad-side); background: var(--coral); }
.mum-bestof .mum-bo-news-inner {
    max-width: var(--container); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.mum-bestof .mum-bo-news-copy { max-width: 560px; }
.mum-bestof .mum-bo-news-h {
    font-family: var(--font-display); font-weight: 800; font-size: 30px;
    letter-spacing: -0.02em; color: #fff; margin: 0 0 8px;
}
.mum-bestof .mum-bo-news-sub { font-size: 16px; color: #ffe4dc; margin: 0; }
.mum-bestof .mum-bo-news-form { display: flex; gap: 10px; flex: none; }
.mum-bestof .mum-bo-news-form input {
    border: none; outline: none; border-radius: 12px; padding: 15px 18px;
    font-family: var(--font-body); font-size: 15px; width: 250px;
}
.mum-bestof .mum-bo-news-form button {
    border: none; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px;
    padding: 15px 26px; border-radius: 12px; font-family: var(--font-body); cursor: pointer;
}

/* ───────────────────────── RESPONSIVE ──────────────────────── */
@media (max-width: 900px) {
    .mum-bestof .mum-bo-grid { grid-template-columns: repeat(2, 1fr); }
    .mum-bestof .mum-bo-method-grid { grid-template-columns: repeat(2, 1fr); }
    .mum-bestof .mum-bo-feat { grid-template-columns: 1fr; }
    .mum-bestof .mum-bo-feat-img { min-height: 240px; }
}
@media (max-width: 600px) {
    .mum-bestof .mum-bo-hero { padding: 48px var(--pad-side) 56px; }
    .mum-bestof .mum-bo-h1 { font-size: 33px; }
    .mum-bestof .mum-bo-watermark { font-size: 220px; top: -40px; }
    .mum-bestof .mum-bo-stats { flex-wrap: wrap; }
    .mum-bestof .mum-bo-stat { flex: 1; min-width: 33%; }
    .mum-bestof .mum-bo-grid { grid-template-columns: 1fr; }
    .mum-bestof .mum-bo-method-grid { grid-template-columns: 1fr; }
    .mum-bestof .mum-bo-feat-name { font-size: 28px; }
    .mum-bestof .mum-bo-news-form { width: 100%; }
    .mum-bestof .mum-bo-news-form input { width: 100%; flex: 1; }
}


/* ===================== browse_pages.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — BROWSE ALL CATEGORIES (redesign, on the design tokens)
   Page CONTENT only (nav + dark footer come from the Kadence header/footer).
   Layout: header + search → jump-nav chips → thematic group sections of tiles.
   Replaces ALL previous .mum-browse / .mum-cat-* rules.
   ═══════════════════════════════════════════════════════════ */

.mum-browse {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-side) 72px;
    font-family: var(--font-body);
    color: var(--ink);
}

/* ---------- HEADER (cream gradient band, mockup-style) ---------- */
.mum-browse-header {
    margin: 0 calc(-1 * var(--pad-side)) 0;
    padding: 48px var(--pad-side) 36px;
    background: linear-gradient(180deg, #fff3ec, var(--canvas));
    border-bottom: 1px solid var(--border);
}
.mum-browse-header > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.mum-browse-header h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 46px;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 14px;
    color: var(--ink);
}
.mum-browse-intro {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 26px;
    max-width: 620px;
}

/* ---------- SEARCH BAR (reuses .mum-nav-search so sitesearch.js attaches) ----- */
.mum-browse-search.mum-nav-search {
    position: relative;          /* dropdown anchor */
    max-width: 560px;
    gap: 8px;
    padding: 7px 7px 7px 16px;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(31, 36, 33, 0.08);
}
.mum-bsearch-ico { color: var(--text-faint); flex: none; display: inline-flex; }
.mum-browse-search input {
    flex: 1;
    font-size: 16px;
    padding: 9px 6px;
}
.mum-browse-search-btn {
    flex: none;
    border: none;
    cursor: pointer;
    background: var(--coral-deep);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 10px;
}
.mum-browse-search-btn:hover { filter: brightness(1.06); }

/* ---------- JUMP NAV (sticky chip row) ---------- */
.mum-cat-jumpnav {
    position: sticky;
    top: var(--nav-h);          /* clear the sticky .mum-nav header (responsive height) */
    z-index: 20;
    margin: 0 calc(-1 * var(--pad-side)) 0;
    padding: 14px var(--pad-side);
    background: var(--canvas);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.mum-cat-jump {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border-warm-2);
    border-radius: var(--r-pill);
    padding: 7px 14px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mum-cat-jump:hover {
    background: var(--ink);
    color: var(--on-dark);
    border-color: var(--ink);
}
/* active chip (browse_page_agent.py adds .is-active to the first chip) */
.mum-cat-jump.is-active {
    background: var(--ink);
    color: var(--on-dark);
    border-color: var(--ink);
}

/* ---------- GROUP SECTIONS ---------- */
.mum-browse-groups {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.mum-cat-section { scroll-margin-top: calc(var(--nav-h) + 69px); }  /* clear both sticky bars (nav + jump-nav) on anchor jump */
.mum-cat-sechead {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.mum-cat-secemoji { font-size: 26px; line-height: 1; }
.mum-cat-sechead h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
}
.mum-cat-seccount {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-faint);
}

/* ---------- TILE GRID ---------- */
.mum-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.mum-cat-tile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 118px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-tile);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mum-cat-live:hover { box-shadow: var(--sh-soft); transform: translateY(-1px); }

.mum-cat-tilehead { display: flex; align-items: center; gap: 11px; }
.mum-cat-ico {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
}
/* When a category has a real product photo, the icon shows it (Chris: feature a product shot). */
.mum-cat-ico--photo { background-size: cover; background-position: center; background-color: var(--canvas); }
.mum-cat-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.18;
    color: var(--ink);
}

.mum-cat-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}
/* teal "N products" pill */
.mum-cat-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--teal);
    background: var(--teal-bg);
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
}
/* primary doorway — coral text link */
.mum-cat-compare {
    font-size: 13px;
    font-weight: 700;
    color: var(--coral) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.mum-cat-compare:hover { text-decoration: underline !important; }
/* secondary doorway — teal text link */
.mum-cat-guidelink {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.mum-cat-guidelink:hover { text-decoration: underline !important; }

/* ---------- COMING SOON TILE ---------- */
.mum-cat-soon {
    background: #faf6f0;
    border: 1px dashed var(--border-warm);
}
.mum-cat-soon .mum-cat-ico { filter: grayscale(0.4); opacity: 0.65; }
.mum-cat-soon .mum-cat-name { color: var(--text-faint); }
.mum-cat-soonpill {
    margin-top: auto;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    color: #b0a99c;
    background: #f0e9de;
    padding: 4px 9px;
    border-radius: 6px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
    .mum-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .mum-browse-header h1 { font-size: 33px; }
    .mum-browse-intro { font-size: 15.5px; }
    .mum-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .mum-cat-sechead h2 { font-size: 22px; }
    .mum-browse-groups { gap: 36px; }
}
@media (max-width: 430px) {
    .mum-browse-search-btn { padding: 12px 16px; }
}


/* ===================== about.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — ABOUT page (redesign, on the design tokens)
   Page CONTENT only (the global nav + dark footer come from the Kadence
   header/footer element). Every rule is scoped under .mum-about so the
   page styles never leak to the rest of the site.

   The page mixes full-bleed bands (cream hero, teal "How we choose", coral
   CTA) with narrow prose columns on the cream body. Like best_of.css /
   homepage.css, the Kadence content container is neutralised via
   :has(.mum-about) so the bands reach the page edges — set the WP page
   template to FULL WIDTH.
   ═══════════════════════════════════════════════════════════ */

/* Let the full-bleed bands reach the edges (same pattern as best_of.css). */
.content-container:has(.mum-about), .site-main:has(.mum-about),
.content-wrap:has(.mum-about), .entry:has(.mum-about),
.entry-content-wrap:has(.mum-about), .entry-content:has(.mum-about),
.single-content:has(.mum-about) {
    max-width: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
}

.mum-about { font-family: var(--font-body); color: var(--ink); background: var(--canvas); }
.mum-about * { box-sizing: border-box; }
/* Render headings as authored (the About copy is sentence case). */
.mum-about h1, .mum-about h2, .mum-about h3 { text-transform: none !important; margin: 0; }
.mum-about p { margin: 0; }

/* Shared width wrappers: --wrap is the wide band inner (matches the mockup's
   1180px); --narrow is the prose column (mockup 880px). */
.mum-about .mum-about-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-side); }
.mum-about .mum-about-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--pad-side); }

.mum-about .mum-about-h2 {
    font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2);
    letter-spacing: -0.02em; color: var(--ink); line-height: 1.1;
}

/* ───────────────────────── HERO ───────────────────────── */
.mum-about .mum-about-hero {
    background: var(--hero-grad);
    border-bottom: 1px solid var(--border);
}
.mum-about .mum-about-hero-inner {
    max-width: 1180px; margin: 0 auto; padding: 56px var(--pad-side);
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center;
}
.mum-about .mum-about-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--coral-border);
    font-weight: 700; font-size: 13px; color: var(--coral);
    margin-bottom: 22px;
}
.mum-about .mum-about-h1 {
    font-family: var(--font-display); font-weight: 800; font-size: 54px;
    line-height: 1.03; letter-spacing: -0.03em; margin: 0 0 18px;
    text-wrap: balance;
}
.mum-about .mum-about-dot { color: var(--coral); }
.mum-about .mum-about-tagline {
    font-size: 20px; line-height: 1.5; color: var(--text-muted);
    margin: 0; max-width: 480px;
}
.mum-about .mum-about-hero-card {
    height: 380px; border-radius: var(--r-card-lg);
    background: linear-gradient(150deg, #ffd9cd, var(--coral-soft-2) 55%, var(--gold));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 40px rgba(255, 106, 77, 0.18);
}
.mum-about .mum-about-hero-emoji { font-size: 90px; line-height: 1; }

/* ───────────────────────── WHY ───────────────────────── */
.mum-about .mum-about-why { padding: 60px 0 20px; }
.mum-about .mum-about-why .mum-about-h2 { margin-bottom: 18px; }
.mum-about .mum-about-prose {
    font-size: 19px; line-height: 1.65; color: #33382f; margin: 0 0 18px;
}
.mum-about .mum-about-prose:last-of-type { margin-bottom: 30px; }
.mum-about .mum-about-prose em { font-style: italic; }

.mum-about .mum-about-value-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.mum-about .mum-about-value-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-tile); padding: 18px;
}
.mum-about .mum-about-value-ico { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.mum-about .mum-about-value-t { font-weight: 700; font-size: 15px; }
.mum-about .mum-about-value-b {
    font-size: 13.5px; color: var(--text-soft); line-height: 1.5; margin-top: 4px;
}

/* ───────────────────── OUR PROMISE (ink card) ───────────────────── */
.mum-about .mum-about-promise-wrap { padding: 14px 0 0; }
.mum-about .mum-about-promise {
    background: var(--ink); color: var(--on-dark);
    border-radius: var(--r-card-lg); padding: 32px 34px; margin: 20px 0 8px;
}
.mum-about .mum-about-promise-eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--coral-soft); margin-bottom: 12px;
}
.mum-about .mum-about-promise-text {
    font-family: var(--font-display); font-weight: 700; font-size: 26px;
    line-height: 1.3; letter-spacing: -0.01em; margin: 0;
}
.mum-about .mum-about-promise-ever { color: var(--gold); }

/* ──────────────── HOW WE CHOOSE (teal band) ──────────────── */
.mum-about .mum-about-choose {
    margin-top: 56px; padding: 60px var(--pad-side);
    background: var(--teal-bg);
    border-top: 1px solid #d2ebe4; border-bottom: 1px solid #d2ebe4;
}
.mum-about .mum-about-choose .mum-about-wrap { padding: 0; }
.mum-about .mum-about-choose .mum-about-h2 { margin-bottom: 8px; }
.mum-about .mum-about-choose-sub {
    font-size: 17px; color: #46544f; margin: 0 0 30px; max-width: 620px;
}
.mum-about .mum-about-filter-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.mum-about .mum-about-filter-card {
    background: var(--surface); border-radius: var(--r-card); padding: 22px;
}
.mum-about .mum-about-filter-num {
    font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--teal);
}
.mum-about .mum-about-filter-t { font-weight: 700; font-size: 17px; margin: 8px 0 6px; }
.mum-about .mum-about-filter-b {
    font-size: 14px; line-height: 1.55; color: var(--text-soft); margin: 0;
}

/* ─────────── THE RESEARCH (coral stat cards) ─────────── */
.mum-about .mum-about-research { padding: 60px 0 20px; }
.mum-about .mum-about-research .mum-about-h2 { margin-bottom: 18px; }
.mum-about .mum-about-stat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.mum-about .mum-about-stat-card {
    text-align: center; background: var(--coral-bg-2);
    border-radius: var(--r-card); padding: 24px;
}
.mum-about .mum-about-stat-n {
    font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--coral);
}
.mum-about .mum-about-stat-l {
    font-size: 14px; font-weight: 600; color: var(--text-soft); margin-top: 4px;
}

/* ─────────── HOW WE MAKE MONEY (disclosure card) ─────────── */
.mum-about .mum-about-money { padding: 40px 0 20px; }
.mum-about .mum-about-money .mum-about-h2 { margin-bottom: 18px; }
.mum-about .mum-about-money-card {
    display: flex; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 20px;
}
.mum-about .mum-about-money-check {
    flex: none; width: 42px; height: 42px; border-radius: 11px;
    background: var(--teal-bg); color: var(--teal);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800;
}
.mum-about .mum-about-money-text {
    font-size: 15.5px; line-height: 1.6; color: #46544f; margin: 0;
}

/* ───────────────────────── CTA (coral band) ───────────────────────── */
.mum-about .mum-about-cta-wrap { padding: 56px var(--pad-side); }
.mum-about .mum-about-cta-wrap .mum-about-wrap { padding: 0; }
.mum-about .mum-about-cta {
    background: var(--coral); border-radius: 20px; padding: 48px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
}
.mum-about .mum-about-cta-h {
    font-family: var(--font-display); font-weight: 800; font-size: 32px;
    letter-spacing: -0.02em; color: #fff; margin: 0 0 8px;
}
.mum-about .mum-about-cta-sub { font-size: 17px; color: #ffe4dc; margin: 0; }
.mum-about .mum-about-cta-btn {
    flex: none; padding: 16px 32px; border-radius: 12px;
    background: var(--ink); color: #fff !important;
    font-weight: 700; font-size: 16px; text-decoration: none !important;
    white-space: nowrap;
}
.mum-about .mum-about-cta-btn:hover { filter: brightness(1.12); }

/* ───────────────────────── RESPONSIVE ──────────────────────── */
@media (max-width: 900px) {
    .mum-about .mum-about-hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .mum-about .mum-about-hero-card { height: 260px; }
    .mum-about .mum-about-filter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .mum-about .mum-about-hero-inner { padding: 44px var(--pad-side); }
    .mum-about .mum-about-h1 { font-size: 34px; }
    .mum-about .mum-about-tagline { font-size: 16px; }
    .mum-about .mum-about-prose { font-size: 15.5px; }
    .mum-about .mum-about-value-grid { grid-template-columns: 1fr; }
    .mum-about .mum-about-filter-grid { grid-template-columns: 1fr; }
    .mum-about .mum-about-stat-grid { grid-template-columns: 1fr; }
    .mum-about .mum-about-promise-text { font-size: 22px; }
    .mum-about .mum-about-cta { padding: 32px; }
    .mum-about .mum-about-cta-h { font-size: 24px; }
    .mum-about .mum-about-cta-btn { width: 100%; text-align: center; }
}


/* ===================== contact.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — CONTACT page (redesign, on the design tokens)
   Page CONTENT only (the global nav + dark footer come from the Kadence
   header/footer element). Every rule is scoped under .mum-contact so the
   page styles never leak to the rest of the site.

   Layout: a cream-gradient HEADER band (two columns: contact lanes +
   white form card holding the live WPForms shortcode), then a centred
   FAQ section of native <details> accordions (reusing the S7.3 .mum-faq
   pattern already in the bundle).

   Like the homepage / best-of pages, the Kadence content container is
   neutralised via :has(.mum-contact) so the header band reaches the page
   edges — set the WP page template to FULL WIDTH.
   ═══════════════════════════════════════════════════════════ */

/* Let the full-bleed header band reach the edges (same pattern as best_of.css). */
.content-container:has(.mum-contact), .site-main:has(.mum-contact),
.content-wrap:has(.mum-contact), .entry:has(.mum-contact),
.entry-content-wrap:has(.mum-contact), .entry-content:has(.mum-contact),
.single-content:has(.mum-contact) {
    max-width: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
}

.mum-contact { font-family: var(--font-body); color: var(--ink); background: var(--canvas); }
.mum-contact * { box-sizing: border-box; }
/* Render headings as authored (sentence case copy). */
.mum-contact h1, .mum-contact h2 { text-transform: none !important; margin: 0; }

/* ───────────────────────── HEADER BAND ───────────────────────── */
.mum-contact .mum-contact-head {
    background: var(--hero-grad);
    border-bottom: 1px solid var(--border);
    padding: 56px var(--pad-side);
}
.mum-contact .mum-contact-headwrap {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px;
    align-items: start;
}

/* ---- LEFT column ---- */
.mum-contact .mum-contact-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; margin-bottom: 22px;
    border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--coral-border);
    font-weight: 700; font-size: 13px; color: var(--coral);
}
.mum-contact .mum-contact-h1 {
    font-family: var(--font-display); font-weight: 800;
    font-size: 48px; line-height: 1.05; letter-spacing: -0.03em;
    color: var(--ink); margin: 0 0 16px;
}
.mum-contact .mum-contact-intro {
    font-size: 18px; line-height: 1.6; color: var(--text-muted);
    margin: 0 0 30px; max-width: 420px;
}

/* ---- contact lanes ---- */
.mum-contact .mum-contact-lanes {
    display: flex; flex-direction: column; gap: 14px;
}
.mum-contact .mum-contact-lane {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-tile); padding: 16px;
}
.mum-contact .mum-contact-lane-ico {
    flex: none; width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
/* tinted icon tiles (coral / teal / gold per mockup) */
.mum-contact .mum-contact-lane--coral .mum-contact-lane-ico { background: var(--coral-bg); }
.mum-contact .mum-contact-lane--teal  .mum-contact-lane-ico { background: var(--teal-bg); }
.mum-contact .mum-contact-lane--gold  .mum-contact-lane-ico { background: var(--gold-soft); }
.mum-contact .mum-contact-lane-label {
    font-weight: 700; font-size: 15px; color: var(--ink);
}
.mum-contact .mum-contact-lane-mail {
    font-size: 14px; color: var(--text-soft);
    text-decoration: none; word-break: break-word;
}
.mum-contact .mum-contact-lane-mail:hover { color: var(--coral); text-decoration: underline; }

/* ───────────────────────── FORM CARD (right column) ───────────────────────── */
.mum-contact .mum-contact-formcard {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; padding: 30px;
    box-shadow: var(--sh-card);
}
.mum-contact .mum-contact-form-h {
    font-family: var(--font-display); font-weight: 800;
    font-size: 22px; color: var(--ink); margin-bottom: 20px;
}
.mum-contact .mum-contact-form-privacy {
    font-size: 12.5px; color: var(--text-faint);
    text-align: center; margin: 14px 0 0;
}

/* ---- embedded WPForms — make the live form fields look at home ----
   We do NOT rely on WPForms' own CSS: these rules style its standard markup
   (field rows, labels, inputs/textarea, the submit button) to match the
   mockup, scoped under .mum-contact so nothing leaks site-wide. */
.mum-contact .mum-contact-form-fields .wpforms-form { margin: 0; }
.mum-contact .mum-contact-form-fields .wpforms-field {
    padding: 0 0 14px; margin: 0;
}
.mum-contact .mum-contact-form-fields .wpforms-field-label,
.mum-contact .mum-contact-form-fields .wpforms-field-sublabel {
    display: block; font-family: var(--font-body);
    font-size: 13px; font-weight: 700; color: #46544f;
    margin: 0 0 7px; line-height: 1.3;
}
.mum-contact .mum-contact-form-fields input[type="text"],
.mum-contact .mum-contact-form-fields input[type="email"],
.mum-contact .mum-contact-form-fields input[type="tel"],
.mum-contact .mum-contact-form-fields input[type="url"],
.mum-contact .mum-contact-form-fields select,
.mum-contact .mum-contact-form-fields textarea {
    width: 100%; max-width: 100%;
    border: 1.5px solid var(--border-warm); border-radius: 11px;
    padding: 13px 14px; background: var(--surface);
    font-family: var(--font-body); font-size: 16px; color: var(--ink);
    outline: none; box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mum-contact .mum-contact-form-fields textarea { min-height: 110px; resize: vertical; }
.mum-contact .mum-contact-form-fields input:focus,
.mum-contact .mum-contact-form-fields select:focus,
.mum-contact .mum-contact-form-fields textarea:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(255, 106, 77, 0.14);
}
.mum-contact .mum-contact-form-fields input::placeholder,
.mum-contact .mum-contact-form-fields textarea::placeholder { color: var(--text-faint); }

/* two-up name row when WPForms uses column layout */
.mum-contact .mum-contact-form-fields .wpforms-field-row { display: block; }

/* submit button — full-width dark pill matching the mockup */
.mum-contact .mum-contact-form-fields .wpforms-submit-container { padding: 6px 0 0; margin: 0; }
.mum-contact .mum-contact-form-fields button[type="submit"],
.mum-contact .mum-contact-form-fields .wpforms-submit {
    width: 100%; border: none; cursor: pointer;
    background: var(--ink); color: var(--on-dark);
    font-family: var(--font-body); font-weight: 700; font-size: 16px;
    padding: 15px; border-radius: 12px;
    transition: background 0.15s ease, transform 0.05s ease;
}
.mum-contact .mum-contact-form-fields button[type="submit"]:hover,
.mum-contact .mum-contact-form-fields .wpforms-submit:hover { background: #2c322e; }
.mum-contact .mum-contact-form-fields button[type="submit"]:active,
.mum-contact .mum-contact-form-fields .wpforms-submit:active { transform: translateY(1px); }

/* required asterisk + validation text on-brand */
.mum-contact .mum-contact-form-fields .wpforms-required-label { color: var(--coral); }
.mum-contact .mum-contact-form-fields .wpforms-error {
    color: var(--coral-text); font-size: 12.5px; margin-top: 5px;
}
.mum-contact .mum-contact-form-fields input.wpforms-error,
.mum-contact .mum-contact-form-fields textarea.wpforms-error { border-color: var(--coral); }
.mum-contact .mum-contact-form-fields .wpforms-confirmation-container-full {
    background: var(--teal-bg); border: 1px solid var(--teal);
    border-radius: 11px; padding: 14px 16px; color: var(--teal-text);
    font-size: 14.5px;
}

/* ───────────────────────── FAQ SECTION ───────────────────────── */
.mum-contact .mum-contact-faq { padding: 60px var(--pad-side); }
.mum-contact .mum-contact-faqwrap { max-width: 820px; margin: 0 auto; }
.mum-contact .mum-contact-faq-h {
    font-family: var(--font-display); font-weight: 800;
    font-size: 34px; letter-spacing: -0.02em; color: var(--ink);
    text-align: center; margin: 0 0 8px;
}
.mum-contact .mum-contact-faq-sub {
    font-size: 17px; color: var(--text-soft);
    text-align: center; margin: 0 0 30px;
}
.mum-contact .mum-contact-faqlist {
    display: flex; flex-direction: column; gap: 10px;
}
/* The accordions reuse the shared S7.3 .mum-faq pattern (rotating coral plus
   via summary::after) already in the bundle (article.css). We only adjust the
   spacing here so they sit flush in the list. */
.mum-contact .mum-contact-faqlist .mum-faq { margin: 0; }

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 768px) {
    .mum-contact .mum-contact-headwrap { grid-template-columns: 1fr; gap: 36px; }
    .mum-contact .mum-contact-h1 { font-size: 38px; }
    .mum-contact .mum-contact-intro { max-width: none; }
}
@media (max-width: 640px) {
    .mum-contact .mum-contact-head { padding: 36px var(--pad-side); }
    .mum-contact .mum-contact-formcard { padding: 22px; }
    .mum-contact .mum-contact-h1 { font-size: 32px; }
    .mum-contact .mum-contact-faq { padding: 40px var(--pad-side); }
    .mum-contact .mum-contact-faq-h { font-size: 26px; }
}

/* tame the embedded WPForms form into the coral/cream system (field labels + the
   submit text are WPForms-admin settings; this just restyles what WPForms renders) */
.mum-contact .wpforms-container { margin: 0; }
.mum-contact .wpforms-field { padding: 0 0 16px; }
.mum-contact .wpforms-field-label { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.mum-contact .wpforms-form input[type="text"],
.mum-contact .wpforms-form input[type="email"],
.mum-contact .wpforms-form input[type="tel"],
.mum-contact .wpforms-form textarea {
    width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
    background: var(--surface); border: 1.5px solid var(--border-warm); border-radius: 11px;
    padding: 11px 14px; box-shadow: none;
}
.mum-contact .wpforms-form input:focus,
.mum-contact .wpforms-form textarea:focus { border-color: var(--coral); outline: none; }
.mum-contact .wpforms-submit {
    background: var(--ink) !important; color: #fff !important; border: none !important;
    font-family: var(--font-body); font-weight: 700; font-size: 15px;
    border-radius: var(--r-pill) !important; padding: 12px 22px !important;
    cursor: pointer; width: 100%; box-shadow: none !important;
}
.mum-contact .wpforms-submit:hover { filter: brightness(1.15); }


/* ===================== search_results.css ===================== */
/* ============================================================================
   mum.com.au: Search Results page (JS takeover)
   Scoped under .mum-sr. Replaces the default Kadence /?s= archive output.
   Built to SEARCH_RESULTS_SPEC.md + PRODUCT_CARD_SHELL_SPEC.md. Tokens-based;
   no raw hex outside the rare gradient placeholders the design uses verbatim.
   ============================================================================ */

.mum-sr { font-family: var(--font-body); color: var(--ink); margin-top: 0 !important; }
.mum-sr *, .mum-sr *::before, .mum-sr *::after { box-sizing: border-box; }

/* Hide Kadence's default search archive hero (the "Search Results For:" watermark band); the .mum-sr app replaces it. */
.search-archive-hero-section, .search-archive-title { display: none !important; }

/* ── Search header band ─────────────────────────────────────────────────── */
.mum-sr-header { background: var(--hero-grad); border-bottom: 1px solid var(--border); padding: 32px var(--pad-side) 28px; }
.mum-sr-header-in { max-width: var(--container); margin: 0 auto; }

.mum-sr-bar { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-tile); padding: 7px 7px 7px 16px; box-shadow: var(--sh-card); max-width: 720px; }
.mum-sr-scope { display: flex; align-items: center; gap: 7px; padding-right: 13px; border-right: 1px solid var(--border-warm); font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--ink); }
.mum-sr-scope-caret { font-size: 11px; color: var(--text-faint); }
.mum-sr-glyph { color: var(--text-faint); font-size: 17px; padding-left: 3px; }
.mum-sr-input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: transparent; padding: 8px 6px; }
.mum-sr-go { border: none; background: var(--coral-deep); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 12px 24px; border-radius: var(--r-input); cursor: pointer; white-space: nowrap; }
.mum-sr-go:hover { background: var(--coral-soft); }

.mum-sr-headrow { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 22px; flex-wrap: wrap; gap: 12px; }
.mum-sr-h1 { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.mum-sr-sub { margin: 6px 0 0; font-size: 15px; color: var(--text-soft); }
.mum-sr-sortwrap { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-soft); }
.mum-sr-sort { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink); padding: 9px 14px; border: 1px solid var(--border-warm); border-radius: var(--r-input); background: var(--surface); cursor: pointer; }

/* ── Body grid ──────────────────────────────────────────────────────────── */
.mum-sr-body { max-width: var(--container); margin: 0 auto; padding: 32px var(--pad-side) 80px; display: grid; grid-template-columns: 248px 1fr; gap: 36px; align-items: start; }
.mum-sr-rail { position: sticky; top: calc(var(--nav-h) + 25px); align-self: start; }
.mum-sr-results { min-width: 0; }

/* ── Rail: type segmented toggle ────────────────────────────────────────── */
.mum-sr-seg { display: flex; background: #f2e9dd; border-radius: 11px; padding: 4px; margin-bottom: 24px; }
.mum-sr-segbtn { flex: 1; text-align: center; padding: 9px 0; border: none; background: none; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--text-soft); border-radius: var(--r-chip); cursor: pointer; }
.mum-sr-segbtn.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(31, 36, 33, 0.08); }
.mum-sr-segn { color: var(--text-faint); font-weight: 600; margin-left: 3px; }
.mum-sr-segbtn.on .mum-sr-segn { color: var(--text-faint); }

/* ── Rail: facet headings ───────────────────────────────────────────────── */
.mum-sr-fhead { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin: 0 0 12px; }
.mum-sr-facet { margin-bottom: 26px; }

/* Category checkbox rows */
.mum-sr-cats { display: flex; flex-direction: column; gap: 11px; }
.mum-sr-cat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--nav-link); cursor: pointer; }
.mum-sr-cat input { position: absolute; opacity: 0; width: 0; height: 0; }
.mum-sr-cbox { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #d8cdbd; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.mum-sr-cat input:checked + .mum-sr-cbox { background: var(--coral); border-color: var(--coral); }
.mum-sr-cat input:checked + .mum-sr-cbox::after { content: "\2713"; }
.mum-sr-cat input:focus-visible + .mum-sr-cbox { outline: 2px solid var(--coral); outline-offset: 2px; }
.mum-sr-cat-count { margin-left: auto; color: var(--text-faint); font-size: 13px; }

/* Price dual-handle range (same pattern as filter_rail.css) */
.mum-sr-range { position: relative; height: 18px; margin: 4px 0 8px; }
.mum-sr-range-track, .mum-sr-range-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 3px; pointer-events: none; }
.mum-sr-range-track { left: 0; right: 0; background: #ece2d4; }
.mum-sr-range-fill { left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); background: var(--coral); }
.mum-sr-range input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 18px; margin: 0; padding: 0; background: none; border: none; outline: none; box-shadow: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.mum-sr-range input[type="range"]:focus, .mum-sr-range input[type="range"]:focus-visible { outline: none; border: none; box-shadow: none; }
.mum-sr-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 18px; border: none; }
.mum-sr-range input[type="range"]::-moz-range-track { background: transparent; height: 18px; border: none; }
.mum-sr-range input[type="range"]::-moz-range-progress { background: transparent; }
.mum-sr-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: var(--sh-soft); }
.mum-sr-range input[type="range"]::-moz-range-thumb { pointer-events: auto; cursor: pointer; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: var(--sh-soft); }
.mum-sr-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--sh-soft), 0 0 0 3px rgba(255, 106, 77, 0.45); }
.mum-sr-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--sh-soft), 0 0 0 3px rgba(255, 106, 77, 0.45); }
.mum-sr-priceval { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-soft); }
.mum-sr-priceval span { font-weight: 600; }

/* Brand pill chips */
.mum-sr-brands { display: flex; flex-wrap: wrap; gap: 8px; }
.mum-sr-brand { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--nav-link); background: var(--surface); border: 1px solid #d8cdbd; border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; }
.mum-sr-brand.on { border-color: var(--coral); color: var(--coral-text); background: var(--coral-bg); }
.mum-sr-brand-more { color: var(--text-faint); }

/* Trust toggle switches */
.mum-sr-switches { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.mum-sr-switch { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mum-sr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mum-sr-switch-track { flex: none; width: 38px; height: 22px; border-radius: var(--r-pill); background: #e0d5c6; position: relative; transition: background 0.15s ease; }
.mum-sr-switch-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.mum-sr-switch input:checked + .mum-sr-switch-track { background: var(--teal); }
.mum-sr-switch input:checked + .mum-sr-switch-track::after { transform: translateX(16px); }
.mum-sr-switch input:focus-visible + .mum-sr-switch-track { outline: 2px solid var(--coral); outline-offset: 2px; }

/* ── Results: section headers ───────────────────────────────────────────── */
.mum-sr-sec { margin-bottom: 40px; }
.mum-sr-sechead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.mum-sr-h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.mum-sr-h2-count { color: var(--text-faint); font-weight: 600; font-size: 16px; margin-left: 6px; }
.mum-sr-seclink { font-weight: 700; font-size: 14px; color: var(--coral-text); text-decoration: none; white-space: nowrap; }
.mum-sr-seclink:hover { text-decoration: underline; }

/* ── Guide cards (horizontal) ───────────────────────────────────────────── */
.mum-sr-guides { display: flex; flex-direction: column; gap: 14px; }
.mum-sr-guide { display: flex; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-tile); padding: 14px; text-decoration: none; color: inherit; }
.mum-sr-guide:hover { box-shadow: var(--sh-soft); }
.mum-sr-guide-thumb { flex: none; width: 148px; height: 104px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.mum-sr-guide-body { min-width: 0; }
.mum-sr-guide-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mum-sr-guide-cat { font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.mum-sr-guide-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; margin: 0; }
.mum-sr-guide-foot { font-size: 12px; color: var(--text-faint); margin-top: 7px; }
.mum-sr-guide-exc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--text-soft); line-height: 1.45; margin-top: 6px; }

/* ── Product cards ──────────────────────────────────────────────────────
   Products now reuse the Category Hub card verbatim (.mum-compare-card via
   search_results.js renderProductCard, wrapped in .mum-compare--cf), so the
   card shell + its responsive behaviour come from compare_pages.css /
   filter_rail.css — one source of truth. This wrapper only strips the
   .mum-compare base max-width cap + vertical padding so the shared 2-col grid
   fills the search results column. */
.mum-sr-cards.mum-compare { max-width: none; margin: 0; padding: 0; }

/* LEGACY .mum-sr-card* rules below are no longer emitted (kept harmless; the
   selectors match nothing now). Superseded by .mum-compare-card above. */
.mum-sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.mum-sr-card { display: flex; flex-direction: column; height: 100%; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; }
.mum-sr-card-top { display: flex; gap: 13px; align-items: flex-start; }
.mum-sr-card-thumb { flex: none; width: 78px; height: 78px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(135deg, #fff3ee, #ffd9cd); background-size: cover; background-position: center; }
.mum-sr-card-mid { flex: 1; min-width: 0; }
.mum-sr-card-brandrow { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.mum-sr-card-brand { font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.mum-sr-appr { font-size: 10px; font-weight: 700; color: #fff; background: var(--teal); padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.mum-sr-card-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; }
.mum-sr-bestfor { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-chip); }
.mum-sr-bestfor--teal { color: var(--teal-text); background: var(--teal-bg); }
.mum-sr-card-price { text-align: right; flex: none; }
.mum-sr-card-specs { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.mum-sr-spec { font-size: 12px; color: var(--text-soft); background: var(--border-soft); padding: 4px 9px; border-radius: var(--r-chip); }
.mum-sr-accc { font-size: 12px; font-weight: 700; color: var(--teal); }
.mum-sr-card-featured { font-size: 12px; color: var(--text-faint); }
.mum-sr-card-guide { color: var(--ink); border-bottom: 1px solid var(--border-warm); }
.mum-sr-price-from { font-size: 11px; color: var(--text-faint); }
.mum-sr-price-val { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.mum-sr-price-at { display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--text-faint); }
.mum-sr-price-rrp { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-soft); }
.mum-sr-price-pending { display: inline-block; font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--border-soft); padding: 4px 9px; border-radius: var(--r-chip); white-space: nowrap; }
/* Check-price buy button on a verified search card (parity with the Hub/category cards). */
.mum-sr-buy { display: inline-block; margin-top: 8px; background: var(--coral-deep); color: #fff !important; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; padding: 8px 13px; border-radius: 10px; text-decoration: none !important; white-space: nowrap; }
.mum-sr-buy:hover { filter: brightness(1.06); }

.mum-sr-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-soft); padding-top: 11px; gap: 10px; }
/* Compare toggle: markup contract from compare_tray.js (.mum-cmp-toggle) */
.mum-sr-card-foot .mum-cmp-toggle { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; background: none; border: none; padding: 0; }
.mum-sr-cmp-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #cabfb0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.mum-cmp-toggle.on .mum-sr-cmp-box { background: var(--teal); border-color: var(--teal); }
.mum-cmp-toggle.on .mum-sr-cmp-box::after { content: "\2713"; }
.mum-cmp-toggle.on .mum-cmp-toggle-label { color: var(--teal-text); }
.mum-sr-review { font-weight: 700; font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--coral); padding-bottom: 1px; white-space: nowrap; }

/* "Show N more" */
.mum-sr-more-wrap { display: flex; justify-content: center; margin-top: 26px; }
.mum-sr-more { border: 1.5px solid var(--ink); background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 14px; padding: 13px 28px; border-radius: 11px; cursor: pointer; transition: background 0.15s ease; }
.mum-sr-more:hover { background: var(--coral-bg); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.mum-sr-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; }
.mum-sr-empty-ico { font-size: 40px; }
.mum-sr-empty-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 12px 0 6px; }
.mum-sr-empty-sub { font-size: 15px; color: var(--text-soft); margin: 0 0 16px; }
.mum-sr-empty-link { display: inline-block; font-weight: 700; font-size: 14px; color: var(--coral-text); text-decoration: none; border-bottom: 2px solid var(--coral); padding-bottom: 1px; }

.mum-sr-hidden { display: none !important; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .mum-sr-body { grid-template-columns: 1fr; gap: 16px; }
  .mum-sr-rail { position: static; align-self: stretch; }
  .mum-sr-grid { grid-template-columns: 1fr; }
  .mum-sr-guide-thumb { width: 96px; height: 84px; font-size: 30px; }
  .mum-sr-h1 { font-size: 26px; }
}
@media (max-width: 768px) {
  .mum-sr-guide-thumb { width: 84px; height: 64px; font-size: 26px; }  /* §2.9 */
  /* Full-width search bar; the "All categories ▾" scope drops to its own row (§2.4). */
  .mum-sr-bar { max-width: none; flex-wrap: wrap; }
  .mum-sr-scope { order: 3; flex: 1 0 100%; border-right: none; border-top: 1px solid var(--border-warm); margin-top: 4px; padding: 9px 2px 2px; }
  .mum-sr-input { flex: 1 1 auto; }
  /* Result-type toggle → horizontally-scrollable pill row (§2.4). */
  .mum-sr-seg { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .mum-sr-seg::-webkit-scrollbar { display: none; }
  .mum-sr-segbtn { flex: 0 0 auto; white-space: nowrap; padding: 9px 15px; }
}


/* ===================== category_hub.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — Category Hub (Search Results layout scoped to a category)
   NEW styles only. Reuses tokens + .mum-cf-* (filter_rail.css),
   .mum-compare-card (compare_pages.css / live_compare.css) and
   .mum-sr-guide* (search_results.css). Load AFTER filter_rail.css +
   search_results.css in build_css.py ORDER.
   ═══════════════════════════════════════════════════════════ */

/* The Hub reuses .mum-compare--cf for the 2-col body grid + the card grid, but
   the Hub provides its OWN hero + body container, so neutralise the inherited
   .mum-compare header spacing/cap from compare_pages.css on the Hub. */
.mum-hub.mum-compare { max-width: none; margin: 0; padding: 0; }
.mum-hub-body { max-width: var(--container); margin: 0 auto; padding: 30px var(--pad-side) 80px; }

/* ── Category hero ── */
.mum-hub-hero {
    background: linear-gradient(180deg, #fff3ec, #fffaf4);
    border-bottom: 1px solid var(--border);
    padding: 30px var(--pad-side);
}
.mum-hub-hero-inner { max-width: var(--container); margin: 0 auto; }
.mum-hub-crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.81rem; color: var(--text-faint); font-weight: 600; margin-bottom: 16px; }
.mum-hub-crumb-sep { color: var(--text-faint); }
.mum-hub-crumb-cat { color: var(--teal); }
.mum-hub-hero-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.mum-hub-h1 { font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; letter-spacing: -0.025em; margin: 0 0 14px; line-height: 1.05; color: var(--ink); }
.mum-hub-intro { font-size: 1.03rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; max-width: 620px; }
.mum-hub-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.81rem; color: var(--text-soft); font-weight: 600; }
.mum-hub-meta-trust { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); }
.mum-hub-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: #cabfb0; }
.mum-hub-hero-art {
    height: 190px; border-radius: 18px;
    background: linear-gradient(135deg, #ffd9cd, #ff9d86);
    box-shadow: 0 14px 36px rgba(255, 106, 77, 0.16);
}

/* ── Trending-in-category slider (hero right column, spec B2a) ──
   Reuses the Product-of-the-Week slider JS (data-pow* → product_slider.js):
   native scroll-snap track + dots + circular arrows. */
.mum-hub-trend {
    align-self: start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 14px 36px rgba(31, 36, 33, 0.10);
}
.mum-hub-trend-head {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--ink); color: #fff; padding: 11px 14px;
}
.mum-hub-trend-title {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.mum-hub-trend-arrows { display: flex; gap: 6px; }
/* Compound selectors + full resets: Kadence's generic button rules (padding:8px 20px,
   border-radius:4px, and :hover/:focus/:active box-shadow at specificity 0,1,1) would
   otherwise leak in and turn these into gold ovals with a filled "active" state. Both
   arrows are IDENTICAL translucent-white circles at all times (26px, no border). */
.mum-hub-trend-head .mum-hub-trend-arrow {
    width: 26px; height: 26px; min-width: 0; padding: 0; box-sizing: border-box;
    border: none; border-radius: 50%; box-shadow: none;
    background: rgba(255, 255, 255, 0.16); color: #fff;
    font-size: 0.95rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-appearance: none; appearance: none;
}
.mum-hub-trend-head .mum-hub-trend-arrow:hover,
.mum-hub-trend-head .mum-hub-trend-arrow:focus,
.mum-hub-trend-head .mum-hub-trend-arrow:active {
    background: rgba(255, 255, 255, 0.28); box-shadow: none;
}
.mum-hub-trend-head .mum-hub-trend-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mum-hub-trend-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.mum-hub-trend-track::-webkit-scrollbar { display: none; }
.mum-hub-trend-slide { flex: none; width: 100%; scroll-snap-align: start; padding: 16px; }
.mum-hub-trend-top { display: flex; gap: 12px; align-items: flex-start; }
.mum-hub-trend-thumb {
    flex: none; width: 66px; height: 66px; border-radius: 11px; overflow: hidden;
    border: 1px solid var(--border); background: var(--canvas);
}
.mum-hub-trend-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mum-hub-trend-thumb--ph { background: linear-gradient(135deg, #fff3ee, #ffd9cd); }
.mum-hub-trend-metacol { flex: 1; min-width: 0; }
.mum-hub-trend-brandrow { display: flex; align-items: center; gap: 8px; }
.mum-hub-trend-brand {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-faint);
}
.mum-hub-trend-rank { font-size: 0.78rem; font-weight: 800; color: var(--coral); }
.mum-hub-trend-name {
    font-family: var(--font-display); font-weight: 700; font-size: 0.97rem; line-height: 1.2;
    color: var(--ink); margin: 2px 0 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mum-hub-trend-why {
    display: inline-block; font-size: 0.68rem; font-weight: 700;
    color: var(--teal-text); background: var(--teal-bg);
    border-radius: var(--r-chip); padding: 2px 8px;
}
.mum-hub-trend-div { height: 1px; background: var(--border-soft); margin: 13px 0; }
/* Price (left) + Read review (right) on ONE row, compact, so slides stay short and
   uniform (spec B2a mockup). No buy button here — the slide CTA is Read review. */
.mum-hub-trend-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mum-hub-trend-price { min-width: 0; }
.mum-hub-trend-pv { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ink); white-space: nowrap; }
.mum-hub-trend-vtick { color: var(--teal); font-size: 0.85em; }
.mum-hub-trend-pat { font-size: 0.8rem; color: var(--text-faint); font-weight: 600; white-space: nowrap; }
.mum-hub-trend-rrp { font-size: 1rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.mum-hub-trend-pending { font-size: 0.95rem; font-weight: 600; font-style: italic; color: var(--text-faint); }
.mum-hub-trend-dots { display: flex; justify-content: center; gap: 6px; padding: 0 0 14px; }
.mum-hub-trend-dots .mum-hub-trend-dot {
    width: 7px; height: 7px; min-width: 0; padding: 0; box-sizing: border-box;
    border: none; border-radius: 999px; box-shadow: none;
    background: var(--border-warm); cursor: pointer;
    -webkit-appearance: none; appearance: none; transition: width 0.2s, background 0.2s;
}
.mum-hub-trend-dots .mum-hub-trend-dot.on { width: 18px; background: var(--coral); }
.mum-hub-trend-dots .mum-hub-trend-dot:hover,
.mum-hub-trend-dots .mum-hub-trend-dot:focus,
.mum-hub-trend-dots .mum-hub-trend-dot:active { box-shadow: none; }

/* ── Result-type segmented toggle (All / Guides / Products) ── */
.mum-cf-typeseg { display: flex; background: var(--border-soft); border-radius: var(--r-input); padding: 4px; }
.mum-cf-typesegbtn { flex: 1; border: none; background: none; font-family: var(--font-body); font-size: 0.81rem; font-weight: 600; color: var(--text-soft); padding: 9px 6px; border-radius: var(--r-chip); cursor: pointer; white-space: nowrap; text-align: center; }
.mum-cf-typesegbtn.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--sh-soft); }

/* ── Type facet (checkbox rows) ── */
.mum-cf-heading { font-family: var(--font-display); font-weight: 800; font-size: 0.94rem; color: var(--ink); }
.mum-cf-types { display: flex; flex-direction: column; gap: 11px; }
.mum-cf-type-row { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: #3a3f3b; cursor: pointer; }
.mum-cf-type-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.mum-cf-type-box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #d8cdbd; position: relative; transition: background 0.12s ease, border-color 0.12s ease; }
.mum-cf-type-row input:checked + .mum-cf-type-box { background: var(--coral); border-color: var(--coral); }
.mum-cf-type-row input:checked + .mum-cf-type-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mum-cf-type-row input:focus-visible + .mum-cf-type-box { outline: 2px solid var(--coral); outline-offset: 2px; }
.mum-cf-type-label { min-width: 0; }
.mum-cf-type-n { margin-left: auto; color: var(--text-faint); font-size: 0.81rem; }

/* ── Life-stage chips ── */
.mum-cf-stages { display: flex; flex-wrap: wrap; gap: 8px; }
.mum-cf-stage { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 0.81rem; font-weight: 600; color: #3a3f3b; background: var(--surface); border: 1px solid var(--border-warm); border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; }
.mum-cf-stage span { color: var(--text-faint); font-size: 0.72rem; }
.mum-cf-stage.on { border-color: var(--coral); color: var(--coral-text); background: var(--coral-bg); }

/* ── Guides section (reuses .mum-sr-guide*; these are the Hub-only wrappers) ── */
.mum-hub-guides { margin-bottom: 40px; }
.mum-sr-guides-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.mum-sr-guides-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; margin: 0; }
.mum-sr-count { color: var(--text-faint); font-weight: 600; font-size: 1rem; margin-left: 4px; }
.mum-sr-seeall { text-decoration: none; font-weight: 700; font-size: 0.875rem; color: var(--coral-text); white-space: nowrap; }
.mum-sr-seeall:hover { text-decoration: underline; }
.mum-sr-guides-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.mum-sr-guide-thumb--ph { font-size: 40px; }
.mum-sr-guide-title a { color: inherit; text-decoration: none; }
.mum-sr-guide-title a:hover { color: var(--coral-text); }
.mum-sr-guide-approved { display: inline-flex; align-items: center; gap: 4px; font-size: 0.69rem; font-weight: 700; color: #fff; background: var(--teal); padding: 2px 8px; border-radius: var(--r-pill); }

/* ── Products section header (reuses .mum-cf-bar; H2 instead of the count span) ── */
.mum-hub-products { scroll-margin-top: calc(var(--nav-h) + 25px); }
.mum-hub-products-h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.01em; margin: 0; }

/* ── SEO block (How to choose ...) ── */
.mum-hub-seo {
    margin-top: 40px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 24px;
}
.mum-hub-seo h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 10px; }
.mum-hub-seo p { font-size: 0.9rem; line-height: 1.65; color: #46544f; margin: 0 0 10px; }
.mum-hub-seo p:last-child { margin-bottom: 0; }
.mum-hub-disclosure { font-size: 0.81rem; line-height: 1.6; color: var(--text-faint); border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 4px; }
.mum-hub-disclosure strong { color: #46544f; }

/* ── Result-type toggle hide states (driven by filter_rail.js) ── */
.mum-hub-guides[hidden], .mum-hub-products[hidden] { display: none; }

/* ── Tablet/mobile hero: stack, hide the gradient art (trending slider moves full-width
   directly under the hero text — MOBILE_SPEC §2.6/§3). ── */
@media (max-width: 820px) {
    .mum-hub-hero { padding: 22px var(--pad-side); }
    .mum-hub-hero-row { grid-template-columns: 1fr; gap: 18px; }
    .mum-hub-hero-art { display: none; }
    .mum-hub-h1 { font-size: 1.85rem; }
    .mum-hub-intro { font-size: 0.97rem; }
    .mum-hub-body { padding: 18px var(--pad-side) 60px; }
}

/* ── Mobile trending slider (≤768, §2.6): native swipe (already scroll-snap), shrunk
   internals, arrows replaced by a "‹ swipe ›" hint, "· This week" dropped for width. ── */
@media (max-width: 768px) {
    .mum-hub-trend-thumb { width: 58px; height: 58px; }
    .mum-hub-trend-arrows { display: none; }
    .mum-hub-trend-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mum-hub-trend-head::after {
        content: "\2039  swipe \203A"; flex: none;  /* ASCII escapes (literal ‹ › mojibake'd through the paste); double space after \2039 since an escape eats its trailing space */
        font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.5); white-space: nowrap;
    }
}

/* ═══ Mobile filter: sticky type-bar + bottom SHEET (§2.10) ═══════════════════
   Desktop: the type-bar is just the result-type toggle; the ⚙ button + sheet
   head/foot are hidden and the facets are the normal sidebar body. */
.mum-cf-typebar { margin-bottom: 20px; }
.mum-cf-sheetbtn,
.mum-cf-sheet-head,
.mum-cf-sheet-foot { display: none; }
/* Desktop rail: space the filter groups apart (Type / Life stage / Price / Brand),
   else the next heading butts against the group above. The ≤820 sheet sets its own gap. */
.mum-cf-sheet-scroll { display: flex; flex-direction: column; gap: 22px; }

/* Mobile (≤820, scoped to the Hub so /products/ keeps its old inline toggle): the
   type-bar becomes a sticky sub-bar (toggle + ⚙ Filters) and the facets become a
   slide-up bottom sheet driven by mobile.js (data-mum-open/#mum-cf-sheet + scrim + lock). */
@media (max-width: 820px) {
    .mum-hub .mum-cf-rail { display: block; position: static; padding: 0; border: none; }
    .mum-hub .mum-cf-typebar {
        position: sticky; top: var(--nav-h); z-index: 15;
        display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * var(--pad-side)) 16px;
        padding: 10px var(--pad-side); background: rgba(255, 250, 244, .94); backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
    }
    .mum-hub .mum-cf-typeseg { flex: 1; margin: 0; }
    .mum-hub .mum-cf-sheetbtn {
        display: inline-flex; align-items: center; gap: 6px; flex: none;
        font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--ink);
        background: var(--surface); border: 1.5px solid var(--ink); border-radius: 10px;
        padding: 8px 14px; min-height: 44px; cursor: pointer; box-shadow: none;
        -webkit-appearance: none; appearance: none; white-space: nowrap;
    }
    /* 44px tap targets inside the sheet (§1): checkbox rows + chips get a min height. */
    .mum-hub .mum-cf-sheet-scroll .mum-cf-type-row { min-height: 44px; }
    .mum-hub .mum-cf-sheet-scroll .mum-cf-stage,
    .mum-hub .mum-cf-sheet-scroll .mum-cf-brand { min-height: 44px; }
    .mum-hub .mum-cf-facets {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
        max-height: 86dvh; background: var(--surface);
        border-radius: 20px 20px 0 0; box-shadow: 0 -12px 44px rgba(31, 36, 33, .22);
        transform: translateY(100%); visibility: hidden;
        transition: transform 0.26s ease, visibility 0.26s ease;
        display: flex; flex-direction: column;
    }
    .mum-hub .mum-cf-facets.is-open { transform: translateY(0); visibility: visible; }
    .mum-hub .mum-cf-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 18px 12px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
        color: var(--ink); border-bottom: 1px solid var(--border);
    }
    .mum-hub .mum-cf-sheet-close {
        width: 44px; height: 44px; min-width: 0; padding: 0; margin: -6px -6px -6px 0;
        display: flex; align-items: center; justify-content: center;
        background: none; border: none; box-shadow: none; cursor: pointer;
        font-size: 24px; line-height: 1; color: var(--ink); -webkit-appearance: none; appearance: none;
    }
    .mum-hub .mum-cf-sheet-scroll {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 16px 18px; display: flex; flex-direction: column; gap: 22px;
    }
    .mum-hub .mum-cf-sheet-foot {
        display: block; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border); background: var(--surface);
    }
    .mum-hub .mum-cf-apply {
        display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
        background: var(--coral-deep); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
        border: none; border-radius: 12px; box-shadow: none; cursor: pointer;
        -webkit-appearance: none; appearance: none;
    }
}

/* ── MOBILE TAP TARGETS (MOBILE_SPEC: 44px minimum) ────────────────────────────
   Measured on staging at 390px: the PRIMARY card action was 24px, the Compare
   toggle 32px, the Type filter chips 36px and "See all guides" 22px. Text-sized
   hit areas are hard to hit accurately one-handed while holding a baby, which is
   most of this audience.

   Grown with min-height + inline-flex centring rather than padding, so the touch
   area expands without shifting the text and without disturbing the card footer's
   pinned baseline. Placed in category_hub.css because it loads late in the
   cascade (build_css.py ORDER), so these win over the base component rules at
   equal specificity. */
@media (max-width: 768px) {
    .mum-compare-cta,
    .mum-cmp-toggle,
    .mum-cf-typesegbtn,
    .mum-sr-seeall {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }
    /* The footer row holds the toggle + CTA; keep them apart now they are taller. */
    .mum-compare-foot { align-items: center; }

    /* Verified-price block: price + Buy button sat side by side with flex-wrap:nowrap, which at
       390px squeezed the price to ~132px and CLIPPED the retailer name ("$99.95 at Audrey & M").
       Stack them instead so the price gets the full width and the Buy button is a full-width
       target — the same one-responsive-component reflow the rest of the card uses. */
    .mum-compare-verified-block {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }
    .mum-compare-verified-info { flex: 1 1 100%; min-width: 0; }
    .mum-compare-buy { width: 100%; justify-content: center; }
}

/* Article-page tap targets. Same 44px rule, applied to the ARTICLE's own price actions (the
   quick-verdict and Top-3 tiles) and its "on this page" nav. Measured at 390px: the price links
   were ~22px. Inline prose links are deliberately excluded — forcing 44px on a link inside a
   sentence would wreck paragraph rhythm, which is not what MOBILE_SPEC asks for. */
@media (max-width: 768px) {
    .mum-qv-price,
    .mum-top3-price,
    .mum-toc-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Search-results and Compare-page tap targets — the last two page types in the 360/390/430 sweep.
   Measured: search segment buttons 36px, brand chips 32px, "See all guides" 22px; compare action
   buttons 39px and product buttons 43px. Same 44px rule, same min-height technique. */
@media (max-width: 768px) {
    .mum-sr-segbtn,
    .mum-sr-brand,
    .mum-sr-seclink,
    .mcmp-act,
    .mcmp-pbtn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── CARD FOOTER, matched to designs/Category Hub.dc.html ─────────────────────────────────────
   The prototype's card footer is a COMPACT summary plus one coral action:
       from $1,289   4 retailers
       [ ] Compare              [ Check price -> ]
   Values copied from the prototype's inline styles: "from" 11px #9a9489; price Bricolage 800/20px
   #1f2421; retailer count 11.5px/700 teal #3f7d68; the action a FILLED coral button (never a text
   link — a product's price action is always the coral button, per COMPONENTS 1).
   The old two-column verified block with its own "Buy at X" button is gone: it gave the card two
   competing price actions, and every buy-link now lives in the Check-price popup. */
.mum-compare-from { display: flex; align-items: baseline; gap: 8px; }
.mum-compare-fromlbl { font-size: 11px; color: var(--text-faint); }
.mum-compare-from .mum-compare-price {
    font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink);
}
.mum-compare-nret { font-size: 11.5px; font-weight: 700; color: var(--teal-text); }

/* The price action: a filled coral button, matching the prototype and the popup's CTA. */
.mum-compare-cta--price {
    background: var(--coral-deep); color: #fff; border: none;
    font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
    border-radius: var(--r-input); padding: 10px 16px; cursor: pointer;
    white-space: nowrap; text-decoration: none;
}
.mum-compare-cta--price:hover { background: var(--coral); color: #fff; }



/* ── "Also price-tracked" band ────────────────────────────────────────────────────────────────
   A sibling section under the editorial grid, not part of it. It rendered flush against the last
   row of cards (measured gap: 0px), which read as a misalignment rather than a new section — the
   heading looked like it belonged to the grid above it. A rule plus real space says "different
   thing" without needing a per-card marker. */
.mum-hub-tracked {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule, #e8e2d9);
}
.mum-hub-tracked .mum-hub-products-h2 { margin: 0 0 6px; }
.mum-hub-tracked .mum-sr-sub {
    margin: 0 0 20px;
    max-width: 62ch;          /* the disclaimer is the one line that must actually be read */
}
.mum-hub-tracked .mum-cf-empty-tracked { color: var(--text-soft); padding: 12px 0; }
@media (max-width: 700px) {
    .mum-hub-tracked { margin-top: 2rem; padding-top: 1.5rem; }
}


/* ===================== guides_index.css ===================== */
/* ═══════════════════════════════════════════════════════════
   mum.com.au — Guides Index (/guides/)  · CATEGORY_HUB_AND_GUIDES_SPEC PART C
   On tokens.css. Server-rendered; guides_index.js only enhances.
   NB /guides/ is a normal WP page (inside .entry-content), so every <button>
   carries full resets (padding/border/box-shadow/appearance) + a compound
   selector so Kadence's generic button styling cannot leak in.
   ═══════════════════════════════════════════════════════════ */

.mum-gi { color: var(--ink); }

/* ── Header ── */
.mum-gi-header {
    background: linear-gradient(180deg, #fff3ec, #fffaf4);
    border-bottom: 1px solid var(--border);
    padding: 34px var(--pad-side) 28px;
}
.mum-gi-header-inner { max-width: var(--container); margin: 0 auto; }
.mum-gi-crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.81rem; color: var(--text-faint); font-weight: 600; margin-bottom: 16px; }
.mum-gi-crumb-sep { color: var(--text-faint); }
.mum-gi-crumb-cur { color: var(--teal); }
.mum-gi-h1 { font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 12px; color: var(--ink); }
.mum-gi-intro { font-size: 1.06rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 20px; max-width: 680px; }

/* Category filter chips */
.mum-gi-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mum-gi-chips .mum-gi-chip,
.mum-gi-chips .mum-gi-chip-more {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
    color: var(--nav-link); background: var(--surface);
    border: 1px solid var(--border-warm); border-radius: var(--r-pill);
    padding: 11px 22px; cursor: pointer; box-shadow: none;
    -webkit-appearance: none; appearance: none; white-space: nowrap;
}
.mum-gi-chips .mum-gi-chip:hover,
.mum-gi-chips .mum-gi-chip-more:hover { border-color: var(--coral); color: var(--coral-text); }
.mum-gi-chips .mum-gi-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.mum-gi-chip-n { font-weight: 600; opacity: 0.72; }
.mum-gi-chip.is-on .mum-gi-chip-n { opacity: 0.85; }
.mum-gi-chips .mum-gi-chip:focus-visible,
.mum-gi-chips .mum-gi-chip-more:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* Specificity must beat the base .mum-gi-chips .mum-gi-chip rule (0,2,0), so the hide
   selector is also 0,2,0 (later in source → wins); the expand rule is 0,3,0 → wins over both. */
.mum-gi-chips .mum-gi-chip-extra { display: none; }
.mum-gi-chips.is-expanded .mum-gi-chip-extra { display: inline-flex; }

/* ── Body ── */
.mum-gi-body { max-width: var(--container); margin: 0 auto; padding: 36px var(--pad-side) 70px; }

/* ── Featured "Editor's pick" (C3) ── */
.mum-gi-featured {
    display: grid; grid-template-columns: 1.15fr 0.85fr;
    border-radius: 20px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface);
    box-shadow: 0 12px 34px rgba(31, 36, 33, 0.10); margin-bottom: 40px;
}
.mum-gi-feat-art { position: relative; min-height: 300px; }
.mum-gi-feat-img { display: block; width: 100%; height: 100%; min-height: 300px; background-size: cover; background-position: center; }
.mum-gi-feat-ribbon {
    position: absolute; top: 16px; left: 16px;
    background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.03em; padding: 6px 12px; border-radius: 999px;
}
.mum-gi-feat-body { padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }
.mum-gi-feat-title { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; line-height: 1.15; margin: 10px 0 12px; }
.mum-gi-feat-title a { color: var(--ink) !important; text-decoration: none !important; }
.mum-gi-feat-title a:hover { color: var(--coral-text) !important; }
.mum-gi-feat-exc { font-size: 1rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 22px; }
.mum-gi-feat-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mum-gi-body .mum-gi-feat-btn {
    display: inline-block; background: var(--ink); color: #fff !important;
    font-weight: 700; font-size: 0.9rem; text-decoration: none !important;
    padding: 11px 20px; border-radius: 11px; border: 1px solid var(--ink); box-shadow: none;
    -webkit-appearance: none; appearance: none;
}
.mum-gi-body .mum-gi-feat-btn:hover { filter: brightness(1.15); }
.mum-gi-feat-foot { font-size: 0.82rem; color: var(--text-faint); font-weight: 600; }

/* meta row (shared by featured + cards) */
.mum-gi-card-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mum-gi-cat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); }
.mum-gi-approved {
    display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 700;
    color: #fff; background: var(--teal); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap;
}

/* ── All guides ── */
.mum-gi-all-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mum-gi-all-h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 0; color: var(--ink); }
.mum-gi-all-n { color: var(--text-faint); font-weight: 700; }
.mum-gi-sortwrap { display: flex; align-items: center; gap: 8px; }
.mum-gi-sortlabel { font-size: 0.85rem; color: var(--text-soft); white-space: nowrap; }
.mum-gi-sortwrap .mum-gi-sort {
    font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--ink);
    border: 1px solid var(--border-warm); border-radius: var(--r-input);
    padding: 8px 30px 8px 14px; background-color: var(--surface); cursor: pointer;
    -webkit-appearance: none; appearance: none; box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%239a9489' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}
.mum-gi-sortwrap .mum-gi-sort:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.mum-gi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; }

/* Vertical guide card (C4) */
.mum-gi-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mum-gi-card:hover { box-shadow: var(--sh-card); transform: translateY(-2px); }
.mum-gi-card-img { display: block; height: 150px; background-size: cover; background-position: center; background-color: var(--canvas); }
.mum-gi-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.mum-gi-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.22; margin: 0; }
.mum-gi-card-title a {
    color: var(--ink) !important; text-decoration: none !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mum-gi-card-title a:hover { color: var(--coral-text) !important; }
.mum-gi-card-foot { margin-top: auto; padding-top: 6px; font-size: 0.78rem; color: var(--text-faint); font-weight: 600; }
.mum-gi-hidden { display: none; }

.mum-gi-empty { padding: 3rem 1rem; text-align: center; color: var(--text-soft); }

/* Show more */
.mum-gi-more-wrap { text-align: center; margin-top: 30px; }
.mum-gi-body .mum-gi-more {
    display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
    color: var(--ink); background: var(--surface); border: 1px solid var(--border-warm);
    border-radius: var(--r-input); padding: 12px 26px; cursor: pointer; box-shadow: none;
    -webkit-appearance: none; appearance: none;
}
.mum-gi-body .mum-gi-more:hover { border-color: var(--coral); color: var(--coral-text); }
.mum-gi-body .mum-gi-more:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* ── Tablet / mobile ── */
@media (max-width: 900px) {
    .mum-gi-grid { grid-template-columns: 1fr 1fr; }
    .mum-gi-featured { grid-template-columns: 1fr; }
    .mum-gi-feat-art { min-height: 200px; }
    .mum-gi-feat-img { min-height: 200px; }
}
@media (max-width: 768px) {
    .mum-gi-h1 { font-size: 1.85rem; }
    .mum-gi-intro { font-size: 0.97rem; }
    .mum-gi-grid { grid-template-columns: 1fr; }
    .mum-gi-feat-body { padding: 22px 20px; }
    .mum-gi-feat-title { font-size: 1.5rem; }
    .mum-gi-body { padding: 24px var(--pad-side) 56px; }
    /* Category chips → one scrollable row, no wrap (§3 Guides Index); show all, drop "+N more". */
    .mum-gi-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 0 calc(-1 * var(--pad-side)); padding: 2px var(--pad-side) 6px; }
    .mum-gi-chips::-webkit-scrollbar { display: none; }
    .mum-gi-chips .mum-gi-chip-extra { display: inline-flex; }
    .mum-gi-chip-more { display: none; }
    /* Guide cards → horizontal: thumb 84×64 (flex:none) + text (§2.9). */
    .mum-gi-card { flex-direction: row; }
    .mum-gi-card-img { width: 84px; height: 64px; flex: none; }
    .mum-gi-card-body { flex: 1; min-width: 0; }
}


/* ===================== check_price.css ===================== */
/* ============================================================================
   mum.com.au — CHECK-PRICE POPUP  (pairs with check_price.js)
   The multi-retailer price comparison opened from a product card's
   "Check price →". Uses tokens.css variables only — never a raw hex, so the
   brand accent stays switchable in one place.
   Design target: design_handoff_mum_redesign/designs/Category Hub.dc.html
   (modal), with the handoff's overclaiming trust row deliberately replaced by
   the real per-price dated stamp.
   ============================================================================ */

.mum-cp-lock { overflow: hidden; }

.mum-cp { position: fixed; inset: 0; z-index: var(--z-overlay, 90); }
.mum-cp-scrim { position: absolute; inset: 0; background: rgba(31, 36, 33, 0.55); }

.mum-cp-panel {
    position: relative; margin: 40px auto; width: 800px; max-width: calc(100% - 32px);
    max-height: calc(100vh - 80px); display: flex; flex-direction: column;
    /* dvh tracks the VISIBLE viewport as mobile browser chrome shows/hides; the vh line above
       stays as the fallback for anything that does not support it. */
    max-height: calc(100dvh - 80px);
    background: var(--canvas); border-radius: 22px; box-shadow: var(--sh-modal);
    overflow: hidden; font-family: var(--font-body);
}
.mum-cp-x {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mum-cp-x:hover { border-color: var(--ink); }

/* ---- header ---- */
/* Prototype header: a FULL-BLEED 230px image column filling the panel corner, not a small
   rounded thumb. This was the popup's biggest divergence from designs/Category Hub.dc.html. */
.mum-cp-head { display: grid; grid-template-columns: 230px 1fr; gap: 0; padding: 0; align-items: stretch; }
.mum-cp-img { min-height: 230px; background: var(--surface); overflow: hidden; }
.mum-cp-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mum-cp-img--ph { background: linear-gradient(145deg, var(--coral-bg), var(--coral-bg-2)); }
.mum-cp-headmeta { min-width: 0; padding: 26px 28px 22px; }
.mum-cp-brandrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mum-cp-brand {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-faint);
}
.mum-cp-appr {
    font-size: 10px; font-weight: 700; color: #fff; background: var(--teal);
    border-radius: var(--r-pill); padding: 3px 9px;
}
.mum-cp-name {
    font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.08;
    letter-spacing: -0.02em; color: var(--ink); margin: 6px 0 0; text-transform: none;
}
.mum-cp-chiprow { margin-top: 8px; }
.mum-cp-bestfor {
    display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: var(--r-chip);
    padding: 4px 10px; color: var(--teal-text); background: var(--teal-bg);
}
.mum-cp-bestfor--top { color: var(--coral-text); background: var(--coral-bg); }
.mum-cp-blurb { font-size: 14px; line-height: 1.55; color: var(--text-soft); margin: 8px 0 0; }
.mum-cp-chips { margin-top: 9px; }
.mum-cp-accc {
    font-size: 11px; font-weight: 700; color: var(--teal-text); background: var(--teal-bg);
    border: 1px solid var(--teal-bg-2); border-radius: var(--r-chip); padding: 4px 8px;
}

/* ---- best-price band — its retailer ALWAYS equals the cheapest row ---- */
/* It MUST NOT be position:sticky. It was, and the rule was harmless only because the band sat
   OUTSIDE the scroller — its sticky container was the panel, which never scrolls. Now that the band
   lives inside .mum-cp-scroll, that same rule would go live and pin a ~130px block over a phone
   screen, i.e. it would ship the reported bug back on purpose. Nothing in this popup is sticky
   except the close button. */
.mum-cp-band {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 16px 28px 0; padding: 14px 16px;
    background: linear-gradient(135deg, #fff3ec, #ffe9df);
    box-shadow: 0 6px 20px rgba(31, 36, 33, 0.10);
    border: 1px solid var(--coral-border); border-radius: var(--r-card);
}
.mum-cp-eyebrow {
    display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--coral-text);
}
.mum-cp-bandprice {
    font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--ink);
    line-height: 1.1; margin-top: 2px;
}
.mum-cp-bandat { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-soft); }
.mum-cp-cta {
    flex: none; background: var(--coral-deep); color: #fff; font-weight: 700; font-size: 14px;
    border: none; border-radius: var(--r-input); padding: 11px 18px; text-decoration: none;
    white-space: nowrap; cursor: pointer;
}
.mum-cp-cta:hover { background: var(--coral); color: #fff; }

/* ---- the ONE scroller: header, band, list, history, specs and footer all scroll together ---- */
/* min-height:0 is what MAKES this scroll. A flex child defaults to min-height:auto, i.e. it refuses
   to shrink below its content, so overflow-y:auto never engages and the overflow is simply clipped
   by the panel's overflow:hidden. Whatever is the scroller needs this line.
   overscroll-behavior:contain stops the scroll CHAINING to the page behind when this hits either
   end. html.mum-cp-lock sets overflow:hidden on the document, which iOS Safari does not reliably
   honour for rubber-band handoff — and with one tall scroller a reader reaches the ends constantly. */
.mum-cp-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* Not a scroller — just the content block below the band. */
.mum-cp-body { padding: 18px 28px 24px; }
.mum-cp-sec { margin-top: 20px; }
.mum-cp-sec:first-child { margin-top: 4px; }
.mum-cp-h3 {
    font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink);
    margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px;
    /* Kadence title-cases headings, which rendered "Prices at 9 retailers" as "Prices At 9
       Retailers" on staging. Our copy is already cased deliberately - keep it verbatim. */
    text-transform: none;
}
.mum-cp-since { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--text-faint); }

/* ---- retailer rows ---- */
.mum-cp-list { list-style: none; margin: 0; padding: 0; }
.mum-cp-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 0; border-top: 1px solid var(--border);
}
.mum-cp-row:first-child { border-top: none; }
.mum-cp-rl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mum-cp-rname { font-weight: 700; font-size: 15px; color: var(--ink); }
.mum-cp-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; border-radius: var(--r-chip); padding: 3px 7px; }
.mum-cp-tag--cheap { color: var(--teal-text); background: var(--teal-bg); }
.mum-cp-tag--rec { color: var(--coral-text); background: var(--coral-bg); }
.mum-cp-checked { flex-basis: 100%; font-size: 11px; color: var(--text-faint); }
.mum-cp-rr { display: flex; align-items: center; gap: 12px; flex: none; }
.mum-cp-rprice { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.mum-cp-view {
    background: var(--surface); border: 1.5px solid var(--ink); color: var(--ink);
    font-weight: 700; font-size: 13px; border-radius: 10px; padding: 8px 14px;
    text-decoration: none; white-space: nowrap;
}
.mum-cp-view:hover { background: var(--ink); color: var(--on-dark); }

/* ---- price history (only rendered when >=2 real dated points exist) ---- */
.mum-cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mum-cp-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-tile);
    padding: 10px 12px; text-align: center;
}
.mum-cp-stat span { display: block; font-size: 11px; color: var(--text-faint); font-weight: 600; }
.mum-cp-stat b { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.mum-cp-verdict {
    margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-chip); font-size: 13px;
    font-weight: 600; color: var(--text); background: var(--gold-soft, var(--coral-bg-2));
}
.mum-cp-verdict--good { color: var(--teal-text); background: var(--teal-bg); }
.mum-cp-spark { display: block; width: 100%; height: 90px; margin-top: 12px; }
.mum-cp-spark polyline { fill: none; stroke: var(--coral); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mum-cp-spark circle { fill: var(--coral); }

/* ---- specs ---- */
.mum-cp-specs { list-style: none; margin: 0; padding: 0; }
.mum-cp-specs li { font-size: 13.5px; color: var(--text-soft); padding: 6px 0; border-top: 1px solid var(--border-soft); }
.mum-cp-specs li:first-child { border-top: none; }
.mum-cp-specs li span { font-weight: 700; color: var(--ink); }

.mum-cp-note { font-size: 11.5px; color: var(--text-faint); margin: 18px 0 0; line-height: 1.5; }
.mum-cp-review { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--coral-text); }

/* ---- footer: end-of-scroll CTA recovery, rendered only when there are 2+ retailers ---- */
.mum-cp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 22px; border-top: 1px solid var(--border); background: var(--surface);
}
.mum-cp-foot b { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.mum-cp-footlbl { display: block; font-size: 11px; color: var(--text-faint); font-weight: 600; }

/* The card's price action is styled in category_hub.css as a FILLED coral button, matching the
   prototype. An earlier draft here styled it as a bare text link and, because this file loads last
   in the bundle, it silently overrode the filled version. Removed - do not restyle it here. */

/* ---- mobile: one responsive component, full-height sheet at <=768px ---- */
@media (max-width: 768px) {
    /* 100vh is WRONG on a phone: iOS measures it against the viewport WITHOUT browser chrome, so
       the panel is taller than the screen and its lower part sits permanently below the fold. dvh
       tracks the visible area. vh first as the fallback, dvh second so it wins where supported. */
    .mum-cp-panel { margin: 0; width: 100%; max-width: 100%;
                    max-height: 100vh; height: 100vh;
                    max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .mum-cp-head { grid-template-columns: 1fr; }
    /* Capping the image is no longer load-bearing — nothing can be starved now that everything is
       one scroller, it is only how far a reader scrolls to reach the first price. But the cap must
       be measured against the VISIBLE viewport like the panel is, not the URL-bar-hidden one. */
    .mum-cp-img { min-height: 170px; max-height: 30vh; max-height: 30dvh; }
    .mum-cp-headmeta { padding: 16px 16px 12px; }
    .mum-cp-name { font-size: 21px; }
    /* Keep the title clear of the close button — at 390px the name ran under the ✕. */
    .mum-cp-headmeta { padding-right: 46px; }
    .mum-cp-band { margin: 12px 16px 0; flex-direction: column; align-items: stretch; gap: 10px; }
    .mum-cp-band .mum-cp-cta { text-align: center; }
    .mum-cp-body { padding: 16px 16px 22px; }
    .mum-cp-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mum-cp-rr { width: 100%; justify-content: space-between; }
    .mum-cp-foot { padding: 11px 16px; }
    /* The sheet is full-bleed 100dvh, so on a notched iPhone the LAST scrolled block would otherwise
       sit under the home indicator. */
    .mum-cp-scroll { padding-bottom: env(safe-area-inset-bottom, 0px); }
    /* 44px MINIMUM tap target (MOBILE_SPEC). Set min-height explicitly — padding alone left these
       at 39-40px, measured at 390px wide. */
    .mum-cp-view,
    .mum-cp-cta,
    .mum-cp-x {
        min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    }
    .mum-cp-view { padding: 0 16px; }
    .mum-cp-x { width: 44px; }
}

/* Chart furniture. The stroke keeps its own width under preserveAspectRatio="none" via
   vector-effect, otherwise the horizontal squash thins the line to a hairline. */
/* --coral-tint does not exist and never did. An undefined custom property with no fallback is
   invalid at computed-value time, and `fill`'s initial value is BLACK — so every price-history
   chart on the site has been rendering as a solid black blob under a coral stroke. --coral-bg IS
   the "coral tint fill" token (tokens.css:35), and is the same hex article.css falls back to. */
.mum-cp-spark .mum-cp-area { fill: var(--coral-bg, #fff0ea); stroke: none; }
.mum-cp-spark .mum-cp-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }


/* ===================== product_page.css ===================== */
/* ────────────────────────────────────────────────────────────────────────────────────────────
   product_page.css — the standalone product page at /product/<slug>/

   This is the surface a SEARCH arrival lands on, so it has to carry its own context: the
   Check-price popup gets its framing from the hub around it (the band heading that says we have
   not reviewed these), while this page has nothing above it. Hence .mpp-tracked, which is not
   decoration — it is the only thing stopping a price-tracked listing from reading as reviewed.

   Mobile-first. The offer list is the reason the page exists, so it is the one thing that must
   stay legible at 360px: rows go two-line rather than squeezing the price into a sliver.
   ──────────────────────────────────────────────────────────────────────────────────────────── */

.mpp {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 18px 56px;
    font-family: var(--font-body);
    color: var(--text);
}

.mpp-crumb {
    font-size: 13px;
    color: var(--text-faint);
    padding: 18px 0 14px;
}
.mpp-crumb a { color: var(--text-muted); text-decoration: none; }
.mpp-crumb a:hover { color: var(--coral-text); text-decoration: underline; }

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */
.mpp-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}
.mpp-img {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
.mpp-img img { max-width: 100%; max-height: 240px; height: auto; display: block; }
.mpp-img--ph { background: var(--coral-bg-2); border-style: dashed; }

.mpp-brand {
    display: block;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
}
.mpp-name {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 6px 0 0;
    text-wrap: balance;
}
.mpp-appr {
    display: inline-block;
    margin-left: 8px;
    background: var(--teal-bg);
    color: var(--teal-text);
    border: 1px solid #cfe8e0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    vertical-align: 3px;
}
.mpp-verdict {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* The "we have not reviewed this" line. Deliberately a visible tinted block rather than fine
   print: on a hub the band heading carries this claim for a whole row of cards, and a standalone
   page that dropped it would present an unreviewed retailer listing in the same clothes as an
   editorial pick. */
.mpp-tracked {
    margin: 14px 0 0;
    padding: 10px 13px;
    background: var(--coral-bg-2);
    border: 1px solid var(--coral-border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── sections ───────────────────────────────────────────────────────────────────────────────── */
.mpp-sec { margin-top: 34px; }
.mpp-h2 {
    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}

/* ── offers ─────────────────────────────────────────────────────────────────────────────────── */
.mpp-list { list-style: none; margin: 0; padding: 0; }

/* TWO COLUMNS ON MOBILE, not a wrapping flex row. The first version was a single flex line that
   wrapped: the dated stamp took a full line of its own, which then pushed the price and the View
   button onto a THIRD line with the whole left half empty. Measured on the live page at 375px,
   that made each row ~250px tall, so only 5 of 10 retailers fitted on a screen and the comparison
   this page exists to show could not be seen. A grid keeps identity on the left and the money on
   the right at every width. */
.mpp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.mpp-row:first-child { border-top: 1px solid var(--border); }
.mpp-rl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; min-width: 0; }
.mpp-rr {
    display: flex;
    flex-direction: column;   /* price above button on narrow screens */
    align-items: flex-end;
    gap: 7px;
}

.mpp-rname { font-weight: 600; font-size: 16px; }
.mpp-rprice {
    font-weight: 700;
    font-size: 18px;
    font-variant-numeric: tabular-nums;   /* prices are a column — they must align */
    white-space: nowrap;
}
.mpp-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 8px;
}
.mpp-tag--cheap { background: var(--teal-bg); color: var(--teal-text); }

/* The dated stamp is the honesty mechanism — a price with no date is a claim about right now,
   and repricing runs weekly, not continuously. It gets its own line on narrow screens rather
   than being dropped. */
.mpp-checked {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.mpp-view {
    background: var(--coral-deep);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    padding: 9px 16px;
    white-space: nowrap;
}
.mpp-view:hover { background: #b93a22; color: #fff; }
.mpp-view:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.mpp-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-faint);
}

/* ── specs ──────────────────────────────────────────────────────────────────────────────────── */
.mpp-specs {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--border);
}
.mpp-spec {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.mpp-spec dt { color: var(--text-faint); }
.mpp-spec dd { margin: 0; font-weight: 600; }

.mpp-review {
    display: inline-block;
    margin-top: 30px;
    font-weight: 700;
    color: var(--coral-text);
    text-decoration: none;
    border-bottom: 2px solid var(--coral-border);
    padding-bottom: 2px;
}
.mpp-review:hover { border-bottom-color: var(--coral); }

/* ── desktop ────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
    .mpp-head { grid-template-columns: 280px minmax(0, 1fr); gap: 30px; padding-bottom: 28px; }
    .mpp-name { font-size: 38px; }
    .mpp-checked { flex-basis: auto; }   /* room to sit inline beside the retailer name */
    .mpp-row { padding: 14px 0; }
    .mpp-rr { flex-direction: row; align-items: center; gap: 16px; }   /* one line at width */
    .mpp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
    .mpp-spec { grid-template-columns: minmax(0, 45%) minmax(0, 55%); }
}

/* ── /product/ index ────────────────────────────────────────────────────────────────────────── */
.mppi { max-width: 900px; margin: 0 auto; padding: 0 18px 56px; font-family: var(--font-body); }
.mppi-lede { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin: 0 0 30px; max-width: 62ch; }
.mppi-sec { margin-bottom: 30px; }
.mppi-sec h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.015em; margin: 0 0 10px; }
.mppi-sec h2 a { color: inherit; text-decoration: none; }
.mppi-sec h2 a:hover { color: var(--coral-text); text-decoration: underline; }
.mppi-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.mppi-list li { padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
.mppi-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.mppi-list a:hover { color: var(--coral-text); text-decoration: underline; }
.mppi-n { color: var(--text-faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 720px) { .mppi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; } }


/* ===================== alerts.css ===================== */
/* ────────────────────────────────────────────────────────────────────────────────────────────
   alerts.css — the "Watch price" control (Check-price popup + /product/ pages)

   Deliberately QUIET. The primary action on every surface is "Check price →" in coral; this is
   a secondary, optional thing you do while you are already there. Making it compete would push
   people away from the action that earns and toward one that costs us an email send.
   ──────────────────────────────────────────────────────────────────────────────────────── */

.mum-watch { margin-top: 14px; }

.mum-watch-open {
    background: none;
    border: 1px solid var(--border-warm);
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.mum-watch-open:hover { border-color: var(--coral-border); color: var(--coral-text); }
.mum-watch-open:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.mum-watch-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ⚠️ THE hidden ATTRIBUTE NEEDS THIS, AND WITHOUT IT THE FEATURE IS BROKEN ON SIGHT.
   `hidden` works by the BROWSER'S default stylesheet setting display:none, which any author rule
   with a class selector outranks. So `.mum-watch-form { display: flex }` silently defeated
   `<div class="mum-watch-form" hidden>` and the whole signup form rendered expanded on page load,
   with the target-price field showing even in "any drop" mode where it means nothing.
   The JS was correct throughout — it set and cleared `hidden` exactly as intended — which is why
   this reads as a JS bug and is not one. Any element that is BOTH display-typed by a class and
   toggled with `hidden` needs this pairing. */
.mum-watch-form[hidden],
.mum-watch-targetrow[hidden],
.mum-report-menu[hidden] { display: none; }
.mum-watch-form input[type="email"] {
    flex: 1 1 190px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-warm);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    background: var(--surface);
    color: var(--text);
}
.mum-watch-form input[type="email"]:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; }

.mum-watch-go {
    background: var(--ink);
    color: var(--on-dark);
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.mum-watch-go:hover { background: #333a35; }
.mum-watch-go:disabled { opacity: .55; cursor: default; }
.mum-watch-go:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* The honeypot. Must be reachable by nothing a human uses but NOT display:none — some bots
   skip hidden fields, and a screen reader must be told to ignore it explicitly. */
.mum-watch-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.mum-watch-msg { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.mum-watch-msg[data-state="err"] { color: var(--coral-text); }
.mum-watch-msg[data-state="ok"]  { color: var(--teal-text); }

.mum-watch-note { margin: 7px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-faint); }

/* Once this browser has asked to watch, swap the invitation for a state. Never a claim that
   they are confirmed: only Klaviyo knows whether they completed double opt-in, and localStorage
   is not evidence of anything. */
.mum-watch[data-watching="1"] .mum-watch-open { display: none; }
.mum-watch[data-watching="1"]::before {
    content: "\2713 Watching this price";
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-text);
    background: var(--teal-bg);
    border-radius: 999px;
    padding: 6px 12px;
}

/* ── two modes ──────────────────────────────────────────────────────────────────────────────── */
.mum-watch-modes { border: 0; margin: 0 0 10px; padding: 0; }
.mum-watch-modes legend { font-size: 13px; font-weight: 700; color: var(--text-muted); padding: 0 0 6px; }
.mum-watch-modes label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; cursor: pointer; }
.mum-watch-modes input { accent-color: var(--coral-deep); }

.mum-watch-targetrow { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.mum-watch-dollar { font-weight: 700; color: var(--text-muted); }
.mum-watch-target {
    width: 110px; padding: 9px 11px; border: 1px solid var(--border-warm);
    border-radius: 10px; font: inherit; font-size: 15px;
    font-variant-numeric: tabular-nums; background: var(--surface); color: var(--text);
}
.mum-watch-target:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; }

/* ── previous price ─────────────────────────────────────────────────────────────────────────── */
/* "was $45.00 · ↓36%". NEVER the word "normally": with two data points we know what the price
   WAS when we last looked, not what is typical. "Normally $45, now $29" is a savings claim and
   needs a real reference price; "was $45 on 19 Jul" is a statement of fact about our own
   observation and is defensible with exactly two points. */
.mum-was { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; vertical-align: 2px; }
.mum-was-old { font-size: 14px; color: var(--text-faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.mum-was-pct {
    font-size: 12px; font-weight: 700; color: var(--teal-text);
    background: var(--teal-bg); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.mum-was-when { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ── report a problem ───────────────────────────────────────────────────────────────────────── */
.mum-report { position: relative; margin-top: 26px; }
.mum-report-open {
    background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px;
    color: var(--text-faint); cursor: pointer; text-decoration: underline;
    text-underline-offset: 3px;
}
.mum-report-open:hover { color: var(--coral-text); }
.mum-report-open:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.mum-report-menu {
    position: absolute; z-index: 20; bottom: 100%; left: 0; margin: 0 0 6px; padding: 6px;
    list-style: none; min-width: 210px; background: var(--surface);
    border: 1px solid var(--border-warm); border-radius: 12px;
    box-shadow: 0 8px 26px rgba(31, 36, 33, .13);
}
.mum-report-menu li { margin: 0; }
.mum-report-issue {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 9px 11px; font: inherit; font-size: 14px; color: var(--text);
    border-radius: 8px; cursor: pointer;
}
.mum-report-issue:hover { background: var(--coral-bg-2); color: var(--coral-text); }
.mum-report-issue:focus-visible { outline: 3px solid var(--coral); outline-offset: -2px; }
.mum-report-done { margin: 26px 0 0; font-size: 13px; color: var(--teal-text); }

/* ── /my-alerts/ ────────────────────────────────────────────────────────────────────────────── */
.mal-list { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.mal-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "img main right" "img rule del";
    align-items: center;
    gap: 4px 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.mal-row:first-child { border-top: 1px solid var(--border); }
.mal-img {
    grid-area: img; width: 56px; height: 56px; object-fit: contain;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.mal-img--ph { background: var(--coral-bg-2); border-style: dashed; }
.mal-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mal-brand {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 600;
}
.mal-name { font-weight: 700; font-size: 16px; }
.mal-name a { color: inherit; text-decoration: none; }
.mal-name a:hover { color: var(--coral-text); text-decoration: underline; }
.mal-rule { grid-area: rule; font-size: 13px; color: var(--text-muted); }
.mal-right { grid-area: right; text-align: right; display: flex; flex-direction: column; }
.mal-price { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
/* The dated qualifier is not decoration: repricing is twice weekly, so a bare number would be a
   claim about right now that we cannot make. */
.mal-when { font-size: 11px; color: var(--text-faint); }
.mal-pending { font-size: 13px; color: var(--text-faint); font-style: italic; }
.mal-del {
    grid-area: del; justify-self: end;
    background: none; border: 1px solid var(--border-warm); border-radius: 999px;
    padding: 5px 13px; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer;
}
.mal-del:hover { border-color: var(--coral-border); color: var(--coral-text); }
.mal-del:disabled { opacity: .5; cursor: default; }
.mal-del:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.mal-empty { max-width: 560px; }
.mal-empty p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; }
.mal-browse { font-weight: 700; color: var(--coral-text); text-decoration: none; }
.mal-browse:hover { text-decoration: underline; }
.mal-loading, .mal-err { font-size: 15px; color: var(--text-muted); }
.mal-err a { color: var(--coral-text); }
.mal-foot { margin-top: 22px; font-size: 13px; line-height: 1.5; color: var(--text-faint); max-width: 620px; }

@media (max-width: 560px) {
    .mal-row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "img main" "rule rule" "right del"; }
    .mal-img { width: 44px; height: 44px; }
    .mal-right { text-align: left; }
}

/* ── placement: inside the product-page header, under the verdict ───────────────────────────── */
/* Moved out of the price-table region on 2026-08-06. Measured: below a 7-row price table the
   control sat ~1,464px down a 390px-wide page, i.e. past two screens; in the header it lands at
   ~571px. "Top right" was rejected because at 390px the top-right of .mpp-head IS the corner of
   the product photo, and a position that only exists on desktop is not a position. */
.mpp-headmeta .mum-watch { margin-top: 16px; }

/* ── the disclosure link (replaces the mode radios) ─────────────────────────────────────────── */
.mum-watch-toggle {
    flex-basis: 100%;
    background: none; border: 0; padding: 2px 0; margin: 0;
    font: inherit; font-size: 13px; color: var(--text-muted);
    text-align: left; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.mum-watch-toggle:hover { color: var(--coral-text); }
.mum-watch-toggle:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 3px; }
.mum-watch-targetrow { flex-basis: 100%; }

/* 44px minimum touch target — the site's mobile spec. The pill was 40px. */
.mum-watch-open, .mum-watch-go { min-height: 44px; }

/* ── already watching ───────────────────────────────────────────────────────────────────────── */
/* A state you cannot leave reads as broken, so the pill carries its own exit. */
.mum-watch[data-watching="1"]::before {
    background: var(--teal-bg);
    color: var(--teal-text);
    border: 1px solid #cfe8e0;
}
.mum-watch-stop {
    background: none; border: 0; padding: 4px 0 4px 10px; font: inherit; font-size: 13px;
    color: var(--text-faint); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.mum-watch-stop:hover { color: var(--coral-text); }
.mum-watch[data-watching="1"] .mum-watch-stop { display: inline; }
.mum-watch-stop { display: none; }

/* ── inside the popup ───────────────────────────────────────────────────────────────────────── */
/* First block in .mum-cp-body, directly under the coral price band. It is an ordinary in-flow
   block: NO sticky, NO fixed, nothing that creates a second non-scrolling region. The popup has
   exactly one scroller and that is load-bearing (chrome once ate 470 of 664px on a phone). */
.mum-cp-body > .mum-watch {
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}


/* ===================== newsletter.css ===================== */
/* mum.com.au — newsletter signup states.
   Loaded LAST so it can add to the three existing form blocks (homepage / best-of / article)
   without restating their layout. Each of those already sets `display:flex; gap:...` on the form;
   all this adds is the wrap behaviour plus the new status, fine-print and honeypot children.
   Kept in one file rather than duplicated into homepage.css / best_of.css / article.css so the
   three surfaces cannot drift, which is how the copy on them drifted in the first place. */

/* The forms were a single flex ROW (input + button). The status message and fine print are new
   full-width children, so the row has to be allowed to wrap or they would be squeezed onto the
   same line and shrink the input. */
.mum-news-form,
.mum-bestof .mum-bo-news-form,
.mum-art-news-form { flex-wrap: wrap; }

.mum-news-form .mum-news-status,
.mum-news-form .mum-news-fine,
.mum-bestof .mum-bo-news-form .mum-news-status,
.mum-bestof .mum-bo-news-form .mum-news-fine,
.mum-art-news-form .mum-news-status,
.mum-art-news-form .mum-news-fine {
    flex: 0 0 100%;
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
}

/* HONEYPOT. Hidden from people, still reachable by the bots that fill every field.
   Deliberately NOT `display:none` or `hidden` — the crude bots skip those, and it also has to
   stay out of the tab order and off the accessibility tree so a keyboard or screen-reader user
   never lands in it. */
.mum-news-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* ⚠️ ALL THREE BANDS SIT ON CORAL (#ff6a4d) — INCLUDING THE ARTICLE ONE.
   The first version of this file assumed the article band was cream and styled its fine print
   var(--text-soft) and its error var(--coral-deep). Measured against the real ground that is
   1.90:1 and 1.61:1 — the error message was coral on coral, i.e. invisible. Same failure as the
   Check-price CTA earlier in the build, and from the same cause: assuming a ground colour instead
   of reading it.
   Measured on #ff6a4d: white 2.83:1, --text-soft 1.90:1, --coral-deep 1.61:1, ink 6.05:1.
   So SMALL text on these bands must be INK, not white. The band's own heading is large-scale and
   keeps its white; this rule is only for the 12.5px consent line and status message, which are
   exactly the text that has to be legible.
   Success and failure are distinguished by the WORDS, not by colour — which is what a
   colour-blind reader needs anyway — so both states share the passing colour rather than one of
   them taking an unreadable tint to look different. */
.mum-news-form .mum-news-fine,
.mum-bestof .mum-bo-news-form .mum-news-fine,
.mum-art-news-form .mum-news-fine { color: var(--ink, #1f1b16); opacity: 0.86; }
.mum-news-form .mum-news-fine a,
.mum-bestof .mum-bo-news-form .mum-news-fine a,
.mum-art-news-form .mum-news-fine a { color: var(--ink, #1f1b16); text-decoration: underline; }

.mum-news-status { font-weight: 700; min-height: 0; color: var(--ink, #1f1b16); }
.mum-news-status:empty { display: none; }          /* no reserved gap before the first submit */

/* Submitting state: the button is disabled and relabelled by the JS, so this only has to stop it
   looking clickable. */
.mum-news-form button[disabled],
.mum-bestof .mum-bo-news-form button[disabled],
.mum-art-news-form button[disabled] { opacity: 0.65; cursor: default; }

/* After a successful signup the input and button are redundant. Hiding them leaves the thank-you
   alone in the band, which is clearer than an empty box inviting a second submit. */
.mum-news-form[data-done="1"] input:not(.mum-news-hp),
.mum-news-form[data-done="1"] button,
.mum-bestof .mum-bo-news-form[data-done="1"] input:not(.mum-news-hp),
.mum-bestof .mum-bo-news-form[data-done="1"] button,
.mum-art-news-form[data-done="1"] input:not(.mum-news-hp),
.mum-art-news-form[data-done="1"] button { display: none; }