/* ==========================================================================
   MarioMaker premium visual upgrade (theme 0.4.0)
   Loaded last on every front-end page (inc/home-premium.php), after home.css,
   site.css, pdp.css and proof.css — refines them without editing them.
   Brand system: white / light-neutral surfaces, black–charcoal type,
   MarioMaker green #62d31f as a controlled accent (primary actions, selected
   states, progress, small markers). Flat surfaces: hairline borders instead
   of shadows, small radii, no gradients. Mobile-first.
   ========================================================================== */

.mm-v2 {
  --mm-font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* 0.4.34: one font site-wide (was Archivo) */
  --mm-paper: #f4f4f2;          /* light neutral band */
  --mm-paper-2: #ebebe8;
  --mm-line-strong: #c9cbce;
  --mm-green-ink: #2f6b0e;      /* green for small text on white (AA) */
  --mm-radius: 3px;
  --mm-radius-lg: 4px;
  --mm-card-shadow: none;
}

/* ---------- Typography ---------- */
.mm-v2 h1, .mm-v2 h2, .mm-v2 h3 { letter-spacing: -.02em; }
.mm-h2 { font-size: clamp(1.85rem, 6.4vw, 2.75rem); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.mm-h3 { margin: 0 0 6px; font-family: var(--mm-font-head); font-size: clamp(1.3rem, 4.4vw, 1.6rem); font-weight: 700; line-height: 1.15; }
.mm-lead { max-width: 46em; font-size: 1.02rem; line-height: 1.55; color: var(--mm-muted); }
.mm-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--mm-font-head); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-ink);
}
.mm-eyebrow::before { content: ''; width: 22px; height: 3px; background: var(--mm-brand); flex: none; }

/* ---------- Buttons: flat, square, uppercase ---------- */
.mm-btn { min-height: 52px; padding: 0 26px; border-radius: var(--mm-radius); font-size: .86rem; font-weight: 700; letter-spacing: .07em; }
.mm-btn-brand:hover, .mm-btn-brand:focus-visible { background: var(--mm-brand-hover); box-shadow: none; }
.mm-btn:active { transform: none; }
.mm-btn-ghost { background: transparent; color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px var(--mm-ink); }
.mm-btn-ghost:hover, .mm-btn-ghost:focus-visible { background: var(--mm-ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--mm-ink); }
.mm-btn-outline { min-height: 42px; border-width: 1.5px; border-radius: var(--mm-radius); font-size: .76rem; letter-spacing: .07em; }
.mm-btn-outline:hover, .mm-btn-outline:focus-visible { background: var(--mm-ink); border-color: var(--mm-ink); color: #fff; }
.mm-link { font-family: var(--mm-font-head); font-size: .86rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom-width: 2px; padding-bottom: 3px; }
.mm-link span { transition: transform .2s var(--mm-ease); }
.mm-link:hover span { transform: translateX(3px); }

/* ---------- Header ---------- */
.mm-v2 .site-header.mm-header { border-bottom-color: var(--mm-line); }
.mm-header.is-scrolled { box-shadow: 0 1px 0 var(--mm-line); }
@media (min-width: 1024px) {
  .mm-nav a { font-size: .9rem; font-weight: 500; color: var(--mm-ink-2); }
  .mm-nav a:hover, .mm-nav a[aria-current] { color: var(--mm-ink); }
  .mm-nav a::after { height: 2px; }
}
.mm-search { border-radius: var(--mm-radius); }
.mm-icon-btn { border-radius: var(--mm-radius); }
.mm-icon-btn:hover { background: var(--mm-paper); }

/* ---------- Section rhythm ---------- */
.mm-sec { padding: 56px 0; background: #fff; }
.mm-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; margin-bottom: 28px; }
.mm-sec-head .mm-h2 { margin: 0; }
.mm-sec-head .mm-lead { margin: 12px 0 0; }

/* ==========================================================================
   HERO — light, product-led
   ========================================================================== */
.mm-hero.mm-hero-light { display: block; min-height: 0; background: var(--mm-paper); color: var(--mm-ink); overflow: hidden; }
.mm-hero-light .mm-hero-inner { display: grid; gap: 28px; padding-top: 36px; padding-bottom: 36px; }
.mm-hero-light .mm-hero-media { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--mm-radius-lg); background: var(--mm-paper-2); }
.mm-hero-light .mm-hero-media::after, .mm-hero-light .mm-hero-media::before { display: none; }
.mm-hero-light .mm-hero-img { object-position: 50% 55%; }
.mm-hero-light .mm-hero-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: .76rem; letter-spacing: .2em; color: var(--mm-ink); }
.mm-hero-light .mm-hero-kicker::before { margin: 0; width: 26px; background: var(--mm-brand); }
.mm-hero-light .mm-hero-kit { margin: 0; color: var(--mm-ink); font-size: clamp(2.7rem, 12vw, 5.4rem); font-weight: 800; line-height: .95; letter-spacing: -.045em; }
.mm-hero-light .mm-hero-sub { margin: 20px 0 0; max-width: 30em; font-size: 1.08rem; line-height: 1.55; color: var(--mm-ink-2); }
.mm-hero-light .mm-hero-ctas { margin-top: 28px; gap: 10px; }
.mm-hero-light .mm-hero-copy .mm-btn { width: 100%; }
.mm-hero-platforms { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--mm-line-strong); font-size: .86rem; line-height: 1.35; color: var(--mm-muted); }
.mm-hero-platforms strong { display: block; color: var(--mm-ink); font-weight: 700; }
.mm-hero-platform-icons { display: flex; flex: none; }
.mm-hero-platform-icons span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--mm-paper), 0 0 0 3px var(--mm-line); overflow: hidden; }
.mm-hero-platform-icons span:first-child { margin-left: 0; }
.mm-hero-platform-icons img { width: 24px; height: auto; }

.mm-hero-strip { border-top: 1px solid var(--mm-line); background: #fff; }
.mm-hero-light .mm-benefits { margin: 0 auto; padding-top: 18px; padding-bottom: 18px; border: 0; gap: 14px 18px; }
.mm-hero-light .mm-benefits li { font-size: .82rem; font-weight: 500; color: var(--mm-muted); }
.mm-hero-light .mm-benefits strong { color: var(--mm-ink); font-weight: 600; }
.mm-hero-light .mm-benefits .mm-i { width: 24px; height: 24px; stroke-width: 1.6; color: var(--mm-ink); }

/* ==========================================================================
   FLAGSHIP
   ========================================================================== */
.mm-flag.mm-best { padding: 56px 0; background: #fff; overflow: visible; }
.mm-flag-grid { display: grid; gap: 28px; }
.mm-flag-main { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); background: #fff; }
.mm-flag .mm-flag-main .mm-best-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0; transition: transform .6s var(--mm-ease); }
.mm-flag-main:hover .mm-best-img { transform: scale(1.025); }
.mm-flag-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mm-flag-thumbs:empty { display: none; }
.mm-flag-thumbs .mm-best-scene-img { position: static; inset: auto; }
.mm-flag-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mm-radius-lg); }
.mm-flag .mm-best-copy { padding: 0; }
.mm-flag .mm-best-title { margin: 0; font-size: clamp(2.3rem, 9vw, 3.6rem); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.mm-flag .mm-best-sub { margin: 12px 0 0; font-size: 1.08rem; color: var(--mm-muted); }

/* Spec grid — shared by the homepage flagship and the product page */
.mm-specs { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 0; border-top: 1px solid var(--mm-ink); }
.mm-specs > div { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--mm-line); }
.mm-specs > div:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--mm-line); }
.mm-specs dt { order: 2; margin: 4px 0 0; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); }
.mm-specs dd { margin: 0; font-family: var(--mm-font-head); font-size: clamp(1.35rem, 5.4vw, 1.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--mm-ink); white-space: nowrap; }
.mm-specs > div { display: flex; flex-direction: column; }

.mm-flag .mm-best-price { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 16px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.mm-best-tax { font-family: var(--mm-font-body); font-size: .82rem; font-weight: 500; letter-spacing: 0; color: var(--mm-muted); }
.mm-buy-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-ink); }
.mm-flag .mm-buy { margin-bottom: 14px; }
.mm-select select, .mm-dd-btn { border-width: 1.5px; border-color: var(--mm-line-strong); border-radius: var(--mm-radius); }
.mm-dd-btn:not(.is-empty) { border-color: var(--mm-ink); box-shadow: inset 3px 0 0 var(--mm-brand); }
.mm-dd-list { border-radius: var(--mm-radius); box-shadow: 0 18px 40px -18px rgba(17, 18, 20, .35); }
.mm-dd-list li { border-radius: 2px; }
.mm-best-foot { gap: 12px 24px; }
.mm-kit-pill { padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--mm-font-head); font-size: .8rem; letter-spacing: .06em; color: var(--mm-ink-2); }
.mm-kit-pill:hover { color: var(--mm-ink); }
.mm-kit-pill .mm-i { width: 16px; height: 16px; }

/* Made for / Good to know */
.mm-fit { display: grid; gap: 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--mm-line); }
.mm-fit-title { margin: 0 0 12px; font-family: var(--mm-font-head); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-ink); }
.mm-fit-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mm-fit-list li { display: flex; gap: 12px; font-size: .95rem; line-height: 1.45; color: var(--mm-ink-2); }
.mm-fit-list .mm-i { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.4; }
.mm-fit-list.is-yes .mm-i { color: var(--mm-green-ink); }
.mm-fit-list.is-info .mm-i { color: var(--mm-muted); stroke-width: 2; }
.mm-fit-note { margin: 14px 0 0; font-size: .88rem; color: var(--mm-muted); }
.mm-fit-note a { color: var(--mm-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mm-brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ==========================================================================
   WHY MARIOMAKER
   ========================================================================== */
.mm-why { background: var(--mm-paper); }
.mm-why-grid { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.mm-why-grid li { padding-top: 18px; border-top: 2px solid var(--mm-ink); }
.mm-why-num { display: block; margin-bottom: 14px; font-family: var(--mm-font-head); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--mm-green-ink); }
.mm-why-grid h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.mm-why-grid p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--mm-muted); }

/* ==========================================================================
   BATTERY COMPATIBILITY
   ========================================================================== */
.mm-compat-volts { display: flex; gap: 6px; margin: -6px 0 18px; overflow-x: auto; scrollbar-width: none; }
.mm-compat-volts::-webkit-scrollbar { display: none; }
.mm-volt {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border: 1.5px solid var(--mm-line); border-radius: var(--mm-radius); background: #fff;
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--mm-ink); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.mm-volt span { font-size: .74rem; font-weight: 600; color: var(--mm-muted); }
.mm-volt:hover { border-color: var(--mm-ink); }
.mm-volt.is-on { border-color: var(--mm-ink); background: var(--mm-ink); color: #fff; }
.mm-volt.is-on span { color: var(--mm-brand); }
.mm-compat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--mm-line); }
.mm-compat-grid li[hidden] { display: none; }
.mm-compat-grid a {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px;
  height: 100%; min-height: 76px; padding: 12px 14px; background: #fff; color: var(--mm-ink); transition: background-color .15s;
}
.mm-compat-grid img { grid-row: 1 / span 2; width: 52px; height: 48px; object-fit: contain; }
.mm-compat-brand { align-self: end; font-family: var(--mm-font-head); font-size: .95rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.mm-compat-model { align-self: start; font-size: .8rem; color: var(--mm-muted); line-height: 1.3; }
.mm-compat-grid a:hover { background: var(--mm-paper); }
.mm-compat-note { margin: 16px 0 0; max-width: 60em; font-size: .8rem; line-height: 1.55; color: var(--mm-muted); }
.mm-compat-note a { color: var(--mm-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   PRODUCT CARDS (shop, homepage, related) — flat
   ========================================================================== */
.mm-card { border-color: var(--mm-line); border-radius: var(--mm-radius-lg); transition: border-color .2s; }
.mm-card:hover { box-shadow: none; transform: none; border-color: var(--mm-ink); }
.mm-card-media { background: var(--mm-paper); }
.mm-card:hover .mm-card-img { transform: scale(1.03); }
.mm-card-badge { top: 0; left: 0; padding: 6px 10px; border-radius: 0 0 var(--mm-radius) 0; background: var(--mm-ink); color: #fff; font-family: var(--mm-font-head); font-size: .66rem; font-weight: 700; letter-spacing: .1em; }
.mm-card-body { padding: 14px; }
.mm-card-title { font-family: var(--mm-font-head); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.mm-card-sub { color: var(--mm-muted); }
.mm-card-price { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }
.mm-tools-sec { border-top: 1px solid var(--mm-line); }

/* ==========================================================================
   BUILD YOUR OWN KIT band (builder + ready-made kits)
   ========================================================================== */
.mm-build-band { background: var(--mm-paper); }
.mm-build-band .mm-builder { padding: 56px 0 0; background: transparent; }
.mm-build-band .mm-kits { padding: 40px 0 56px; background: transparent; }
.mm-build-band .mm-kits .mm-h3 { margin-bottom: 20px; }
.mm-build-band .mm-builder + .mm-kits { margin-top: 40px; border-top: 1px solid var(--mm-paper-2); }
/* Compact banner → Build Your Kit page (0.4.6; the builder itself is page-only) */
.mm-byo { padding: 56px 0 0; }
.mm-byo-card { display: grid; overflow: hidden; border-radius: var(--mm-radius-lg); background: var(--mm-ink); color: #fff; }
.mm-byo-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--mm-ink); }
.mm-byo-media.is-n1, .mm-byo-media:not(.is-trio) { grid-template-columns: 1fr; }
.mm-byo-media.is-n2 { grid-template-columns: 1fr 1fr; }
.mm-byo-img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.mm-byo-media:not(.is-trio) .mm-byo-img, .mm-byo-media.is-n1 .mm-byo-img { aspect-ratio: 16 / 9; }
.mm-byo-copy { padding: 28px 22px 30px; }
.mm-byo-eyebrow { color: #fff; }
.mm-byo-title { margin: 0; max-width: 14em; font-family: var(--mm-font-head); font-size: clamp(1.9rem, 7.4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; text-transform: uppercase; color: #fff; }
.mm-byo-text { margin: 16px 0 0; max-width: 30em; font-size: 1.04rem; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.mm-byo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.mm-byo-actions .mm-btn { flex: 1 1 220px; max-width: 320px; }
.mm-byo-meta { font-family: var(--mm-font-head); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mm-byo-meta::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--mm-brand); vertical-align: 1px; }
.mm-build-band .mm-byo + .mm-kits { padding-top: 48px; }
.mm-step-num { border-radius: var(--mm-radius); background: var(--mm-ink); }
.mm-step-head h3 { font-weight: 700; }
.mm-battery { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: none; }
.mm-battery:hover { transform: none; border-color: var(--mm-ink); }
.mm-battery[aria-checked="true"] { border-color: var(--mm-ink); box-shadow: inset 0 -3px 0 var(--mm-brand); }
.mm-tool-search input { border-radius: var(--mm-radius); }
.mm-tool { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); box-shadow: none; }
.mm-tool.is-added { border-color: var(--mm-ink); box-shadow: inset 0 -3px 0 var(--mm-brand); }
.mm-tool-add { border-radius: 2px; font-family: var(--mm-font-head); letter-spacing: .04em; }
.mm-summary { border-radius: var(--mm-radius-lg); }
@media (min-width: 1024px) { .mm-summary { border: 1px solid var(--mm-line); box-shadow: none; } }
.mm-progress { border-radius: 0; }
.mm-progress span { border-radius: 0; }
.mm-kit-media { border-radius: var(--mm-radius-lg); }
.mm-kit-media-scene { background: #fff; border: 1px solid var(--mm-line); }
.mm-kit-title { font-weight: 700; }

/* ==========================================================================
   REAL USE CASES
   ========================================================================== */
.mm-uses-grid { display: grid; gap: 32px 20px; }
.mm-use-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--mm-radius-lg); background: var(--mm-paper); }
.mm-use-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--mm-ease); }
.mm-use:hover .mm-use-img { transform: scale(1.03); }
.mm-use-media--pack { background: #fff; outline: 1px solid var(--mm-line); outline-offset: -1px; }
.mm-use-media--pack .mm-use-img { object-fit: contain; padding: 6%; box-sizing: border-box; }
.mm-use-tag { margin: 16px 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-green-ink); }
.mm-use-title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.mm-use-title a { color: var(--mm-ink); }
.mm-use-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--mm-brand); text-underline-offset: 4px; }
.mm-use-text { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--mm-muted); }
.mm-use-product { margin: 10px 0 0; font-size: .8rem; font-weight: 600; color: var(--mm-ink-2); }

/* ==========================================================================
   CUSTOMER TRUST / REVIEWS
   ========================================================================== */
.mm-trust { border-top: 1px solid var(--mm-line); }
.mm-reviews { display: grid; gap: 16px; margin-bottom: 32px; }
.mm-review { margin: 0; padding: 22px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); }
.mm-review-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.mm-review-stars .star { width: 16px; height: 16px; fill: var(--mm-ink); }
.mm-review-stars .star.is-off { opacity: .2; }
.mm-review blockquote { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; color: var(--mm-ink); }
.mm-review figcaption { font-size: .84rem; color: var(--mm-muted); }
.mm-review figcaption a { color: var(--mm-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.mm-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--mm-line); }
.mm-trust-grid li { display: flex; flex-direction: column; gap: 14px; padding: 20px 16px; background: #fff; }
.mm-trust-grid svg { width: 28px; height: 28px; color: var(--mm-ink); }
.mm-trust-grid div { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; line-height: 1.4; color: var(--mm-muted); }
.mm-trust-grid strong { font-family: var(--mm-font-head); font-size: .98rem; font-weight: 700; color: var(--mm-ink); }
.mm-trust-grid a { color: var(--mm-ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.mm-final { padding: 56px 0; background: var(--mm-paper); }
.mm-final-inner { display: grid; gap: 24px; }
.mm-final-title { margin: 0; max-width: 16em; font-size: clamp(2rem, 7.6vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.mm-final-text { margin: 14px 0 0; max-width: 34em; font-size: 1.05rem; line-height: 1.55; color: var(--mm-muted); }
.mm-final-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-final-ctas .mm-btn { flex: 1 1 200px; }

/* Shared "Make your own kit" band on inner pages */
.mm-kit-cta-inner { border-radius: var(--mm-radius-lg); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.mm-footer { border-top-width: 2px; }
.mm-footer-col h3 { font-family: var(--mm-font-head); font-size: .74rem; letter-spacing: .16em; color: #8a8f98; }
.mm-social a { border-radius: var(--mm-radius); }
.mm-pay-badge { border-radius: 2px; }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdx { --pdx-r: var(--mm-radius); }
.pdx-stage { border-radius: var(--mm-radius-lg); background: var(--mm-paper); }
.pdx-thumb { border-radius: 2px; border-width: 1.5px; }
.pdx-thumb.is-active { border-color: var(--mm-ink); }
.pdx-count { border-radius: 2px; background: rgba(17, 18, 20, .78); }
.pdp-slider-arrow { border-radius: var(--mm-radius); }
.pdx-title { font-size: clamp(1.75rem, 7vw, 2.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; }
.pdx-price, .pdx-price .price { font-weight: 800; letter-spacing: -.02em; }
.pdx-lede { color: var(--mm-muted); }
.pdx-uses li { color: var(--mm-muted); }
.pdx-specs-strip { margin-top: 20px; }
.pdx-specs-strip dd { font-size: clamp(1.15rem, 4.6vw, 1.4rem); }

/* Battery selector: framed step, clear selected state (behaviour unchanged — pdp-woo.js) */
.pdx-bats { margin: 22px 0 12px; }
.pdx-bats-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: .72rem; letter-spacing: .14em; }
.pdx-bats-count { font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--mm-muted); }
.pdx-dd-btn { min-height: 60px; border-color: var(--mm-line-strong); border-radius: var(--mm-radius); font-weight: 500; }
.pdx-dd-btn:not(.is-empty) { border-color: var(--mm-ink); box-shadow: inset 3px 0 0 var(--mm-brand); font-weight: 600; }
.pdx-dd-btn img, .pdx-dd-list img { width: 40px; height: 28px; }
.pdx-dd-list { border-radius: var(--mm-radius); box-shadow: 0 18px 40px -18px rgba(17, 18, 20, .35); }
.pdx-dd-list li { border-radius: 2px; }
.pdx-dd-list li[aria-selected="true"] { background: var(--mm-paper); }

.pdx-buy .qty-selector { border-color: var(--mm-line-strong); border-radius: var(--mm-radius); }
.woocommerce .pdx-buy button.single_add_to_cart_button.button.alt,
.pdx-buy .single_add_to_cart_button { border-radius: var(--mm-radius); font-size: .92rem; letter-spacing: .07em; text-transform: uppercase; }
.woocommerce .pdx-buy button.single_add_to_cart_button.button.alt:hover,
.pdx-buy .single_add_to_cart_button:hover { box-shadow: none; }

.pdx-fit { margin-top: 22px; padding-top: 20px; gap: 20px; }
.pdx-fit .mm-fit-list li { font-size: .9rem; }
.pdx-trust { margin-top: 22px; }
.pdx-trust strong { font-family: var(--mm-font-head); }
.pdx-kit-pill { margin-top: 18px; }
.pdx-acc summary { font-weight: 700; }
.pdx-specs div { font-size: .92rem; }
.pdp-reviews-section .pdp-reviews, body.mm-v2 .pdp-reviews { border-radius: var(--mm-radius-lg); }
.pdp-related-arrow { border-radius: var(--mm-radius); }

/* ==========================================================================
   CART / CHECKOUT / ACCOUNT — same flat language (tokens do most of it)
   ========================================================================== */
body.mm-v2 .woocommerce a.button, body.mm-v2 .woocommerce button.button, body.mm-v2 .woocommerce input.button,
body.mm-v2 .woocommerce #respond input#submit { border-radius: var(--mm-radius); }
body.mm-v2 .woocommerce form .form-row input.input-text,
body.mm-v2 .woocommerce form .form-row textarea,
body.mm-v2 .woocommerce form .form-row select { border-radius: var(--mm-radius); }

@media (prefers-reduced-motion: reduce) {
  .mm-flag-main:hover .mm-best-img, .mm-use:hover .mm-use-img, .mm-card:hover .mm-card-img { transform: none; }
}

/* ==========================================================================
   ≥ 480px
   ========================================================================== */
@media (min-width: 480px) {
  .mm-compat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   ≥ 600px
   ========================================================================== */
@media (min-width: 600px) {
  .mm-sec, .mm-flag.mm-best, .mm-final { padding: 72px 0; }
  .mm-hero-light .mm-hero-copy .mm-btn { width: auto; }
  .mm-hero-light .mm-benefits { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .mm-why-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .mm-uses-grid { grid-template-columns: 1fr 1fr; }
  .mm-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-final-ctas .mm-btn { flex: 0 0 auto; }
}

/* ==========================================================================
   ≥ 760px
   ========================================================================== */
@media (min-width: 760px) {
  .mm-compat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-trust-grid li { padding: 26px 22px; }
  .mm-fit { grid-template-columns: 1fr 1fr; gap: 48px; }
  .pdx-fit { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mm-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-specs > div, .mm-specs > div:nth-child(2n) { padding: 16px 14px; border-left: 1px solid var(--mm-line); }
  .mm-specs > div:first-child { padding-left: 0; border-left: 0; }
  .mm-specs dd { white-space: normal; }
}

/* ==========================================================================
   ≥ 1024px — desktop
   ========================================================================== */
@media (min-width: 1024px) {
  .mm-sec, .mm-flag.mm-best, .mm-final { padding: 104px 0; }
  .mm-sec-head { margin-bottom: 40px; }
  .mm-lead { font-size: 1.12rem; }

  /* Hero: copy | product photo */
  .mm-hero.mm-hero-light { min-height: 0; display: block; }
  .mm-hero-light .mm-hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 64px; padding-top: 72px; padding-bottom: 72px; }
  .mm-hero-light .mm-hero-media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .mm-hero-light .mm-hero-copy { max-width: none; }
  .mm-hero-light .mm-hero-sub { font-size: 1.18rem; }
  .mm-hero-light .mm-hero-copy .mm-btn { min-height: 56px; padding: 0 32px; font-size: .88rem; }
  .mm-hero-light .mm-benefits { gap: 20px 40px; }
  .mm-hero-light .mm-benefits li { font-size: .88rem; }

  /* Flagship: photo | specs + buy */
  .mm-flag-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .mm-flag-media { position: sticky; top: calc(var(--mm-header-h) + 24px); }
  .mm-flag .mm-best-img { aspect-ratio: auto; }
  .mm-flag .mm-best-copy { padding: 8px 0 0; }
  .mm-flag .mm-best-sub { font-size: 1.18rem; }
  .mm-flag .mm-specs { grid-template-columns: 1fr 1fr; }
  .mm-flag .mm-specs > div { padding: 18px 16px 18px 0; border-left: 0; }
  .mm-flag .mm-specs > div:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--mm-line); }
  .mm-flag .mm-specs dd { font-size: 2rem; }
  .mm-flag .mm-buy { grid-template-columns: 1fr auto; max-width: none; }
  .mm-flag .mm-buy-label { grid-column: 1 / -1; }
  .mm-flag .mm-buy .mm-btn { min-height: 56px; }
  .mm-flag .mm-fit { margin-top: 64px; padding-top: 36px; gap: 72px; }

  .mm-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-compat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mm-compat-grid a { min-height: 84px; padding: 14px 16px; }
  .mm-uses-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

  .mm-build-band .mm-builder { padding-top: 104px; }
  .mm-build-band .mm-kits { padding: 48px 0 104px; }
  .mm-byo { padding-top: 88px; }
  .mm-byo-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .mm-byo-media { contain: size; min-height: 420px; grid-template-rows: 100%; }
  .mm-byo-media .mm-byo-img { aspect-ratio: auto; height: 100%; min-height: 0; }
  .mm-byo-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; }
  .mm-byo-actions .mm-btn { flex: 0 0 auto; }
  .mm-build-band .mm-byo + .mm-kits { padding-top: 64px; }

  .mm-final-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }

  .pdx-title { font-size: 2.6rem; }
  .pdx-fit { grid-template-columns: 1fr; }
}
@media (min-width: 1280px) {
  .pdx-fit { grid-template-columns: 1fr 1fr; }
}

/* ---------- Phone refinements ---------- */
.mm-hero-strip .mm-benefits { padding-left: var(--mm-gutter); padding-right: var(--mm-gutter); }
@media (max-width: 1023px) {
  .mm-hero-light .mm-hero-media { order: -1; }
  .mm-hero-light .mm-hero-inner { padding-top: 20px; }
}
@media (max-width: 479px) {
  .mm-compat-grid a { grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; padding: 12px 10px; }
  .mm-compat-grid img { width: 38px; height: 36px; }
  .mm-compat-brand { font-size: .86rem; overflow-wrap: normal; word-break: normal; }
  .mm-compat-model { font-size: .76rem; }
}
@media (max-width: 599px) {
  .mm-uses-grid {
    grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px;
    margin: 0 calc(var(--mm-gutter) * -1); padding: 0 var(--mm-gutter) 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mm-gutter); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .mm-uses-grid::-webkit-scrollbar { display: none; }
  .mm-use { scroll-snap-align: start; }
}
/* Homepage flagship on phones: tighter gaps between gallery, copy, specs, price and buy box
   (~42px less). Scoped to .mm-flag.mm-best so the product page's .mm-specs strip is untouched. */
@media (max-width: 599px) {
  .mm-flag.mm-best .mm-flag-grid { gap: 16px; }
  .mm-flag.mm-best .mm-eyebrow { margin-bottom: 10px; }
  .mm-flag.mm-best .mm-best-sub { margin-top: 8px; }
  .mm-flag.mm-best .mm-specs { margin-top: 18px; }
  .mm-flag.mm-best .mm-best-price { margin: 16px 0 10px; }
}
/* Flagship order since 0.4.39: price → buy box → specs → links (front-page.php) */
.mm-flag.mm-best .mm-buy + .mm-specs { margin-top: 10px; }
.mm-flag.mm-best .mm-specs + .mm-best-foot { margin-top: 20px; }
@media (max-width: 599px) {
  .mm-flag.mm-best .mm-buy + .mm-specs { margin-top: 6px; }
  .mm-flag.mm-best .mm-specs + .mm-best-foot { margin-top: 16px; }
}
@media (max-width: 1023px) { .mm-summary { border-radius: 0; } }

/* Product page spec strip: always 2 × 2 (the info column is narrow) */
.pdx-specs-strip.mm-specs { grid-template-columns: 1fr 1fr; }
.pdx-specs-strip.mm-specs > div { padding: 14px 14px 14px 0; border-left: 0; }
.pdx-specs-strip.mm-specs > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--mm-line); }

/* Tablet: flagship photo | info side by side */
@media (min-width: 760px) and (max-width: 1023px) {
  .mm-flag-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .mm-flag .mm-specs { grid-template-columns: 1fr 1fr; }
  .mm-flag .mm-specs > div { padding: 14px 14px 14px 0; border-left: 0; }
  .mm-flag .mm-specs > div:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--mm-line); }
  .mm-hero-light .mm-hero-media { aspect-ratio: 16 / 9; }
  .mm-flag .mm-specs dd { font-size: 1.45rem; }
}

/* ---------- Header currency selector: one-column list (code · name · symbol) ---------- */
.mm-currency-menu.mm-currency-list { width: 300px; padding: 6px; border-radius: var(--mm-radius-lg); }
.mm-currency-rows { max-height: min(360px, calc(100vh - 160px)); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; }
.mm-currency-list .mm-currency-rows button {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 12px; border-radius: 2px; font-weight: 500; font-size: .88rem; text-align: left;
}
.mm-cur-code { font-family: var(--mm-font-head); font-weight: 700; letter-spacing: .02em; }
.mm-cur-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mm-muted); }
.mm-cur-sym { font-weight: 600; color: var(--mm-ink-2); }
.mm-currency-list .mm-currency-rows button:hover { background: var(--mm-paper); }
.mm-currency-list .mm-currency-rows button[aria-pressed="true"] { background: var(--mm-ink); color: #fff; }
.mm-currency-list .mm-currency-rows button[aria-pressed="true"] .mm-cur-name,
.mm-currency-list .mm-currency-rows button[aria-pressed="true"] .mm-cur-sym { color: rgba(255, 255, 255, .78); }
.mm-currency-list .mm-currency-note { margin: 8px 8px 4px; padding-top: 8px; border-top: 1px solid var(--mm-line); }

/* ---------- Dark hero (restored 0.3.64 banner: photo + black fade, white type) ---------- */
.mm-hero:not(.mm-hero-light) .mm-hero-kit { font-weight: 800; letter-spacing: -.04em; line-height: .98; }
.mm-hero:not(.mm-hero-light) .mm-btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.mm-hero:not(.mm-hero-light) .mm-btn-ghost:hover,
.mm-hero:not(.mm-hero-light) .mm-btn-ghost:focus-visible { background: #fff; color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px #fff; }
.mm-hero:not(.mm-hero-light) .mm-hero-sub { color: rgba(255, 255, 255, .88); }
.mm-hero:not(.mm-hero-light) .mm-benefits strong { font-weight: 600; }

/* ---------- Phone / tablet top bar: shipping note + currency button (hidden on desktop) ---------- */
.mm-topbar { position: relative; z-index: 70; background: var(--mm-ink); color: #fff; }
.mm-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 var(--mm-gutter); }
.mm-topbar-text { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .82); }
.mm-topbar-text .mm-money { color: #fff; font-weight: 700; }
.mm-v2 .mm-currency.mm-currency-in-bar { display: block; }
.mm-currency-in-bar .mm-currency-btn {
  min-height: 30px; height: 30px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--mm-radius);
  background: transparent; color: #fff; font-size: .8rem; font-weight: 700;
}
.mm-currency-in-bar .mm-currency-btn:hover, .mm-currency-in-bar .mm-currency-btn[aria-expanded="true"] { border-color: var(--mm-brand); }
.mm-currency-in-bar .mm-currency-menu { top: calc(100% + 5px); right: 0; width: min(300px, calc(100vw - 2 * var(--mm-gutter))); color: var(--mm-ink); }
@media (min-width: 1024px) { .mm-topbar { display: none; } }

/* Currency visibility (0.4.29): globe icon + stronger outline on the header / top-bar button,
   and a "Prices & checkout in …" line under the product-page price. */
.mm-currency-btn .mm-cur-globe { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-currency-btn[aria-expanded="true"] .mm-cur-globe { transform: none; } /* only the chevron flips */
.mm-currency:not(.mm-currency-in-bar):not(.mm-currency-in-drawer) .mm-currency-btn { gap: 8px; padding: 0 14px 0 12px; border: 1.5px solid var(--mm-ink); font-weight: 700; }
.mm-currency-in-bar .mm-currency-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; border-color: rgba(255, 255, 255, .75); }
.mm-currency-in-bar .mm-cur-globe { width: 16px; height: 16px; color: var(--mm-brand); }
.pdx-currency-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: .86rem; color: var(--mm-muted); }
.pdx-currency-note .mm-cur-globe { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pdx-currency-note strong { color: var(--mm-ink); font-weight: 700; }
.pdx-currency-change { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--mm-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pdx-currency-change:hover, .pdx-currency-change:focus-visible { text-decoration-thickness: 2px; }

/* Phone menu: currency dropdown — full-width button, list opens in place below it */
.mm-v2 .mm-currency.mm-currency-in-drawer { display: block; }
.mm-currency-in-drawer .mm-currency-btn {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; height: auto; padding: 0 14px; border: 1.5px solid var(--mm-line-strong); border-radius: var(--mm-radius);
  background: #fff; font: inherit; font-size: .92rem; font-weight: 500; color: var(--mm-ink); text-align: left; cursor: pointer;
}
.mm-currency-in-drawer .mm-currency-btn[aria-expanded="true"] { border-color: var(--mm-ink); }
.mm-currency-in-drawer .mm-currency-btn svg { width: 18px; height: 18px; }
.mm-currency-in-drawer .mm-currency-menu { position: static; width: auto; margin-top: 6px; box-shadow: none; }
.mm-currency-in-drawer .mm-currency-rows { max-height: 300px; }
.mm-currency-in-drawer .mm-currency-rows button { min-height: 44px; }
.mm-currency-drawer .mm-currency.is-switching .mm-currency-btn { opacity: .55; pointer-events: none; }
html.mm-lock .mm-topbar { visibility: hidden; } /* menu open: the header is pinned to the top and the menu has its own currency list */

/* ---------- Currency switch feedback (currency.js adds html.mm-cur-switching on tap) ---------- */
html.mm-cur-switching body::before {
  content: ''; position: fixed; top: 0; left: 0; z-index: 100000; width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--mm-brand, #62d31f) 40%, var(--mm-brand, #62d31f) 60%, transparent);
  background-size: 50% 100%; background-repeat: no-repeat; animation: mm-cur-bar 1s linear infinite;
}
@keyframes mm-cur-bar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
html.mm-cur-switching main, html.mm-cur-switching .site-main { opacity: .55; transition: opacity .2s; }
html.mm-cur-switching, html.mm-cur-switching * { cursor: progress; }
.mm-currency.is-switching .mm-currency-btn { opacity: 1; pointer-events: none; }
.mm-currency.is-switching .mm-currency-btn svg { display: none; }
.mm-currency.is-switching .mm-currency-btn::after {
  content: ''; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: mm-cur-spin .7s linear infinite;
}
@keyframes mm-cur-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html.mm-cur-switching body::before { animation: none; background: var(--mm-brand, #62d31f); }
  .mm-currency.is-switching .mm-currency-btn::after { animation-duration: 2s; }
}

/* ---------- Product page "Made for" icons (redrawn 0.4.5): framed tiles ---------- */
.pdx-uses { gap: 8px; margin-top: 20px; }
.pdx-uses li { flex: 1 0 0; min-width: 64px; gap: 8px; padding: 0; font-size: .74rem; font-weight: 600; color: var(--mm-ink-2); }
.pdx-use-icon {
  box-sizing: border-box; width: 52px; height: 52px; padding: 12px;
  border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: var(--mm-paper);
  stroke-width: 1.5; transition: border-color .2s;
}
.pdx-uses li:hover .pdx-use-icon { border-color: var(--mm-ink); }

/* ==========================================================================
   Best Seller pill (0.4.20) — yellow pill, medal icon, dashed underline
   (markup: mariomaker_badge_html() in inc/shop-extras.php)
   ========================================================================== */
.mm-card-badge.mm-badge-best {
  top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 8px; border-radius: 999px; background: #ffc83d; color: var(--mm-ink);
  font-family: var(--mm-font-head); font-size: .8rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; text-transform: none;
  box-shadow: 0 4px 12px -6px rgba(17, 18, 20, .45);
}
.mm-badge-best .mm-badge-medal { flex: none; width: 1.15em; height: 1.15em; }
.mm-badge-best .mm-badge-text { text-decoration: underline dashed; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mm-finder-result-media .mm-card-badge.mm-badge-best { top: 4px; left: 4px; gap: 3px; padding: 3px 7px 3px 5px; font-size: .6rem; }
.mm-finder-result-media .mm-badge-best .mm-badge-text { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- 0.4.30: automatic currency note, product policy box, Etsy reviews ---------- */
.mm-cur-auto { background: #f2faec; border-bottom: 1px solid #d3ecc2; color: var(--mm-ink); font-size: .84rem; line-height: 1.4; }
.mm-cur-auto-inner { display: flex; align-items: center; justify-content: center; gap: 4px 12px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 9px 44px 9px 16px; position: relative; text-align: center; }
.mm-cur-auto-change { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--mm-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mm-cur-auto-close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--mm-muted); cursor: pointer; }
.mm-cur-auto-close:hover, .mm-cur-auto-change:hover { color: var(--mm-ink); }

.mm-policy { margin: 18px 0 4px; padding: 16px 18px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg, 8px); background: #fafaf9; }
.mm-policy-title { margin: 0 0 12px; font-family: var(--mm-font-head); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-ink); }
.mm-policy-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.mm-policy-list li { display: flex; gap: 11px; font-size: .86rem; line-height: 1.5; color: var(--mm-ink-2); }
.mm-policy-list svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--mm-ink); }
.mm-policy-list strong { color: var(--mm-ink); font-weight: 600; }
.mm-policy-list a { color: var(--mm-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.mm-policy-pay, .mm-trust-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mm-line); font-size: .8rem; color: var(--mm-muted); }
.mm-trust-pay { justify-content: center; border-top: 0; margin-top: 18px; }
.mm-pay-light { display: flex; gap: 8px; }
.mm-pay-light .mm-pay-badge { display: block; width: 44px; border: 1px solid var(--mm-line); border-radius: 4px; overflow: hidden; background: #fff; }
.mm-pay-light .mm-pay-badge svg { display: block; width: 100%; height: auto; }

.mm-etsy-reviews { padding: 0 0 28px; }
.mm-etsy-reviews .mm-wrap > * { max-width: none; }
.mm-etsy-head { margin-bottom: 16px; }
.mm-etsy-head .pdp-eyebrow { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); }
.mm-etsy-title { margin: 0; font-family: var(--mm-font-head); font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--mm-ink); }
.mm-etsy-sub { margin: 6px 0 0; max-width: 46em; font-size: .88rem; line-height: 1.5; color: var(--mm-muted); }
.mm-etsy-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mm-etsy-review { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg, 8px); background: #fff; }
.mm-etsy-stars { display: flex; gap: 2px; color: #f5a623; }
.mm-etsy-stars svg { width: 17px; height: 17px; fill: currentColor; }
.mm-etsy-stars svg.is-off { opacity: .25; }
.mm-etsy-text { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--mm-ink); }
.mm-etsy-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: auto 0 0; font-size: .8rem; color: var(--mm-muted); }
.mm-etsy-meta strong { color: var(--mm-ink); font-weight: 600; }
@media (min-width: 900px) { .mm-etsy-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Empty WooCommerce review box: one compact row instead of a large panel. */
.pdp-reviews.is-empty { padding-top: 16px; padding-bottom: 16px; }
.pdp-reviews.is-empty p.pdp-reviews-title { font-size: 1rem; }
.mm-etsy-sub a, .mm-etsy-more a { color: var(--mm-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mm-etsy-more { margin: 14px 0 0; font-size: .88rem; }

/* 0.4.32 — purchase section under the price on every product: space before the description that now follows the cart progress. */
.pdx-order + .pdx-lede { margin-top: 20px; }

/* ---------- 0.4.33 — clean product page: one sans-serif (Inter, already loaded site-wide), timeline, five rows ---------- */
/* Typography: the product area uses Inter only — headings, price, body, rows and buttons. */
.pdx { --mm-font-head: var(--mm-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif); font-family: var(--mm-font-head); }
.pdx button, .pdx input, .pdx select, .pdx textarea { font-family: inherit; }
.pdx-title { font-family: inherit; font-size: clamp(1.6rem, 5.6vw, 2.15rem); font-weight: 600; line-height: 1.15; letter-spacing: -.022em; }
.pdx-price-line { margin-top: 10px; }
.pdx-price, .pdx-price .price { font-family: inherit; font-size: clamp(1.3rem, 4.6vw, 1.5rem); font-weight: 500; letter-spacing: -.01em; }
.pdx-tax { font-size: .8rem; }
.pdx-bats-title, .pdx-tl-label { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pdx .single_add_to_cart_button { font-family: inherit; font-weight: 600; letter-spacing: .06em; }
.pdx-acc summary, .pdx-acc summary .pdx-acc-title { font-family: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.pdx-acc summary { min-height: 56px; }
.pdx-acc-body, .pdx-acc-body.pdp-prose { font-size: .94rem; line-height: 1.6; }
.pdx-acc-body h3 { font-family: inherit; font-size: .94rem; font-weight: 600; }
.pdx .mm-kit-pill, .pdx .mm-fit-title, .pdx .mm-etsy-title, .pdx .pdp-eyebrow, .pdx .pdp-reviews-title, .pdx .comment-reply-title { font-family: inherit; }

/* Payment marks + Build Your Own Kit link, one quiet line under the cart progress. */
.pdx-extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.pdx-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: .78rem; color: var(--mm-muted); }
.pdx-extras .pdx-kit-pill { margin-top: 0; font-size: .74rem; }

.pdx-us-note { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--mm-line); border-radius: 12px; font-size: .86rem; line-height: 1.4; color: var(--mm-ink-2); }
.pdx-us-note svg { flex: none; width: 20px; height: 20px; color: var(--mm-ink); }
.pdx-us-note strong { color: var(--mm-ink); font-weight: 600; }

/* Purchased → Hand Building → Delivered: black line icons + black connectors on a light-grey rounded panel. */
.pdx-timeline { margin-top: 16px; padding: 18px 14px 14px; border-radius: 14px; background: #f3f3f3; }
.pdx-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pdx-tl-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 0 4px; text-align: center; }
.pdx-tl-step + .pdx-tl-step::before { content: ''; position: absolute; top: 13px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 1.5px; background: #111214; }
.pdx-tl-icon { width: 28px; height: 28px; margin-bottom: 6px; fill: none; stroke: #111214; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdx-tl-label { line-height: 1.25; color: #111214; }
.pdx-tl-date { font-size: .86rem; font-weight: 500; line-height: 1.35; color: var(--mm-ink-2); }
.pdx-tl-note { margin: 14px 0 0; font-size: .74rem; line-height: 1.4; text-align: center; color: var(--mm-muted); }
@media (max-width: 420px) {
  .pdx-timeline { padding: 16px 8px 12px; }
  .pdx-tl-label { font-size: .66rem; letter-spacing: .05em; }
  .pdx-tl-date { font-size: .8rem; }
}
/* Order-received / view-order pages: same panel, real order date. */
.mm-order-timeline { margin: 0 0 28px; max-width: 640px; }
.mm-order-timeline .pdx-timeline { margin-top: 0; }

/* The five rows */
.pdx-info > .pdx-accordions { margin-top: 22px; }
.pdx-acc-body .mm-policy-list li { font-size: .92rem; }
.pdx-acc-body .pdx-specs { margin-top: 4px; }
.pdx-acc-body .pdx-fit { margin-top: 18px; }

/* Reviews row: Etsy reviews (labelled) + this website's reviews, without the full-width section frames. */
.mm-etsy-reviews.is-in-row { padding: 0 0 18px; }
.mm-etsy-reviews.is-in-row .mm-wrap { max-width: none; padding: 0; }
.mm-etsy-reviews.is-in-row .mm-etsy-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.mm-etsy-reviews.is-in-row .mm-etsy-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mm-etsy-reviews.is-in-row .mm-etsy-review { gap: 8px; padding: 14px 16px; }
.pdx-acc-reviews .pdp-reviews, body.mm-v2 .pdx-acc-reviews .pdp-reviews { padding: 0; border: 0; border-radius: 0; background: none; }
.mm-etsy-reviews.is-in-row + .pdp-reviews { padding-top: 16px; border-top: 1px solid var(--mm-line); }
.pdx-acc-reviews .pdp-reviews .comment-form { grid-template-columns: minmax(0, 1fr); }
.pdx-acc-reviews .pdp-reviews .comment-form > .comment-form-author, .pdx-acc-reviews .pdp-reviews .comment-form > .comment-form-email { grid-column: 1; }

/* ---------- 0.4.34 — one font site-wide (Inter) + one type scale; genuine star ratings ---------- */
/* Fonts: every variable points at Inter (home.css, premium.css, site.css, prototype.css); form controls inherit it. */
body.mm-v2 { font-family: var(--mm-font-body); }
body.mm-v2 :is(button, input, select, textarea, optgroup) { font-family: inherit; }
/* Scale — headings 700 · product names 600 · prices 600 · body 400 · buttons 600 · menu 500 (product page: title 600, price 500). */
body.mm-v2 :is(.mm-hero-kit, .mm-h2, .mm-h3, .mm-page-title, .mm-best-title, .mm-final-title, .mm-byo-title, .pow-title, .pow-featured-title, .mm-etsy-title, .mm-specs dd, .entry-content h2, .entry-content h3) { font-weight: 700; }
body.mm-v2 :is(.mm-hero-kit, .mm-h2, .mm-page-title, .mm-best-title, .mm-final-title, .pow-title) { letter-spacing: -.025em; }
body.mm-v2 .mm-card-title { font-weight: 600; letter-spacing: -.005em; }
body.mm-v2 :is(.mm-card-price, .mm-best-price) { font-weight: 600; letter-spacing: -.01em; }
body.mm-v2 :is(.mm-btn, .btn, .button, .single_add_to_cart_button, .checkout-button, #place_order) { font-weight: 600; }
body.mm-v2 .mm-nav a { font-weight: 500; }

/* Star rating (inc/product-page.php mariomaker_rating_html): real WooCommerce average, partial fill. */
.mm-rating { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .86rem; line-height: 1; color: var(--mm-muted); text-decoration: none; }
.mm-stars { position: relative; display: inline-flex; flex: none; }
.mm-stars-bg, .mm-stars-fg { display: flex; gap: 2px; }
.mm-stars-bg { color: #d9dadc; }
.mm-stars-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #f5a623; }
.mm-stars svg { flex: none; width: 15px; height: 15px; fill: currentColor; }
.mm-rating-avg { font-weight: 600; color: var(--mm-ink); }
.pdx-rating { margin-top: 10px; }
.pdx-rating + .pdx-price-line { margin-top: 8px; }
a.pdx-rating:hover .mm-rating-count { color: var(--mm-ink); text-decoration: underline; text-underline-offset: 2px; }
a.pdx-rating:focus-visible { outline: 2px solid var(--mm-ink); outline-offset: 3px; border-radius: 2px; }
.mm-card-rating { position: relative; z-index: 0; margin: 4px 0 2px; font-size: .78rem; gap: 5px; }
.mm-card-rating .mm-stars svg { width: 13px; height: 13px; }