/* ═══════════════════════════════════════════════════════════════
   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;
}

/* Top tier: category links */
.mm-nav-top {
    border-bottom: 1px solid var(--mm-border);
}

.mm-nav-top .container {
    display: flex;
    justify-content: center;
    position: relative;
}

.mm-nav-top__logo-item {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.mm-nav-top__logo-item a:hover {
    opacity: 0.75;
}

.mm-nav-top__logo-item img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.mm-nav-top__links {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0.6rem 0;
}

.mm-nav-top__links a {
    font-family: var(--mm-body);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-text);
    padding: 0.3rem 1rem;
    transition: color 0.3s;
    text-decoration: none;
}

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

/* Highlighted nav entry — quietly promotes a single item to a CTA */
.mm-nav-top__links 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 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);
}

/* Bottom tier: brand + icons */
.mm-nav-main {
    padding: 1rem 0;
}

.mm-nav-main__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.mm-nav-main__left,
.mm-nav-main__right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-width: 100px;
}

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

.mm-nav-main__brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    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;
}

.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);
}

.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;
}

.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);
    font-size: 3.2rem;
    font-weight: 300;
    color: #fff;
    line-height: 1.2;
    max-width: 650px;
    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;
}

.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;
}

.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;
}
.mm-color-chips__label { line-height: 1; }

@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);
}

.mm-footer h5 {
    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;
}

.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;
}

/* ── 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;
}

/* 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;
}

.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;
}

/* 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: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mm-gold);
    display: inline-block;
}

/* 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;
}

.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;
}

/* 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);
}

/* ── 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 {
    max-width: 120px;
}

/* ── 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;
}

/* ── 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;
    align-items: center;
    gap: 0.75rem;
    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;
    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;
}

.mm-search-preview__form {
    display: flex;
    align-items: center;
    background: var(--mm-linen);
    border: 1px solid var(--mm-border);
    border-radius: 4px;
    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: 160px;
    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 ── */
@media (max-width: 991px) {
    /* Collapse search to icon-only on mobile/tablet */
    .mm-nav-main .mm-search-preview {
        position: static;
    }

    .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) {
    .mm-nav-main__inner {
        flex-wrap: nowrap;
    }

    .mm-nav-main__brand {
        position: static;
        transform: none;
        font-size: 1.15rem;
        letter-spacing: 0.08em;
        text-align: center;
        flex: 1;
        min-width: 0;
    }
    .mm-nav-main__brand-img {
        height: 22px;
        max-width: 180px;
        margin: 0 auto;
    }

    .mm-nav-main__left,
    .mm-nav-main__right {
        min-width: auto;
        gap: 0.6rem;
        flex-shrink: 0;
    }

    .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. */
.mm-nav-top .dropdown-menu {
    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 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease-out, visibility 0s linear 0s;
}

/* Panel is anchored to .mm-nav-top .container (which is position:relative for the
   logo). Offset the top so the panel clears .mm-nav-main (brand + search tier). */

.mm-nav-top .mm-mega__panel {
    /* `inset: auto` first so it doesn't override the explicit top/left below */
    inset: auto !important;
    position: absolute !important;
    top: calc(100% + var(--mm-nav-main-height, 70px)) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1200px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--mm-border);
    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);
}

.mm-mega__feature {
    width: 280px;
    flex-shrink: 0;
}

.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%;
    }
    .mm-mega__feature-img {
        height: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Block Editor — frontend rendering (pages using page/blocks.html.twig)
   ═══════════════════════════════════════════════════════════════ */

.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;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    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;
}
.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;
}
.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;
    padding: 1rem 1.5rem;
    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 {
    background: var(--mm-charcoal);
    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;
}
.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) ── */
.mm-block-feature-grid {
    padding: 5rem 0;
}
.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) {
    .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;
    }
}

/* 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;
}