/* ═══════════════════════════════════════════════════════════════
   MAISON MARGUERITE — Refined Interior Textiles
   ═══════════════════════════════════════════════════════════════ */

/* ── Cormorant Garamond, self-hosted ─────────────────────────────
   Was: @import from fonts.googleapis.com (Google CDN). Switched to
   local hosting after the LG München I 2022 ruling on Google Fonts +
   visitor IP exposure. The four files below are the latin + latin-ext
   subsets of v21; weight axis is variable, so one woff2 per style
   covers 300/400/500/600 — declared as a range in font-weight. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-normal-latin-1nPjtOG.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-normal-latin-ext-yjdli-z.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-italic-latin-Z98TJlT.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-italic-latin-ext-ey1rlQ5.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --mm-cream: #fbf9f7;
    --mm-sage: #16213e;
    --mm-charcoal: #2C2C2C;
    --mm-gold: #B8975C;
    --mm-linen: #f3efe8;
    --mm-white: #fbf9f7;
    --mm-light-grey: #faf9f7;
    --mm-border: #E8E4DD;
    --mm-text: #4A4A4A;
    --mm-heading: 'Cormorant Garamond', 'Georgia', serif;
    --mm-body: 'Georgia', 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
    overflow-x: clip;
}

body {
    font-family: var(--mm-body);
    color: var(--mm-text);
    background-color: var(--mm-white);
    line-height: 1.8;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mm-heading);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--mm-charcoal);
    line-height: 1.3;
}

h1 { font-size: 2.8rem; font-weight: 300; }
h2 { font-size: 2.2rem; font-weight: 300; }
h3 { font-size: 1.6rem; }

a {
    color: var(--mm-charcoal);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--mm-gold);
}

::selection {
    background: var(--mm-linen);
    color: var(--mm-charcoal);
}

/* ── Announcement Bar ── */
.mm-announcement {
    background-color: #16213e;
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: var(--mm-body);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
}

.mm-announcement__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Navigation: Two-Tier ── */
.mm-nav {
    background-color: var(--mm-white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    /* Above page-level sticky elements (e.g. the MTM configurator steps
       bar at z-index:50) so its dropdown panels can never be obscured. */
    z-index: 1000;
}

/* Row 1, left side: a short curated list of links, inline with the brand —
   not a tier of its own any more. See _navigation.html.twig; the wrapper
   keeps the name "mm-nav-top" because the hover-dropdown script and the
   dropdown-menu rules below still key off it.

   flex-shrink: 0 — belt and braces: this column's only other occupant at
   desktop width is the (hidden) mobile toggler, so there's normally
   nothing to compete with for space, but a grid track's automatic minimum
   is computed by seeing through .mm-nav-top__links' own flex-wrap: wrap to
   its narrowest possible line — its widest single word, not its full
   unwrapped width — so without an explicit floor here a grid recalculation
   elsewhere could hand this column less room than the links actually need
   and only find out via a wrap. */
.mm-nav-top {
    align-items: center;
    flex-shrink: 0;
}

.mm-nav-top__links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    /* The release valve flex-shrink:0 above declines to be: if a future
       label makes the list wider than expected, wrap to a second line
       rather than spill sideways out of the container. */
    flex-wrap: wrap;
}

/* Direct children only, for the same reason as the category row below:
   a mega panel is a descendant of one of these <li>s, and an unscoped
   selector styles everything inside it. */
.mm-nav-top__links > li > a {
    font-family: var(--mm-body);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-text);
    padding: 0.3rem 0.7rem;
    transition: color 0.3s;
    text-decoration: none;
    white-space: nowrap;
}

/* Hover marks the entry with an underline as well as the colour shift. The
   offset clears the descenders on the mixed-case panel links; on the
   uppercase nav rows it just reads as a little breathing room. The CTA is
   excluded here and below — an underline through a filled button looks like
   a rendering fault, not a state. */
.mm-nav-top__links > li > a:not(.mm-nav-highlight):hover {
    color: var(--mm-gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

/* Highlighted nav entry — quietly promotes a single item to a CTA */
.mm-nav-top__links > li > a.mm-nav-highlight,
.mm-nav-top__links > li.dropdown > a.dropdown-toggle.mm-nav-highlight {
    color: #fff;
    background: var(--mm-highlight, #1D4ED8);
    border-radius: 2px;
    padding: 0.4rem 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.mm-nav-top__links > li > a.mm-nav-highlight:hover {
    color: #fff;
    background: color-mix(in srgb, var(--mm-highlight, #1D4ED8) 88%, #000 12%);
}

/* Mobile drawer: highlighted top-level link */
.mm-nav-mobile__link.mm-nav-highlight,
.mm-nav-mobile__heading.mm-nav-highlight {
    color: #fff !important;
    background: var(--mm-highlight, #1D4ED8);
    border-radius: 2px;
    padding: 0.5rem 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    display: inline-block;
}

.mm-nav-top .dropdown-menu {
    border: 1px solid var(--mm-border);
    border-radius: 0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: 0.5rem 0;
}

.mm-nav-top .dropdown-item {
    font-size: 0.82rem;
    padding: 0.4rem 1.2rem;
    color: var(--mm-text);
    letter-spacing: 0.02em;
}

.mm-nav-top .dropdown-item:hover {
    background: var(--mm-cream);
    color: var(--mm-gold);
}

/* Brand row: curated links (desktop) + brand + search/account icons, one line */
.mm-nav-main {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--mm-border);
}

/* Four earlier attempts, four different failure modes:
   1. size-to-content (`flex: 0 1 auto` + `space-between`) can't overlap the
      wordmark, but with fewer links than the row has room for, the leftover
      space lands as two big gaps flanking the brand — detached rather than
      centred.
   2. `1fr auto 1fr` fixed that: it sizes to the ROW, not the content, so
      the two side columns are always equal width and the brand is always
      truly centred. (What made an earlier grid attempt dangerous was
      pairing it with `min-width: 0`, which lets a column resolve narrower
      than its own contents and nowrap text then paints outside it —
      without that override a grid track's minimum is its content's
      min-content width, the same floor `flex: 0 1 auto` had.)
   3. Pulling each column's content in against the brand
      (`justify-content: flex-end` / `flex-start`) closed those gaps — but
      the search box also had `flex-grow: 1` (below), so it alone absorbed
      the left column's slack while nothing on the right grows to match.
      Result: the row's outer margins went wildly uneven — search hugging
      the wordmark with almost no margin on the far left, everything left
      over stacked past the icons on the far right.

   So: each column hugs its OWN outer edge instead (default flex-start on
   the left, flex-end on the right — the same pairing the pre-redesign
   header used), and the search box no longer grows to fill spare column
   width. Slack now lands as a gap between content and the brand on
   whichever side is lighter, which reads as normal letter-spacing around a
   centred logo rather than a lopsided row.

   4. That still left the left column carrying both the link list AND the
      search box — far heavier than the account icons on the right — so
      keeping the two 1fr tracks equal-width (needed for a centred brand)
      meant sizing BOTH to whatever the heavy left side required. Search has
      since moved to the right column (see _navigation.html.twig), which is
      what actually closed the gap between the two sides' natural widths;
      this grid is what makes a centred brand possible once they're close,
      not what closes the gap itself. The link list's own `flex-wrap: wrap`
      (above) is still the release valve if a column's content can't fit
      even at minimum. */
.mm-nav-main__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.mm-nav-main__left,
.mm-nav-main__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mm-nav-main__right {
    justify-content: flex-end;
}

.mm-nav-main__brand {
    font-family: var(--mm-heading);
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--mm-charcoal);
    text-decoration: none;
    white-space: nowrap;
}

.mm-nav-main__brand:hover {
    color: var(--mm-charcoal);
}

.mm-nav-main__brand-img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 280px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.mm-nav-main__brand:hover .mm-nav-main__brand-img {
    opacity: 1;
}

/* Row 2: every active category, flat, plus the trade CTA — replaces the old
   "Shop ▾" dropdown so the categories are one click instead of two. Light
   cream, not the announcement bar's navy, to read as part of the page rather
   than a banner. */
.mm-nav-row2 {
    background: var(--mm-linen);
}

.mm-nav-row2__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.1rem;
    list-style: none;
    margin: 0;
    padding: 0.55rem 0;
}

/* Deliberately NOT position:relative: a category's panel is full-width and
   takes its position from .mm-nav (the nearest positioned ancestor, via its
   own position:sticky), the same way the top row's mega panel does. Making
   these items a containing block would pin each panel under its own label
   instead. See the note by .mm-nav-top .mm-mega__panel. */
.mm-nav-row2__item {
    position: static;
}

/* The open category reads as selected while its panel is down — without it
   the panel looks detached from the row, since the pointer has usually
   already left the label by the time it's being read. */
.mm-nav-row2__item--open > .mm-nav-row2__link {
    color: var(--mm-gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

/* The notch tying an open panel to the entry that opened it. A square
   rotated 45° and straddling the panel's top edge, not a drawn triangle:
   its own two borders continue the panel's outline, and its opaque face
   covers the length of top border it stands on — so the panel reads as
   having a corner pulled up toward the entry rather than a separate arrow
   parked above it. --mm-caret-x is measured per open (see the script in
   _navigation.html.twig); the 50% fallback keeps it centred if it's ever
   rendered without one. Row 1's panels don't get it: this is scoped to a
   category item, and Bootstrap positions those with Popper. */
.mm-nav-row2__item .mm-mega__panel::before {
    content: '';
    position: absolute;
    top: -5.5px;
    left: var(--mm-caret-x, 50%);
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    background: var(--mm-white);
    /* Gold rather than --mm-border: the panel and the row it sits under are
       four percent apart in every channel (#fbf9f7 on #f3efe8), so a notch
       drawn in the panel's own outline colour is invisible at the one place
       it has to be seen. Gold is already the open entry's colour, so the
       underline above and the notch below read as one mark. */
    border-left: 1px solid var(--mm-gold);
    border-top: 1px solid var(--mm-gold);
    transform: rotate(45deg);
}

/* Scoped to the row's own entries, not every anchor beneath them. The
   panel lives inside one of these <li>s, so an unscoped `.mm-nav-row2__links a`
   also styled its columns and tiles — and it carries `white-space: nowrap`,
   which is why a long product name under a tile ran straight through its
   neighbour and out of the sheet. It was overriding the panel's own type
   rules on specificity too, so the columns rendered in the row's small
   uppercase rather than the size they were written at. */
.mm-nav-row2__links > li > a {
    font-family: var(--mm-body);
    font-size: 0.64rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mm-text);
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s;
}

.mm-nav-row2__links > li > a:not(.mm-nav-highlight):hover {
    color: var(--mm-gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

.mm-nav-row2__links > li > a.mm-nav-highlight {
    color: #fff;
    background: var(--mm-highlight, #1D4ED8);
    border-radius: 2px;
    padding: 0.35rem 0.85rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

.mm-nav-row2__links > li > a.mm-nav-highlight:hover {
    color: #fff;
    background: color-mix(in srgb, var(--mm-highlight, #1D4ED8) 88%, #000 12%);
}

.mm-nav-main__icon {
    color: var(--mm-charcoal);
    position: relative;
    display: flex;
    align-items: center;
}

.mm-nav-main__icon--text {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mm-nav-main__icon:hover {
    color: var(--mm-gold);
}

/* ── Locale switcher pill (multi-locale tenants only) ───────────────── */
.mm-locale-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--mm-border, #e2e2dc);
    border-radius: 999px;
    padding: 2px;
    margin-right: 0.5rem;
}
.mm-locale-switcher__link {
    font-family: var(--mm-body);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    text-decoration: none;
    padding: 4px 9px;
    border-radius: 999px;
    line-height: 1;
    transition: background-color 120ms ease, color 120ms ease;
}
.mm-locale-switcher__link:hover {
    color: var(--mm-gold);
}
.mm-locale-switcher__link--active {
    background: var(--mm-charcoal);
    color: var(--mm-white);
}
.mm-locale-switcher__link--active:hover {
    color: var(--mm-white);
}

/* ── Footer selectors ──────────────────────────────────────────────
   Language and currency, in the footer where people look for them. Sized
   and spaced to sit under the brand blurb without competing with it. */
.mm-footer-selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
}
.mm-footer-selectors__group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 9rem;
}
.mm-footer-selectors__label {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.65;
}
.mm-footer-selectors__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 0.3rem 0 0.4rem;
    font-family: var(--mm-body);
    font-size: 0.92rem;
    color: inherit;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: opacity 120ms ease;
}
.mm-footer-selectors__toggle:hover { opacity: 0.7; }
.mm-footer-selectors__caret { font-size: 0.7rem; opacity: 0.7; }
.mm-footer-selectors .dropdown-menu {
    font-size: 0.85rem;
    min-width: 15rem;
}
/* The current entry, in the house charcoal rather than Bootstrap's blue —
   the one colour that appears nowhere else on this site. */
.mm-footer-selectors .dropdown-item.active,
.mm-footer-selectors .dropdown-item:active {
    background: var(--mm-charcoal);
    color: var(--mm-white);
}
.mm-footer-selectors__company {
    display: block;
    font-size: 0.75rem;
    opacity: 0.6;
}
.mm-footer-selectors .dropdown-item.active .mm-footer-selectors__company { opacity: 0.75; }

.mm-nav-main__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--mm-charcoal);
    color: var(--mm-white);
    font-size: 0.55rem;
    font-family: sans-serif;
    font-weight: 600;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Mobile nav */
.mm-nav-mobile {
    background: var(--mm-cream);
    border-bottom: 1px solid var(--mm-border);
    padding: 1.5rem 1.25rem 1rem;
    max-height: calc(100dvh - var(--mm-nav-main-height, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Highlighted top-level links rendered as full-width CTAs at the top of
   the mobile drawer. The DB-driven label keeps its custom highlight colour
   via --mm-highlight (set inline). Stacks vertically if there are several. */
.mm-nav-mobile__ctas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--mm-border);
}
.mm-nav-mobile__cta {
    display: block;
    background: var(--mm-highlight, var(--mm-gold));
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 0.85rem 1rem;
    border-radius: 4px;
    font-family: var(--mm-heading);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: filter 0.15s, transform 0.1s;
}
.mm-nav-mobile__cta:hover,
.mm-nav-mobile__cta:focus {
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
}
.mm-nav-mobile__cta:active { transform: translateY(1px); }

.mm-nav-mobile__section {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--mm-border);
}

.mm-nav-mobile__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}

.mm-nav-mobile__heading {
    display: block;
    font-family: var(--mm-heading);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin-bottom: 0.6rem;
}

.mm-nav-mobile__link {
    display: block;
    font-family: var(--mm-body);
    font-size: 0.88rem;
    color: var(--mm-text);
    text-decoration: none;
    padding: 0.45rem 0 0.45rem 0.5rem;
    transition: color 0.2s, padding-left 0.2s;
}

.mm-nav-mobile__link:hover {
    color: var(--mm-gold);
    padding-left: 0.8rem;
}

.mm-nav-mobile__link--all {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--mm-gold);
    margin-top: 0.2rem;
}

/* A curated category panel's links, carried into the drawer under their
   category. Indented and set smaller so a category with a panel still
   scans as one entry in the list rather than a dozen. */
.mm-nav-mobile__link--sub {
    padding-left: 1.5rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.mm-nav-mobile__link--sub:hover {
    padding-left: 1.8rem;
}

.mm-nav-mobile__section--plain .mm-nav-mobile__link {
    padding-left: 0;
    font-size: 0.92rem;
    font-family: var(--mm-heading);
    letter-spacing: 0.03em;
}

.mm-nav-mobile__section--plain .mm-nav-mobile__link:hover {
    padding-left: 0.3rem;
}

.navbar-toggler {
    border: none;
    padding: 0;
    color: var(--mm-charcoal);
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* ── Hero (full-bleed image) ── */
.mm-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 500px;
    max-height: 800px;
    overflow: hidden;
}

/* Text-only hero for service pages (no background image) */
.mm-hero--text {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 5rem 0 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #d5cfc6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mm-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(44,44,44,0.45) 0%, rgba(44,44,44,0.1) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 5rem;
}

.mm-hero__title {
    font-family: var(--mm-heading);
    /* Fluid clamp: scales between 2rem (small viewports) and 2.6rem
       (wide desktop) so multi-line hero copy doesn't break into ragged
       single-word lines like the Lucy Cushion banner did at the
       previous fixed 3.2rem. Headlines still read prominently without
       feeling shouted. */
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 300;
    color: #fff;
    line-height: 1.25;
    max-width: 720px;
    margin-bottom: 0.5rem;
}

.mm-hero__title em {
    font-style: italic;
}

.mm-hero__subtitle {
    font-family: var(--mm-body);
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ── Arrow CTA (reusable) ── */
.mm-arrow-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    margin-top: 1.5rem;
    transition: gap 0.3s;
}

.mm-arrow-cta__line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: currentColor;
    position: relative;
    transition: width 0.3s;
}

.mm-arrow-cta__line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -3px;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    padding: 3px;
    transform: rotate(-45deg);
}

.mm-arrow-cta:hover {
    color: #fff;
    gap: 1.2rem;
}

.mm-arrow-cta:hover .mm-arrow-cta__line {
    width: 56px;
}

.mm-arrow-cta--dark {
    color: var(--mm-charcoal);
}

.mm-arrow-cta--dark:hover {
    color: var(--mm-gold);
}

@media (max-width: 768px) {
    .mm-hero { height: 60vh; min-height: 400px; }
    .mm-hero__title { font-size: 2rem; }
    .mm-hero__overlay { padding-bottom: 3rem; }
}

/* ── Product Cards ── */
.mm-product-card {
    border: none;
    border-radius: 0;
    transition: transform 0.4s ease;
    overflow: hidden;
    background: transparent;
}

.mm-product-card:hover {
    transform: translateY(-3px);
}

.mm-product-card__image-wrap {
    position: relative;
    overflow: hidden;
}

.mm-product-card .card-img-top {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background-color: var(--mm-light-grey);
    transition: opacity 0.4s ease;
}

/* Cushions are roughly square (or rectangular lumbars), so a 4:5 portrait
   crop wastes space and forces inconsistent framing. 1:1 + auto-trim of
   the source whitespace (in ThumbnailService) makes the grid read as a
   coherent set even though the originals were shot at different distances. */
.mm-product-card--cushion .card-img-top {
    aspect-ratio: 1 / 1;
    background-color: #fff;
}

/* Trimmings (cord tiebacks, tassels, fringe …) are small objects shot
   on white. The thumbnail goes through auto-trim mode (4:5 frame,
   crop to product bbox + 11% pad) — the transparent surround needs a
   white card background so it blends in. Aspect stays 4:5 so trimming
   tiles line up with fabric and paint tiles on the shop grid. */
.mm-product-card--trimming .card-img-top {
    background-color: #fff;
}

.mm-product-card:hover .card-img-top {
    opacity: 0.92;
}

/* Gallery hover-swap: the secondary image lays on top of the main
   one, hidden by default. Card hover fades it in over the primary.
   Both images share the same aspect-ratio rule above so there's no
   layout shift during the swap. */
.mm-product-card__image--hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.mm-product-card:hover .mm-product-card__image--hover {
    opacity: 1;
}

.mm-product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-family: var(--mm-body);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    border: 1px solid var(--mm-charcoal);
    padding: 0.2rem 0.55rem;
    background: rgba(255,255,255,0.9);
    line-height: 1;
}

.mm-product-card .card-body {
    padding: 0.85rem 0.1rem;
    background: transparent;
    text-align: left;
    /* Bootstrap's .card is flex-column; pushing card-body to the bottom
       guarantees price+title baselines align when sibling cards have
       different image heights (mixed cushion/fabric/paint in one row). */
    margin-top: auto;
}

/* min-heights reserve room for a 2-line title and the price line, so a
   missing translation, a short name, or a price-less product can't pull
   neighbouring cards' baselines out of alignment. */
.mm-product-card .card-title {
    min-height: 2.5em;
}
.mm-product-card .card-text {
    min-height: 1.4em;
}

.mm-product-card .card-title {
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-bottom: 0.15rem;
}

.mm-product-card__from {
    font-size: 0.72rem;
    color: var(--mm-sage);
    letter-spacing: 0.03em;
}

.mm-product-card .card-title a {
    color: var(--mm-charcoal);
}

.mm-product-card .card-title a:hover {
    color: var(--mm-gold);
}

.mm-product-card .card-text {
    font-size: 0.85rem;
    color: var(--mm-text);
    font-weight: 400;
    letter-spacing: 0.03em;
}

/* ──────────────────────────────────────────────────────────────
   Paint-card variant — applied when category.slug == 'paint'.
   Goal: turn a flat coloured JPEG into something that reads as
   a paint chip. We do this with two stacked overlays and one
   floating label, all CSS-only (no second image needed).

   ::before  — paper-grain texture (SVG fractal noise inline)
               mix-blend-mode multiply so grain darkens the
               colour slightly without tinting it.
   ::after   — thin inset frame, ~12px from edge, 1px white
               line. Mimics the mat around a real paint card.
   .mm-paint-swatch__label — frosted-white pill bottom-left.
               Backdrop-filter degrades gracefully on Safari
               <16: falls back to solid 92% white, still legible
               on every chalk-paint colour we ship.
   ────────────────────────────────────────────────────────── */
.mm-product-card--paint .mm-product-card__image-wrap {
    /* contains absolutely-positioned ::before / ::after / label */
    position: relative;
}

.mm-product-card--paint .mm-product-card__image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.10;
    mix-blend-mode: multiply;
}

.mm-product-card--paint .mm-product-card__image-wrap::after {
    content: '';
    position: absolute;
    inset: 12px;
    pointer-events: none;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.mm-paint-swatch__label {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.45rem 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    line-height: 1.15;
    pointer-events: none; /* let the wrapping <a> capture clicks */
}

.mm-paint-swatch__brand {
    font-family: var(--mm-body);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-sage);
}

.mm-paint-swatch__color {
    font-family: var(--mm-heading);
    font-size: 0.92rem;
    color: var(--mm-charcoal);
    letter-spacing: 0.01em;
}

/* Title below the swatch stays visible for grid consistency
   with fabric / cushion products — the chip is a visual accent,
   not a replacement for the meta line. */

/* ── Horizontal Scroll Section (Amber-style product row) ── */
.mm-hscroll-section {
    position: relative;
}

.mm-hscroll-section__head {
    margin-bottom: 2rem;
}

.mm-hscroll-section__title {
    font-family: var(--mm-heading);
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--mm-charcoal);
    margin: 0;
}

.mm-hscroll {
    position: relative;
}

.mm-hscroll__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 clamp(1rem, 5vw, 3rem) 0.5rem;
    scroll-padding-left: clamp(1rem, 5vw, 3rem);
}

.mm-hscroll__track::-webkit-scrollbar {
    display: none;
}

.mm-hscroll__item {
    flex: 0 0 calc((100% - clamp(1rem, 5vw, 3rem) * 2 - 1.5rem * 3) / 4);
    scroll-snap-align: start;
    min-width: 0;
}

.mm-hscroll__nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mm-border);
    background: var(--mm-white);
    color: var(--mm-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;
}

.mm-hscroll__nav:hover {
    background: var(--mm-cream);
    transform: translateY(-50%) scale(1.05);
}

.mm-hscroll__nav[hidden] {
    display: none;
}

.mm-hscroll__nav--prev {
    left: clamp(0.5rem, 2vw, 1.5rem);
}

.mm-hscroll__nav--next {
    right: clamp(0.5rem, 2vw, 1.5rem);
}

@media (max-width: 992px) {
    .mm-hscroll-section__title {
        font-size: 1.5rem;
    }
    .mm-hscroll__item {
        flex: 0 0 calc((100% - clamp(1rem, 5vw, 3rem) * 2 - 1.5rem * 2) / 3);
    }
    .mm-hscroll__nav {
        display: none;
    }
}

@media (max-width: 640px) {
    .mm-hscroll__item {
        flex: 0 0 calc((100% - clamp(1rem, 5vw, 3rem) * 2 - 1rem) / 2);
    }
    .mm-hscroll__track {
        gap: 1rem;
    }
}

/* ── Product Placeholder ── */
.mm-product-placeholder {
    aspect-ratio: 4 / 5;
    background-color: var(--mm-light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mm-border);
    font-family: var(--mm-heading);
    font-size: 3rem;
    font-weight: 300;
}

/* ── Buttons ── */
.btn-mm {
    background-color: var(--mm-charcoal);
    color: var(--mm-white);
    border: 1px solid var(--mm-charcoal);
    border-radius: 0;
    padding: 0.75rem 2.5rem;
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-mm:hover {
    background-color: var(--mm-gold);
    border-color: var(--mm-gold);
    color: var(--mm-white);
}

.btn-mm-outline {
    background-color: transparent;
    color: var(--mm-charcoal);
    border: 1px solid var(--mm-charcoal);
    border-radius: 0;
    padding: 0.75rem 2.5rem;
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-mm-outline:hover {
    background-color: var(--mm-charcoal);
    color: var(--mm-white);
}

/* ── Shop Title ── */
.mm-shop-title {
    text-align: center;
    font-family: var(--mm-heading);
    font-size: 2.8rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

/* ── Colour chips (fabrics filter row) ── */
.mm-color-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    background: #fbf9f4;
    border: 1px solid var(--mm-border, #e8e4db);
    border-radius: 4px;
}
.mm-color-chips__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem 0.4rem 0.5rem;
    background: white;
    border: 1px solid var(--mm-border, #e8e4db);
    border-radius: 999px;
    font-family: var(--mm-body);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--mm-charcoal);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.mm-color-chips__chip--all {
    padding-left: 0.85rem; /* no swatch — equal padding */
}
.mm-color-chips__chip:hover {
    border-color: var(--mm-gold);
    color: var(--mm-charcoal);
    text-decoration: none;
}
.mm-color-chips__chip:active { transform: translateY(1px); }
.mm-color-chips__chip.is-active {
    background: var(--mm-charcoal);
    color: #fff;
    border-color: var(--mm-charcoal);
}
.mm-color-chips__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
/* "Other" — diagonal hatch so the chip reads as "unclassified" rather
   than a real colour. */
.mm-color-chips__swatch--other {
    background: repeating-linear-gradient(
        45deg,
        #d6d2c8 0,
        #d6d2c8 3px,
        #f4f0e6 3px,
        #f4f0e6 6px
    );
}
.mm-color-chips__label { line-height: 1; }

/* Subcategory strip — the divisions of the category being browsed, above the
   colour chips because it's the coarser cut of the two.

   A tile is picture-led where there's a picture and text-only where there
   isn't, rather than reserving an empty image box: a division that nobody
   has filed a product under yet is a normal state here (the shop is
   merchandised before it's stocked), and a row of grey placeholders would
   read as broken images. Both shapes share a height so the strip stays a
   line rather than a ragged edge. */
.mm-subcats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}

.mm-subcats__tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 56px;
    padding: 0.35rem 1rem 0.35rem 0.35rem;
    background: #fff;
    border: 1px solid var(--mm-border, #e8e4db);
    border-radius: 2px;
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.mm-subcats__tile--all,
.mm-subcats__tile:not(:has(.mm-subcats__img)) {
    padding-left: 1rem;
}

.mm-subcats__img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 1px;
    flex-shrink: 0;
}

.mm-subcats__tile:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

.mm-subcats__tile.is-active {
    border-color: var(--mm-charcoal);
    color: var(--mm-charcoal);
    box-shadow: inset 0 -2px 0 var(--mm-gold);
}

@media (max-width: 640px) {
    .mm-subcats__tile {
        min-height: 44px;
        font-size: 0.68rem;
        padding-right: 0.75rem;
    }
    .mm-subcats__img {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 640px) {
    .mm-color-chips {
        padding: 0.65rem 0.75rem;
        gap: 0.4rem;
    }
    .mm-color-chips__chip {
        padding: 0.35rem 0.7rem 0.35rem 0.4rem;
        font-size: 0.72rem;
    }
    .mm-color-chips__chip--all { padding-left: 0.7rem; }
    .mm-color-chips__swatch { width: 14px; height: 14px; }
}

/* ── Filter Bar ── */
.mm-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.2rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--mm-border);
}

.mm-filter-bar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mm-filter-bar__count {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-sage);
}

.mm-filter-bar__right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.mm-filter-dropdown {
    position: relative;
}

.mm-filter-dropdown__btn {
    background: none;
    border: none;
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    cursor: pointer;
    padding: 0.3rem 0;
}

.mm-filter-dropdown__btn:hover {
    color: var(--mm-gold);
}

.mm-filter-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--mm-white);
    border: 1px solid var(--mm-border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: 0.5rem 0;
    min-width: 180px;
    z-index: 100;
    display: none;
    list-style: none;
    margin: 0;
}

.mm-filter-dropdown--open .mm-filter-dropdown__menu {
    display: block;
}

.mm-filter-dropdown__menu li a {
    display: block;
    padding: 0.4rem 1.2rem;
    font-size: 0.82rem;
    color: var(--mm-text);
}

.mm-filter-dropdown__menu li a:hover,
.mm-filter-dropdown__menu li a.active {
    background: var(--mm-cream);
    color: var(--mm-gold);
}

@media (max-width: 768px) {
    .mm-filter-bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .mm-shop-title { font-size: 2rem; }
}

/* ── Filter Pills ── */
.mm-filter-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.mm-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    background: var(--mm-charcoal);
    color: var(--mm-cream);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
}

.mm-filter-pill:hover {
    background: var(--mm-gold);
    color: var(--mm-white);
}

.mm-filter-pill span {
    opacity: 0.5;
    font-size: 0.8rem;
}

.mm-filter-clear {
    font-size: 0.68rem;
    color: var(--mm-sage);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.mm-filter-clear:hover {
    color: var(--mm-gold);
}

/* ── Editorial Collection Blocks ── */
.mm-editorial__heading {
    text-align: center;
    font-family: var(--mm-heading);
    font-size: 2.2rem;
    font-weight: 300;
    margin-bottom: 3rem;
}

.mm-editorial__image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
    transition: opacity 0.4s;
}

.mm-editorial__image--empty {
    background-color: var(--mm-linen);
}

.mm-editorial__block:hover .mm-editorial__image {
    opacity: 0.92;
}

.mm-editorial__content h3 {
    font-family: var(--mm-heading);
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.mm-editorial__content p {
    color: var(--mm-sage);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    max-width: 400px;
    line-height: 1.6;
}

/* ── Footer ── */
.mm-footer {
    background-color: var(--mm-cream);
    color: var(--mm-text);
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--mm-border);
}

/* All three column headings share this treatment. The markup mixes h5
   (brand) and h6 (Quick Links / Contact) for document-outline reasons —
   without h6 here those two fell through to the global serif heading
   rule and rendered visibly larger and in a different face than the
   brand column. */
.mm-footer h5,
.mm-footer h6 {
    font-family: var(--mm-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    color: var(--mm-charcoal);
    font-weight: 400;
}

.mm-footer a {
    color: var(--mm-text);
    font-size: 0.85rem;
    transition: color 0.3s;
}

/* Contact column: email + phone are links (0.85rem above) but the address
   is plain text, so it inherited the 15px body size and sat noticeably
   larger than the two lines above it. Match them.
   Scoped to the contact column rather than `.mm-footer p` because the
   legal-footer renders operator-editable HTML that sets its own size. */
.mm-footer__contact p {
    font-size: 0.85rem;
}

.mm-footer a:hover {
    color: var(--mm-gold);
}

.mm-footer .legal-footer {
    border-top: 1px solid var(--mm-border);
    padding-top: 2rem;
    margin-top: 3rem;
    font-size: 0.72rem;
    color: var(--mm-sage);
}

/* ── Cart ── */
.mm-cart-item {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 1px solid var(--mm-border);
}

.mm-cart-item:first-child {
    border-top: 1px solid var(--mm-border);
}

.mm-cart-item__image {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
}

.mm-cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mm-cart-item__body {
    flex-grow: 1;
    min-width: 0;
}

.mm-cart-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mm-cart-item__name {
    font-family: var(--mm-heading);
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.1rem;
}

.mm-cart-item__name a {
    color: var(--mm-charcoal);
}

.mm-cart-item__name a:hover {
    color: var(--mm-gold);
}

.mm-cart-item__category {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-sage);
}

.mm-cart-item__remove {
    border: none;
    background: none;
    color: var(--mm-border);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.mm-cart-item__remove:hover {
    color: var(--mm-charcoal);
}

.mm-cart-item__remove-text {
    border: none;
    background: none;
    color: var(--mm-sage);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.mm-cart-item__remove-text:hover {
    color: #c44;
}

.mm-cart-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.mm-cart-item__qty {
    display: flex;
    align-items: center;
}

.mm-qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--mm-border);
    background: var(--mm-white);
    color: var(--mm-charcoal);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-family: sans-serif;
    line-height: 1;
    padding: 0;
}

.mm-qty-btn:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

.mm-qty-field {
    width: 44px;
    height: 36px;
    border: 1px solid var(--mm-border);
    border-left: none;
    border-right: none;
    text-align: center;
    font-family: var(--mm-body);
    font-size: 0.9rem;
    color: var(--mm-charcoal);
    -moz-appearance: textfield;
    appearance: textfield;
}

.mm-qty-field::-webkit-inner-spin-button,
.mm-qty-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mm-cart-item__price {
    text-align: right;
}

.mm-cart-item__total {
    font-family: var(--mm-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--mm-charcoal);
}

.mm-cart-spec {
    background: var(--mm-cream);
    border-left: 2px solid var(--mm-gold);
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.mm-cart-spec__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 2rem;
}

.mm-cart-spec__item {
    display: flex;
    flex-direction: column;
}

.mm-cart-spec__label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-sage);
    line-height: 1;
}

.mm-cart-spec__value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mm-charcoal);
}

.mm-cart-summary {
    background: var(--mm-cream);
    padding: 1.5rem;
}

.mm-cart-summary__row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.mm-cart-summary__note {
    font-size: 0.8rem;
    color: var(--mm-sage);
    margin-bottom: 1.2rem;
}

@media (max-width: 576px) {
    .mm-cart-item {
        flex-direction: column;
    }
    .mm-cart-item__image {
        width: 100%;
        height: 200px;
    }
    .mm-cart-spec__grid {
        grid-template-columns: 1fr;
    }
    .mm-cart-item__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ── Pagination ── */
.pagination {
    gap: 0.25rem;
}

.pagination .page-item .page-link {
    border: none;
    border-radius: 0;
    color: var(--mm-text);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.9rem;
    background: transparent;
    transition: all 0.2s;
    font-family: var(--mm-body);
}

.pagination .page-item .page-link:hover {
    background: var(--mm-cream);
    color: var(--mm-gold);
}

.pagination .page-item.active .page-link {
    background: var(--mm-charcoal);
    color: var(--mm-white);
}

.pagination .page-item.disabled .page-link {
    color: var(--mm-border);
    background: transparent;
}

/* ═══════════════════════════════════════════
   Fabric Configurator
   ═══════════════════════════════════════════ */

.mm-configurator {
    border-top: 1px solid var(--mm-border);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

/* ── Step Wizard Indicator ── */
.mm-configurator__steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 0 0 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--mm-border);
}

.mm-configurator__step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.mm-configurator__step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-heading);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums; /* uniform height numerals */
    border: 2px solid var(--mm-border);
    color: var(--mm-sage);
    background: var(--mm-white);
    transition: all 0.3s;
}

.mm-configurator__step-dot:hover .mm-configurator__step-number {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

.mm-configurator__step-name {
    font-family: var(--mm-body);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-sage);
    transition: color 0.3s;
    /* Reserve bold width so layout doesn't shift on active */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.mm-configurator__step-name::after {
    content: attr(data-label);
    font-weight: 600;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.mm-configurator__step-line {
    flex: 1;
    height: 2px;
    background: var(--mm-border);
    margin: 0 0.3rem;
    margin-top: 20px; /* align with larger dot center */
    transition: background 0.3s;
}

.mm-configurator__step-dot--active .mm-configurator__step-number {
    background: var(--mm-charcoal);
    border-color: var(--mm-charcoal);
    color: var(--mm-white);
    box-shadow: 0 0 0 3px rgba(44, 42, 38, 0.12);
}

.mm-configurator__step-dot--active .mm-configurator__step-name {
    color: var(--mm-charcoal);
    font-weight: 600;
}

.mm-configurator__step-dot--completed .mm-configurator__step-number {
    background: var(--mm-sage);
    border-color: var(--mm-sage);
    color: var(--mm-white);
}

.mm-configurator__step-dot--completed .mm-configurator__step-name {
    color: var(--mm-sage);
}

.mm-configurator__step-line--completed {
    background: var(--mm-sage);
}

/* ── Step Navigation Buttons ── */
/* Step panels use flex to push nav to bottom of a uniform height */
[data-configurator-target="stepPanel"] {
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.mm-configurator__step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0 0.5rem;
    margin-top: auto; /* push to bottom of flex container */
    border-top: 1px solid var(--mm-border);
}

.mm-configurator__step-continue {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 2rem;
    background: var(--mm-charcoal);
    color: var(--mm-white);
    border: 1px solid var(--mm-charcoal);
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: auto;
}

.mm-configurator__step-continue:hover {
    background: var(--mm-gold);
    border-color: var(--mm-gold);
}

.mm-configurator__step-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: var(--mm-sage);
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 0.75rem 0;
    transition: color 0.3s;
}

.mm-configurator__step-back:hover {
    color: var(--mm-charcoal);
}

/* ── Mobile Preview (moved into right column on small screens) ── */
.mm-configurator__mobile-preview {
    display: none;
}

@media (max-width: 768px) {
    .mm-configurator__mobile-preview {
        display: block;
        position: sticky;
        top: 55px;
        z-index: 10;
        background: var(--mm-light-grey);
        padding: 0.5rem;
        margin: 0 -0.75rem 1rem;
        border-bottom: 1px solid var(--mm-border);
    }

    .mm-configurator__mobile-preview .mm-configurator__preview--sidebar {
        position: static;
        margin-top: 0;
        padding: 0.5rem;
    }

    .mm-configurator__mobile-preview svg {
        max-height: 140px;
        width: 100%;
    }

    .mm-configurator__step-name {
        font-size: 0.5rem;
    }
}

@media (max-width: 480px) {
    .mm-configurator__step-name {
        display: none;
    }

    .mm-configurator__step-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .mm-configurator__step-line {
        margin-top: 16px;
    }
}

.mm-configurator__section {
    margin-bottom: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--mm-border);
}

/* Collapsible sections */
.mm-configurator__collapsible {
    margin-bottom: 1rem;
}

.mm-configurator__collapse-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.7rem 0;
    border: none;
    border-bottom: 1px solid var(--mm-border);
    background: none;
    cursor: pointer;
    gap: 0.5rem;
    text-align: left;
    outline: none;
}

.mm-configurator__collapse-header:focus-visible {
    border-bottom-color: var(--mm-gold);
}

.mm-configurator__collapse-header .mm-configurator__label {
    margin: 0;
    flex-shrink: 0;
}

.mm-configurator__collapse-summary {
    flex: 1;
    font-size: 0.85rem;
    color: var(--mm-charcoal);
    font-weight: 500;
    text-align: right;
    padding-right: 0.25rem;
}

/* Peek strip — mini icons showing available options */
.mm-configurator__collapse-peek {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: flex-end;
    padding-right: 0.5rem;
}

.mm-configurator__peek-icon {
    width: 32px;
    height: 16px;
    opacity: 0.3;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.mm-configurator__peek-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mm-configurator__peek-icon--active {
    opacity: 1;
}

.mm-configurator__collapse-header:hover .mm-configurator__peek-icon {
    opacity: 0.55;
}

.mm-configurator__collapse-header:hover .mm-configurator__peek-icon--active {
    opacity: 1;
}

.mm-configurator__collapse-chevron {
    flex-shrink: 0;
    color: var(--mm-sage);
    transition: transform 0.25s ease;
}

.mm-configurator__collapse-header[aria-expanded="true"] .mm-configurator__collapse-chevron {
    transform: rotate(180deg);
}

.mm-configurator__collapse-body {
    padding: 0.75rem 0 0;
}

.mm-configurator__collapse-body .mm-configurator__options {
    margin-top: 0;
}

/* Unit toggle */
.mm-configurator__unit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.mm-configurator__unit-row .mm-configurator__label {
    margin: 0;
}

.mm-configurator__unit-toggle {
    display: flex;
    gap: 0;
}

.mm-configurator__unit-btn {
    cursor: pointer;
    margin: 0;
}

.mm-configurator__unit-btn input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.mm-configurator__unit-btn span {
    display: block;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--mm-border);
    font-size: 0.75rem;
    font-family: var(--mm-body);
    color: var(--mm-sage);
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.mm-configurator__unit-btn:first-child span {
    border-right: none;
}

.mm-configurator__unit-btn input:checked + span {
    background: var(--mm-charcoal);
    border-color: var(--mm-charcoal);
    color: var(--mm-white);
}

.mm-configurator__unit-btn:hover span {
    border-color: var(--mm-gold);
}

/* Room Presets */
.mm-configurator__presets {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mm-configurator__preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--mm-border);
    background: var(--mm-white);
    cursor: pointer;
    font-family: var(--mm-body);
    font-size: 0.78rem;
    color: var(--mm-charcoal);
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
    text-align: center;
    line-height: 1.3;
}

.mm-configurator__preset-btn span {
    font-size: 0.65rem;
    color: var(--mm-sage);
    margin-top: 2px;
}

.mm-configurator__preset-btn svg {
    width: 44px;
    height: 32px;
    margin-bottom: 3px;
    color: var(--mm-sage);
    transition: color 0.3s ease;
}

.mm-configurator__preset-btn:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

.mm-configurator__preset-btn:hover svg {
    color: var(--mm-gold);
}

.mm-configurator__preset-btn:hover span {
    color: var(--mm-gold);
}

.mm-configurator__preset-btn--active {
    border-color: var(--mm-charcoal);
    background-color: var(--mm-cream);
}

.mm-configurator__preset-btn--active svg {
    color: var(--mm-gold);
}

.mm-configurator__label {
    font-family: var(--mm-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-charcoal);
    margin-bottom: 0.4rem;
    font-weight: 400;
}

.mm-configurator__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.mm-configurator__options--compact {
    grid-template-columns: repeat(3, 1fr);
}

.mm-configurator__radio {
    cursor: pointer;
    margin: 0;
    position: relative;
}

.mm-configurator__radio input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    top: 50%;
    left: 50%;
}

.mm-configurator__radio input:focus {
    outline: none;
}

.mm-configurator__radio-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.7rem 0.5rem;
    border: 1px solid var(--mm-border);
    transition: all 0.3s ease;
    text-align: center;
    background: transparent;
}

.mm-configurator__radio input:checked + .mm-configurator__radio-box {
    border-color: var(--mm-charcoal);
    background-color: var(--mm-cream);
}

.mm-configurator__radio:hover .mm-configurator__radio-box {
    border-color: var(--mm-gold);
}

.mm-configurator__radio-icon {
    display: block;
    margin-bottom: 0.4rem;
}

.mm-configurator__radio-icon svg {
    width: 56px;
    height: 22px;
}

.mm-configurator__radio-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mm-charcoal);
    line-height: 1.2;
}

.mm-configurator__radio-detail {
    font-size: 0.68rem;
    color: var(--mm-sage);
    margin-top: 2px;
}

.mm-configurator__breakdown {
    background: var(--mm-light-grey);
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--mm-border);
}

.mm-configurator__breakdown-table {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.mm-configurator__breakdown-table td {
    padding: 0.35rem 0;
}

.mm-configurator__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--mm-charcoal);
    padding-top: 1rem;
    font-family: var(--mm-heading);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--mm-charcoal);
}

/* Fullness selector */
.mm-configurator__fullness-presets {
    display: flex;
    gap: 0.5rem;
}

.mm-configurator__fullness-preset {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.5rem;
    border: 1px solid var(--mm-border);
    background: var(--mm-white);
    cursor: pointer;
    font-family: var(--mm-heading);
    font-size: 1.05rem;
    color: var(--mm-charcoal);
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.2;
}

.mm-configurator__fullness-preset span {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    color: var(--mm-sage);
    margin-top: 2px;
    letter-spacing: 0.05em;
}

.mm-configurator__fullness-preset:hover {
    border-color: var(--mm-gold);
}

.mm-configurator__fullness-preset--active {
    border-color: var(--mm-charcoal);
    background-color: var(--mm-cream);
}

.mm-configurator__fullness-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* Fullness slider */
.mm-configurator__fullness-slider {
    margin-top: 0.75rem;
}

.mm-configurator__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, var(--mm-gold) 0%, var(--mm-gold) 50%, var(--mm-border) 50%, var(--mm-border) 100%);
}

.mm-configurator__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--mm-gold);
    border-radius: 50%;
    border: 2px solid var(--mm-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.mm-configurator__range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 4px rgba(184, 151, 92, 0.15), 0 1px 3px rgba(0,0,0,0.18);
}

.mm-configurator__range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--mm-gold);
    border-radius: 50%;
    border: 2px solid var(--mm-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
}

.mm-configurator__range::-moz-range-progress {
    background: var(--mm-gold);
    height: 3px;
    border-radius: 2px;
}

/* Dimension row: label+value header, full-width slider below */
.mm-configurator__dim-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mm-configurator__dim-row .mm-configurator__range {
    width: 100%;
}

.mm-configurator__dim-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.mm-configurator__dim-header .mm-configurator__label {
    margin-bottom: 0;
}

.mm-configurator__range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--mm-sage);
    margin-top: 3px;
    letter-spacing: 0.05em;
}

.mm-dimension-input--small {
    max-width: 90px;
}

.mm-dimension-input--small input {
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

/* Pair mode */
.mm-configurator__options--pair {
    grid-template-columns: 1fr 1fr;
}

.mm-configurator__pair-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--mm-gold);
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--mm-charcoal);
}

/* Share configuration */
.mm-configurator__share {
    text-align: center;
    margin-top: 0.75rem;
}

.mm-configurator__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: var(--mm-sage);
    font-family: var(--mm-body);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 0.2rem 0;
    transition: color 0.3s;
}

.mm-configurator__share-btn:hover {
    color: var(--mm-gold);
}

/* Cart bar */
.mm-configurator__cart-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 1rem;
    border: 1px solid var(--mm-charcoal);
}

.mm-configurator__step-nav .mm-configurator__cart-bar {
    margin-bottom: 0;
}

.mm-configurator__qty {
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--mm-charcoal);
}

.mm-configurator__qty-btn {
    width: 48px;
    background: var(--mm-white);
    border: none;
    color: var(--mm-charcoal);
    font-size: 1.4rem;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    font-family: sans-serif;
    line-height: 1;
}

.mm-configurator__qty-btn:hover {
    background: var(--mm-cream);
    color: var(--mm-gold);
}

.mm-configurator__qty-input {
    width: 52px;
    border: none;
    border-left: 1px solid var(--mm-border);
    border-right: 1px solid var(--mm-border);
    text-align: center;
    font-family: var(--mm-heading);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--mm-charcoal);
    background: var(--mm-white);
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
}

.mm-configurator__qty-input::-webkit-inner-spin-button,
.mm-configurator__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mm-configurator__add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem; /* match Continue button height */
    background: var(--mm-charcoal);
    color: var(--mm-white);
    border: none;
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}

.mm-configurator__add-btn:hover {
    background: var(--mm-gold);
}

.mm-configurator__add-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.mm-configurator__actions {
    margin-bottom: 1rem;
}

.mm-configurator__actions .form-control {
    border-radius: 0;
    border-color: var(--mm-border);
}

/* Dimension input (width/length) */
.mm-dimension-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.mm-dimension-input input {
    width: 3.5em;
    padding: 0rem 0;
    padding-right: 1.6rem;
    font-family: var(--mm-heading);
    font-size: 1.4rem;
    color: var(--mm-charcoal);
    border: none;
    border-radius: 0;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
    background: transparent;
}

.mm-dimension-input input::-webkit-inner-spin-button,
.mm-dimension-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mm-dimension-input input:focus {
    outline: none;
    box-shadow: none;
}

.mm-dimension-input__unit,
.mm-configurator__unit-suffix {
    position: absolute;
    right: 0;
    bottom: 0.1rem;
    color: var(--mm-charcoal);
    font-size: 0.85rem;
    font-family: var(--mm-heading);
    letter-spacing: 0.04em;
    pointer-events: none;
    background: none;
    border: none;
    padding: 0;
    white-space: nowrap;
}

.mm-configurator__hint {
    font-size: 0.72rem;
    color: var(--mm-sage);
    margin-top: 0.4rem;
    margin-bottom: 0;
    font-style: italic;
}

/* ── Compact actions row (measuring guide / sample / wishlist) ── */
.mm-configurator__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mm-border);
}

.mm-configurator__action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mm-body);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--mm-text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.mm-configurator__action-link:hover {
    color: var(--mm-gold);
}

.mm-configurator__action-link svg {
    opacity: 0.6;
    flex-shrink: 0;
}

.mm-configurator__action-link:hover svg {
    opacity: 1;
}

.mm-configurator__action-divider {
    width: 1px;
    height: 14px;
    background: var(--mm-border);
}

.mm-configurator__action-form {
    display: inline-flex;
}

@media (max-width: 768px) {
    .mm-configurator__options {
        grid-template-columns: 1fr 1fr;
    }
    .mm-configurator__options--compact {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .mm-configurator__options {
        grid-template-columns: 1fr;
    }
    .mm-configurator__options--compact {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Page Content ── */
.mm-page-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 4rem 1rem;
}

.mm-page-content h2 {
    margin-bottom: 1.5rem;
}

.mm-page-content h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--mm-sage);
    font-size: 1.3rem;
}

/* ── Contact Info ── */
.mm-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mm-contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.mm-contact-info__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mm-cream);
    color: var(--mm-sage);
}

.mm-contact-info__item a {
    color: var(--mm-text);
    text-decoration: none;
}

.mm-contact-info__item a:hover {
    color: var(--mm-gold);
}

/* ── Checkout ── */
.mm-checkout-form .mb-3 {
    margin-bottom: 1.2rem !important;
}

.mm-checkout-form label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-sage);
    margin-bottom: 0.35rem;
    font-weight: 400;
}

.mm-checkout-form input[type="text"],
.mm-checkout-form input[type="email"],
.mm-checkout-form input[type="tel"],
.mm-checkout-form select,
.mm-checkout-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: var(--mm-body);
    font-size: 0.9rem;
    color: var(--mm-charcoal);
    background: var(--mm-white);
    border: 1px solid var(--mm-border);
    border-radius: 0;
    transition: border-color 0.3s;
}

.mm-checkout-form input:focus,
.mm-checkout-form select:focus,
.mm-checkout-form textarea:focus {
    outline: none;
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 2px rgba(184, 151, 92, 0.1);
}

.mm-checkout-form .form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mm-checkout-form .form-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--mm-gold);
    border-radius: 0;
    cursor: pointer;
    margin: 0;
}

.mm-checkout-form .form-check-label {
    display: inline;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: var(--mm-text);
    cursor: pointer;
}

.mm-checkout-section {
    margin-bottom: 2.5rem;
}

.mm-checkout-section__title {
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--mm-charcoal);
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mm-border);
}

.mm-checkout-billing-toggle {
    margin-bottom: 1rem;
}

/* Checkout Summary (sticky sidebar) */
.mm-checkout-summary {
    background: var(--mm-cream);
    padding: 1.5rem;
    position: sticky;
    top: 2rem;
}

.mm-checkout-summary__item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--mm-border);
}

.mm-checkout-summary__item:first-of-type {
    padding-top: 0;
}

.mm-checkout-summary__image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    flex-shrink: 0;
}

.mm-checkout-summary__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mm-charcoal);
}

.mm-checkout-summary__spec {
    font-size: 0.72rem;
    color: var(--mm-sage);
    margin-top: 2px;
}

.mm-checkout-summary__qty {
    font-size: 0.75rem;
    color: var(--mm-sage);
    margin-top: 2px;
}

.mm-checkout-summary__price {
    font-family: var(--mm-heading);
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mm-checkout-summary__totals {
    padding-top: 1rem;
}

.mm-checkout-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.mm-checkout-summary__row--total {
    border-top: 1px solid var(--mm-charcoal);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-family: var(--mm-heading);
    font-size: 1.3rem;
    font-weight: 500;
}

/* ── Stripe payment element ── */
/* ── Soft maintenance page ── */
.mm-maintenance {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mm-cream, #fbf9f7);
    color: var(--mm-charcoal, #2C2C2C);
    font-family: var(--mm-body, Georgia, serif);
    padding: 1.5rem;
}
.mm-maintenance__inner {
    max-width: 480px;
    width: 100%;
    text-align: center;
}
.mm-maintenance__brand {
    font-family: var(--mm-heading, 'Cormorant Garamond', serif);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--mm-gold, #B8975C);
    margin-bottom: 2rem;
}
.mm-maintenance__title {
    font-family: var(--mm-heading, 'Cormorant Garamond', serif);
    font-weight: 300;
    font-size: 2.4rem;
    margin: 0 0 1rem 0;
    line-height: 1.15;
}
.mm-maintenance__lede {
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 2.5rem 0;
    color: #5a5550;
}
.mm-maintenance__form {
    text-align: left;
    margin-bottom: 1.5rem;
}
.mm-maintenance__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    color: #6a6560;
}
.mm-maintenance__row {
    display: flex;
    gap: 0.5rem;
}
.mm-maintenance__row input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d6cfc4;
    background: #fff;
    border-radius: 3px;
    font-family: inherit;
    font-size: 1rem;
}
.mm-maintenance__row input:focus {
    outline: 2px solid var(--mm-gold, #B8975C);
    outline-offset: 1px;
    border-color: var(--mm-gold, #B8975C);
}
.mm-maintenance__row button {
    padding: 0.7rem 1.3rem;
    background: var(--mm-sage, #16213e);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-family: var(--mm-heading, 'Cormorant Garamond', serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms ease;
}
.mm-maintenance__row button:hover:not(:disabled) {
    background: #0f1830;
}
.mm-maintenance__row button:disabled {
    opacity: 0.55;
    cursor: progress;
}
.mm-maintenance__error {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.8rem;
    background: #fdecea;
    color: #8a1f1f;
    border-radius: 3px;
    font-size: 0.9rem;
}
.mm-maintenance__contact {
    font-size: 0.85rem;
    color: #6a6560;
}
.mm-maintenance__contact a {
    color: var(--mm-sage, #16213e);
}

.mm-stripe-element {
    margin: 0.75rem 0 0.25rem;
    padding: 0.75rem;
    border: 1px solid #e7e2d8;
    border-radius: 6px;
    background: #fff;
    min-height: 220px;
}

/* ── Payment card (Revolut checkout) ────────────────────────────────────
   The full payment form on the right side of /checkout/payment/{token}.
   Reads as one self-contained white card on the cream page so it carries
   visual weight on its own; soft shadow + border so it sits cleanly above
   the background without floating away. */
.mm-payment-card {
    background: #fff;
    border: 1px solid var(--mm-border);
    border-radius: 8px;
    padding: 1.75rem;
    box-shadow:
        0 2px 8px rgba(44, 44, 44, 0.04),
        0 1px 2px rgba(44, 44, 44, 0.02);
}

.mm-payment-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mm-border);
}

.mm-payment-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--mm-heading);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--mm-charcoal);
}
.mm-payment-card__title svg {
    color: var(--mm-gold);
    flex-shrink: 0;
}

/* Accepted-cards row in the header — flat brand SVGs sourced from
   aaronfagan/svg-credit-card-payment-icons (MIT). Fixed aspect so the
   three pills line up cleanly regardless of which logo is widest. */
.mm-payment-card__brands {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}
.mm-card-brand {
    display: block;
    height: 24px;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
    user-select: none;
}

/* Field group inside the payment card — uppercase mini-label sitting
   above each input. Matches how Stripe/Aesop/most premium checkouts
   structure their card forms. */
.mm-payment-card__field {
    margin-bottom: 1rem;
}
.mm-payment-card__field:last-of-type {
    margin-bottom: 1.25rem;
}
.mm-payment-card__label {
    display: block;
    margin-bottom: 0.4rem;
    font: 500 0.7rem/1 system-ui, -apple-system, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    opacity: 0.7;
}

/* Card-field iframe wrapper: the Revolut iframe paints its own background
   and inputs inside, we only own the outer chrome. Pad + border like a
   regular input so the iframe sits cleanly inside a labelled field group. */
.mm-payment-card__iframe {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--mm-border);
    border-radius: 5px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-payment-card__iframe:focus-within {
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 3px rgba(184, 151, 92, 0.12);
}

.mm-payment-card__input {
    display: block;
    width: 100%;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--mm-border);
    border-radius: 5px;
    background: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--mm-charcoal);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-payment-card__input:focus {
    outline: none;
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 3px rgba(184, 151, 92, 0.12);
}
.mm-payment-card__input::placeholder {
    color: #b0a99b;
}

.mm-payment-card__error {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: #fdecea;
    border-left: 3px solid #8a1f1f;
    color: #8a1f1f;
    border-radius: 3px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.mm-payment-card__submit {
    position: relative;        /* anchors the absolute-positioned spinner */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: 5px;
    background: var(--mm-charcoal);
    color: #fff;
    /* Drop uppercase + wide tracking — serif at small size with 0.14em
       letter-spacing reads slowly on the deciding CTA, and the price
       glyphs in particular ("£334.80") get lost. Sentence case, bigger
       size, very light tracking keeps the brand serif but lets the
       amount land in one glance. */
    font-family: var(--mm-heading);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(44, 44, 44, 0.15);
}
.mm-payment-card__submit:hover:not(:disabled) {
    background: #1a1a1a;
    box-shadow: 0 2px 6px rgba(44, 44, 44, 0.2);
}
.mm-payment-card__submit:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 1px rgba(44, 44, 44, 0.2);
}
.mm-payment-card__submit:disabled {
    background: #8a8576;
    cursor: not-allowed;
    box-shadow: none;
}
.mm-payment-card__submit svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Loading state — hide the lock icon + label without removing them from
   the layout (visibility:hidden preserves the button width so the text
   doesn't jump when the spinner appears) and overlay a centred spinner. */
.mm-payment-card__submit.is-loading > :not(.mm-payment-card__spinner) {
    visibility: hidden;
}
.mm-payment-card__spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mm-payment-card__spin 0.65s linear infinite;
}
.mm-payment-card__submit.is-loading .mm-payment-card__spinner {
    display: block;
}
@keyframes mm-payment-card__spin {
    to { transform: rotate(360deg); }
}

.mm-payment-card__secure {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--mm-border);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--mm-charcoal);
    opacity: 0.75;
}
.mm-payment-card__secure svg {
    flex-shrink: 0;
    color: var(--mm-gold);
    margin-top: 1px;
}

/* Accepted-cards strip below the card field. Text-only because actual
   brand SVGs come with licensing baggage and visually clash with the
   serif/minimal aesthetic — the middle dots read as a clean spec list. */
.mm-checkout-accepted-cards {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--mm-sage);
}
.mm-checkout-accepted-cards__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    opacity: 0.7;
}
.mm-checkout-accepted-cards__brands {
    color: var(--mm-charcoal);
    opacity: 0.75;
}

/* Order reference shown above the line items so customers can quote
   it in support messages without scrolling around. */
.mm-checkout-summary__ref {
    font-size: 0.78rem;
    color: var(--mm-sage);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mm-border);
}
.mm-checkout-summary__ref strong {
    color: var(--mm-charcoal);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Quantity badge in the top-right corner of a line-item thumbnail —
   only rendered when qty > 1, so the badge itself is the only signal. */
.mm-checkout-summary__qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--mm-charcoal);
    color: #fff;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 20px;
    text-align: center;
    font-weight: 600;
}

.mm-stripe-error {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: #fdecea;
    color: #8a1f1f;
    border-radius: 4px;
    font-size: 0.9rem;
}

.mm-checkout-payment__note {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* ── Payment status pill on confirmation page ── */
.mm-payment-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
    border-radius: 999px;
    background: #eef3ef;
    color: #2f5d3d;
    margin-bottom: 0.5rem;
}
.mm-payment-status--pending,
.mm-payment-status--processing {
    background: #fff3d9;
    color: #7a5400;
}
.mm-payment-status--failed,
.mm-payment-status--canceled {
    background: #fdecea;
    color: #8a1f1f;
}

/* ── Confirmation ── */
.mm-confirmation {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.mm-confirmation__icon {
    color: var(--mm-sage);
    margin-bottom: 1.5rem;
}

.mm-confirmation__title {
    font-family: var(--mm-heading);
    font-size: 2.2rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.mm-confirmation__reference {
    font-family: var(--mm-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--mm-gold);
    margin-bottom: 1rem;
}

.mm-confirmation__note {
    color: var(--mm-sage);
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
}

.mm-confirmation__details {
    text-align: left;
    background: var(--mm-cream);
    padding: 2rem;
    margin-bottom: 2rem;
}

.mm-confirmation__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mm-border);
    font-size: 0.9rem;
}

.mm-confirmation__item-qty {
    color: var(--mm-sage);
    font-size: 0.85rem;
}

.mm-confirmation__item-spec {
    font-size: 0.72rem;
    color: var(--mm-sage);
    margin-top: 2px;
}

.mm-confirmation__totals {
    padding-top: 1rem;
    font-size: 0.9rem;
}

.mm-confirmation__totals > div {
    padding: 0.25rem 0;
}

.mm-confirmation__total-line {
    border-top: 1px solid var(--mm-charcoal);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-family: var(--mm-heading);
    font-size: 1.2rem;
}

.mm-confirmation__address {
    font-size: 0.85rem;
    color: var(--mm-text);
    font-style: normal;
    line-height: 1.6;
}

.mm-confirmation__actions {
    margin-top: 2rem;
}

/* ── Process Steps ── */
.mm-process-grid {
    padding: 3rem 0 5rem;
    max-width: 800px;
    margin: 0 auto;
}

.mm-process-grid p {
    color: var(--mm-sage);
    font-size: 0.9rem;
}

.mm-process-icon {
    width: 48px;
    height: 48px;
    border: 1px solid var(--mm-gold);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    color: var(--mm-gold);
    margin-bottom: 1rem;
}

/* ── MM Studio / Atelier ── */
.mm-atelier-hero {
    position: relative;
    height: 75vh;
    min-height: 450px;
    max-height: 700px;
    overflow: hidden;
}

.mm-atelier-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    filter: grayscale(0.3);
}

.mm-atelier-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 28, 25, 0.7) 0%, rgba(30, 28, 25, 0.2) 50%, rgba(30, 28, 25, 0.05) 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 4rem;
}

.mm-atelier-hero__tag {
    display: inline-block;
    font-family: var(--mm-body);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--mm-gold);
    border: 1px solid rgba(184, 151, 92, 0.5);
    padding: 0.3rem 1rem;
    margin-bottom: 1.2rem;
}

.mm-atelier-hero__title {
    font-family: var(--mm-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: #fff;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.mm-atelier-hero__subtitle {
    font-family: var(--mm-body);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.03em;
}

.mm-atelier-intro {
    padding: 5rem 0 4rem;
}

.mm-atelier-intro__content {
    font-family: var(--mm-heading);
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--mm-text);
}

.mm-atelier-intro__content h2,
.mm-atelier-intro__content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Craftsmanship alternating sections */
.mm-atelier-craft {
    padding: 2rem 0 4rem;
}

.mm-atelier-craft__image {
    border-radius: 6px;
    overflow: hidden;
}

.mm-atelier-craft__image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.mm-atelier-craft__image:hover img {
    transform: scale(1.03);
}

.mm-atelier-craft__text {
    padding: 1rem 0;
}

.mm-atelier-craft__num {
    display: inline-block;
    font-family: var(--mm-heading);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--mm-gold);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 0.8rem;
}

.mm-atelier-craft__text h3 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}

.mm-atelier-craft__text p {
    color: var(--mm-text);
    line-height: 1.9;
}

/* Detail strip */
.mm-atelier-strip {
    padding: 0;
    overflow: hidden;
}

.mm-atelier-strip__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.mm-atelier-strip__item {
    overflow: hidden;
}

.mm-atelier-strip__item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    filter: grayscale(0.15);
    transition: filter 0.4s, transform 0.6s;
}

.mm-atelier-strip__item:hover img {
    filter: grayscale(0);
    transform: scale(1.04);
}

/* Services */
.mm-atelier-services {
    padding: 5rem 0;
    background: var(--mm-linen);
}

.mm-atelier-services h2 {
    margin-bottom: 0.5rem;
}

.mm-atelier-services__card {
    background: var(--mm-white);
    padding: 2.5rem 2rem;
    border-radius: 6px;
    height: 100%;
    text-align: center;
    transition: box-shadow 0.3s;
}

.mm-atelier-services__card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.mm-atelier-services__icon {
    color: var(--mm-gold);
    margin-bottom: 1.2rem;
}

.mm-atelier-services__card h4 {
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
}

.mm-atelier-services__card p {
    font-size: 0.9rem;
    color: var(--mm-text);
    line-height: 1.8;
}

/* Sample wall section */
.mm-atelier-samples {
    padding: 5rem 0;
}

.mm-atelier-samples__img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.mm-atelier-samples h2 {
    margin-bottom: 1rem;
}

.mm-atelier-samples p {
    line-height: 1.9;
    color: var(--mm-text);
}

@media (max-width: 768px) {
    .mm-atelier-hero__title { font-size: 2.2rem; }
    .mm-atelier-hero { height: 55vh; min-height: 350px; }
    .mm-atelier-craft__image img { height: 260px; }
    .mm-atelier-strip__grid { grid-template-columns: 1fr; }
    .mm-atelier-strip__item img { height: 240px; }
    .mm-atelier-craft__text { padding: 0; }
}

/* ── Admin Bar ── */
.mm-admin-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--mm-charcoal);
    color: var(--mm-white);
    padding: 0.45rem 1rem;
    z-index: 9999;
    font-size: 0.75rem;
    font-family: sans-serif;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15);
    --mm-admin-bar-height: 44px;
}

/* Reserve space at the bottom of the page so fixed-bottom content
   (footers, step navs, CTAs) is never covered by the bar.
   Other fixed-bottom UI should set bottom: var(--mm-admin-bar-offset, 0)
   to lift above the admin bar when an admin is logged in. */
body {
    --mm-admin-bar-offset: 0px;
}
body:has(.mm-admin-bar) {
    --mm-admin-bar-offset: 44px;
    padding-bottom: var(--mm-admin-bar-offset);
}

.mm-admin-bar__brand {
    color: var(--mm-gold) !important;
    display: flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.mm-admin-bar__brand:hover {
    opacity: 1;
}

.mm-admin-bar__links {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.mm-admin-bar__links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.68rem;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.02em;
}

.mm-admin-bar__links a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--mm-gold);
}

.mm-admin-bar .btn-edit-mode {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.7rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-family: sans-serif;
    font-weight: 600;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s;
}

.mm-admin-bar .btn-edit-mode:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

.mm-admin-bar .btn-edit-mode--active {
    background: var(--mm-gold);
    color: var(--mm-charcoal);
    border-color: var(--mm-gold);
}

.mm-admin-bar__panel-btn {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    font-size: 0.65rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.2s;
}

.mm-admin-bar__panel-btn:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold) !important;
}

/* ── Edit Mode ── */
body.edit-mode [data-editable] {
    outline: 1px dashed var(--mm-gold);
    outline-offset: 4px;
    cursor: pointer;
    min-height: 20px;
}

body.edit-mode [data-editable]:hover {
    outline-style: solid;
    background-color: rgba(184, 151, 92, 0.04);
}

body.edit-mode [data-editable-image] {
    position: relative;
    cursor: pointer;
}

body.edit-mode [data-editable-image]::after {
    content: 'Click to replace image';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 0.5rem 1.2rem;
    font-size: 0.72rem;
    font-family: sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

body.edit-mode [data-editable-image]:hover::after {
    opacity: 1;
}

/* ::after doesn't render on <img> (replaced element), so give images with
   data-editable-image a visible outline affordance instead. */
body.edit-mode img[data-editable-image] {
    outline: 2px dashed var(--mm-gold);
    outline-offset: 4px;
}
body.edit-mode img[data-editable-image]:hover {
    outline-style: solid;
}

/* ── WYSIWYG floating toolbar (inline-edit rich-text fields) ── */
.mm-wysiwyg-toolbar {
    position: fixed;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 4px;
    background: #2a2a2a;
    color: #e8e8e8;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    user-select: none;
    -webkit-user-select: none;
    animation: mm-wysiwyg-fade-in 0.12s ease-out;
    transition: top 0.08s ease-out, left 0.08s ease-out;
}

@keyframes mm-wysiwyg-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mm-wysiwyg-toolbar button {
    background: none;
    border: none;
    color: inherit;
    padding: 5px 9px;
    min-width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    font-size: 13px;
    -webkit-text-fill-color: currentColor;
}

.mm-wysiwyg-toolbar button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.mm-wysiwyg-toolbar button sub {
    font-size: 9px;
    line-height: 1;
}

.mm-wysiwyg-toolbar__sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    margin: 0 3px;
    background: rgba(255, 255, 255, 0.18);
}

/* Colour buttons — letter / icon stacked above a colour swatch bar */
.mm-wysiwyg-toolbar__color {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 8px !important;
    gap: 1px;
    line-height: 1;
}

.mm-wysiwyg-toolbar__colorbar {
    width: 14px;
    height: 3px;
    border-radius: 1px;
    pointer-events: none;
}

/* Palette popover — appears below the colour button */
.mm-wysiwyg-palette {
    position: fixed;
    z-index: 10001;
    background: #2a2a2a;
    color: #e8e8e8;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    animation: mm-wysiwyg-fade-in 0.12s ease-out;
}

.mm-wysiwyg-palette__grid {
    display: grid;
    grid-template-columns: repeat(4, 22px);
    gap: 5px;
}

.mm-wysiwyg-palette__swatch {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.08s ease-out, border-color 0.08s;
}

.mm-wysiwyg-palette__swatch:hover {
    transform: scale(1.1);
    border-color: #fff;
}

.mm-wysiwyg-palette__reset {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: inherit;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    -webkit-text-fill-color: currentColor;
}

.mm-wysiwyg-palette__reset:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ── Breadcrumbs ── */
.mm-breadcrumb {
    padding: 0;
    margin: 0 0 2rem;
    list-style: none;
    display: flex;
    align-items: center;
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mm-breadcrumb li {
    display: flex;
    align-items: center;
}

.mm-breadcrumb li + li::before {
    content: '\00b7';
    color: var(--mm-sage);
    margin: 0 0.6rem;
    font-size: 0.9rem;
}

.mm-breadcrumb a {
    color: var(--mm-sage);
}

.mm-breadcrumb a:hover {
    color: var(--mm-gold);
}

.mm-breadcrumb .active {
    color: var(--mm-charcoal);
}

/* ── Utility overrides ── */
.text-muted, .mm-muted {
    color: var(--mm-sage) !important;
}

.mm-price {
    font-family: var(--mm-heading);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--mm-charcoal);
    letter-spacing: 0.08em;
}

.mm-product-badge {
    display: inline-block;
    font-family: var(--mm-body);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    border: 1px solid var(--mm-charcoal);
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.mm-price-was {
    text-decoration: line-through;
    color: var(--mm-sage);
    font-weight: 300;
    margin-right: 0.3rem;
}

/* Unit-of-measure suffix shown after the price for products sold by
   length (fabrics, trimmings) or volume (paints). Smaller, dimmer and
   in the body font so the price itself stays the dominant element. */
.mm-price-unit {
    font-family: var(--mm-body);
    font-size: 0.78em;
    color: var(--mm-sage);
    letter-spacing: 0.05em;
    margin-left: 0.15em;
}

/* Variant switcher (size / option buttons on the product detail page) */
.mm-variant-switcher {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mm-variant-switcher__label {
    font-family: var(--mm-body);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-sage);
}

.mm-variant-switcher__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Mobile: when there are 5–6 size buttons the flex-wrap row often
   strands a single button on its own line, which looks unbalanced.
   Switch to a horizontal scroller with snap so the user can swipe
   through all sizes without an awkward orphan row. The buttons keep
   their natural width — auto-shrinking them to fit destroys the SVG
   diagram readability. Stays within the column's padding (no negative
   margin bleed) so it can't accidentally push the document past the
   viewport edge. */
@media (max-width: 575.98px) {
    .mm-variant-switcher__options {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .mm-variant-switcher__option {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

.mm-variant-switcher__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.55rem 1rem;
    font-family: var(--mm-body);
    font-size: 0.85rem;
    color: var(--mm-charcoal);
    background: var(--mm-white);
    border: 1px solid var(--mm-border);
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
    cursor: pointer;
}

.mm-variant-switcher__option:hover {
    border-color: var(--mm-charcoal);
    color: var(--mm-charcoal);
}

.mm-variant-switcher__option--active,
.mm-variant-switcher__option--active:hover {
    background: var(--mm-charcoal);
    border-color: var(--mm-charcoal);
    color: var(--mm-white);
    cursor: default;
}

/* Diagram-equipped variant switcher: buttons stack the SVG proportion
   diagram above the dimension label so a 60×40 lumbar reads visibly
   wider than the 50×50 square next to it. Activates only when the
   controller surfaces a size_diagram payload — pure-text size labels
   keep their horizontal-inline layout above. */
.mm-variant-switcher--diagrams .mm-variant-switcher__option {
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.75rem 0.9rem 0.65rem;
    min-width: 5rem;
}
.mm-variant-switcher__diagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--mm-charcoal);
    opacity: 0.7;
    transition: opacity 0.18s ease;
}
.mm-variant-switcher__diagram svg {
    width: 100%;
    height: 100%;
    display: block;
}
.mm-variant-switcher__option:hover .mm-variant-switcher__diagram {
    opacity: 1;
}
/* Active button has a charcoal background — invert the diagram stroke
   so the rect still reads. */
.mm-variant-switcher__option--active .mm-variant-switcher__diagram {
    color: var(--mm-white);
    opacity: 0.95;
}
.mm-variant-switcher__label-text {
    line-height: 1;
}

/* Fabric detail card */
.mm-fabric-card {
    border: 1px solid var(--mm-border);
    padding: 1.2rem 1.4rem;
    background: linear-gradient(135deg, var(--mm-white) 0%, #f9f7f4 100%);
}

.mm-fabric-card__desc {
    font-family: var(--mm-heading);
    font-size: 1.05rem;
    color: var(--mm-charcoal);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

/* ── Fabric composition (structured) ── */
.mm-composition {
    padding: 0.9rem 0 1rem;
    border-top: 1px solid var(--mm-border);
}
.mm-composition__label {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    opacity: 0.5;
    margin-bottom: 0.55rem;
}
.mm-composition__bar {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mm-cream);
    margin-bottom: 0.55rem;
}
.mm-composition__seg {
    display: block;
    height: 100%;
    background: var(--mm-gold);
    transition: opacity 0.2s;
}
.mm-composition__seg + .mm-composition__seg {
    border-left: 1px solid var(--mm-white);
}
.mm-composition__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
    font-size: 0.78rem;
    color: var(--mm-charcoal);
}
.mm-composition__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.mm-composition__legend-item em {
    font-style: normal;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}
.mm-composition__legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mm-gold);
    /* Now houses a material-identity glyph (linen weave, cotton boll, …)
       centered inside the colour disc — the swatch still cross-references
       the bar segment by colour AND tells you which fibre it is in one
       compact element. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mm-composition__legend-swatch svg {
    width: 11px;
    height: 11px;
    /* Default glyph tint: a soft charcoal that reads on the light material
       colours (linen, cotton, silk, viscose). Inverted to off-white for
       the darker tones below so contrast holds. */
    color: rgba(58, 58, 58, 0.7);
}
/* Dark-background materials need a light glyph to stay legible. */
.mm-composition__legend-swatch[data-material="wool"] svg,
.mm-composition__legend-swatch[data-material="wolle"] svg,
.mm-composition__legend-swatch[data-material="polyester"] svg,
.mm-composition__legend-swatch[data-material="acetate"] svg,
.mm-composition__legend-swatch[data-material="acetat"] svg {
    color: rgba(255, 255, 255, 0.9);
}

/* Per-material colour palette (fallback = gold). Applied to both bar
   segments and legend swatches via `data-material` attribute. */
.mm-composition__seg[data-material="linen"],
.mm-composition__legend-swatch[data-material="linen"]    { background: #d8c3a2; }
.mm-composition__seg[data-material="cotton"],
.mm-composition__legend-swatch[data-material="cotton"]   { background: #edeae3; border: 1px solid var(--mm-border); }
.mm-composition__seg[data-material="wool"],
.mm-composition__legend-swatch[data-material="wool"]     { background: #8a7158; }
.mm-composition__seg[data-material="silk"],
.mm-composition__legend-swatch[data-material="silk"]     { background: #c9b8a1; }
.mm-composition__seg[data-material="acetat"],
.mm-composition__seg[data-material="acetate"],
.mm-composition__legend-swatch[data-material="acetat"],
.mm-composition__legend-swatch[data-material="acetate"]  { background: #b8975c; }
.mm-composition__seg[data-material="polyester"],
.mm-composition__legend-swatch[data-material="polyester"]{ background: #5e5a52; }
.mm-composition__seg[data-material="viscose"],
.mm-composition__legend-swatch[data-material="viscose"]  { background: #a59881; }

.mm-fabric-card__specs {
    display: flex;
    gap: 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--mm-border);
    flex-wrap: wrap;
}

/* Legacy 3-column spec card — kept for any non-product-detail page
   that may still reference these classes. New product detail uses
   .mm-spec-chip below. */
.mm-fabric-card__spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    padding: 0 0.5rem;
    border-right: 1px solid var(--mm-border);
}

.mm-fabric-card__spec:first-child {
    padding-left: 0;
}

.mm-fabric-card__spec:last-child {
    border-right: none;
    padding-right: 0;
}

.mm-fabric-card__spec-icon {
    width: 24px;
    height: 24px;
    color: var(--mm-gold);
    opacity: 0.35;
    margin-bottom: 0.3rem;
}

.mm-fabric-card__spec-value {
    font-family: var(--mm-heading);
    font-size: 0.92rem;
    color: var(--mm-charcoal);
    line-height: 1.3;
}

.mm-fabric-card__spec-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mm-sage);
    margin-top: 0.15rem;
}

/* ──────────────────────────────────────────────────────────────
   Spec list — editorial label-over-value pairs in a responsive grid.
   Replaces the boxed chips. The colour attribute carries its own
   inline swatch (the one place a visual cue genuinely adds info);
   everything else is just typography.

   Layout: CSS grid with auto-fit + minmax so a 4th or 5th item
   wraps cleanly onto a new row with even column widths — the older
   flex-wrap version put a wrapping 4th item under the first column
   with leftover dividers stranded everywhere.
   ────────────────────────────────────────────────────────── */
.mm-spec-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--mm-border);
}
.mm-spec-list__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0; /* allow grid track to shrink instead of overflowing on long values */
}
.mm-spec-list__label {
    font-family: var(--mm-body);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mm-sage);
    margin: 0;
}
.mm-spec-list__value {
    font-family: var(--mm-heading);
    font-size: 1.05rem;
    color: var(--mm-charcoal);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.2;
}
.mm-spec-list__swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* On narrow screens force a single column with the label and value
   on the same line — more compact than the stacked label-over-value
   when each row is already alone in its track. */
@media (max-width: 575px) {
    .mm-spec-list {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .mm-spec-list__item {
        flex-direction: row;
        align-items: baseline;
        gap: 0.75rem;
    }
    .mm-spec-list__label {
        min-width: 80px;
    }
}

/* Legacy attr table (kept for non-fabric products) */
.mm-attr-table {
    width: 100%;
    border-collapse: collapse;
}

.mm-attr-table td,
.mm-attr-table th {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mm-border);
    font-size: 0.85rem;
    vertical-align: top;
}

.mm-attr-table th {
    width: 40%;
    color: var(--mm-sage);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400;
}

.mm-attr-table td {
    color: var(--mm-charcoal);
}

/* Alert override */
.alert {
    border: none;
    border-radius: 0;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #dc2626;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border-left: 3px solid var(--mm-sage);
}

/* ── Floating toast (assets/lib/toast.js) ──
   Replaces nine inline-styled _toast/_flash implementations across
   Stimulus controllers (gallery, wishlist, product_reorder, inline_price,
   inline_name, product_bulk, messages_editor, collection_product_reorder,
   editmode). Variants share palette stops with the inline `.admin-flash`
   banner used for server flashes for visual continuity, but live as a
   fixed overlay rather than in page flow. */
.mm-toast {
    position: fixed;
    right: 1rem;
    z-index: 1200;                     /* above modals, below dev overlays */
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: var(--mm-body, sans-serif);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid transparent;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 240ms ease, transform 240ms ease;
    pointer-events: none;              /* purely informational */
    max-width: min(420px, 90vw);
}

.mm-toast--top    { top: 1rem; }
.mm-toast--bottom { bottom: 1rem; top: auto; transform: translateY(6px); }

.mm-toast--shown { opacity: 1; transform: translateY(0); }

.mm-toast--success {
    background: rgba(96, 165, 250, 0.12);
    color: #2563eb;
    border-color: rgba(96, 165, 250, 0.3);
}
.mm-toast--error {
    background: rgba(248, 113, 113, 0.12);
    color: #b91c1c;
    border-color: rgba(248, 113, 113, 0.3);
}
.mm-toast--warning {
    background: rgba(251, 191, 36, 0.12);
    color: #92400e;
    border-color: rgba(251, 191, 36, 0.3);
}
.mm-toast--info {
    background: rgba(96, 165, 250, 0.12);
    color: #2563eb;
    border-color: rgba(96, 165, 250, 0.3);
}

/* ── Sticky mobile add-to-cart bar ──
   Mobile-only, slides up from the bottom once the in-page add row has
   scrolled out of view. Stays out of the way on desktop (where the
   gallery is already sticky). High z-index sits above the BS5 navbar
   so it never gets covered by overlapping fixed UI. Safe-area inset
   accommodates iOS home-indicator bars. */
.mm-sticky-cart {
    position: fixed;
    left: 0;
    right: 0;
    /* Lift above the admin bar when an admin is logged in (var resolves
       to 44px in that case, otherwise 0). Without this the cart bar
       hides BEHIND the admin bar on mobile — same fix the other
       fixed-bottom UI already uses. */
    bottom: var(--mm-admin-bar-offset, 0px);
    z-index: 1090;                      /* below modals (1050+), above nav */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0)) 1rem;
    background: var(--mm-white);
    border-top: 1px solid var(--mm-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(110%);        /* hidden by default */
    transition: transform 220ms ease;
}

.mm-sticky-cart--shown {
    transform: translateY(0);
}

.mm-sticky-cart__info {
    flex: 1 1 auto;
    min-width: 0;                       /* allow truncation */
}

.mm-sticky-cart__name {
    font-family: var(--mm-heading);
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--mm-charcoal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-sticky-cart__price {
    font-family: var(--mm-body);
    font-size: 0.95rem;
    color: var(--mm-charcoal);
    margin-top: 0.15rem;
}

.mm-sticky-cart__btn {
    flex: 0 0 auto;
    padding: 0.55rem 1.25rem;
    white-space: nowrap;
}

/* Desktop: gallery is sticky so the in-page add button is reachable —
   the floating bar would just be visual noise. Hide entirely on md+. */
@media (min-width: 768px) {
    .mm-sticky-cart {
        display: none !important;
    }
}

/* ── Product Detail: sticky media column on desktop ── */
/* When the right column is long (rich description, accordion, related
   products preview) the customer scrolls past the gallery and loses
   the visual reference. Position:sticky keeps the gallery + colour
   matcher + thumbs in the viewport while the text scrolls. Only on
   md+ (Bootstrap split point) — on mobile both columns scroll
   together so the layout stays normal. The top offset matches the
   navbar height (~72 px) plus a hair of breathing room.

   No max-height + no own scrollbar: an earlier revision capped this
   at 100vh-100px with overflow-y:auto so very tall galleries didn't
   trap content above the fold, but the result was a second scrollbar
   on the left column which felt off. Sticky-without-cap works fine
   in practice because the gallery is shorter than the viewport on
   any sensible screen; if it ever isn't, the column just scrolls
   naturally with the page. min-width:0 lets the flex item shrink
   correctly so internal content (long product names, swatches) can't
   force the column wider than 50%. */
@media (min-width: 768px) {
    .mm-product-media {
        position: sticky;
        top: 88px;
        align-self: flex-start;
        min-width: 0;
    }
}

/* ── Product Detail ── */
.mm-product-placeholder--large {
    aspect-ratio: auto;
    min-height: 400px;
}

/* ── Product Gallery ── */
.mm-gallery__main {
    margin-bottom: 0.75rem;
}

/* ── Product Gallery Thumbnails (right column) ── */
.mm-product-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-top: 1rem;
}

.mm-product-gallery__item {
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.mm-product-gallery__item--active {
    border-color: var(--mm-charcoal);
}

.mm-product-gallery__item:hover {
    border-color: var(--mm-gold);
}

.mm-product-gallery__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .mm-product-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mm-gallery__main-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Cushion main image: use a 1:1 frame and `contain` so the entire pillow
   is always visible — never crop fringes / corners. The padding around
   the product is intentional so the wall-colour matcher can show through
   when a swatch is selected (see #galleryMain background-color toggling). */
.mm-gallery__main--cushion {
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.mm-gallery__main--cushion .mm-gallery__main-img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 1.5rem;
}

.mm-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 4px;
}

.mm-gallery__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
}

.mm-gallery__thumb:hover,
.mm-gallery__thumb--active {
    opacity: 1;
    border-color: var(--mm-charcoal);
}

.mm-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Lightbox ── */
.mm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mm-lightbox--open {
    opacity: 1;
}

.mm-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.mm-lightbox__image-wrap {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

.mm-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 10001;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.mm-lightbox__close:hover {
    opacity: 1;
}

.mm-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    padding: 0 20px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.mm-lightbox__nav:hover {
    opacity: 1;
}

.mm-lightbox__nav--prev {
    left: 0;
}

.mm-lightbox__nav--next {
    right: 0;
}

.mm-lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    z-index: 10001;
}

/* ── Lightbox Zoom ── */
.mm-lightbox__image-wrap {
    cursor: zoom-in;
}
.mm-lightbox__image-wrap--zoomed {
    cursor: zoom-out;
    overflow: hidden;
}
.mm-lightbox__img--zoomed {
    transform: scale(2.5);
    transition: transform 0.25s ease;
}
.mm-lightbox__img {
    transition: transform 0.25s ease;
}
.mm-lightbox__zoom-hint {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Hover Zoom (Product Page) ── */
.mm-gallery__main {
    position: relative;
}

.mm-gallery__expand {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--mm-border);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--mm-charcoal);
    opacity: 0;
    transition: opacity 0.2s;
    line-height: 1;
    backdrop-filter: blur(4px);
}
.mm-gallery__main:hover .mm-gallery__expand {
    opacity: 0.7;
}
.mm-gallery__expand:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.95);
}

.mm-zoom-lens {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid var(--mm-gold);
    border-radius: 50%;
    background: rgba(184, 151, 92, 0.08);
    pointer-events: none;
    z-index: 5;
    opacity: 0.9;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.06);
}

.mm-zoom-result {
    position: fixed;
    width: 380px;
    height: 380px;
    border: 1px solid var(--mm-border);
    border-radius: 6px;
    background-color: var(--mm-white);
    background-repeat: no-repeat;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 1050;
    pointer-events: none;
}

/* Hide hover-zoom entirely on touch/mobile */
@media (max-width: 767px) {
    .mm-zoom-lens,
    .mm-zoom-result {
        display: none !important;
    }
}

.mm-attr-label {
    width: 40%;
    color: var(--mm-sage);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
    font-family: var(--mm-body);
}

.mm-qty-input {
    /* Used on the product detail page around the +/− stepper. Behaves
       like the cart's `.mm-cart-item__qty` so the stepper layout is
       visually consistent across the site. */
    display: inline-flex;
    align-items: center;
    max-width: 120px;
}

/* ── Wishlist toggle (heart icon button beside the cart action) ── */
/* Compact circular button so it visually belongs in the add-row next to
   the primary cart button rather than dangling on its own line. Outline
   heart by default, fills gold when the product is on the visitor's
   wishlist — the colour change is the primary feedback so the visitor
   actually sees their click did something. */
.mm-wishlist-form {
    margin: 0;
    flex: 0 0 auto;
}

.mm-wishlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--mm-white);
    border: 1px solid var(--mm-border);
    color: var(--mm-charcoal);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mm-wishlist-btn:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

/* Active state — heart filled, button tinted. fill on the path comes
   via currentColor on the SVG, so flipping color flips the whole heart. */
.mm-wishlist-btn--active {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
    background: #fbf6e8;
}

/* The SVG itself has fill="currentColor" stroke="currentColor". In the
   inactive state the visual weight of a filled heart is too heavy, so
   we mask the fill back to transparent and rely on the stroke for the
   outline. .--active leaves both filled, painting the heart solid. */
.mm-wishlist-btn:not(.mm-wishlist-btn--active) svg path {
    fill: transparent;
    stroke-width: 1.1;
}

/* ── Forms ── */
.form-control, .form-select {
    border-radius: 0;
    border-color: var(--mm-border);
    font-size: 0.9rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 2px rgba(184, 151, 92, 0.15);
}

/* ── Tooltips ── */
.mm-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #b8aa92;
    color: var(--mm-white);
    font-size: 0.62rem;
    font-weight: 700;
    font-family: sans-serif;
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 0.4rem;
    flex-shrink: 0;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.15s;
}
.mm-tooltip:hover { background: var(--mm-gold); }

.mm-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--mm-charcoal);
    color: var(--mm-white);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 400;
    font-family: var(--mm-body);
    line-height: 1.4;
    white-space: normal;
    width: 220px;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
    text-transform: none;
    letter-spacing: 0;
}

.mm-tooltip {
    /* Make focusable for keyboard/touch */
    tabindex: 0;
}

.mm-tooltip:hover::after,
.mm-tooltip:focus::after,
.mm-tooltip:active::after {
    opacity: 1;
}

/* ── Trust Signals ── */
.mm-trust {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid var(--mm-border);
    margin-top: 2rem;
}

.mm-trust__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--mm-sage);
    font-size: 0.78rem;
    line-height: 1.3;
}

.mm-trust__item svg {
    flex-shrink: 0;
    opacity: 0.5;
}

.mm-trust__item small {
    opacity: 0.7;
    font-size: 0.68rem;
}

.mm-trust--compact {
    border-top: 1px solid var(--mm-border);
    padding: 1rem 0;
    margin-top: 1rem;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.mm-trust--compact .mm-trust__item {
    color: var(--mm-sage);
    font-size: 0.72rem;
}

.mm-trust--compact .mm-trust__item svg {
    opacity: 0.4;
}

/* `.mm-trust--inset` is used inside the checkout summary's sticky box.
   Resets the top margin (the summary's own padding already separates it
   from the totals) and keeps the badges visually anchored to the same
   block so they can't scroll up behind the cream background. */
.mm-trust--inset {
    margin-top: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 0;
}

/* ── Delivery Estimate ── */
.mm-delivery-estimate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mm-sage);
    font-size: 0.82rem;
    margin-bottom: 1.5rem;
}

.mm-delivery-estimate svg {
    flex-shrink: 0;
}

.mm-delivery-estimate strong {
    color: var(--mm-charcoal);
}

/* ── Paint Configurator ── */
.mm-paint-volumes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mm-paint-volumes__option {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--mm-border);
    padding: 0.5rem 1.2rem;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    transition: border-color 0.2s, background 0.2s;
}

.mm-paint-volumes__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mm-paint-volumes__option:hover {
    border-color: var(--mm-charcoal);
}

.mm-paint-volumes__option--active {
    border-color: var(--mm-charcoal);
    background: var(--mm-charcoal);
    color: var(--mm-white);
}

/* ── Sample Button ── */
.mm-configurator__sample {
    display: none; /* Replaced by compact actions row */
}

.mm-sample-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--mm-sage);
    color: var(--mm-sage);
    padding: 0.6rem 1.5rem;
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}

.mm-sample-btn:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

.mm-sample-note {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--mm-sage);
    opacity: 0.7;
}

.mm-sample-badge {
    display: inline-block;
    background: var(--mm-sage);
    color: var(--mm-white);
    font-size: 0.6rem;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    font-weight: 600;
}

/* ────────────────────────────────────────────────────────────
   Fabric Meterware — sits under the product spec card, no chrome
   ──────────────────────────────────────────────────────────── */
.mm-meterware {
    margin-top: 0.5rem;
}

/* ── Length header: label on the left, preset pills on the right ── */
.mm-meterware__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.mm-meterware__label {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    opacity: 0.55;
}

/* ── Preset pills: compact, inline with the label ── */
.mm-meterware__presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.mm-meterware__preset {
    border: 1px solid var(--mm-border);
    background: transparent;
    color: var(--mm-charcoal);
    padding: 0.35rem 0.75rem;
    font-family: var(--mm-body);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.mm-meterware__preset:hover {
    border-color: var(--mm-charcoal);
}
.mm-meterware__preset--active {
    border-color: var(--mm-charcoal);
    background: var(--mm-charcoal);
    color: var(--mm-white);
}

/* ── Slider ── */
.mm-meterware__slider {
    position: relative;
    margin: 0 0 1.6rem;
    padding: 0.4rem 0 1.3rem;
}
.mm-meterware__ticks {
    position: absolute;
    inset: 0.4rem 8px auto 8px;  /* inset from track ends so ticks align with thumb centre range */
    pointer-events: none;
    height: 30px;
}
.mm-meterware__tick {
    position: absolute;
    top: 18px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--mm-charcoal);
    opacity: 0.45;
}
.mm-meterware__tick::before {
    content: '';
    width: 1px;
    height: 4px;
    background: var(--mm-charcoal);
    opacity: 0.5;
    margin-bottom: 4px;
}
.mm-meterware__tick-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    font-family: var(--mm-body);
}

/* range input — reset native and restyle */
.mm-meterware__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 30px;
    background: transparent;
    margin: 0;
    --mm-range-fill: 0%;
    cursor: pointer;
}
.mm-meterware__range:focus { outline: none; }

/* Track */
.mm-meterware__range::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--mm-gold) 0%,
        var(--mm-gold) var(--mm-range-fill),
        var(--mm-border) var(--mm-range-fill),
        var(--mm-border) 100%
    );
}
.mm-meterware__range::-moz-range-track {
    height: 3px;
    border-radius: 2px;
    background: var(--mm-border);
}
.mm-meterware__range::-moz-range-progress {
    height: 3px;
    border-radius: 2px;
    background: var(--mm-gold);
}

/* Thumb */
.mm-meterware__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mm-white);
    border: 2px solid var(--mm-gold);
    margin-top: -10px;  /* centre on 3px track */
    box-shadow: 0 2px 6px rgba(46, 38, 21, 0.15);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mm-meterware__range::-webkit-slider-thumb:hover,
.mm-meterware__range:focus::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(46, 38, 21, 0.22);
}
.mm-meterware__range::-webkit-slider-thumb:active {
    cursor: grabbing;
    background: var(--mm-gold);
}
.mm-meterware__range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mm-white);
    border: 2px solid var(--mm-gold);
    box-shadow: 0 2px 6px rgba(46, 38, 21, 0.15);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mm-meterware__range::-moz-range-thumb:hover,
.mm-meterware__range:focus::-moz-range-thumb {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(46, 38, 21, 0.22);
}

/* ── Fine-tune stepper: text-weight buttons on an underline, not a row of boxes ── */
.mm-meterware__fine {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
}
.mm-meterware__fine-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--mm-charcoal);
    font-size: 1.05rem;
    font-family: sans-serif;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: background 0.2s, opacity 0.2s, color 0.2s;
}
.mm-meterware__fine-btn:hover {
    background: var(--mm-cream);
    color: var(--mm-gold);
    opacity: 1;
}
.mm-meterware__fine-field {
    width: 56px;
    border: none;
    border-bottom: 1px solid var(--mm-border);
    background: transparent;
    text-align: center;
    font-family: var(--mm-body);
    font-size: 0.95rem;
    color: var(--mm-charcoal);
    padding: 0.3rem 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.mm-meterware__fine-field:focus {
    outline: none;
    border-bottom-color: var(--mm-gold);
}
.mm-meterware__fine-field::-webkit-inner-spin-button,
.mm-meterware__fine-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mm-meterware__fine-suffix {
    font-size: 0.78rem;
    color: var(--mm-charcoal);
    opacity: 0.5;
    margin-left: -0.1rem;  /* sit close to the number */
}

/* ── Running total: inline, no box — lives on the border above ADD TO CART ── */
.mm-meterware__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0 1.1rem;
    margin-bottom: 1.1rem;
    border-top: 1px solid var(--mm-border);
}
.mm-meterware__formula {
    font-size: 0.82rem;
    color: var(--mm-charcoal);
    opacity: 0.65;
    font-family: var(--mm-body);
}
.mm-meterware__total {
    font-family: var(--mm-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--mm-charcoal);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ── Actions ── */
.mm-meterware__actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.mm-meterware__add {
    flex: 1;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    font-size: 0.82rem;
}
.mm-meterware__icon-btn {
    width: 50px;
    background: transparent;
    border: 1px solid var(--mm-border);
    color: var(--mm-charcoal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
}
.mm-meterware__icon-btn:hover {
    border-color: var(--mm-charcoal);
    color: var(--mm-gold);
}

/* ── Footer / reassurance: quiet, no top divider (summary bar already has one) ── */
.mm-meterware__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.72rem;
    color: var(--mm-charcoal);
    opacity: 0.7;
}
.mm-meterware__footer-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.mm-meterware__footer-form {
    margin: 0;
    display: inline-flex;
}
.mm-meterware__sample {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--mm-body);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--mm-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s;
}
.mm-meterware__sample:hover {
    color: var(--mm-charcoal);
    opacity: 1;
}

/* Stock chip shown in the meterware footer when the roll is getting low. */
.mm-meterware__stock-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    border: 1px solid var(--mm-gold);
    color: var(--mm-gold);
    background: rgba(184, 151, 92, 0.08);
    font-family: var(--mm-body);
}
.mm-meterware__stock-chip--low {
    color: #a65c2e;
    border-color: #a65c2e;
    background: rgba(166, 92, 46, 0.08);
}

/* Sold-out fallback replaces the whole form when rollLengthM <= 0. */
.mm-meterware--sold-out {
    padding: 1.2rem 0;
}
.mm-meterware__sold-out h5 {
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    margin: 0 0 0.4rem;
    color: var(--mm-charcoal);
}
.mm-meterware__sold-out p {
    font-size: 0.85rem;
    color: var(--mm-charcoal);
    opacity: 0.75;
    margin-bottom: 0.8rem;
}

/* Admin: composition rows editor */
.composition-rows__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.composition-rows__row {
    display: grid;
    grid-template-columns: 1fr 110px 32px;
    gap: 0.5rem;
    align-items: center;
}
.composition-rows__material input[type="text"] { width: 100%; }
.composition-rows__percentage {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.composition-rows__percentage input[type="number"] {
    width: 70px;
    text-align: right;
}
.composition-rows__percent {
    font-size: 0.85rem;
    color: var(--mm-charcoal);
    opacity: 0.6;
}
.composition-rows__remove {
    width: 30px;
    height: 30px;
    border: 1px solid var(--mm-border);
    background: transparent;
    color: var(--mm-charcoal);
    cursor: pointer;
    border-radius: 2px;
    transition: border-color 0.2s, color 0.2s;
}
.composition-rows__remove:hover {
    border-color: #a65c2e;
    color: #a65c2e;
}
.composition-rows__sum--ok { color: #3b7a44; }
.composition-rows__sum--bad { color: #a65c2e; }

/* Sizes collection (Product.sizes JSON), admin product form. Each row is
   one size entry — key, label, default toggle, per-tenant prices — and
   sits inside a card-style box so it visually separates from siblings. */
.sizes-rows__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.sizes-rows__row {
    position: relative;
    border: 1px solid var(--mm-border);
    border-radius: 4px;
    padding: 0.85rem 0.85rem 0.5rem;
    background: #fafaf8;
}
.sizes-rows__row .form-group { margin-bottom: 0.6rem; }
.sizes-rows__remove {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 26px;
    height: 26px;
    border: 1px solid var(--mm-border);
    background: var(--mm-white);
    color: var(--mm-charcoal);
    cursor: pointer;
    border-radius: 2px;
    line-height: 1;
    transition: border-color 0.2s, color 0.2s;
}
.sizes-rows__remove:hover {
    border-color: #a65c2e;
    color: #a65c2e;
}

/* ── Configurator Preview ── */
.mm-configurator__preview {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem 1rem;
    background: var(--mm-light-grey);
}

.mm-configurator__svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Sidebar preview — sticky in left column */
.mm-configurator__preview--sidebar {
    position: sticky;
    top: 80px;
    margin-top: 1.5rem;
    padding: 1.5rem 1rem;
    background: var(--mm-light-grey);
    border-radius: 0;
}

.mm-configurator__preview--sidebar .mm-configurator__svg {
    max-width: 100%;
}

@media (max-width: 768px) {
    .mm-configurator__preview--sidebar {
        position: static;
    }
}

.mm-configurator__open-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    margin-top: 0.5rem;
    background: none;
    border: 1px solid var(--mm-border);
    color: var(--mm-sage);
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 0.35rem 0.8rem;
    transition: all 0.3s;
}

.mm-configurator__open-close-btn:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

.mm-configurator__scene-toggle {
    display: flex;
    gap: 0;
    margin-top: 0.5rem;
    border: 1px solid var(--mm-border);
}

.mm-configurator__scene-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: none;
    border: none;
    border-right: 1px solid var(--mm-border);
    color: var(--mm-sage);
    font-family: var(--mm-body);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    transition: all 0.2s;
}

.mm-configurator__scene-btn:last-child {
    border-right: none;
}

.mm-configurator__scene-btn:hover {
    color: var(--mm-gold);
}

.mm-configurator__scene-btn--active {
    background: var(--mm-cream);
    color: var(--mm-charcoal);
}

.mm-configurator__window-count {
    display: none; /* Removed — redundant with cart quantity */
}

.mm-configurator__window-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mm-configurator__window-count-input {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--mm-border);
}

.mm-configurator__window-count-input button {
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: var(--mm-charcoal);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-configurator__window-count-input button:hover {
    color: var(--mm-gold);
}

.mm-configurator__window-count-input input {
    width: 32px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--mm-border);
    border-right: 1px solid var(--mm-border);
    font-family: var(--mm-heading);
    font-size: 0.9rem;
    color: var(--mm-charcoal);
    padding: 0.25rem 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.mm-configurator__window-count-input input::-webkit-inner-spin-button,
.mm-configurator__window-count-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mm-configurator__window-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    font-family: var(--mm-heading);
    font-size: 1rem;
    color: var(--mm-charcoal);
}

.mm-configurator__measure-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mm-white);
    border: 1px solid var(--mm-border);
    border-radius: 50%;
    color: var(--mm-sage);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
    padding: 0;
}

.mm-configurator__measure-btn:hover,
.mm-configurator__measure-btn--active {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
    background: var(--mm-cream);
}

/* Configuration comparison modal */
.mm-compare {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-compare__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.mm-compare__dialog {
    position: relative;
    background: var(--mm-white);
    max-width: 850px;
    width: 92%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 2rem;
    z-index: 1;
}

.mm-compare__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--mm-sage);
    cursor: pointer;
    line-height: 1;
}

.mm-compare__close:hover { color: var(--mm-charcoal); }

.mm-compare__title {
    font-family: var(--mm-heading);
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 1.5rem 0;
    color: var(--mm-charcoal);
}

.mm-compare__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.mm-compare__card {
    border: 1px solid var(--mm-border);
    padding: 1rem;
}

.mm-compare__card--current {
    border-color: var(--mm-gold);
}

.mm-compare__img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    margin-bottom: 0.75rem;
}

.mm-compare__card-title {
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0 0 0.5rem 0;
}

.mm-compare__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 0.5rem;
    font-size: 0.75rem;
    color: var(--mm-charcoal);
    margin-bottom: 0.75rem;
}

.mm-compare__spec-label {
    color: var(--mm-sage);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 0.2rem;
}

.mm-compare__price {
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    color: var(--mm-charcoal);
    margin-bottom: 0.3rem;
}

.mm-compare__meta {
    font-size: 0.65rem;
    color: var(--mm-sage);
    margin-bottom: 0.75rem;
}

.mm-compare__actions {
    display: flex;
    gap: 0.5rem;
}

.mm-compare__use-btn {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-family: var(--mm-body);
    font-size: 0.7rem;
    background: var(--mm-charcoal);
    color: var(--mm-white);
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.mm-compare__use-btn:hover { background: var(--mm-gold); }

.mm-compare__delete-btn {
    padding: 0.4rem 0.6rem;
    font-family: var(--mm-body);
    font-size: 0.7rem;
    background: none;
    border: 1px solid var(--mm-border);
    color: var(--mm-sage);
    cursor: pointer;
}

.mm-compare__delete-btn:hover { border-color: #dc2626; color: #dc2626; }

@media (max-width: 600px) {
    .mm-compare__grid { grid-template-columns: 1fr; }
    .mm-compare__dialog { padding: 1.2rem; }
}

.mm-configurator__svg {
    touch-action: none;
}

.mm-configurator__svg--dragging {
    cursor: grabbing !important;
}

.mm-configurator__svg rect[data-configurator-target] {
    transition: fill 0.4s ease, opacity 0.4s ease;
}

/* ── Measuring Guide tabs ── */
.mm-measure-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--mm-border);
    margin: 0 0 3rem;
    justify-content: center;
}

.mm-measure-tabs__btn {
    background: none;
    border: none;
    padding: 1rem 1.4rem;
    margin: 0 0.4rem -1px;
    font-family: var(--mm-body);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-text);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.mm-measure-tabs__btn:hover {
    color: var(--mm-charcoal);
}

.mm-measure-tabs__btn--active {
    color: var(--mm-charcoal);
    border-bottom-color: var(--mm-gold);
}

.mm-measure-panel {
    display: none;
}
.mm-measure-panel--active {
    display: block;
    animation: mm-measure-fade 0.25s ease-out;
}

@keyframes mm-measure-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .mm-measure-tabs__btn {
        padding: 0.8rem 0.7rem;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
    }
}

/* Blinds intro card */
.mm-blinds-intro {
    max-width: 720px;
    margin: 0 auto 3rem;
    padding: 1.5rem 2rem;
    background: var(--mm-cream);
    border: 1px solid var(--mm-border);
    text-align: center;
}
.mm-blinds-intro h2 {
    font-family: var(--mm-heading);
    font-size: 1.6rem;
    margin: 0 0 1rem;
    color: var(--mm-charcoal);
    font-weight: 400;
}
.mm-blinds-intro__list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}
.mm-blinds-intro__list li {
    font-family: var(--mm-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--mm-text);
    padding-left: 1.2rem;
    position: relative;
}
.mm-blinds-intro__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 1px;
    background: var(--mm-gold);
}

/* ── Measuring Guide ── */
.mm-guide__step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.mm-guide__number {
    width: 40px;
    height: 40px;
    border: 1px solid var(--mm-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-heading);
    font-size: 1.1rem;
    color: var(--mm-gold);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.mm-guide__content h3 {
    font-family: var(--mm-heading);
    font-size: 1.3rem;
    color: var(--mm-charcoal);
    margin-bottom: 0.75rem;
    margin-top: 0;
}

.mm-guide__content p {
    color: var(--mm-text);
    font-size: 0.92rem;
}

.mm-guide__content ul {
    color: var(--mm-text);
    font-size: 0.92rem;
    padding-left: 1.2rem;
}

.mm-guide__content li {
    margin-bottom: 0.3rem;
}

.mm-guide__diagram {
    margin: 1.5rem 0;
    background: var(--mm-light-grey);
    padding: 1.5rem;
    text-align: center;
}

.mm-guide__svg {
    max-width: 100%;
    height: auto;
}

.mm-guide__tip {
    background: var(--mm-cream);
    border-left: 3px solid var(--mm-gold);
    padding: 1.2rem 1.5rem;
    font-size: 0.9rem;
    color: var(--mm-text);
    margin-top: 2rem;
}

/* Drop-finish "definition list" — used in step 2 to map each finish
   name (sill / floor kissing / pooled / …) to its rule of thumb. */
.mm-guide__finish-table {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.92rem;
}
.mm-guide__finish-table dt {
    font-family: var(--mm-heading);
    color: var(--mm-charcoal);
    font-weight: 500;
    white-space: nowrap;
}
.mm-guide__finish-table dd {
    margin: 0;
    color: var(--mm-text);
}

/* Fullness multiplier table — used in step 3 to show heading style
   vs. multiplier. Light gold underline only, no full borders, to fit
   the editorial feel of the rest of the page. */
.mm-guide__fullness {
    width: 100%;
    margin: 1rem 0;
    font-size: 0.92rem;
    border-collapse: collapse;
}
.mm-guide__fullness th,
.mm-guide__fullness td {
    text-align: left;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--mm-border);
}
.mm-guide__fullness th {
    font-family: var(--mm-heading);
    font-weight: 500;
    color: var(--mm-gold);
    border-bottom: 1px solid var(--mm-gold);
    letter-spacing: 0.04em;
}
.mm-guide__fullness td:last-child {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--mm-charcoal);
}

/* Material-notes pair — rendered after the numbered steps for things
   that aren't measurements but DO change what the customer sends us
   (pattern repeat, linen relaxation). Two cards side-by-side on
   desktop, stacked on mobile. */
.mm-guide__notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
.mm-guide__note {
    background: var(--mm-light-grey);
    padding: 1.25rem 1.5rem;
    border-top: 2px solid var(--mm-gold);
}
.mm-guide__note h4 {
    font-family: var(--mm-heading);
    font-size: 1rem;
    color: var(--mm-charcoal);
    margin: 0 0 0.5rem;
}
.mm-guide__note p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mm-text);
}
@media (max-width: 720px) {
    .mm-guide__notes {
        grid-template-columns: 1fr;
    }
    .mm-guide__finish-table {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .mm-guide__finish-table dt {
        margin-top: 0.5rem;
    }
}

/* ── Linen Weave Loading Animation ── */
.mm-loader {
    display: inline-flex;
    gap: 3px;
    align-items: end;
    height: 24px;
}

.mm-loader__thread {
    width: 2px;
    background: var(--mm-gold);
    border-radius: 1px;
    animation: mmWeave 1.2s ease-in-out infinite;
}

.mm-loader__thread:nth-child(1) { height: 8px; animation-delay: 0s; }
.mm-loader__thread:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.mm-loader__thread:nth-child(3) { height: 6px; animation-delay: 0.2s; }
.mm-loader__thread:nth-child(4) { height: 18px; animation-delay: 0.3s; }
.mm-loader__thread:nth-child(5) { height: 10px; animation-delay: 0.4s; }
.mm-loader__thread:nth-child(6) { height: 16px; animation-delay: 0.5s; }
.mm-loader__thread:nth-child(7) { height: 7px; animation-delay: 0.6s; }
.mm-loader__thread:nth-child(8) { height: 20px; animation-delay: 0.7s; }

@keyframes mmWeave {
    0%, 100% { transform: scaleY(1); opacity: 0.4; }
    50% { transform: scaleY(1.8); opacity: 1; }
}

/* Full-page loader overlay */
.mm-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--mm-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.mm-page-loader--done {
    opacity: 0;
}

.mm-page-loader__text {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--mm-sage);
}

/* Inline loader for AJAX/configurator */
.mm-loader--inline {
    justify-content: center;
    padding: 2rem;
}

/* ── Sample Request Strip ── */
.mm-sample-strip {
    position: fixed;
    bottom: var(--mm-admin-bar-offset, 0);
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--mm-charcoal);
    color: rgba(255,255,255,0.85);
    transform: translateY(100%);
    animation: mmStripSlideUp 0.5s ease 3s forwards;
    transition: transform 0.4s ease;
}

.mm-sample-strip--hidden {
    transform: translateY(100%) !important;
    animation: none;
}

@keyframes mmStripSlideUp {
    to { transform: translateY(0); }
}

.mm-sample-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mm-sample-strip__icon {
    flex-shrink: 0;
    color: var(--mm-gold);
}

.mm-sample-strip__text {
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.4;
}

.mm-sample-strip__text strong {
    color: #fff;
}

.mm-sample-strip__cta {
    flex-shrink: 0;
    padding: 0.45rem 1.4rem;
    border: 1px solid var(--mm-gold);
    color: var(--mm-gold);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
}

.mm-sample-strip__cta:hover {
    background: var(--mm-gold);
    color: var(--mm-charcoal);
}

.mm-sample-strip__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.mm-sample-strip__close:hover {
    color: #fff;
}

/* Push admin bar up when strip is visible */
.mm-sample-strip:not(.mm-sample-strip--hidden) ~ .mm-admin-bar {
    bottom: 48px;
}

@media (max-width: 576px) {
    .mm-sample-strip__text strong { display: none; }
    .mm-sample-strip__inner { gap: 0.6rem; padding: 0.6rem 1rem; }
}

/* ── Configurator Sticky Footer ── */
.mm-configurator__footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mm-admin-bar-offset, 0);
    z-index: 40;
    background: var(--mm-white);
    border-top: 1px solid var(--mm-border);
    box-shadow: 0 -2px 14px rgba(44, 44, 44, 0.06);
}

.mm-configurator__footer-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.mm-configurator__footer-product {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mm-configurator__footer-kicker {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-text);
    opacity: 0.6;
    margin-bottom: 0.2rem;
}

.mm-configurator__footer-name {
    font-family: var(--mm-heading);
    font-size: 1.15rem;
    color: var(--mm-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.mm-configurator__footer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

.mm-configurator__footer-price-label {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-text);
    opacity: 0.6;
    margin-bottom: 0.2rem;
}

.mm-configurator__footer-price-value {
    font-family: var(--mm-heading);
    font-size: 1.35rem;
    color: var(--mm-charcoal);
    line-height: 1.1;
}

/* Reserve space so page content isn't hidden behind the fixed footer */
body:has(.mm-configurator__footer-bar) {
    padding-bottom: 5.25rem;
}

/* Keep admin bar above the footer */
.mm-configurator__footer-bar ~ .mm-admin-bar {
    bottom: 5rem;
}

@media (max-width: 576px) {
    .mm-configurator__footer-bar-inner { padding: 0.7rem 1rem; gap: 0.9rem; }
    .mm-configurator__footer-name { font-size: 0.95rem; }
    .mm-configurator__footer-price-value { font-size: 1.1rem; }
    .mm-configurator__footer-kicker,
    .mm-configurator__footer-price-label { font-size: 0.62rem; }
    body:has(.mm-configurator__footer-bar) { padding-bottom: 4.75rem; }
}

/* (mood strips removed — replaced by editorial collection blocks) */

/* ── Fabric Journey Timeline ── */
/* ── Product Accordion (Shoppe-style) ── */
.mm-accordion__item {
    border-bottom: 1px solid var(--mm-border);
}

.mm-accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
    font-family: var(--mm-body);
    font-size: 0.88rem;
    color: var(--mm-charcoal);
    cursor: pointer;
    list-style: none;
}

.mm-accordion__header::-webkit-details-marker {
    display: none;
}

.mm-accordion__plus {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--mm-sage);
    transition: transform 0.3s;
}

details[open] .mm-accordion__plus {
    transform: rotate(45deg);
}

.mm-accordion__body {
    padding: 0 0 1.2rem 0;
    font-size: 0.85rem;
    color: var(--mm-text);
    line-height: 1.7;
}

.mm-accordion__body p {
    margin: 0;
}

/* ── Related Products ── */
.mm-related__title {
    font-family: var(--mm-heading);
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--mm-charcoal);
}

.mm-journey {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--mm-border);
    text-align: center;
}

.mm-journey__title {
    font-family: var(--mm-heading);
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--mm-charcoal);
    margin-bottom: 2.5rem;
}

.mm-journey__track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.mm-journey__line {
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--mm-border) 15%, var(--mm-gold) 50%, var(--mm-border) 85%, transparent);
}

.mm-journey__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    flex: 1;
    animation: mmJourneyStep 0.6s ease both;
}

.mm-journey__step:nth-child(2) { animation-delay: 0.1s; }
.mm-journey__step:nth-child(3) { animation-delay: 0.2s; }
.mm-journey__step:nth-child(4) { animation-delay: 0.3s; }
.mm-journey__step:nth-child(5) { animation-delay: 0.4s; }
.mm-journey__step:nth-child(6) { animation-delay: 0.5s; }

@keyframes mmJourneyStep {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mm-journey__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mm-white);
    border: 1px solid var(--mm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mm-sage);
    transition: all 0.3s;
}

.mm-journey__step:hover .mm-journey__icon {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
    transform: scale(1.1);
}

.mm-journey__icon--final {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
    background: rgba(184, 151, 92, 0.08);
}

.mm-journey__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mm-charcoal);
    letter-spacing: 0.02em;
}

.mm-journey__detail {
    font-size: 0.68rem;
    color: var(--mm-sage);
    font-style: italic;
}

@media (max-width: 576px) {
    .mm-journey__track {
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
    }
    .mm-journey__line { display: none; }
    .mm-journey__step { flex: 0 0 30%; }
}

/* ── Scroll-Driven Fabric Unfurl ── */
.mm-hero--unfurl {
    position: relative;
    overflow: hidden;
}

/* (unfurl wave removed — replaced by full-bleed hero) */

/* ── Color Matcher ── */
.mm-gallery__main {
    transition: background-color 0.4s ease, padding 0.4s ease;
    padding: 0;
    border-radius: 0;
}

.mm-gallery__main--wall-active {
    padding: 2rem 2.5rem;
}

.mm-gallery__main--wall-active .mm-gallery__main-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* Cushion + wall-active: override the generic 4:5 cover above (cushions
   need 1:1 contain to keep fringes visible). The image already has its
   white background keyed out to alpha-0 server-side (see
   ThumbnailService::keyOutBackgroundEdges), so the wall colour shows
   directly through the transparent areas — no blend mode required, and
   the cushion fabric keeps its true colours on every wall swatch
   including the dark Charcoal / Navy ones. */
.mm-gallery__main--cushion.mm-gallery__main--wall-active .mm-gallery__main-img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 0;
}

.mm-color-matcher {
    display: flex;
    flex-wrap: wrap;            /* label + swatches stack on narrow cols */
    align-items: center;
    gap: 0.5rem 0.75rem;        /* row + column gap for wrapped state */
    margin-top: 0.75rem;
    padding: 0.6rem 0;
}

.mm-color-matcher__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-sage);
    white-space: nowrap;
}

.mm-color-matcher__swatches {
    display: flex;
    flex-wrap: wrap;            /* 8 swatches wrap on viewport <~ 480px wide */
    gap: 6px;
}

.mm-color-matcher__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    padding: 0;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.mm-color-matcher__swatch:hover {
    transform: scale(1.2);
}

.mm-color-matcher__swatch--active {
    border-color: var(--mm-gold);
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   LIVE SEARCH PREVIEW
   ═══════════════════════════════════════════════════════════════ */

.mm-search-preview {
    position: relative;
    /* Fixed, not shrinkable: this only renders at its full desktop size
       above the 1200px breakpoint (see _navigation.html.twig), grouped
       into the right-hand icon column rather than the left-hand link list,
       and measured to fit there with several hundred px to spare — so
       there's nothing left for a shrink-under-pressure fallback to protect
       against, and one less moving part is one less way for two
       environments to render a few px apart and tip a wrap. */
    flex: 0 0 220px;
}

.mm-search-preview__form {
    display: flex;
    align-items: center;
    background: var(--mm-linen);
    border: 1px solid var(--mm-border);
    border-radius: 4px;
    min-width: 0;
    padding: 0 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mm-search-preview__form:focus-within {
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 2px rgba(184, 151, 92, 0.15);
}

.mm-search-preview__icon {
    flex-shrink: 0;
    color: var(--mm-text);
    opacity: 0.5;
}

.mm-search-preview__input {
    border: none;
    background: transparent;
    font-family: var(--mm-body);
    font-size: 0.82rem;
    color: var(--mm-charcoal);
    padding: 6px 8px;
    width: 100%;
    min-width: 0;
    outline: none;
    transition: width 0.3s ease;
}

.mm-search-preview__input:focus {
    width: 220px;
}

.mm-search-preview__input::placeholder {
    color: var(--mm-text);
    opacity: 0.5;
    font-style: italic;
}

/* Remove default search input clear button */
.mm-search-preview__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.mm-search-preview__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 320px;
    background: var(--mm-cream);
    border: 1px solid var(--mm-border);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    display: none;
    margin-top: 4px;
    max-height: 400px;
    overflow: hidden;
}

.mm-search-preview__list {
    max-height: 340px;
    overflow-y: auto;
}

.mm-search-preview__results--open {
    display: block;
}

.mm-search-preview__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--mm-charcoal);
    border-bottom: 1px solid var(--mm-border);
    transition: background 0.15s;
}

.mm-search-preview__item:last-of-type {
    border-bottom: none;
}

.mm-search-preview__item:hover {
    background: var(--mm-linen);
    color: var(--mm-charcoal);
}

.mm-search-preview__image {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--mm-linen);
}

.mm-search-preview__placeholder {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mm-linen);
    border-radius: 4px;
    flex-shrink: 0;
    font-family: var(--mm-heading);
    font-size: 1.3rem;
    color: var(--mm-gold);
    text-transform: uppercase;
}

.mm-search-preview__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mm-search-preview__name {
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-search-preview__highlight {
    background: rgba(184, 151, 92, 0.18);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.mm-search-preview__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--mm-text);
    opacity: 0.6;
    letter-spacing: 0.02em;
}

.mm-search-preview__category {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--mm-body);
}

.mm-search-preview__dot::before {
    content: '\00B7';
    font-weight: bold;
}

.mm-search-preview__sku {
    font-family: var(--mm-body);
}

.mm-search-preview__price {
    font-size: 0.76rem;
    color: var(--mm-gold);
    font-weight: 500;
    margin-top: 1px;
}

.mm-search-preview__unit {
    font-weight: 400;
    opacity: 0.75;
}

.mm-search-preview__view-all {
    display: block;
    text-align: center;
    padding: 10px;
    font-family: var(--mm-body);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-gold);
    text-decoration: none;
    border-top: 1px solid var(--mm-border);
    transition: background 0.15s;
}

.mm-search-preview__view-all:hover {
    background: var(--mm-linen);
    color: var(--mm-gold);
}

.mm-search-preview__empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--mm-text);
    opacity: 0.7;
    font-style: italic;
}

/* Search preview on the search results page */
.mm-search-preview--page {
    position: relative;
}

.mm-search-preview--page .mm-search-preview__results {
    min-width: 100%;
}

/* ── Responsive ── */
/* 1199.98px, not 991px: row 1's curated links now switch to the mobile
   drawer at the 1200px (xl) breakpoint instead of the usual 992px (lg) —
   see _navigation.html.twig — so the search box needs to collapse to its
   mobile icon-only form over that same wider range, or a laptop-width
   window would show the mobile hamburger next to a full desktop search
   field that has nowhere near enough room. */
@media (max-width: 1199.98px) {
    /* Collapse search to icon-only on mobile/tablet */
    .mm-nav-main .mm-search-preview {
        position: static;
        /* Below xl, row 1's curated links are gone and this shares its grid
           column with only the hamburger toggler — a column far narrower
           than the fixed 220px desktop basis (set above), which forced
           would otherwise force it there regardless of the actual width on
           offer. Content-sized instead: with the input collapsed to width:0
           below, that's just the search icon. */
        flex: 0 0 auto;
    }

    .mm-nav-main .mm-search-preview__form {
        background: transparent;
        border-color: transparent;
        padding: 0;
    }

    .mm-nav-main .mm-search-preview__input {
        width: 0;
        padding: 0;
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }

    .mm-nav-main .mm-search-preview__form:focus-within {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1060;
        background: var(--mm-cream);
        border: none;
        border-bottom: 2px solid var(--mm-gold);
        border-radius: 0;
        padding: 12px 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .mm-nav-main .mm-search-preview__form:focus-within .mm-search-preview__input {
        position: static;
        width: 100%;
        padding: 6px 8px;
        opacity: 1;
        pointer-events: auto;
        font-size: 1rem;
    }

    .mm-nav-main .mm-search-preview__results {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        min-width: auto;
        z-index: 1060;
        border-radius: 0;
        border-top: none;
        max-height: 60vh;
    }
}

@media (max-width: 768px) {
    /* Fallback text sizing only — the brand link wraps an <img>, so this is
       what shows if the wordmark ever fails to load. */
    .mm-nav-main__brand {
        font-size: 1.15rem;
        letter-spacing: 0.08em;
        text-align: center;
    }
    .mm-nav-main__brand-img {
        height: 22px;
        max-width: 180px;
        margin: 0 auto;
    }

    .mm-nav-main__left,
    .mm-nav-main__right {
        gap: 0.6rem;
    }

    .mm-nav-main__icon--text {
        font-size: 0.6rem;
        letter-spacing: 0.05em;
    }

    .mm-hero h1 {
        font-size: 2rem;
    }

    .mm-hero {
        padding: 4rem 0;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════
   Blue and White (Résidence d'Été capsule)
   ═══════════════════════════════════════════════ */

/* — 1. Hero — */
.mm-bw-hero {
    position: relative;
    height: 86vh;
    min-height: 540px;
    overflow: hidden;
}

.mm-bw-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.mm-bw-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 6vw 5vh;
    pointer-events: none;
}

.mm-bw-hero__title {
    margin: 0;
    color: #fff;
    font-family: var(--mm-heading);
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
    pointer-events: auto;
}
.mm-bw-hero__title em {
    font-style: italic;
}

/* — 2. Intro — */
.mm-bw-intro {
    padding: 6rem 0;
    background: var(--mm-cream);
}

.mm-bw-intro__img {
    width: 100%;
    height: auto;
    display: block;
}

.mm-bw-intro__copy {
    font-family: var(--mm-heading);
    font-size: 1.35rem;
    line-height: 1.65;
    text-align: center;
    color: var(--mm-charcoal);
    max-width: 28rem;
    margin: 0 auto;
}
.mm-bw-intro__copy p { margin: 0; }
.mm-bw-intro__copy em { font-style: italic; }

/* — Section title (shared by What's New / What it goes with / Catalogues) — */
.mm-bw-section-title {
    font-family: var(--mm-body);
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 3rem;
    color: var(--mm-charcoal);
    font-weight: 500;
}
.mm-bw-section-title--script {
    font-family: var(--mm-heading);
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 400;
}

/* — 3. What's New (fabric grid) — */
.mm-bw-whats-new {
    padding: 5rem 0 6rem;
    background: var(--mm-cream);
}

.mm-bw-fabric { text-align: center; }

.mm-bw-fabric__img-link {
    display: block;
    overflow: hidden;
    margin-bottom: 1.4rem;
}
.mm-bw-fabric__img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.mm-bw-fabric__img-link:hover .mm-bw-fabric__img { transform: scale(1.03); }

.mm-bw-fabric__img--placeholder {
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, #e9eef4, #cbd6e3);
}

.mm-bw-fabric__title {
    font-family: var(--mm-body);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    color: var(--mm-charcoal);
    font-weight: 500;
}

.mm-bw-fabric__specs {
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    color: var(--mm-text);
    margin: 0 0 0.6rem;
    font-style: italic;
}

.mm-bw-fabric__desc {
    font-family: var(--mm-heading);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--mm-text);
    margin: 0;
    max-width: 22rem;
    margin-inline: auto;
}

/* — 4. Curtain feature (full-bleed image) — */
.mm-bw-curtain {
    position: relative;
    height: 70vh;
    min-height: 480px;
    background-size: cover;
    background-position: center;
}

.mm-bw-curtain__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 6vw 6vh;
    pointer-events: none;
}

.mm-bw-curtain__text {
    margin: 0;
    color: var(--mm-charcoal);
    font-family: var(--mm-heading);
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    line-height: 1.35;
    pointer-events: auto;
}

/* — 5. What it goes with — */
.mm-bw-goes-with {
    padding: 6rem 0;
    background: var(--mm-cream);
}

.mm-bw-pair { text-align: center; }

.mm-bw-pair__img-link {
    display: block;
    overflow: hidden;
    margin-bottom: 1rem;
}

.mm-bw-pair__img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.mm-bw-pair__img--vase {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--mm-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.mm-bw-pair__title {
    font-family: var(--mm-body);
    font-variant: small-caps;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--mm-charcoal);
    margin: 0;
    font-weight: 500;
}

/* — 6. Download Our Catalogues — */
.mm-bw-catalogues {
    padding: 5rem 0 8rem;
    background: var(--mm-cream);
    border-top: 1px solid var(--mm-border);
    border-bottom: 1px solid var(--mm-border);
}

.mm-bw-catalogue {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.mm-bw-catalogue__cover {
    aspect-ratio: 3/4;
    background: linear-gradient(180deg, #fbf9f7 0%, #f3efe8 100%);
    border: 1px solid var(--mm-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    transition: box-shadow 0.25s ease;
}
.mm-bw-catalogue:hover .mm-bw-catalogue__cover {
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.mm-bw-catalogue__brand {
    font-family: var(--mm-heading);
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: var(--mm-gold);
}
.mm-bw-catalogue__hint {
    font-family: var(--mm-body);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-text);
    opacity: 0.7;
}

.mm-bw-catalogue__title {
    font-family: var(--mm-body);
    font-variant: small-caps;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: var(--mm-charcoal);
    margin: 0;
    font-weight: 500;
}

@media (max-width: 768px) {
    .mm-bw-hero { height: 70vh; }
    .mm-bw-curtain { height: 50vh; min-height: 320px; }
    .mm-bw-intro,
    .mm-bw-whats-new,
    .mm-bw-goes-with,
    .mm-bw-catalogues { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* ═══════════════════════════════════════════════
   Spring Yellows (Primrose & Crème Brûlée)
   ═══════════════════════════════════════════════ */

/* — 1. Hero — */
.mm-sy-hero {
    position: relative;
    height: 86vh;
    min-height: 540px;
    overflow: hidden;
}
.mm-sy-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.mm-sy-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 6vw 5vh;
    text-align: right;
    pointer-events: none;
}

/* Soft dark scrim across the bottom-right corner where the text sits.
   Keeps the swatches readable but lifts text contrast on light areas. */
.mm-sy-hero__overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at bottom right,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.32) 28%,
            rgba(0,0,0,0) 60%),
        linear-gradient(to top, rgba(0,0,0,0.22), transparent 35%);
    pointer-events: none;
}

.mm-sy-hero__lead,
.mm-sy-hero__title {
    color: #fff;
    margin: 0;
    /* Layered shadow: soft halo + crisp inner shadow so glyphs read on
       both the dark scrim and any stray light fabric peeking through. */
    text-shadow:
        0 1px 2px rgba(0,0,0,0.55),
        0 2px 16px rgba(0,0,0,0.55),
        0 0 32px rgba(0,0,0,0.4);
    pointer-events: auto;
    position: relative;
}
.mm-sy-hero__lead {
    font-family: var(--mm-heading);
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.mm-sy-hero__title {
    font-family: var(--mm-heading);
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 400;
    line-height: 1.1;
    margin-top: 0.4rem;
}

/* — 2 & 3. Split sections — */
.mm-sy-split {
    padding: 6rem 0;
    background: var(--mm-cream);
}
.mm-sy-split__img {
    width: 100%;
    height: auto;
    display: block;
}
.mm-sy-split__copy {
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    line-height: 1.65;
    text-align: center;
    color: var(--mm-charcoal);
    max-width: 28rem;
    margin: 0 auto;
}
.mm-sy-split__copy p { margin: 0 0 1rem; }
.mm-sy-split__copy p:last-child { margin-bottom: 0; }
.mm-sy-split__copy em { font-style: italic; }

/* — 4. Closing CTA paragraph — */
.mm-sy-closing {
    padding: 5rem 0 7rem;
    background: var(--mm-cream);
    text-align: center;
}
.mm-sy-closing__copy {
    font-family: var(--mm-heading);
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--mm-charcoal);
    max-width: 56rem;
    margin: 0 auto 2.5rem;
}
.mm-sy-closing__copy p { margin: 0 0 1rem; }
.mm-sy-closing__copy p:last-child { margin-bottom: 0; }
.mm-sy-closing__cta {
    text-align: center;
}

@media (max-width: 768px) {
    .mm-sy-hero { height: 70vh; }
    .mm-sy-split { padding: 3.5rem 0; }
    .mm-sy-closing { padding: 3.5rem 0 5rem; }
    /* Reverse split on mobile shows image first regardless of order- classes */
    .mm-sy-split--reverse .col-md-6.order-md-1 { order: 2; }
    .mm-sy-split--reverse .col-md-6.order-md-2 { order: 1; }
}

/* ═══════════════════════════════════════════════
   Inspiration Gallery
   ═══════════════════════════════════════════════ */

.mm-inspiration-hero {
    padding: 6rem 0 3rem;
    text-align: center;
}

.mm-inspiration-hero__tag {
    display: inline-block;
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin-bottom: 1rem;
}

.mm-inspiration-hero__title {
    font-family: var(--mm-heading);
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--mm-charcoal);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.mm-inspiration-hero__subtitle {
    font-family: var(--mm-body);
    font-size: 1.05rem;
    color: var(--mm-text);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}

.mm-inspiration-intro {
    padding: 0 0 3rem;
}

.mm-inspiration-intro__text {
    font-family: var(--mm-body);
    font-size: 1rem;
    color: var(--mm-text);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Masonry Grid ── */
.mm-masonry {
    max-width: 1400px;
    margin: 0 auto;
}

/* Dynamic columns-based masonry */
.mm-masonry--dynamic {
    columns: 3;
    column-gap: 12px;
}

.mm-masonry--dynamic .mm-masonry__item {
    break-inside: avoid;
    margin-bottom: 12px;
}

.mm-masonry__img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--mm-linen);
}

.mm-masonry__img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s ease;
}

.mm-masonry__img-wrap:hover img {
    transform: scale(1.04);
}

.mm-masonry__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30,30,30,0.65) 0%, rgba(30,30,30,0.05) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mm-masonry__img-wrap:hover .mm-masonry__overlay {
    opacity: 1;
}

.mm-masonry__caption {
    font-family: var(--mm-heading);
    font-size: 1.15rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
}

.mm-masonry__location {
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-top: 0.3rem;
}

/* ── Gallery Edit Controls ── */
.mm-gallery-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    gap: 4px;
    z-index: 10;
}

.mm-gallery-editing .mm-gallery-controls {
    display: flex;
}

.mm-gallery-editing .mm-masonry__item {
    outline: 2px dashed transparent;
    transition: outline-color 0.2s;
}

.mm-gallery-editing .mm-masonry__item:hover {
    outline-color: var(--mm-gold);
}

.mm-gallery-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    background: rgba(0,0,0,0.6);
    color: #fff;
    backdrop-filter: blur(4px);
}

.mm-gallery-btn:hover {
    transform: scale(1.1);
}

.mm-gallery-btn--replace:hover { background: var(--mm-sage); }
.mm-gallery-btn--edit:hover { background: var(--mm-gold); }
.mm-gallery-btn--remove:hover { background: #c0392b; }

.mm-gallery-add {
    break-inside: avoid;
    margin-bottom: 12px;
    display: none;
}

.mm-gallery-editing .mm-gallery-add {
    display: block;
}

.mm-gallery-btn--add {
    width: 100%;
    min-height: 160px;
    border: 2px dashed var(--mm-border);
    border-radius: 6px;
    background: var(--mm-linen);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--mm-text);
    font-family: var(--mm-body);
    font-size: 0.85rem;
    transition: border-color 0.2s, background 0.2s;
}

.mm-gallery-btn--add:hover {
    border-color: var(--mm-gold);
    background: rgba(184,151,92,0.08);
}

/* ── CTA Section ── */
.mm-inspiration-cta {
    padding: 5rem 0 6rem;
}

.mm-inspiration-cta h2 {
    font-family: var(--mm-heading);
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--mm-charcoal);
    margin-bottom: 1rem;
}

.mm-inspiration-cta__text {
    font-family: var(--mm-body);
    font-size: 1rem;
    color: var(--mm-text);
    max-width: 520px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 992px) {
    .mm-masonry--dynamic { columns: 2; }
}

@media (max-width: 768px) {
    .mm-inspiration-hero { padding: 4rem 0 2rem; }
    .mm-inspiration-hero__title { font-size: 2.4rem; }

    .mm-masonry--dynamic { columns: 1; }

    .mm-masonry__overlay {
        opacity: 1;
    }

    .mm-inspiration-cta { padding: 3rem 0 4rem; }
    .mm-inspiration-cta h2 { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════
   Toast Notification
   ═══════════════════════════════════════════ */
.mm-toast {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    background: var(--mm-charcoal);
    color: var(--mm-white);
    font-family: var(--mm-body);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    border-radius: 2px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    pointer-events: none;
    white-space: nowrap;
}

.mm-toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mm-toast svg {
    flex-shrink: 0;
    opacity: 0.85;
    color: var(--mm-sage);
}

.mm-toast--error {
    background: #5a2020;
}

.mm-toast--error svg {
    color: #e8a0a0;
}

/* ═══════════════════════════════════════════
   Fabric Collection Pages
   ═══════════════════════════════════════════ */

.mm-section-title {
    font-family: var(--mm-heading);
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    color: var(--mm-charcoal);
}

/* ── Fabric Families Index ── */
.mm-fabric-families {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.mm-fabric-families__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s;
}

.mm-fabric-families__card:hover {
    transform: translateY(-2px);
}

.mm-fabric-families__image {
    overflow: hidden;
    margin-bottom: 1rem;
}

.mm-fabric-families__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mm-fabric-families__card:hover .mm-fabric-families__image img {
    transform: scale(1.03);
}

.mm-fabric-families__name {
    font-family: var(--mm-heading);
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 0.3rem;
}

.mm-fabric-families__tagline {
    font-family: var(--mm-body);
    font-size: 0.85rem;
    color: var(--mm-text);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.mm-fabric-families__meta {
    font-family: var(--mm-body);
    font-size: 0.7rem;
    color: var(--mm-sage);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-fabric-families__link {
    font-family: var(--mm-body);
    font-size: 0.72rem;
    color: var(--mm-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    display: inline-block;
}

@media (max-width: 768px) {
    .mm-fabric-families {
        grid-template-columns: 1fr;
    }
}

/* ── Fabric Family Detail Page ── */
.mm-fabric-hero__img {
    width: 100%;
    object-fit: cover;
}

.mm-fabric-hero__tagline {
    font-family: var(--mm-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--mm-sage);
    margin-bottom: 1rem;
}

.mm-fabric-hero__desc {
    font-family: var(--mm-body);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--mm-text);
    margin-bottom: 1.5rem;
}

.mm-fabric-hero__specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mm-fabric-hero__spec {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mm-fabric-hero__spec-label {
    font-family: var(--mm-body);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mm-sage);
}

.mm-fabric-hero__spec-value {
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    color: var(--mm-charcoal);
}

/* ── Catalogue Gallery Grid ── */
.mm-catalogue-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.mm-catalogue-gallery__item {
    overflow: hidden;
}

.mm-catalogue-gallery__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mm-catalogue-gallery__item:hover img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .mm-catalogue-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Fabric Family Nav ── */
.mm-fabric-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mm-fabric-nav__link {
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--mm-border);
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mm-text);
    text-decoration: none;
    transition: all 0.2s;
}

.mm-fabric-nav__link:hover {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}

/* ═══════════════════════════════════════════
   Guide Pages (Curtain Headings & Blinds)
   ═══════════════════════════════════════════ */

.mm-guide__intro {
    font-family: var(--mm-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--mm-text);
}

.mm-guide__section {
    padding: 3rem 0;
    border-bottom: 1px solid var(--mm-border);
}

.mm-guide__section:last-of-type {
    border-bottom: none;
}

.mm-guide__image {
    width: 100%;
    object-fit: cover;
}

.mm-guide__heading {
    font-family: var(--mm-heading);
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--mm-charcoal);
}

.mm-guide__text {
    font-family: var(--mm-body);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--mm-text);
    margin-bottom: 1.5rem;
}

.mm-guide__cta {
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-gold);
    text-decoration: none;
    transition: color 0.2s;
}

.mm-guide__cta:hover {
    color: var(--mm-charcoal);
}

/* ═══════════════════════════════════════════
   Instagram Feed Component
   ═══════════════════════════════════════════ */
.mm-instagram {
    padding: 3rem 0;
    border-top: 1px solid var(--mm-border);
}

.mm-instagram__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.mm-instagram__title {
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--mm-charcoal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.mm-instagram__title svg {
    color: var(--mm-sage);
}

.mm-instagram__handle {
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--mm-sage);
    text-decoration: none;
    transition: color 0.2s;
}

.mm-instagram__handle:hover {
    color: var(--mm-gold);
}

.mm-instagram__grid {
    display: grid;
    gap: 0.4rem;
}

.mm-instagram__grid--3 { grid-template-columns: repeat(3, 1fr); }
.mm-instagram__grid--4 { grid-template-columns: repeat(4, 1fr); }
.mm-instagram__grid--6 { grid-template-columns: repeat(6, 1fr); }

.mm-instagram__post {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 1;
}

.mm-instagram__post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mm-instagram__post:hover img {
    transform: scale(1.05);
}

.mm-instagram__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(20, 18, 14, 0.78) 0%,
        rgba(20, 18, 14, 0.42) 40%,
        rgba(20, 18, 14, 0) 70%
    );
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.5rem 1.25rem 1.25rem;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mm-instagram__post:hover .mm-instagram__overlay {
    opacity: 1;
}

.mm-instagram__caption {
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 253, 248, 0.98);
    text-align: left;
    line-height: 1.45;
    letter-spacing: 0.005em;
    max-width: 100%;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    transform: translateY(8px);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mm-instagram__post:hover .mm-instagram__caption {
    transform: translateY(0);
}

.mm-instagram__caption::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--mm-gold);
    margin-bottom: 0.65rem;
    opacity: 0.9;
}

.mm-instagram__video-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: white;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .mm-instagram__grid--3 { grid-template-columns: repeat(2, 1fr); }
    .mm-instagram__grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mm-instagram__grid--6 { grid-template-columns: repeat(3, 1fr); }

    .mm-instagram__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   Instagram: Shop Badge on shoppable posts
   ───────────────────────────────────────────────────────────── */
.mm-instagram__post-wrap {
    position: relative;
    overflow: hidden;
}

.mm-instagram__post-wrap--shoppable .mm-instagram__post {
    display: block;
}

.mm-instagram__shop-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px 8px 13px;
    background: rgba(255, 253, 248, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: #2C2A26;
    font-family: var(--mm-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 3;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease,
        letter-spacing 0.35s ease,
        padding 0.35s ease;
}

.mm-instagram__shop-badge svg {
    width: 13px;
    height: 13px;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mm-instagram__shop-badge:hover {
    background: linear-gradient(135deg, var(--mm-gold) 0%, #d4af6d 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    letter-spacing: 0.26em;
    padding-right: 18px;
    box-shadow:
        0 2px 6px rgba(184, 151, 92, 0.25),
        0 12px 28px rgba(184, 151, 92, 0.35);
}

.mm-instagram__shop-badge:hover svg {
    transform: translateX(1px) rotate(-4deg);
}

.mm-instagram__shop-badge:active {
    transform: translateY(0);
}

.mm-instagram__shop-badge:focus-visible {
    outline: 2px solid var(--mm-gold);
    outline-offset: 3px;
}

/* Gentle attention pulse on idle — so users notice it's interactive */
@keyframes mm-badge-breathe {
    0%, 100% {
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.08),
            0 8px 24px rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.08),
            0 8px 24px rgba(184, 151, 92, 0.28);
    }
}

.mm-instagram__post-wrap--shoppable .mm-instagram__shop-badge {
    animation: mm-badge-breathe 3.5s ease-in-out infinite;
}

.mm-instagram__post-wrap--shoppable:hover .mm-instagram__shop-badge {
    animation: none;
}

.mm-instagram__journal-link {
    margin-top: 2rem;
}

/* ─────────────────────────────────────────────────────────────
   Shop the Post modal
   ───────────────────────────────────────────────────────────── */
.mm-shop-post {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.mm-shop-post--open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

.mm-shop-post__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(6px);
}

.mm-shop-post__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: #fbf9f7;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    transform: scale(0.96) translateY(12px);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: visible;
}

.mm-shop-post--open .mm-shop-post__panel {
    transform: scale(1) translateY(0);
}

.mm-shop-post__close {
    position: absolute;
    top: 0;
    right: 0;
    /* Outer translate keeps the button's center exactly on the panel's
       upper-right corner. Rotation is applied to the inner icon only. */
    transform: translate(50%, -50%);
    width: 36px;
    height: 36px;
    border: none;
    background: #fbf9f7;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    color: #2C2A26;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    padding: 0;
}

.mm-shop-post__close-icon {
    display: block;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mm-shop-post__close:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.mm-shop-post__close:hover .mm-shop-post__close-icon {
    transform: rotate(90deg);
}

.mm-shop-post__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #e8e2d5;
    display: block;
    grid-row: 1;
    grid-column: 1;
    border-radius: 6px 0 0 6px;
}

@media (max-width: 720px) {
    .mm-shop-post__image {
        border-radius: 6px 6px 0 0;
    }
}

.mm-shop-post__inner {
    grid-row: 1;
    grid-column: 2;
    padding: 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mm-shop-post__caption {
    color: #4a4743;
    font-family: var(--mm-body);
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #eee5d5;
}

.mm-shop-post__products-label {
    font-family: var(--mm-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin-bottom: 0.75rem;
}

.mm-shop-post__products {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mm-shop-post__product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #eee5d5;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mm-shop-post__product:hover {
    border-color: var(--mm-gold);
    box-shadow: 0 2px 12px rgba(184, 151, 92, 0.15);
}

.mm-shop-post__product-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    background-color: #e8e2d5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-heading);
    font-size: 1.2rem;
    color: #8a867f;
}

.mm-shop-post__product-thumb--empty {
    background-image: none;
}

.mm-shop-post__product-name {
    font-family: var(--mm-body);
    font-size: 0.88rem;
    color: #2C2A26;
    font-weight: 500;
}

.mm-shop-post__empty {
    padding: 0 1.5rem;
    color: #8a867f;
    font-size: 0.85rem;
    font-style: italic;
}

.mm-shop-post__permalink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 1.5rem;
    color: var(--mm-gold);
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mm-shop-post__permalink:hover {
    color: #2C2A26;
}

body.mm-shop-post-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .mm-shop-post__panel {
        grid-template-columns: 1fr;
        max-height: 90vh;
    }

    .mm-shop-post__image {
        aspect-ratio: 1;
        height: auto;
        grid-row: 1;
        grid-column: 1;
    }

    .mm-shop-post__inner {
        grid-row: 2;
        grid-column: 1;
        padding: 1.5rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   Journal page
   ───────────────────────────────────────────────────────────── */
.mm-journal {
    background: #fbf9f7;
    padding-bottom: 4rem;
}

.mm-journal__header {
    padding: 5rem 0 3rem;
    text-align: center;
    border-bottom: 1px solid var(--mm-border);
    margin-bottom: 3rem;
}

.mm-journal__eyebrow {
    display: inline-block;
    font-family: var(--mm-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin-bottom: 1rem;
}

.mm-journal__title {
    font-family: var(--mm-heading);
    font-size: 3.6rem;
    font-weight: 300;
    color: #2C2A26;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

.mm-journal__lede {
    font-family: var(--mm-body);
    font-size: 1.05rem;
    color: #4a4743;
    max-width: 520px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.mm-journal__handle {
    display: inline-block;
    font-family: var(--mm-body);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #8a867f;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mm-journal__handle:hover {
    color: var(--mm-gold);
}

.mm-journal__month {
    text-align: center;
    margin: 3rem 0 2rem;
    position: relative;
}

.mm-journal__month::before,
.mm-journal__month::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 100px);
    height: 1px;
    background: var(--mm-border);
}

.mm-journal__month::before { left: 0; }
.mm-journal__month::after { right: 0; }

.mm-journal__month-label {
    display: inline-block;
    padding: 0 1rem;
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    font-weight: 300;
    color: #8a867f;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: #fbf9f7;
    position: relative;
    z-index: 1;
}

.mm-journal__entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--mm-border);
}

.mm-journal__entry:last-child {
    border-bottom: none;
}

.mm-journal__entry--reverse .mm-journal__media {
    order: 2;
}

.mm-journal__entry--reverse .mm-journal__content {
    order: 1;
}

.mm-journal__media {
    position: relative;
}

.mm-journal__media a {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.mm-journal__media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mm-journal__media a:hover img {
    transform: scale(1.03);
}

.mm-journal__video-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.mm-journal__content {
    padding: 1rem 0;
}

.mm-journal__date {
    display: block;
    font-family: var(--mm-body);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin-bottom: 1rem;
}

.mm-journal__body {
    font-family: var(--mm-body);
    color: #2C2A26;
    line-height: 1.7;
    font-size: 1rem;
}

.mm-journal__body p {
    margin: 0 0 1rem;
}

.mm-journal__body p:first-child {
    font-size: 1.1rem;
    color: #1a1a1a;
}

.mm-journal__products {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(184, 151, 92, 0.06);
    border-left: 2px solid var(--mm-gold);
    border-radius: 2px;
}

.mm-journal__products-label {
    display: block;
    font-family: var(--mm-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin-bottom: 0.75rem;
}

.mm-journal__products-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mm-journal__product-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: #fff;
    border: 1px solid #eee5d5;
    border-radius: 20px;
    text-decoration: none;
    color: #2C2A26;
    font-family: var(--mm-body);
    font-size: 0.82rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.mm-journal__product-chip:hover {
    border-color: var(--mm-gold);
    color: #2C2A26;
    transform: translateY(-1px);
}

.mm-journal__product-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e8e2d5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-heading);
    font-size: 0.9rem;
    color: #8a867f;
    flex-shrink: 0;
}

.mm-journal__product-thumb--empty {
    background-color: var(--mm-gold);
    color: #fff;
}

.mm-journal__product-name {
    white-space: nowrap;
}

.mm-journal__tags {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mm-journal__tag {
    font-family: var(--mm-body);
    font-size: 0.72rem;
    color: #8a867f;
    letter-spacing: 0.02em;
}

.mm-journal__permalink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1.5rem;
    color: #8a867f;
    font-family: var(--mm-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mm-journal__permalink:hover {
    color: var(--mm-gold);
}

.mm-journal__permalink-arrow {
    font-size: 0.9rem;
}

.mm-journal__empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #8a867f;
}

.mm-journal__cta {
    margin-top: 2rem;
    padding: 3.5rem 0;
    background: #f3ede0;
    text-align: center;
}

.mm-journal__cta h2 {
    font-family: var(--mm-heading);
    font-weight: 300;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.mm-journal__cta p {
    color: #4a4743;
    max-width: 480px;
    margin: 0 auto 1.5rem;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .mm-journal__title {
        font-size: 2.4rem;
    }

    .mm-journal__entry,
    .mm-journal__entry--reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        direction: ltr;
    }

    .mm-journal__content {
        padding: 0;
    }

    .mm-shop-post__panel {
        max-width: 100%;
    }

    .mm-instagram__shop-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Mega Menu (navbar dropdown with columns + feature image)
   ═══════════════════════════════════════════════════════════════ */

.mm-mega {
    position: static; /* so the dropdown-menu can span full width */
}

/* Fade-in for nav dropdowns (simple + mega). Override Bootstrap's display:none
   so opacity can animate; visibility toggle keeps the hidden menu from
   catching hover events.
   z-index sits above any in-page sticky elements (e.g. the MTM
   configurator steps bar at z-index:50) so dropdowns always render on top.
   The category row's panels are plain divs rather than Bootstrap menus —
   nothing to override there — but they open and close the same way, off the
   same `.show` class the script sets. */
.mm-nav-top .dropdown-menu,
.mm-nav-row2 .mm-mega__panel {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1050;
    transition: opacity 180ms ease-out, visibility 0s linear 180ms;
}

.mm-nav-top .dropdown-menu.show,
.mm-nav-row2 .mm-mega__panel.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease-out, visibility 0s linear 0s;
}

/* Set by the script for the one frame in which a panel is swapped for its
   neighbour. Both panels occupy the same space, so fading one out while the
   other fades in shows them stacked and half-transparent over each other —
   the swap has to be a cut, not a dissolve. */
.mm-nav .mm-nav-panel--instant {
    transition: none !important;
}

/* Panel's containing block is .mm-nav itself: .mm-mega is deliberately
   position:static (comment above), and every element between it and .mm-nav
   is static too, so the search for a positioned ancestor skips straight up
   to .mm-nav's own position:sticky. That box already wraps both nav rows,
   so `top: 100%` alone clears row 1 and row 2 — no JS-measured height
   needed here (--mm-nav-main-height is still used by the mobile drawer's
   max-height, a separate calculation this doesn't touch).

   This used to read `calc(100% + var(--mm-nav-main-height))`, dating from
   when the mega triggers lived in their own top tier with its own
   position:relative container — that container no longer exists post
   redesign, so the containing block silently became .mm-nav and the added
   height started double-counting row 1, landing the panel one row-height
   below where it belongs.

   Unscoped, so a category's panel in row 2 lands in exactly the same place
   as a mega menu's in row 1 — which is the point: whichever row you're
   hovering, the panel is one full-width sheet under the whole navbar. The
   !importants are only needed against Bootstrap's Popper inline styles in
   row 1; row 2 has no Popper and would be fine without them. */
.mm-mega__panel {
    /* `inset: auto` first so it doesn't override the explicit top/left below */
    inset: auto !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1200px, calc(100vw - 2rem));
    padding: 0;
    /* No top border: the panel opens flush against the navbar, whose own
       bottom edge is already a line in the same colour. Drawing a second one
       a pixel below it reads as a doubled rule, not as two elements. The
       navbar's edge is the panel's top edge. */
    border: 1px solid var(--mm-border);
    border-top: 0;
    border-radius: 0;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    background: var(--mm-white);
    margin: 0;
}

.mm-mega__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    padding: 2rem 2.5rem;
}

.mm-mega__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 2rem 2.5rem;
}

.mm-mega__column-heading {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-charcoal);
    font-weight: 600;
    margin-bottom: 0.8rem;
    opacity: 0.7;
}

.mm-mega__column-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mm-mega__column-links a {
    font-family: var(--mm-body);
    font-size: 0.82rem;
    color: var(--mm-charcoal);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.2s;
}

.mm-mega__column-links a:hover {
    color: var(--mm-gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

.mm-mega__feature {
    width: 280px;
    flex-shrink: 0;
}

/* Pictures filling the space a short column leaves. They sit in the same
   grid track as the feature card and are mutually exclusive with it, so a
   panel is either editorial (one big card someone chose) or catalogue (a few
   thumbnails the site picked) — never both competing on the same row.

   Square, because they come from two sources with different aspect ratios
   (a division's borrowed product shot, a product's own) and a ragged row of
   heights would undo the tidiness this is here to add. */
/* A grid of fixed tracks rather than a flex row: the track width is the tile
   width, so a label can never widen its own tile and push the row past the
   edge of the sheet.

   One track per tile via auto-flow, not `repeat(auto-fit, 150px)`. This grid
   sits in the parent's `auto` track, so auto-fit has no resolved width to
   count tracks against and collapses the lot into a single stacked column.
   Auto-flow takes its column count from the number of tiles instead, which
   is what we actually mean — and still narrows to two tracks for a category
   with only two pictures. */
.mm-mega__tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 150px;
    gap: 1.1rem;
    flex-shrink: 0;
}

.mm-mega__tile {
    display: block;
    text-decoration: none;
    color: var(--mm-charcoal);
    min-width: 0;
}

.mm-mega__tile-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 2px;
    transition: opacity 0.2s;
}

/* Product names run long ("Lino Cushion Bianco 40x40cm"), so the label wraps
   and then stops at two lines. Without the clamp one wordy name sets the
   height of the whole row and the tiles stop lining up along their bottom
   edge. `white-space: normal` is belt and braces: this text sits inside an
   anchor in the navbar, which is exactly where a nowrap meant for the row's
   own entries leaked in before. */
.mm-mega__tile-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.55rem;
    font-family: var(--mm-body);
    font-size: 0.68rem;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: normal;
    color: var(--mm-charcoal);
    transition: color 0.2s;
}

.mm-mega__tile:hover .mm-mega__tile-img { opacity: 0.88; }
.mm-mega__tile:hover .mm-mega__tile-label { color: var(--mm-gold); }

.mm-mega__feature-link {
    display: block;
    text-decoration: none;
    color: var(--mm-charcoal);
}

.mm-mega__feature-img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 2px;
}

.mm-mega__feature-caption {
    font-family: var(--mm-heading);
    font-style: italic;
    font-size: 0.95rem;
    margin: 0.8rem 0 0.3rem;
    color: var(--mm-charcoal);
}

.mm-mega__feature-cta {
    display: inline-block;
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-gold);
    padding-top: 0.2rem;
}

.mm-mega__footer {
    display: block;
    text-align: center;
    font-family: var(--mm-body);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1rem;
    border-top: 1px solid var(--mm-border);
    color: var(--mm-charcoal);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.mm-mega__footer:hover {
    color: var(--mm-gold);
    background: var(--mm-cream);
}

@media (max-width: 1100px) {
    .mm-mega__grid {
        grid-template-columns: 1fr;
    }
    .mm-mega__feature {
        width: 100%;
    }
    /* Stacked under the columns at this width. Equal fractions of the row
       rather than three tiles at 100% each, which would have been three
       times the width of the space they sit in. */
    .mm-mega__tiles {
        grid-auto-columns: 1fr;
        width: 100%;
    }
    .mm-mega__tile-img {
        height: 120px;
    }
    .mm-mega__feature-img {
        height: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Block Editor — frontend rendering (pages using page/blocks.html.twig)
   ═══════════════════════════════════════════════════════════════ */

/* A block the admin has taken off the page. Only ever rendered for a logged-in
   admin — visitors don't receive the markup at all — so the striped frame is a
   working aid, not something a customer can stumble into. */
.mm-block-hidden {
    position: relative;
    opacity: 0.45;
    outline: 2px dashed #c4a35a;
    outline-offset: -2px;
}

.mm-block-hidden__badge {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    padding: 3px 10px;
    background: #c4a35a;
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mm-block-text {
    padding: 3rem 0;
}

.mm-block-cta {
    padding: 4rem 0;
    background: #faf8f4;
}

.mm-block-cta__text {
    max-width: 600px;
    margin: 0 auto 2rem;
    color: #666;
    line-height: 1.7;
}

.mm-block-video__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.mm-block-video__wrapper iframe,
.mm-block-video__wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mm-block-video__caption {
    color: #888;
    font-size: 0.9rem;
}

.mm-block-testimonial__quote {
    font-size: 1.3rem;
    line-height: 1.7;
    font-style: italic;
    color: #333;
    border: none;
    padding: 0;
    margin: 0;
}

.mm-block-testimonial__quote p {
    margin-bottom: 1rem;
}

.mm-block-testimonial__author {
    font-size: 0.9rem;
    font-style: normal;
    color: #666;
}

.mm-block-testimonial__author strong {
    color: #333;
}

.mm-block-testimonial__author span {
    margin-left: 0.25rem;
}

.mm-block-two-col__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.mm-block-two-col__text {
    line-height: 1.7;
    color: #444;
}

.mm-block-spacer {
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   Made to Measure Configurator
   ════════════════════════════════════════════════════════════════ */

.mm-mtm {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem 7rem;
    font-family: var(--mm-body);
    color: var(--mm-charcoal);
}

.mm-mtm__hero {
    text-align: center;
    margin-bottom: 2.5rem;
}
.mm-mtm__kicker {
    font-family: var(--mm-body);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin: 0 0 0.75rem;
}
.mm-mtm__title {
    font-family: var(--mm-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
}
.mm-mtm__intro {
    max-width: 40rem;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #555;
}
/* Curtain ↔ Sheer toggle in the hero header. Both options stay visible
   so the customer can see what they're choosing between. */
.mm-mtm__type-toggle {
    margin: 1.1rem auto 0;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b8aa92;
}
.mm-mtm__type-toggle-link {
    color: #b8aa92;
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    transition: color 0.15s;
}
.mm-mtm__type-toggle-link:hover {
    color: var(--mm-charcoal);
    text-decoration: none;
}
.mm-mtm__type-toggle-link.is-active {
    color: var(--mm-gold);
    font-weight: 600;
    border-bottom: 1px solid var(--mm-gold);
}
.mm-mtm__type-toggle > span {
    color: #d8d2c4;
    margin: 0 0.25rem;
}

/* ── Progress stepper — bigger circles connected with lines, clickable.
       Sticky bar spans the full viewport (escapes .mm-mtm's max-width
       container) so it covers search/logout cleanly on wide screens.
       min-height matches .mm-nav (~144px on desktop) so when both are
       sticky at top:0, the bar fully masks the nav — no sliver pokes out. ── */
.mm-mtm__steps-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Solid cream — matches the page background. We previously used a
       0.95 cream + backdrop-filter blur for a frosted-glass look, but the
       blur recompute on every scroll frame caused noticeable jank on
       sticky scroll. Solid is visually nearly identical here (the nav
       below is white; cream covers cleanly) and runs at 60fps. */
    background: var(--mm-cream, #fbf9f7);
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(196, 163, 90, 0.15);
    /* Break out of the parent's max-width so the bar runs viewport-edge to viewport-edge. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    /* Promote the bar to its own GPU layer so sticky-scroll repaints
       don't invalidate the rest of the page. */
    will-change: transform;
}
@media (max-width: 768px) {
    /* Mobile nav is shorter — relax the min-height so the bar doesn't
       leave wasted whitespace on small screens. */
    .mm-mtm__steps-bar {
        min-height: 0;
    }
}
.mm-mtm__steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 760px;
}
.mm-mtm__step {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    font-family: inherit;
    transition: opacity 0.2s;
}
.mm-mtm__step:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.mm-mtm__step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    border: 2px solid #d8d2c4;
    color: #b8aa92;
    background: white;
    transition: all 0.25s;
}
.mm-mtm__step-name {
    position: relative;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #b8aa92;
    font-weight: 500;
    transition: color 0.2s;
    text-align: center;
}
/* Reserve bold-text width so the label doesn't shift the layout when active. */
.mm-mtm__step-name::after {
    content: attr(data-label);
    font-weight: 600;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    display: block;
}
.mm-mtm__step-line {
    flex: 1;
    height: 2px;
    background: #d8d2c4;
    margin: 19px 0.45rem 0;
    transition: background 0.3s;
    max-width: 80px;
    min-width: 18px;
}
/* Hover on an idle (not-active, not-done) step paints the gold outline +
   text. We exclude is-active and is-done because they already use gold or
   charcoal as their fill — re-colouring the text to gold there would make
   the number invisible against its own background (gold-on-gold). */
.mm-mtm__step:hover:not(:disabled):not(.is-active):not(.is-done) .mm-mtm__step-num {
    border-color: var(--mm-gold);
    color: var(--mm-gold);
}
/* Hover affordance for the filled "done" and "active" states is a soft
   ring instead of a colour change, so the number stays legible. */
.mm-mtm__step.is-done:hover:not(:disabled) .mm-mtm__step-num {
    box-shadow: 0 0 0 4px rgba(196, 163, 90, 0.18);
}
.mm-mtm__step.is-active .mm-mtm__step-num {
    background: var(--mm-charcoal);
    border-color: var(--mm-charcoal);
    color: white;
    box-shadow: 0 0 0 4px rgba(44, 42, 38, 0.1);
}
.mm-mtm__step.is-active .mm-mtm__step-name {
    color: var(--mm-charcoal);
    font-weight: 600;
}
.mm-mtm__step.is-done .mm-mtm__step-num {
    background: var(--mm-gold);
    border-color: var(--mm-gold);
    color: white;
}
.mm-mtm__step.is-done .mm-mtm__step-name {
    color: var(--mm-gold);
    font-weight: 600;
}
.mm-mtm__step-line.is-done {
    background: var(--mm-gold);
}

/* ── Layout ── */
.mm-mtm__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 900px) {
    .mm-mtm__layout { grid-template-columns: 1fr; }
    .mm-mtm__summary { position: static !important; }
}

.mm-mtm__main { min-width: 0; }

.mm-mtm__panel-head {
    margin-bottom: 1.75rem;
}
.mm-mtm__panel-head h2 {
    font-family: var(--mm-display);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 0.5rem;
}
.mm-mtm__panel-head p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

/* ── Step 1: Type tiles ── */
.mm-mtm__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    /* Default `align-items: stretch` so tiles in a row match heights — the
       absolute-positioned variant picker no longer adds to grid row height. */
}
.mm-mtm__tile-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}
.mm-mtm__tile {
    /* Make the tile fill its wrap so siblings stretch uniformly. */
    height: 100%;
}
.mm-mtm__tile {
    background: white;
    border: 1px solid #e8e4db;
    border-radius: 6px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    color: var(--mm-charcoal);
    -webkit-tap-highlight-color: transparent;
}
/* iOS Safari paints <button> text in its system blue regardless of the
   `color` property — it uses `-webkit-text-fill-color`, which defaults to
   blue on form controls. Forcing `currentColor` on every configurator
   button means each element's text simply paints in its own `color` value,
   restoring brand colours (gold price, charcoal name, grey description). */
.mm-mtm button { -webkit-text-fill-color: currentColor; }
.mm-mtm__tile:hover {
    border-color: var(--mm-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mm-mtm__tile.is-active {
    border-color: var(--mm-gold);
    background: #fbf8f2;
    box-shadow: 0 0 0 2px var(--mm-gold) inset;
}
.mm-mtm__tile-illus {
    /* Consistent illustration frame across all four heading types — the source
       images have different aspect ratios (the cropped trio is 1:2 portrait,
       eyelet is 3:2 landscape) so we centre + contain. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    margin-bottom: 0.4rem;
}
.mm-mtm__tile-illus img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Default: muted navy stamp on the cream tile. The active tile bumps
       opacity *and* saturation so the selected illustration clearly "wakes
       up" — a small transform-scale adds a subtle bloom on top. */
    mix-blend-mode: multiply;
    opacity: 0.55;
    filter: saturate(0.85);
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.mm-mtm__tile:hover .mm-mtm__tile-illus img {
    opacity: 0.75;
}
.mm-mtm__tile.is-active .mm-mtm__tile-illus img {
    opacity: 1;
    filter: saturate(1.1);
    transform: scale(1.03);
}
.mm-mtm__tile-name {
    font-family: var(--mm-display);
    font-size: 1.1rem;
}
.mm-mtm__tile-desc {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    flex-grow: 1;
}
.mm-mtm__tile-price {
    font-size: 0.75rem;
    color: var(--mm-gold);
    font-weight: 600;
    margin-top: 0.35rem;
}

/* ── Inline variant picker — sits inside the tile-wrap, attached under its tile.
       On desktop it floats (absolute) so revealing it doesn't push siblings around;
       on mobile it flows inline because tiles already stack. ── */
.mm-mtm__tile-variants {
    margin-top: 10px;
    padding: 0.85rem 1rem 0.95rem;
    background: #fbf8f2;
    border: 1px solid var(--mm-gold);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
}
@media (min-width: 600px) {
    .mm-mtm__tile-variants {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 10px;
        z-index: 5;
        box-shadow: 0 8px 22px rgba(0,0,0,0.06);
    }
}
/* Upward-pointing arrow visually connecting the picker to the tile above. */
.mm-mtm__tile-variants::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #fbf8f2;
    border-top: 1px solid var(--mm-gold);
    border-left: 1px solid var(--mm-gold);
    transform: rotate(45deg);
}

/* When the picker would otherwise overflow below the page (last-row tile),
   the controller flips it to the side. The desktop-only @media match at 600px
   keeps mobile fully inline. */
@media (min-width: 600px) {
    .mm-mtm__tile-variants--side-right,
    .mm-mtm__tile-variants--side-left {
        top: 0;
        bottom: auto;
        margin-top: 0;
        width: 320px;
        max-width: 320px;
    }
    .mm-mtm__tile-variants--side-right {
        left: calc(100% + 14px);
        right: auto;
    }
    .mm-mtm__tile-variants--side-left {
        right: calc(100% + 14px);
        left: auto;
    }
    /* Arrows on the side variants point inward (toward the tile). */
    .mm-mtm__tile-variants--side-right::before {
        top: 24px;
        left: -7px;
        border-top: 1px solid var(--mm-gold);
        border-left: 1px solid var(--mm-gold);
        border-right: 0;
        border-bottom: 0;
        transform: rotate(-45deg);
    }
    .mm-mtm__tile-variants--side-left::before {
        top: 24px;
        left: auto;
        right: -7px;
        border-top: 1px solid var(--mm-gold);
        border-left: 0;
        border-right: 1px solid var(--mm-gold);
        border-bottom: 0;
        transform: rotate(45deg);
    }
}
.mm-mtm__tile-variants[hidden] {
    display: none;
}
.mm-mtm__tile-variants-label {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-gold);
    font-weight: 600;
}
.mm-mtm__tile-variants-hint {
    font-size: 0.72rem;
    color: #888;
    line-height: 1.4;
}

/* Segmented-control look for variant pills — both options equal width
   (50/50). Container is the only rounded shape; pills fill their cells
   as flat halves so the seam between them is a clean line, not a
   curved-corner gap. */
.mm-mtm__tile-variants .mm-mtm__pills {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: rgba(196, 163, 90, 0.14);
    border-radius: 999px;
    padding: 0;
    gap: 0;
    width: 100%;
    overflow: hidden;
}
.mm-mtm__tile-variants .mm-mtm__pill {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0.6rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 0;
    color: #888;
    /* Allow wrapping for long localised labels (e.g. DE "6 cm Kräuselband"
       which wouldn't fit a 50%-of-container pill on a single line at
       0.78rem). Tight line-height keeps a 2-line wrap from looking
       sloppy, and text-align: center keeps the wrapped lines visually
       balanced. Single-line labels (EN, short DE) stay on one line and
       look identical to before. */
    white-space: normal;
    line-height: 1.15;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 2.4em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.mm-mtm__tile-variants .mm-mtm__pill * {
    cursor: pointer;
    user-select: none;
}
.mm-mtm__tile-variants .mm-mtm__pill:hover {
    color: var(--mm-charcoal);
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}
.mm-mtm__tile-variants .mm-mtm__pill:focus,
.mm-mtm__tile-variants .mm-mtm__pill:focus-visible,
.mm-mtm__tile-variants .mm-mtm__pill:active {
    outline: 0;
    box-shadow: none;
}
.mm-mtm__tile-variants .mm-mtm__pill.is-active {
    background: var(--mm-charcoal);
    color: var(--mm-white);
    font-weight: 500;
}
.mm-mtm__tile-variants .mm-mtm__pill-price {
    font-size: 0.68rem;
    opacity: 0.65;
    font-weight: 400;
}
.mm-mtm__tile-variants .mm-mtm__pill.is-active .mm-mtm__pill-price {
    opacity: 0.85;
}
/* Tape-depth comparative diagram — sits below the pills, two bars sharing
   a baseline at literal 1:2 height ratio so the depth difference reads
   instantly without parsing text. */
.mm-mtm__tape-diagram {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2.25rem;
    margin: 0.65rem 0 0.25rem;
    padding: 0.35rem 0 0.15rem;
}
.mm-mtm__tape-diagram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
    /* Now a <button> — strip the browser defaults so it visually reads
       as the original diagram item. Click target gets a touch of padding
       so the hit area is comfortable on mobile. */
    background: transparent;
    border: 0;
    padding: 0.3rem 0.55rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color 0.15s ease;
}
.mm-mtm__tape-diagram-item:hover .mm-mtm__tape-bar { opacity: 1; }
.mm-mtm__tape-diagram-item:hover .mm-mtm__tape-cap { color: var(--mm-charcoal); }
.mm-mtm__tape-diagram-item:focus-visible {
    outline: 1px solid var(--mm-gold);
    outline-offset: 3px;
}
.mm-mtm__tape-diagram-item.is-active .mm-mtm__tape-bar { opacity: 1; }
.mm-mtm__tape-diagram-item.is-active .mm-mtm__tape-cap {
    color: var(--mm-charcoal);
    font-weight: 600;
}
.mm-mtm__tape-bar {
    display: block;
    width: 38px;
    background: var(--mm-gold);
    border-radius: 1.5px 1.5px 0 0;
    opacity: 0.85;
}
.mm-mtm__tape-bar--5  { height: 5px; }
.mm-mtm__tape-bar--6  { height: 6px; }
.mm-mtm__tape-bar--10 { height: 10px; }
.mm-mtm__tape-bar--12 { height: 12px; }
.mm-mtm__tape-cap {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    font-weight: 500;
}

/* Pinch-pleat finger glyph — same layout as the tape diagram so the two
   variant pickers feel like the same family. The SVG glyphs visually
   communicate two- vs three-finger fold count above the labels. */
.mm-mtm__pleat-diagram {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2.25rem;
    margin: 0.65rem 0 0.25rem;
    padding: 0.35rem 0 0.15rem;
}
.mm-mtm__pleat-diagram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
    /* Now a <button> — see .mm-mtm__tape-diagram-item for rationale. */
    background: transparent;
    border: 0;
    padding: 0.3rem 0.55rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color 0.15s ease;
}
.mm-mtm__pleat-diagram-item:hover .mm-mtm__pleat-glyph { opacity: 1; }
.mm-mtm__pleat-diagram-item:hover .mm-mtm__tape-cap { color: var(--mm-charcoal); }
.mm-mtm__pleat-diagram-item:focus-visible {
    outline: 1px solid var(--mm-gold);
    outline-offset: 3px;
}
.mm-mtm__pleat-diagram-item.is-active .mm-mtm__pleat-glyph { opacity: 1; }
.mm-mtm__pleat-diagram-item.is-active .mm-mtm__tape-cap {
    color: var(--mm-charcoal);
    font-weight: 600;
}
.mm-mtm__pleat-glyph {
    color: var(--mm-gold);
    opacity: 0.85;
}

/* Per-heading add-on toggles (e.g. cottage-pleat flop-over frill).
   Sit below the depth diagram, one checkbox per row, with an inline
   tooltip "?" badge for the descriptive copy. */
.mm-mtm__addons {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem 0 0.25rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(196, 163, 90, 0.25);
}
.mm-mtm__addon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--mm-charcoal);
    user-select: none;
    margin: 0;
    padding: 0.15rem 0;
}
.mm-mtm__addon-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.mm-mtm__addon-box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c8c2b5;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: white;
    transition: all 0.15s ease;
}
.mm-mtm__addon-input:checked + .mm-mtm__addon-box {
    background: var(--mm-gold);
    border-color: var(--mm-gold);
    color: white;
}
.mm-mtm__addon-input:focus-visible + .mm-mtm__addon-box {
    box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.25);
}
.mm-mtm__addon-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.3;
}
.mm-mtm__addon-price {
    color: var(--mm-gold);
    font-weight: 600;
    font-size: 0.72rem;
}

/* ── Pills ── */
.mm-mtm__pills {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.mm-mtm__pills--compact { margin-bottom: 0.6rem; }
.mm-mtm__pill {
    background: white;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    transition: all 0.15s;
}
.mm-mtm__pill:hover { border-color: var(--mm-charcoal); }
.mm-mtm__pill.is-active {
    background: var(--mm-charcoal);
    border-color: var(--mm-charcoal);
    color: var(--mm-white);
}
.mm-mtm__pill-price {
    font-size: 0.7rem;
    opacity: 0.8;
}
.mm-mtm__pill.is-active .mm-mtm__pill-price { opacity: 0.9; }

/* ── Step 2: Fabric grid ── */
.mm-mtm__fabric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}
.mm-mtm__fabric-card {
    background: white;
    border: 1px solid #e8e4db;
    border-radius: 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s;
    font-family: inherit;
    text-align: left;
}
.mm-mtm__fabric-card:hover {
    border-color: var(--mm-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mm-mtm__fabric-card.is-active {
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 2px var(--mm-gold) inset;
}
.mm-mtm__fabric-image {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f0ebe0;
}
.mm-mtm__fabric-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-mtm__fabric-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 1rem 1rem;
    flex: 1; /* fill remaining card height so the price lock-aligns at the bottom */
}
.mm-mtm__fabric-name {
    font-family: var(--mm-display);
    font-size: 0.95rem;
    line-height: 1.3;
}
.mm-mtm__fabric-comp {
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 0.02em;
    line-height: 1.45;
}
.mm-mtm__fabric-price {
    font-weight: 600;
    color: var(--mm-charcoal);
    font-size: 0.85rem;
    margin-top: auto; /* bottom-align — prices line up across the row regardless of title/composition wrap */
    padding-top: 0.5rem;
}
.mm-mtm__fabric-price span {
    color: #999;
    font-weight: 400;
    font-size: 0.75rem;
}

/* ── Step 3: Size fields ── */
.mm-mtm__field {
    margin-bottom: 2rem;
}
.mm-mtm__field > label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 0.6rem;
    font-weight: 600;
}
.mm-mtm__seg {
    display: inline-flex;
    background: #f1ece0;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    border: 1px solid rgba(196, 163, 90, 0.18);
}
.mm-mtm__seg-btn {
    background: transparent;
    border: 0;
    padding: 0.55rem 1.4rem;
    font-size: 0.82rem;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 999px;
    color: #6b6b66;
    transition: all 0.18s ease;
}
.mm-mtm__seg-btn:hover:not(.is-active) {
    color: var(--mm-charcoal);
}
.mm-mtm__seg-btn.is-active {
    background: white;
    color: var(--mm-charcoal);
    box-shadow: 0 1px 2px rgba(46, 38, 21, 0.06), 0 2px 6px rgba(46, 38, 21, 0.08);
    font-weight: 500;
}

.mm-mtm__num-row {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: white;
    border: 1px solid #d8d3c8;
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    margin-bottom: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-mtm__num-row:focus-within {
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.12);
}
.mm-mtm__num-row input {
    border: 0;
    outline: 0;
    font-size: 1rem;
    width: 5rem;
    background: transparent;
    font-family: inherit;
    color: var(--mm-charcoal);
    /* Tone down the native spinner — keep it functional but make it less garish. */
    appearance: textfield;
    -moz-appearance: textfield;
}
.mm-mtm__num-row input::-webkit-outer-spin-button,
.mm-mtm__num-row input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    opacity: 0.5;
}
.mm-mtm__unit {
    font-size: 0.8rem;
    color: #888;
    user-select: none;
}

/* ── Range slider — gold fill track + white thumb with gold border.
   Mirrors .mm-meterware__range so the design language stays consistent.
   The JS controller writes a `--mm-range-fill: NN%` custom property whenever
   the value changes, which paints the gold fill up to the thumb. ── */
.mm-mtm__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 480px;
    height: 28px;
    background: transparent;
    margin: 0;
    --mm-range-fill: 0%;
    cursor: pointer;
}
.mm-mtm__range:focus { outline: none; }

.mm-mtm__range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--mm-gold) 0%,
        var(--mm-gold) var(--mm-range-fill),
        #e6e0d2 var(--mm-range-fill),
        #e6e0d2 100%
    );
}
.mm-mtm__range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #e6e0d2;
}
.mm-mtm__range::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--mm-gold);
}

.mm-mtm__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mm-white);
    border: 2px solid var(--mm-gold);
    margin-top: -8px; /* centres the 20px thumb on a 4px track */
    box-shadow: 0 1px 3px rgba(46, 38, 21, 0.18);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mm-mtm__range::-webkit-slider-thumb:hover,
.mm-mtm__range:focus::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(46, 38, 21, 0.22), 0 0 0 5px rgba(196, 163, 90, 0.12);
}
.mm-mtm__range::-webkit-slider-thumb:active {
    cursor: grabbing;
    background: var(--mm-gold);
}
.mm-mtm__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mm-white);
    border: 2px solid var(--mm-gold);
    box-shadow: 0 1px 3px rgba(46, 38, 21, 0.18);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mm-mtm__range::-moz-range-thumb:hover,
.mm-mtm__range:focus::-moz-range-thumb {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(46, 38, 21, 0.22), 0 0 0 5px rgba(196, 163, 90, 0.12);
}
.mm-mtm__range::-moz-range-thumb:active {
    cursor: grabbing;
    background: var(--mm-gold);
}

/* Legacy fallback for any range inputs that haven't been migrated to the class. */
.mm-mtm__field input[type="range"]:not(.mm-mtm__range) {
    display: block;
    width: 100%;
    max-width: 480px;
}
.mm-mtm__help {
    font-size: 0.78rem;
    color: #888;
    margin: 0.5rem 0 0;
    line-height: 1.5;
}
.mm-mtm__help-chip {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fbf8f2;
    border-left: 2px solid var(--mm-gold);
    font-size: 0.8rem;
    color: #555;
    border-radius: 3px;
}
/* Inline row that puts the Single Width / Custom segmented control next to
   the 1.5× / 2× / 2.5× preset pills when Custom is active. The pills are
   hidden via [hidden] on the Single Width side. Wraps to a new row on
   narrow screens so nothing collides on mobile. */
.mm-mtm__fullness-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.mm-mtm__fullness-row .mm-mtm__pills--compact {
    margin: 0;
}
.mm-mtm__fullness {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mm-mtm__fullness-label {
    font-size: 0.8rem;
    color: var(--mm-gold);
    font-weight: 600;
}

/* ── Eyelet swatch pills ── */
.mm-mtm__swatch-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mm-mtm__swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.mm-mtm__swatch:hover { border-color: var(--mm-charcoal); }
.mm-mtm__swatch.is-active {
    border-color: var(--mm-gold);
    box-shadow: 0 0 0 1px var(--mm-gold);
}
.mm-mtm__swatch-dot {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    display: inline-block;
}
.mm-mtm__swatch-dot--black { background: #1a1a1a; }
.mm-mtm__swatch-dot--chrome { background: linear-gradient(135deg, #d4d4d4, #f0f0f0, #b8b8b8); }
.mm-mtm__swatch-dot--satin { background: linear-gradient(135deg, #c5b8a1, #e4d7be); }
.mm-mtm__swatch-dot--white { background: #fff; box-shadow: inset 0 0 0 1px #ddd; }
.mm-mtm__tile-svg { color: var(--mm-charcoal); opacity: 0.55; transition: opacity 0.2s, transform 0.2s; }
.mm-mtm__tile.is-active .mm-mtm__tile-svg { opacity: 1; transform: scale(1.04); }
.mm-mtm__tile:hover:not(.is-active) .mm-mtm__tile-svg { opacity: 0.75; }

/* ── Step 4: Lining cards ── */
.mm-mtm__lining-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.mm-mtm__lining-card {
    background: white;
    border: 1px solid #e8e4db;
    border-radius: 6px;
    padding: 1.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: inherit;
    text-align: left;
    transition: all 0.2s;
}
.mm-mtm__lining-card:hover {
    border-color: var(--mm-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mm-mtm__lining-card.is-active {
    border-color: var(--mm-gold);
    background: #fbf8f2;
    box-shadow: 0 0 0 2px var(--mm-gold) inset;
}
.mm-mtm__lining-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.mm-mtm__lining-name {
    font-family: var(--mm-display);
    font-size: 1.05rem;
}
.mm-mtm__lining-price {
    font-size: 0.8rem;
    color: var(--mm-gold);
    font-weight: 600;
}
.mm-mtm__lining-desc {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
}

/* ── Step 5: Review + dropzone ── */
.mm-mtm__review { margin-bottom: 2rem; }
.mm-mtm__review-card {
    background: white;
    border: 1px solid #e8e4db;
    border-radius: 6px;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem;
}
.mm-mtm__review-fabric img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}
.mm-mtm__review-specs {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.5rem;
}
.mm-mtm__review-specs > div { border-bottom: 1px dashed #eee; padding-bottom: 0.4rem; }
.mm-mtm__review-specs dt {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 0.15rem;
}
.mm-mtm__review-specs dd {
    margin: 0;
    font-size: 0.88rem;
}
.mm-mtm__review-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    background: var(--mm-charcoal);
    color: var(--mm-white);
    border-radius: 6px;
}
.mm-mtm__review-total strong { font-size: 1.35rem; font-family: var(--mm-display); font-weight: 400; }

.mm-mtm__dropzone {
    border: 2px dashed #d7cfbe;
    border-radius: 6px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
    background: white;
}
.mm-mtm__dropzone:hover, .mm-mtm__dropzone.is-hover {
    border-color: var(--mm-gold);
    background: #fbf8f2;
}
.mm-mtm__dropzone.is-uploading { opacity: 0.6; }
.mm-mtm__dropzone svg { color: #b8aa92; margin-bottom: 0.5rem; }
.mm-mtm__dropzone p { margin: 0; font-size: 0.85rem; line-height: 1.5; }
.mm-mtm__dropzone p span { display: block; font-size: 0.75rem; color: #999; margin-top: 0.2rem; }
.mm-mtm__dropzone-link { color: var(--mm-gold); text-decoration: underline; display: inline !important; }
.mm-mtm__photo-preview {
    margin-top: 1rem;
    position: relative;
    display: inline-block;
}
.mm-mtm__photo-preview img {
    max-width: 240px;
    max-height: 180px;
    border-radius: 4px;
    display: block;
}
.mm-mtm__photo-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.75);
    color: white;
    border: 0;
    border-radius: 3px;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    cursor: pointer;
    font-family: inherit;
}
.mm-mtm__photo-error {
    color: #b85050;
    font-size: 0.85rem;
    margin: 0;
}

/* ── Summary (sticky right column) — sits below the sticky stepper bar ── */
.mm-mtm__summary {
    position: sticky;
    top: 10rem; /* clears the 145px sticky stepper bar plus a little breathing room */
    background: white;
    border: 1px solid #e8e4db;
    border-radius: 6px;
    padding: 1.5rem;
}
.mm-mtm__summary-title {
    font-family: var(--mm-display);
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
    letter-spacing: 0.05em;
}
.mm-mtm__summary-list { margin: 0 0 1rem; }
.mm-mtm__summary-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.45rem 0;
    border-bottom: 1px dashed #f0ebe0;
    font-size: 0.82rem;
    gap: 1rem;
}
.mm-mtm__summary-list dt {
    color: #888;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    flex-shrink: 0;
}
.mm-mtm__summary-list dd {
    margin: 0;
    text-align: right;
    color: var(--mm-charcoal);
}
.mm-mtm__summary-breakdown {
    font-size: 0.78rem;
    color: #666;
    margin-bottom: 0.75rem;
}
.mm-mtm__summary-breakdown > div {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}
.mm-mtm__summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
}
.mm-mtm__summary-total span {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #666;
}
.mm-mtm__summary-total strong {
    font-family: var(--mm-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--mm-charcoal);
}

/* ── Sticky footer ── */
.mm-mtm__footer {
    position: fixed;
    bottom: var(--mm-admin-bar-offset, 0);
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e8e4db;
    /* Side padding scales with viewport so the Back / Total / Next row
       sits inside the same 1200px column as the configurator content
       above it. Without this, on wide monitors (e.g. 2560px) Back and
       Next ended up at the absolute screen edges, miles from where the
       user's eyes were tracking the fabric grid. The `max()` keeps the
       minimum 1.5rem padding for narrow screens. */
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: max(1.5rem, calc((100vw - 1200px) / 2));
    padding-right: max(1.5rem, calc((100vw - 1200px) / 2));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 80;
}
.mm-mtm__footer-back {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    padding: 0.6rem 1.25rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mm-mtm__footer-back:hover { border-color: var(--mm-charcoal); color: var(--mm-charcoal); }
.mm-mtm__footer-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex-grow: 1;
}
.mm-mtm__footer-total span {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #888;
}
.mm-mtm__footer-total strong {
    font-family: var(--mm-display);
    font-size: 1.25rem;
    font-weight: 400;
}
.mm-mtm__footer-next, .mm-mtm__footer-add {
    /* Admin-panel navy when the form is complete and the button is
       enabled — distinguishes it from the otherwise charcoal CTA
       palette so the "you can proceed" affordance reads more clearly.
       Add-to-Cart keeps its gold tint via the override below. */
    background: #16213e;
    color: var(--mm-white);
    border: 0;
    padding: 0.75rem 1.75rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.15s;
}
.mm-mtm__footer-next:hover, .mm-mtm__footer-add:hover {
    background: var(--mm-gold);
}
.mm-mtm__footer-next:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.mm-mtm__footer-add { background: var(--mm-gold); }

.mm-mtm__empty {
    padding: 3rem 1rem;
    text-align: center;
    color: #888;
    background: #fbf8f2;
    border-radius: 6px;
}
.mm-mtm__empty a { color: var(--mm-gold); }

/* ────────────────────────────────────────────────────────────────
   Mobile compaction (≤640px)
   ────────────────────────────────────────────────────────────────
   The configurator was sized for desktop; on a 375px iPhone the hero
   alone ate ~60% of the viewport before the user saw any tile, and
   each tile was ~250px tall (130px illustration + generous padding).
   This block tightens hero, stepper, panel head, and tile densities
   so a phone user sees actual product content above the fold. Only
   sizes change — no layout rules switch direction. Desktop / tablet
   are untouched. */
@media (max-width: 640px) {
    .mm-mtm {
        padding: 1.25rem 1rem 6rem;
    }

    /* Hero: smaller title + intro, tighter spacing. */
    .mm-mtm__hero { margin-bottom: 1.25rem; }
    .mm-mtm__title {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
        margin-bottom: 0.4rem;
    }
    .mm-mtm__intro {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    .mm-mtm__type-toggle {
        margin-top: 0.85rem;
        font-size: 0.7rem;
        letter-spacing: 0.14em;
    }
    .mm-mtm__type-toggle-link { padding: 0.3rem 0.4rem; }

    /* Stepper: smaller circles, tighter padding, less margin below. */
    .mm-mtm__steps-bar {
        padding: 0.75rem 0.5rem;
        margin-bottom: 1rem;
    }
    .mm-mtm__steps { padding: 0 0.25rem; gap: 0; }
    .mm-mtm__step { gap: 0.4rem; }
    .mm-mtm__step-num {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    .mm-mtm__step-name {
        font-size: 0.55rem;
        letter-spacing: 0.1em;
    }
    .mm-mtm__step-line {
        margin: 14px 0.3rem 0;
        max-width: 40px;
        min-width: 8px;
    }

    /* Panel header: less dominant. */
    .mm-mtm__panel-head { margin-bottom: 1.25rem; }
    .mm-mtm__panel-head h2 { font-size: 1.2rem; }
    .mm-mtm__panel-head p { font-size: 0.825rem; }

    /* Tiles: switch to a horizontal layout on phones — illustration on the
       left, text on the right. The previous vertical layout left wide
       empty space beside the illustration AND made each tile ~240px tall
       (so the user only saw one tile + a peek of the next per screen).
       Horizontal puts each tile at ~110px and lets 4–5 fit per viewport.

       The tile's direct children are: illustration, name, desc, price (no
       wrapper element). To stack name/desc/price beside the illustration
       we use a 2-column grid: column 1 holds the illustration spanning
       all rows, column 2 holds name/desc/price stacking down. */
    .mm-mtm__tile {
        display: grid;
        grid-template-columns: 75px 1fr;
        column-gap: 0.85rem;
        row-gap: 0.15rem;
        align-items: start;
        padding: 0.75rem 0.85rem 0.85rem;
        align-content: center;
    }
    .mm-mtm__tile-illus {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: center;
        width: 75px;
        height: 75px;
        margin-bottom: 0;
    }
    .mm-mtm__tile-name {
        grid-column: 2;
        grid-row: 1;
        font-size: 1rem;
        line-height: 1.25;
    }
    .mm-mtm__tile-desc {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.75rem;
        line-height: 1.35;
        /* Cap at 2 lines so a verbose copy line doesn't grow the tile. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mm-mtm__tile-price {
        grid-column: 2;
        grid-row: 3;
        font-size: 0.78rem;
        margin-top: 0.15rem;
    }
    /* Variant picker (pinch pleat / pencil pleat / cottage pleat) drops
       below the tile in flow on phones — the absolute-positioned desktop
       variant only kicks in at min-width: 600px so this is already the
       default, but we explicitly tighten the padding here. */
    .mm-mtm__tile-variants { margin-top: 6px; padding: 0.65rem 0.85rem; }

    /* Fabric grid: 2 columns on phones so customers can compare swatches. */
    .mm-mtm__fabric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .mm-mtm__fabric-body { padding: 0.65rem 0.75rem 0.75rem; gap: 0.25rem; }
    .mm-mtm__fabric-name { font-size: 0.85rem; }
    .mm-mtm__fabric-comp { font-size: 0.65rem; }
    .mm-mtm__fabric-price { font-size: 0.78rem; padding-top: 0.35rem; }
    .mm-mtm__fabric-price span { font-size: 0.7rem; }

    /* Lining cards: tighten padding slightly. */
    .mm-mtm__lining-card { padding: 1rem 1.1rem; }
    .mm-mtm__lining-name { font-size: 1.05rem; }
    .mm-mtm__lining-price { font-size: 0.8rem; }
    .mm-mtm__lining-desc { font-size: 0.8rem; line-height: 1.5; }

    /* Review card: stack the fabric thumbnail above the spec grid on
       very narrow viewports so each spec block has decent width. */
    .mm-mtm__review-card { padding: 1rem; gap: 1rem; }
    .mm-mtm__review-fabric img {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }
    .mm-mtm__review-specs { font-size: 0.85rem; gap: 0.75rem 1rem; }
    .mm-mtm__review-specs dt { font-size: 0.65rem; }
    .mm-mtm__review-specs dd { font-size: 0.9rem; }

    /* Sticky footer: less padding so we don't lose 90px of viewport to it. */
    .mm-mtm__footer {
        padding: 0.65rem 0.85rem;
        gap: 0.5rem;
    }
    .mm-mtm__footer-back {
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }
    .mm-mtm__footer-total span { font-size: 0.6rem; letter-spacing: 0.1em; }
    .mm-mtm__footer-total strong { font-size: 1.05rem; }
    .mm-mtm__footer-next, .mm-mtm__footer-add {
        padding: 0.6rem 1rem;
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }

    /* Summary panel goes static at <900px; tighten it for phones. */
    .mm-mtm__summary { padding: 1rem 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════
   Turbo page transitions
   ════════════════════════════════════════════════════════════════
   Turbo replaces the document <body> on every internal navigation.
   By default that swap is instant — the new content slams in.
   These rules add a subtle 120ms fade so the eye reads it as a
   smooth replacement rather than a hard reload. The progress bar
   (visible only on slow connections, after a 500ms delay) is
   re-coloured to match the brand gold instead of the default blue.
   ════════════════════════════════════════════════════════════════ */

/* Fade <body> out while Turbo fetches the next page; fade back in
   once the new body is rendered. Turbo's lifecycle attributes:
       data-turbo-visit-direction (forward|back|restore) on <html>
       turbo-visit / turbo-restore — events
   We use the simple `.turbo-loading` body-class approach; the
   transition keys off `body` opacity which CSS animates regardless
   of which body element is actually present. */
body {
    transition: opacity 0.12s ease-out;
}
.turbo-progress-bar {
    background: var(--mm-gold, #C4A35A) !important;
    height: 2px !important;
}

/* When a `turbo:before-render` listener (registered in app.js) flips
   the body to opacity 0 just before the swap, the new body picks up
   `opacity: 0` from inline style and fades back to 1 via this rule. */

/* ════════════════════════════════════════════════════════════════
   Changelog
   ════════════════════════════════════════════════════════════════ */
.mm-changelog {
    max-width: 760px;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
    font-family: var(--mm-body);
    color: var(--mm-charcoal);
}
.mm-changelog__hero {
    text-align: center;
    margin-bottom: 3.5rem;
}
.mm-changelog__kicker {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin: 0 0 0.75rem;
}
.mm-changelog__title {
    font-family: var(--mm-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
}
.mm-changelog__intro {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}
.mm-changelog__empty {
    text-align: center;
    color: #888;
    padding: 4rem 0;
}
.mm-changelog__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid #e8e4db;
}
.mm-changelog__group {
    position: relative;
    padding: 0 0 2rem 1.75rem;
}
.mm-changelog__group::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 8px;
    width: 9px;
    height: 9px;
    background: var(--mm-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 4px white;
}
.mm-changelog__date {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-gold);
    font-weight: 600;
    margin: 0 0 1rem;
}
.mm-changelog__entries {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.mm-changelog__entry {
    background: white;
    border: 1px solid #ece8df;
    border-radius: 6px;
    padding: 1.25rem 1.4rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-changelog__entry:hover {
    border-color: var(--mm-gold);
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.mm-changelog__entry-meta {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.7rem;
    color: #888;
}
.mm-changelog__hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f4efe4;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    color: #666;
    letter-spacing: 0.02em;
}
.mm-changelog__author {
    font-style: italic;
}
.mm-changelog__subject {
    font-family: var(--mm-display);
    font-size: 1.05rem;
    font-weight: 400;
    margin: 0 0 0.35rem;
    color: var(--mm-charcoal);
    line-height: 1.4;
}
.mm-changelog__body {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #555;
}

/* ─── Block: newsletter ────────────────────────────────────────────────── */
.mm-block-newsletter {
    padding: 5rem 0;
    background: #faf8f4;
}
.mm-block-newsletter__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.mm-block-newsletter__title {
    font-family: var(--mm-font-display, inherit);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-bottom: 1rem;
}
.mm-block-newsletter__subtitle {
    color: #777;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}
.mm-block-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: left;
}
.mm-block-newsletter__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 1rem;
}
@media (max-width: 540px) {
    .mm-block-newsletter__row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}
.mm-block-newsletter__label {
    color: #777;
    font-size: 0.95rem;
}
.mm-block-newsletter__input {
    padding: 0.7rem 1rem;
    border: 1px solid #d6d2c8;
    border-radius: 4px;
    background: #fff;
    font-size: 0.95rem;
}
.mm-block-newsletter__input:focus {
    outline: none;
    border-color: #888;
}
/* The captcha row has no label, so its single child would otherwise land
   in the 110px label track and get crushed — the widget's own "Verified"
   text clipped against the edge. Put it in the field column so it lines
   up under the inputs, and give it the form's type size instead of the
   bundle's 13px default. */
.mm-block-newsletter__row--captcha > .mit-captcha {
    grid-column: 2;
    --mit-captcha-font-size: 0.9rem;
}
@media (max-width: 540px) {
    /* Single-column layout below 540px — column 2 no longer exists. */
    .mm-block-newsletter__row--captcha > .mit-captcha {
        grid-column: 1;
    }
}

.mm-block-newsletter__actions {
    display: flex;
    justify-content: flex-end;
}
.mm-block-newsletter__submit {
    padding: 0.6rem 2rem;
    background: transparent;
    border: 1px solid #777;
    color: #555;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.mm-block-newsletter__submit:hover {
    background: #555;
    color: #fff;
}
.mm-block-newsletter__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.mm-block-newsletter__flash {
    margin-bottom: 1.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    text-align: center;
}
.mm-block-newsletter__flash--success {
    background: #e8f1ea;
    color: #355c41;
}
.mm-block-newsletter__flash--error {
    background: #f6e6e6;
    color: #8b3a3a;
}

/* ─── Block: feature grid (Pattern Play / Layered Luxury / Work With Us) ── */
/* White, against the page's warm off-white. The homepage is a stack of
   full-width sections in one tone, which runs together into a single sheet;
   lifting the picture grids out of it gives the eye somewhere to break. */
.mm-block-feature-grid {
    padding: 5rem 0;
    background: #fff;
}
.mm-block-feature-grid__heading {
    font-family: var(--mm-font-display, inherit);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #888;
    font-size: 1.1rem;
    margin-bottom: 3rem;
}
.mm-block-feature-grid__row {
    --feature-divider: 1px solid #e6e2da;
}
.mm-block-feature-grid--2-up .mm-block-feature-grid__col + .mm-block-feature-grid__col {
    border-left: var(--feature-divider);
}
@media (max-width: 767px) {
    .mm-block-feature-grid--2-up .mm-block-feature-grid__col + .mm-block-feature-grid__col {
        border-left: none;
    }
}
.mm-block-feature-grid__card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mm-block-feature-grid__link {
    display: block;
}
.mm-block-feature-grid__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3f0ea;
    margin-bottom: 1.5rem;
}
.mm-block-feature-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.mm-block-feature-grid__link:hover .mm-block-feature-grid__image img {
    transform: scale(1.03);
}
.mm-block-feature-grid--3-up .mm-block-feature-grid__image {
    aspect-ratio: 4 / 3;
    margin-bottom: 1.25rem;
}
/* Editorial "featured middle" — the centre card in a 3-up grid gets
   a taller portrait image and a slight lift above the side cards, so
   it reads as the headline while the two flanking it support. Mobile
   stacks back to even sizing since the lift doesn't make sense
   one-column. */
.mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) .mm-block-feature-grid__image {
    aspect-ratio: 3 / 4;
}
@media (min-width: 768px) {
    /* The centre card's lift is taken out of whatever sits above it, and
       what sat above it was the section heading — the middle image rode up
       over the text and hid it completely. The heading needs room for the
       lift on top of its own gap. 9rem is measured, not derived: the lift
       and the row's gutter offset together swallow 6rem of it, leaving the
       3rem of air the design asks for. */
    .mm-block-feature-grid--3-up .mm-block-feature-grid__heading {
        margin-bottom: 9rem;
    }
    .mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) {
        margin-top: -3rem;
    }
    .mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) .mm-block-feature-grid__image {
        margin-bottom: 1.75rem;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }
}
.mm-block-feature-grid__title {
    font-family: var(--mm-font-display, inherit);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.75rem;
}
.mm-block-feature-grid__title a {
    color: inherit;
    text-decoration: none;
}
.mm-block-feature-grid__title a:hover {
    color: #222;
}
.mm-block-feature-grid__description {
    color: #777;
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 420px;
    margin: 0 auto;
}

/* ── Horizontal product scroller (block) ──
   Used by the product_grid block on the homepage. The block field
   "limit" sets visible cards per row (CSS variable --mm-visible) and
   the server fetches a larger pool so users can scroll horizontally.
   Native scroll-snap drives the snapping; the Stimulus controller
   only adds the prev/next button affordance. */
.mm-block-products__scroller-wrap {
    position: relative;
    /* Room for the negative-offset nav buttons to peek out. */
    padding: 0 8px;
}
.mm-block-products__scroller {
    display: grid;
    grid-auto-flow: column;
    /* Width of each card = (container - (N-1) gaps) / N */
    grid-auto-columns: calc((100% - (var(--mm-visible, 4) - 1) * 1.5rem) / var(--mm-visible, 4));
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #d6cdb8 transparent;
    /* Reserve scrollbar space so card heights don't jitter when the
       scrollbar appears on hover-snap browsers. */
    padding-bottom: 0.75rem;
}
.mm-block-products__scroller::-webkit-scrollbar {
    height: 6px;
}
.mm-block-products__scroller::-webkit-scrollbar-thumb {
    background: #d6cdb8;
    border-radius: 3px;
}
.mm-block-products__item {
    scroll-snap-align: start;
    min-width: 0; /* allow children with min-content to shrink inside grid track */
}
.mm-block-products__nav {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e6e2da;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a3f1f;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: opacity 0.2s, background 0.2s, transform 0.15s ease;
}
.mm-block-products__nav:hover:not(:disabled) {
    background: #fff;
    transform: translateY(-50%) scale(1.05);
}
.mm-block-products__nav:disabled {
    opacity: 0;
    pointer-events: none;
}
.mm-block-products__nav--prev { left: -8px; }
.mm-block-products__nav--next { right: -8px; }

/* Mobile: snap to 2 per row, hide nav (native touch-scroll). */
@media (max-width: 767px) {
    .mm-block-products__scroller {
        grid-auto-columns: calc((100% - 1rem) / 2);
        gap: 1rem;
    }
    .mm-block-products__nav {
        display: none;
    }
}

/* Mixed-category carousels (home-page collection blocks) put fabric (4:5),
   paint (4:5) and cushion (1:1) cards in a single row. The shorter cushion
   crop made its title sit visibly higher than the fabric/paint titles next
   to it. Force a uniform 4:5 image wrap here and let cushions render with
   object-fit: contain — they're shot on white so the letterbox blends. */
.mm-block-products .mm-product-card--cushion .card-img-top {
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background-color: #fff;
}

/* Product care label — small section under the description on the
   product detail page. Quiet styling so it sits comfortably below
   the heavier copy blocks above. */
.product-care__heading {
    font-family: var(--mm-serif, 'Cormorant Garamond', serif);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mm-charcoal, #2c2520);
    margin: 0 0 0.4rem;
}
.product-care__body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #6b5e3f;
    white-space: pre-line;
}

/* Shop page — Group-by-colour rendering. Active when ?order=color_group
   on a colourable category. Each colour family gets a section header
   with a tinted swatch + family label + product count. */
.mm-shop-group {
    margin-bottom: 3rem;
}
.mm-shop-group:last-child {
    margin-bottom: 0;
}
.mm-shop-group__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e6e2da;
}
.mm-shop-group__swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.mm-shop-group__title {
    font-family: var(--mm-serif, 'Cormorant Garamond', serif);
    font-size: 1.5rem;
    margin: 0;
    color: var(--mm-charcoal, #2c2520);
    flex: 1;
}
.mm-shop-group__count {
    font-size: 0.85rem;
    color: #8e8467;
    background: #faf6ec;
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0.04em;
}


/* ───────────────────────────────────────────────────────────────────
   Collection Showcase block — sticky hero image + scrolling product grid
   (Birdie-Fortescue-style layout).

   The image side has `position: sticky` so it pins to the top of the
   viewport while the user scrolls past the products column. The block
   uses a CSS grid with `align-items: start` — that's what lets `position:
   sticky` actually do its job inside a grid track.

   The `--image-left` / `--image-right` modifier flips the column order
   via `grid-template-areas`, NOT `flex-direction: row-reverse`, so the
   DOM order stays image-first (better for screen readers — image with
   caption first, then the gallery).
─────────────────────────────────────────────────────────────────── */
.mm-block-collection-showcase {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.mm-block-collection-showcase__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "hero products";
    gap: clamp(1rem, 2.4vw, 2.5rem);
    /* IMPORTANT: do NOT set `align-items: start` here. Default `stretch`
       lets the hero aside grow to the height of the products column,
       which is what gives `position: sticky` somewhere to pin within. */
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.mm-block-collection-showcase--image-right .mm-block-collection-showcase__inner {
    grid-template-areas: "products hero";
}
.mm-block-collection-showcase__hero {
    grid-area: hero;
    /* The aside stretches to the products column's height (default grid
       align-items: stretch). Its inner wrapper carries `position: sticky`
       so the image pins near the top of the viewport while the products
       column scrolls past. */
}
.mm-block-collection-showcase__hero-sticky {
    position: sticky;
    /* Header is ~80px on desktop; gives the image a little breathing room
       below it when pinned. Calculated from the existing nav height
       custom property when present (admin bar pushes it down). */
    top: calc(var(--mm-stack-top, 5rem) + 1rem);
}
.mm-block-collection-showcase__figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #f5efe3;
}
.mm-block-collection-showcase__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.mm-block-collection-showcase__hero-sticky:hover .mm-block-collection-showcase__img {
    transform: scale(1.015);
}
.mm-block-collection-showcase__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: clamp(1rem, 3vw, 2rem);
    /* Subtle gradient so light overlay text stays readable even on
       lighter images. Skipped on dark-tone variant. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 35%, rgba(0, 0, 0, 0.25) 100%);
    color: #fff;
    pointer-events: none;
}
.mm-block-collection-showcase__overlay > * {
    pointer-events: auto;
}
.mm-block-collection-showcase__figure--dark .mm-block-collection-showcase__overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 35%, rgba(255, 255, 255, 0.55) 100%);
    color: var(--mm-charcoal, #2c2520);
}
.mm-block-collection-showcase__eyebrow {
    font-family: var(--mm-sans, 'Inter', sans-serif);
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.92;
}
.mm-block-collection-showcase__title {
    font-family: var(--mm-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.05;
    margin: 0;
    /* Inherit from the overlay so the title follows the light/dark tone
       setting. Without this, the global h2 colour (mm-charcoal) wins and
       the title stays dark even on a light-tone overlay. */
    color: inherit;
}
.mm-block-collection-showcase__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mm-sans, 'Inter', sans-serif);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    padding: 0.4rem 0;
    margin-top: 0.4rem;
    position: relative;
}
.mm-block-collection-showcase__cta-line {
    display: inline-block;
    width: 2.5rem;
    height: 1px;
    background: currentColor;
    transition: width 0.25s ease;
}
.mm-block-collection-showcase__cta:hover .mm-block-collection-showcase__cta-line {
    width: 4rem;
}
.mm-block-collection-showcase__cta--placeholder {
    opacity: 0.6;
    font-style: italic;
}

/* Empty / placeholder figures shown only in admin so editors notice. */
.mm-block-collection-showcase__figure--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8e8467;
    font-style: italic;
    border: 2px dashed #d6cfb9;
}

.mm-block-collection-showcase__products {
    grid-area: products;
    display: grid;
    grid-template-columns: repeat(var(--mm-cs-cols, 2), minmax(0, 1fr));
    gap: clamp(0.75rem, 1.8vw, 1.5rem);
}
.mm-block-collection-showcase__product {
    min-width: 0;
}
/* Cards inside the showcase block keep their normal proportions but
   nudge the body padding slightly tighter — this layout already feels
   dense vs the wider product_grid. */
.mm-block-collection-showcase__product .mm-product-card .card-body {
    padding: 0.85rem 0.5rem 0.25rem;
}
/* Drop the 2.5em title min-height in showcase context. With aspect
   ratios normalised below, both cards in a row have identical image
   heights → identical card-body Y → titles naturally align. The
   reserved 2nd line was just opening a visible empty gap above the
   price for one-line names. */
.mm-block-collection-showcase__product .mm-product-card .card-title {
    min-height: 0;
}
/* Force all product images in the showcase block to the SAME aspect
   ratio so cushion (default 1:1), paint (4:5) and fabric (4:5) cards
   share image height — and therefore body Y position and title
   baseline. Cushions get letterboxed onto white (object-fit: contain)
   which matches the existing product_grid behaviour exactly. Without
   this, .card-body { flex: 1 1 auto } fills different amounts of
   remaining space per card and titles end up at different heights. */
.mm-block-collection-showcase__product .mm-product-card .card-img-top {
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background-color: #fff;
}
/* White card background extending under the name+price area. Without
   this, the product photo's white background reads as a separate
   floating rectangle against the cream page bg, with a hard edge
   where the image stops and the text-on-cream begins. White-throughout
   makes the card read as one tile and softens that boundary. The base
   `.mm-product-card .card-body { background: transparent }` is
   overridden here for showcase context only — product_grid keeps its
   transparent body so the home page's horizontal scroller still shows
   the page bg under each card. */
.mm-block-collection-showcase__product .mm-product-card {
    background-color: #fff;
}
.mm-block-collection-showcase__product .mm-product-card .card-body {
    background-color: #fff;
}

/* Shop browse pages (/shop and category pages) mix product types in a
   single Bootstrap grid — vases (cushion mode, 1:1) next to tablecloths
   (default, 4:5), etc. Same misalignment problem as the showcase: cards
   are equal height (Bootstrap row stretch + h-100), but card-body fills
   different amounts of remaining space, so titles end up at different Y.
   Force the same 4:5 frame + contain so image heights match across all
   products in a row. Scoped via the wrapper's data-controller so only
   the browse pages get this — the product detail page and admin grids
   keep their per-product natural ratios. */
[data-controller~="shop-results"] .mm-product-card .card-img-top {
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background-color: #fff;
}
.mm-block-collection-showcase__empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: #8e8467;
    background: #faf6ec;
    border: 1px dashed #d6cfb9;
    border-radius: 4px;
}

/* Tablet — drop the inner product grid to 1 column at this width so the
   cards don't get postage-stamp small; the image stays sticky next to
   them. The `--mm-cs-cols` custom property is preserved at 2 in inline
   style but our @media rule overrides via the grid-template-columns
   shorthand below. */
@media (max-width: 991px) {
    .mm-block-collection-showcase__products {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile — stack vertically. The hero loses its sticky behaviour
   because phone viewports are too short for sticky to feel useful
   (the user would just stare at a pinned image for half the scroll). */
@media (max-width: 767px) {
    .mm-block-collection-showcase__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "products";
        gap: 1.5rem;
    }
    .mm-block-collection-showcase--image-right .mm-block-collection-showcase__inner {
        /* Same as default on mobile — image always on top when stacked. */
        grid-template-areas:
            "hero"
            "products";
    }
    .mm-block-collection-showcase__hero-sticky {
        position: static;
        top: auto;
    }
    .mm-block-collection-showcase__figure {
        aspect-ratio: 4 / 5;
    }
    .mm-block-collection-showcase__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Our Story page (templates/page/story_of_linen.html.twig)
   ============================================================ */

/* — Hero: full-bleed flax-field image with overlay title (mirrors MM Studio) — */
.mm-story-hero {
    position: relative;
    width: 100%;
    margin: 0;
    height: 70vh;
    min-height: 480px;
    background-image: url('/uploads/pages/our-story/hero-flax-field.jpg');
    background-size: cover;
    background-position: center 65%;
    display: flex;
    align-items: flex-end;
    color: #fff;
}
.mm-story-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(40, 38, 34, 0.05) 0%, rgba(40, 38, 34, 0.35) 100%);
}
.mm-story-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    text-align: center;
}
.mm-story-hero__title {
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
    .mm-story-hero { height: 56vh; min-height: 380px; }
    .mm-story-hero__inner { padding-bottom: 2rem; }
    .mm-story-hero__title { font-size: 1.5rem; letter-spacing: 0.18em; }
}

/* — Story narrative: long-form text with floated photos that text wraps around — */
.mm-story-narrative {
    padding: 5rem 1.5rem 4rem;
    background: var(--mm-cream);
}
.mm-story-narrative__inner {
    max-width: 1080px;
    margin: 0 auto;
}
.mm-story-narrative__eyebrow {
    font-family: var(--mm-heading);
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--mm-charcoal);
    text-align: center;
    margin: 0 0 3rem;
}
.mm-story-narrative__body {
    color: var(--mm-charcoal);
    font-size: 1rem;
    line-height: 1.85;
    text-align: justify;
    hyphens: auto;
}
.mm-story-narrative__body::after {
    content: "";
    display: block;
    clear: both;
}
.mm-story-narrative__body p {
    margin: 0 0 1.25rem;
}
.mm-story-narrative__body p:last-child {
    margin-bottom: 0;
}

/* Floated newspaper-style photos — text wraps around them */
.mm-story-narrative__photo {
    margin: 0;
}
.mm-story-narrative__photo img {
    display: block;
    width: 100%;
    height: auto;
}
.mm-story-narrative__photo--right {
    float: right;
    width: 320px;
    margin: 0.4rem 0 1.25rem 2rem;
}
.mm-story-narrative__photo--left {
    float: left;
    width: 320px;
    margin: 0.4rem 2rem 1.25rem 0;
}
.mm-story-narrative__photo--feature {
    width: 460px;
}

@media (max-width: 900px) {
    .mm-story-narrative__photo--right,
    .mm-story-narrative__photo--left {
        float: none;
        width: auto !important;
        max-width: 520px;
        margin: 2rem auto;
    }
    .mm-story-narrative__body {
        text-align: left;
    }
}

/* — Flax process: numbered grid — */
.mm-flax-process {
    padding: 5rem 0;
    background: var(--mm-cream);
    border-top: 1px solid var(--mm-border);
}
.mm-flax-process__eyebrow {
    font-family: var(--mm-heading);
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--mm-charcoal);
    text-align: center;
    margin: 0 0 1.5rem;
}
.mm-flax-process__intro {
    max-width: 800px;
    margin: 0 auto 3.5rem;
    text-align: center;
    color: var(--mm-charcoal);
    font-size: 0.98rem;
    line-height: 1.75;
}
.mm-flax-process__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
    row-gap: 3.5rem;
}
.mm-flax-step {
    display: flex;
    flex-direction: column;
}
.mm-flax-step__media {
    margin: 0 0 1.25rem;
    overflow: hidden;
    background: var(--mm-linen);
}
.mm-flax-step__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.mm-flax-step__body {
    padding: 0 0.25rem;
}
.mm-flax-step__heading {
    font-family: var(--mm-heading);
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--mm-charcoal);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.mm-flax-step__num {
    color: var(--mm-gold);
    font-weight: 500;
}
.mm-flax-step__body p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--mm-text);
    margin: 0;
}

@media (max-width: 991px) {
    .mm-flax-process__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        row-gap: 3rem;
    }
}
@media (max-width: 600px) {
    .mm-flax-process {
        padding: 3.5rem 0;
    }
    .mm-flax-process__grid {
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
    }
}

/* — Core materials: 3-column card grid — */
.mm-core-materials {
    padding: 5rem 0 6rem;
    background: var(--mm-white);
    border-top: 1px solid var(--mm-border);
}
.mm-core-materials__eyebrow {
    font-family: var(--mm-heading);
    font-size: 1.15rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--mm-charcoal);
    text-align: center;
    margin: 0 0 3.5rem;
}
.mm-core-materials__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    align-items: end;
    column-gap: 3rem;
    row-gap: 2.5rem;
}
.mm-material {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.mm-material__media {
    width: 100%;
    margin: 0 0 1.5rem;
    overflow: hidden;
}
.mm-material__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.mm-material__label {
    font-family: var(--mm-heading);
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--mm-charcoal);
    margin: 0 0 1rem;
}
.mm-material__text {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--mm-text);
    max-width: 360px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .mm-core-materials__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
        align-items: start;
    }
}
@media (max-width: 600px) {
    .mm-core-materials {
        padding: 3.5rem 0 4.5rem;
    }
    .mm-core-materials__grid {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }
}


/* ── Location gate ─────────────────────────────────────────────────
   The front door, before a shop has been chosen. Split down the middle:
   the choice on the left, one photograph on the right, and nothing else
   — no navigation, no footer, nothing to click past the decision.

   Deliberately its own layout rather than a modal over the shop. A modal
   would have to render a shop behind it, and which shop that is, is
   precisely the question not yet answered. */
.mm-gate {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* The row has to be told to fill the viewport. Left implicit it sizes to
       the form and the photograph stops short of the fold with a band of
       empty ground beneath it — and `1fr` does not help, because min-height
       leaves the container's height indefinite, so the fraction resolves
       against max-content instead. A definite minimum on the track itself is
       what actually holds, and the auto maximum still lets it grow if the
       country list ever makes the pane taller than the screen. */
    grid-template-rows: minmax(100vh, auto);
    background: var(--mm-cream, #faf9f7);
    color: var(--mm-charcoal, #2b2b2b);
}
.mm-gate__pane {
    display: flex;
    align-items: center;
    padding: 3rem clamp(1.5rem, 5vw, 5rem);
}
.mm-gate__inner {
    width: 100%;
    max-width: 22rem;
}
.mm-gate__brand {
    display: block;
    width: auto;
    height: 1.6rem;
    margin-bottom: 4rem;
}
.mm-gate__title {
    font-family: var(--mm-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 2.25rem;
}
.mm-gate__form { display: block; }
.mm-gate__label {
    display: block;
    font-family: var(--mm-body);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.3rem;
}
.mm-gate__field { margin-bottom: 1.75rem; }
.mm-gate__select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 0.35rem 1.5rem 0.5rem 0;
    font-family: var(--mm-body);
    font-size: 1rem;
    color: inherit;
    cursor: pointer;
    /* Chevron drawn rather than linked, so the gate needs no asset to
       render — it is the first thing a visitor ever sees. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232b2b2b'%3E%3Cpath d='M1.6 5.2 8 11.6l6.4-6.4-.9-.9L8 9.8 2.5 4.3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.15rem center;
    background-size: 0.7rem;
}
.mm-gate__select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mm-gate__submit {
    width: 100%;
    background: transparent;
    border: 1px solid currentColor;
    padding: 0.85rem 1rem;
    font-family: var(--mm-body);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: inherit;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
.mm-gate__submit:hover {
    background: var(--mm-charcoal, #2b2b2b);
    color: var(--mm-white, #fff);
}
.mm-gate__remember input[type="checkbox"] {
    /* The browser's default tick is the same blue as Bootstrap's, and just
       as out of place here. accent-color recolours the native control
       without rebuilding it, so it keeps its own focus ring and its
       behaviour on every platform. */
    accent-color: var(--mm-charcoal, #2b2b2b);
    width: 0.95rem;
    height: 0.95rem;
}
.mm-gate__remember {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
    font-size: 0.82rem;
    cursor: pointer;
}
.mm-gate__image {
    background-image: url('/uploads/hero-kansas-eyelet.webp');
    background-size: cover;
    background-position: center;
}

@media (max-width: 860px) {
    .mm-gate {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 100dvh;
    }
    /* The photograph is atmosphere, not information. On a phone the choice
       should be the whole screen rather than something to scroll past. */
    .mm-gate__image { display: none; }
    .mm-gate__pane { padding: 2.5rem 1.5rem; align-items: flex-start; }
    .mm-gate__brand { margin-bottom: 2.5rem; }
}