/* ==========================================================================
   MarioMaker v2 homepage — built to the owner's reference mock-up.
   Loaded only on body.mm-v2 (inc/home.php); every rule is scoped so the
   product/shop/cart/checkout pages keep their current design for now.
   Mobile-first: base = phone layout; min-width queries build up to desktop.
   Desktop sizes are the reference's 1024px canvas scaled to ~1440px.
   ========================================================================== */

.mm-v2 {
  --mm-ink: #111214;
  --mm-ink-2: #2d3036;
  --mm-muted: #5f646d;
  --mm-line: #e3e5e8;
  --mm-grey: #f4f4f4;         /* best-seller band */
  --mm-cool: #eef0f3;         /* kit builder band */
  --mm-logo-green: #62d31f;   /* logo "MAKER" only — sampled from the brand sheet, do not change */
  --mm-brand: #62d31f;        /* MarioMaker green — the one brand green (master logo sheet) */
  --mm-brand-hover: #54bd16;
  --mm-navy: #111214;         /* step numbers etc. — brand black (was navy) */
  --mm-select: #62d31f;       /* selected battery tile = brand green */
  --mm-radius: 6px;
  --mm-radius-lg: 10px;
  --mm-card-shadow: 0 1px 2px rgba(17, 18, 20, .06), 0 4px 14px -6px rgba(17, 18, 20, .12);
  --mm-ease: cubic-bezier(.22, .61, .36, 1);
  --mm-gutter: 20px;
  --mm-header-h: 64px;
  --mm-font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* 0.4.34: one font site-wide (was Poppins) */
  --mm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  background: #fff;
  color: var(--mm-ink);
  font-family: var(--mm-font-body);
}
.mm-v2 main { background: #fff; }
.mm-v2 h1, .mm-v2 h2, .mm-v2 h3 { font-family: var(--mm-font-head); color: inherit; letter-spacing: -0.01em; }
.mm-v2 .cart-panel-head .cart-panel-title { font-family: var(--mm-font-head); color: inherit; letter-spacing: -0.01em; } /* was an <h2> (SEO heading fix, 0.3.58) */
.mm-v2 a { text-decoration: none; }
.mm-v2 img { max-width: 100%; }
.mm-v2 :focus-visible { outline: 2px solid var(--mm-ink); outline-offset: 2px; }
html:has(body.mm-v2) { scroll-padding-top: calc(var(--mm-header-h) + 8px); }

.mm-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--mm-gutter); }
.mm-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mm-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: var(--mm-radius);
  font-family: var(--mm-font-head); font-size: .95rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--mm-ease), transform .2s var(--mm-ease), box-shadow .2s var(--mm-ease), color .2s;
}
.mm-btn .mm-i { width: 20px; height: 20px; transition: transform .25s var(--mm-ease); }
.mm-btn:hover .mm-i:last-child { transform: translateX(3px); }
.mm-btn:active { transform: translateY(1px); }
.mm-btn-brand { background: var(--mm-brand); color: var(--mm-ink); }
.mm-btn-brand:hover { background: var(--mm-brand-hover); box-shadow: 0 8px 20px -10px rgba(92, 173, 65, .55); }
.mm-btn.is-loading { opacity: .65; pointer-events: none; }

.mm-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1.5px solid #3a3d44; border-radius: 4px; background: #fff; color: var(--mm-ink);
  font-family: var(--mm-font-head); font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.mm-btn-outline .mm-i { width: 17px; height: 17px; transition: transform .25s var(--mm-ease); }
.mm-btn-outline:hover { background: var(--mm-ink); color: #fff; }
.mm-btn-outline:hover .mm-i { transform: translateX(3px); }

.mm-link { display: inline-flex; gap: 6px; font-weight: 600; color: var(--mm-ink); border-bottom: 1.5px solid var(--mm-brand); padding-bottom: 1px; }
.mm-link:hover { border-color: var(--mm-ink); }

.mm-h2 { margin: 0 0 6px; font-size: clamp(1.9rem, 7.5vw, 3rem); font-weight: 700; line-height: 1.1; }
.mm-lead { margin: 0 0 24px; font-size: 1.05rem; color: var(--mm-ink-2); }

/* ---------- Header ---------- */
.mm-v2 .site-header.mm-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--mm-line);
}
.mm-v2.admin-bar .site-header.mm-header { top: 46px; }
@media (min-width: 783px) { .mm-v2.admin-bar .site-header.mm-header { top: 32px; } }
/* Phones/tablets: the header sits at the top of the page and scrolls away with it (no floating bar,
   no gap where the scrolled-away admin toolbar was). While the menu is open it pins to the top of
   the screen so the drawer below it is always in view (the page behind is scroll-locked). */
@media (max-width: 1023px) {
  .mm-v2 .site-header.mm-header,
  .mm-v2.admin-bar .site-header.mm-header { position: relative; top: auto; }
  .mm-v2 .site-header.mm-header.menu-open,
  .mm-v2.admin-bar .site-header.mm-header.menu-open { position: fixed; top: 0; left: 0; right: 0; }
}
.mm-header.is-scrolled { box-shadow: 0 6px 20px -16px rgba(17, 18, 20, .45); }
/* Keep the sticky header pinned on phones: prototype.css sets body { overflow-x: hidden }, which makes
   the body its own scroll box, so mobile browsers (iOS Safari especially) let the header slide/jump.
   "clip" still stops sideways scrolling but is not a scroll container. Older browsers keep "hidden". */
@supports (overflow-x: clip) {
  body.mm-v2 { overflow-x: clip; }
}

.mm-header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  height: var(--mm-header-h); max-width: 1320px; margin: 0 auto; padding: 0 10px;
}
.mm-menu-btn { justify-self: start; }
.mm-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--mm-ink); }
.mm-logo-word { font-family: var(--mm-font-head); font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.mm-logo-word b { font-weight: 800; color: var(--mm-logo-green); margin-left: .22em; }
.mm-logo-tag { margin-top: 3px; font-size: .5rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-ink-2); }

.mm-nav { display: none; }
.mm-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
.mm-search { display: none; }
.mm-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mm-ink);
  transition: background-color .2s;
}
.mm-icon-btn:hover { background: var(--mm-grey); }
.mm-icon-btn svg { width: 23px; height: 23px; }
.mm-v2 .mm-header #search-toggle { display: inline-flex; } /* prototype.css hides it ≤980px */
/* Phones: menu + search left, account + cart right, logo centred between them */
.mm-header-left { display: flex; align-items: center; justify-self: start; }
.mm-header .mm-icon-btn { width: 42px; }
@media (max-width: 359px) {
  .mm-header .mm-icon-btn { width: 38px; }
  .mm-header .mm-icon-btn svg { width: 21px; height: 21px; }
  .mm-header .mm-logo-word { font-size: 1.15rem; }
}
.mm-header .cart-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--mm-brand); color: var(--mm-ink);
  font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center;
}

.mm-burger { position: relative; display: block; width: 22px; height: 16px; }
.mm-burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--mm-ease), top .3s var(--mm-ease); }
.mm-burger span:first-child { top: 3px; }
.mm-burger span:last-child { top: 11px; }
.mm-header.menu-open .mm-burger span:first-child { top: 7px; transform: rotate(45deg); }
.mm-header.menu-open .mm-burger span:last-child { top: 7px; transform: rotate(-45deg); }

.mm-drawer {
  position: absolute; top: 100%; left: 0; right: 0;
  height: calc(100vh - var(--mm-header-h)); height: calc(100dvh - var(--mm-header-h));
  overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 8px var(--mm-gutter) 28px; background: #fff;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--mm-ease), transform .22s var(--mm-ease), visibility 0s .22s;
}
.mm-header.menu-open .mm-drawer { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--mm-ease), transform .22s var(--mm-ease), visibility 0s; }
/* Phone menu: light list — regular-size text, slim rows and buttons */
.mm-drawer-nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 50px;
  border-bottom: 1px solid var(--mm-line);
  font-family: var(--mm-font-head); font-size: 1.06rem; font-weight: 600; color: var(--mm-ink);
}
.mm-drawer-nav a[aria-current] span:first-child { box-shadow: inset 0 -.24em 0 var(--mm-brand); }
.mm-drawer-nav .mm-arrow { color: var(--mm-muted); font-size: .95rem; }
.mm-drawer-foot { display: grid; gap: 10px; }
.mm-drawer-foot .mm-btn { width: 100%; min-height: 46px; font-size: .88rem; background: var(--mm-brand); color: var(--mm-ink); }
.mm-drawer-links { display: flex; gap: 8px; }
.mm-drawer-links a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px;
  border-radius: 8px; background: var(--mm-grey); font-weight: 500; font-size: .88rem; color: var(--mm-ink);
}
.mm-drawer-links svg { width: 16px; height: 16px; }
html.mm-lock, html.mm-lock body { overflow: hidden; }

/* ---------- Hero ---------- */
.mm-hero { position: relative; background: #0b0b0c; color: #fff; overflow: hidden; }
.mm-hero-media { position: relative; aspect-ratio: 4 / 3; }
.mm-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0) 55%, #0b0b0c 100%);
}
.mm-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.mm-hero-inner { position: relative; padding-top: 4px; padding-bottom: 30px; }
.mm-hero-kit { margin: 0 0 14px; font-family: var(--mm-font-head); font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 800; line-height: 1.08; color: #fff; }
.mm-hero-sub { margin: 0 0 22px; max-width: 34em; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.mm-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.mm-hero-kit + .mm-hero-ctas { margin-top: 26px; } /* no description between heading and buttons (collapses with the h1 margin) */
.mm-hero-copy .mm-btn { width: 100%; }
.mm-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.mm-btn-ghost:hover { background: #fff; color: var(--mm-ink); }

.mm-benefits {
  list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px;
}
.mm-benefits li { display: flex; align-items: center; gap: 10px; font-size: .88rem; line-height: 1.3; font-weight: 600; }
.mm-benefits .mm-i { width: 30px; height: 30px; stroke-width: 1.7; }
.mm-benefits strong { display: block; font-weight: 600; }

/* ---------- Best seller ---------- */
.mm-best { background: var(--mm-grey); overflow: hidden; }
.mm-best-grid { display: grid; }
.mm-best-product { position: relative; margin: 0 var(--mm-gutter); padding-top: 28px; }
.mm-best-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--mm-radius-lg); }
.mm-best-badge {
  position: absolute; z-index: 1; top: 14px; left: -6px;
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--mm-brand); color: var(--mm-ink);
  font-family: var(--mm-font-head); font-size: .9rem; font-weight: 700; line-height: 1.15; text-align: center; text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(17, 18, 20, .5);
}
.mm-best-copy { padding: 26px var(--mm-gutter) 40px; }
.mm-best-title { margin: 0; font-size: clamp(2rem, 8.5vw, 2.5rem); font-weight: 700; line-height: 1.1; }
.mm-best-sub { margin: 6px 0 20px; font-size: 1.1rem; color: var(--mm-muted); }
.mm-checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.mm-checks li { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--mm-ink-2); }
.mm-checks .mm-i { width: 20px; height: 20px; stroke-width: 2.6; color: var(--mm-ink); }
.mm-best-price { margin-bottom: 16px; font-family: var(--mm-font-head); font-size: 2rem; font-weight: 700; }
.mm-buy { display: grid; gap: 10px; margin: 0 0 18px; }
.mm-buy .mm-btn { width: 100%; }
.mm-select { position: relative; }
.mm-select::after {
  content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--mm-ink); border-bottom: 2px solid var(--mm-ink);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.mm-select select {
  width: 100%; min-height: 50px; padding: 0 44px 0 16px;
  border: 1.5px solid #cfd3d8; border-radius: var(--mm-radius); background: #fff;
  font: inherit; font-size: 1rem; color: var(--mm-ink); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.mm-select select:focus, .mm-select select:hover { border-color: var(--mm-ink); outline: none; }
.mm-select.is-invalid select { border-color: #c0392b; }
/* Battery dropdown with icons (home.js iconSelect): button + listbox over a hidden <select> */
.mm-select.has-dd .mm-dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.mm-dd-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 44px 0 16px;
  border: 1.5px solid #cfd3d8; border-radius: var(--mm-radius); background: #fff;
  font: inherit; font-size: 1rem; color: var(--mm-ink); text-align: left; cursor: pointer;
}
.mm-dd-btn:hover, .mm-dd-btn:focus-visible, .mm-select.is-open .mm-dd-btn { border-color: var(--mm-ink); outline: none; }
.mm-dd-btn.is-empty { color: var(--mm-ink-2); }
.mm-select.is-invalid .mm-dd-btn { border-color: #c0392b; }
.mm-select.is-open::after { transform: translateY(-30%) rotate(225deg); }
.mm-dd-btn img, .mm-dd-list img { flex: none; width: 34px; height: 24px; object-fit: contain; }
.mm-dd-btn span, .mm-dd-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-dd-list {
  position: fixed; z-index: 55; max-height: 340px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #dfe2e6; border-radius: var(--mm-radius);
  box-shadow: 0 16px 40px -12px rgba(17, 18, 20, .3); overscroll-behavior: contain;
}
.mm-dd-list:focus { outline: none; }
.mm-dd-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 6px; font-size: .98rem; color: var(--mm-ink); cursor: pointer; }
.mm-dd-list li.is-placeholder { color: var(--mm-ink-2); }
.mm-dd-list li.is-active { background: #f2f3f5; }
.mm-dd-list li[aria-selected="true"] { background: #f1fbea; font-weight: 600; }
.mm-dd-list li[aria-selected="true"]::after { content: ''; margin-left: auto; width: 6px; height: 11px; border-right: 2px solid var(--mm-brand, #62d31f); border-bottom: 2px solid var(--mm-brand, #62d31f); transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.mm-buy-note { margin: 0; min-height: 1.2em; font-size: .9rem; font-weight: 500; color: var(--mm-ink-2); }
.mm-buy-note.is-error { color: #b0281a; }
.mm-buy-note.is-ok { color: #2f6b0e; }
.mm-best-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.mm-kit-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1.5px dashed #b9bdc4; border-radius: var(--mm-radius); background: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mm-ink);
  transition: border-color .2s;
}
.mm-kit-pill:hover { border-color: var(--mm-ink); border-style: solid; }
.mm-kit-pill .mm-i { width: 18px; height: 18px; }
.mm-best-scene { display: none; }

/* ---------- Popular kits ---------- */
.mm-kits { padding: 44px 0 48px; background: #fff; }
.mm-kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
.mm-kit-card:nth-child(3) { grid-column: 1 / -1; }
.mm-kit-media {
  display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
  aspect-ratio: 1.35 / 1; border-radius: var(--mm-radius); overflow: hidden; background: #fff;
}
.mm-kit-card:nth-child(3) .mm-kit-media { aspect-ratio: 2.3 / 1; }
.mm-kit-img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .6s var(--mm-ease); }
.mm-kit-img-1 { grid-row: 1 / span 2; }
.mm-kit-card:hover .mm-kit-img { transform: scale(1.04); }
/* Homepage: one lifestyle photo per kit, in an equal-size frame so titles/buttons line up (contained, no crop) */
.mm-kit-grid-scene { grid-template-columns: 1fr; gap: 28px; align-items: start; }
.mm-kit-grid-scene .mm-kit-card:nth-child(3) { grid-column: auto; }
.mm-kit-media-scene, .mm-kit-grid-scene .mm-kit-card:nth-child(3) .mm-kit-media-scene { display: block; aspect-ratio: 16 / 9; background: #fff; }
.mm-kit-media-scene .mm-kit-img { height: 100%; object-fit: contain; }
.mm-kit-body { padding-top: 12px; }
.mm-kit-title { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.mm-kit-text { margin: 0 0 12px; font-size: .88rem; color: var(--mm-muted); }

/* ---------- Create your own kit ---------- */
.mm-builder { padding: 44px 0 0; background: var(--mm-cool); }
.mm-builder-grid { display: grid; gap: 24px; }
.mm-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mm-step-head h3 { margin: 0; font-size: 1.12rem; font-weight: 600; }
.mm-step-num {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mm-navy); color: #fff; font-family: var(--mm-font-head); font-weight: 600; font-size: 1rem;
}
.mm-step-head-2 { flex-wrap: wrap; align-items: flex-start; margin-top: 30px; }
.mm-step-head-2 > div { flex: 1; min-width: 0; padding-top: 4px; }
.mm-step-note { margin: 2px 0 0; font-size: .88rem; color: var(--mm-muted); }
.mm-tool-search { position: relative; flex-basis: 100%; }
.mm-tool-search input {
  width: 100%; height: 44px; padding: 0 44px 0 18px; border: 1px solid var(--mm-line); border-radius: 999px;
  background: #fff; font: inherit; font-size: .95rem; color: var(--mm-ink);
}
.mm-tool-search input:focus { outline: none; border-color: var(--mm-ink); }
.mm-tool-search .mm-i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mm-muted); pointer-events: none; }

.mm-batteries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm-battery {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 92px; padding: 10px 6px;
  border: 2px solid transparent; border-radius: 4px; background: #fff; box-shadow: var(--mm-card-shadow);
  font: inherit; font-size: .85rem; color: var(--mm-ink-2); cursor: pointer;
  transition: border-color .2s, transform .2s var(--mm-ease), box-shadow .2s;
}
.mm-battery img { width: auto; height: 46px; }
.mm-battery[hidden] { display: none; }
.mm-batteries-toggle { display: flex; justify-content: center; margin-top: 14px; }
.mm-batteries-more { min-height: 42px; padding: 0 20px; border-color: var(--mm-line); cursor: pointer; }
.mm-batteries-more:hover { background: #fff; border-color: var(--mm-ink); color: var(--mm-ink); }
.mm-batteries-more .mm-i { transition: transform .25s var(--mm-ease); }
.mm-batteries-more:hover .mm-i { transform: none; }
.mm-batteries-more[aria-expanded="true"] .mm-i { transform: rotate(180deg); }
.mm-battery span { max-width: 100%; line-height: 1.25; text-align: center; overflow-wrap: break-word; }
.mm-battery .mm-i { width: 34px; height: 34px; stroke-width: 1.6; color: var(--mm-ink-2); margin: 6px 0; }
.mm-battery:hover { transform: translateY(-2px); }
.mm-battery[aria-checked="true"] { border-color: var(--mm-select); box-shadow: 0 0 0 3px rgba(98, 211, 31, .15); color: var(--mm-ink); font-weight: 600; }
.mm-other { margin-top: 12px; display: grid; gap: 6px; }
.mm-other[hidden] { display: none; }
.mm-other label { font-size: .85rem; font-weight: 600; color: var(--mm-ink-2); }

.mm-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-tool {
  display: flex; flex-direction: column; padding: 8px 8px 10px; border-radius: 4px; background: #fff; box-shadow: var(--mm-card-shadow);
  border: 2px solid transparent; transition: border-color .2s, opacity .2s;
}
.mm-tool-img { display: block; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden; background: var(--mm-grey); margin-bottom: 8px; }
.mm-tool-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--mm-ease); }
.mm-tool:hover .mm-tool-img img { transform: scale(1.05); }
.mm-tool-name { font-size: .88rem; line-height: 1.3; color: var(--mm-ink-2); }
.mm-tool-name:hover { text-decoration: underline; }
.mm-tool-price { margin: 2px 0 10px; font-weight: 700; font-size: .92rem; }
.mm-tool-add {
  margin-top: auto; min-height: 40px; border: 0; border-radius: 3px; background: var(--mm-ink); color: #fff;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s;
}
.mm-tool-add:hover { background: #33363d; }
.mm-tool-add-off { display: none; }
.mm-tool.is-added { border-color: var(--mm-brand); }
.mm-tool.is-added .mm-tool-add { background: var(--mm-brand); color: var(--mm-ink); }
.mm-tool.is-added .mm-tool-add-on { display: none; }
.mm-tool.is-added .mm-tool-add-off { display: inline; }
.mm-tool[hidden] { display: none; }
.mm-tool.is-unavailable { opacity: .45; }
.mm-tool.is-unavailable .mm-tool-add { background: #b9bdc4; cursor: not-allowed; }
.mm-tools-empty { margin: 12px 0 0; color: var(--mm-muted); }

/* Your Kit — on phones a sticky bar at the bottom of the builder */
.mm-summary {
  position: sticky; bottom: 0; z-index: 5;
  margin: 0 calc(var(--mm-gutter) * -1);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px;
  padding: 12px var(--mm-gutter) calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--mm-line); box-shadow: 0 -10px 24px -18px rgba(17, 18, 20, .45);
}
.mm-summary-head { display: flex; align-items: center; gap: 8px; }
.mm-summary-head h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.mm-summary-head .mm-i { width: 22px; height: 22px; }
.mm-summary-count { font-size: .78rem; font-weight: 600; color: var(--mm-muted); }
.mm-summary-total { grid-column: 1; font-family: var(--mm-font-head); font-size: 1.55rem; font-weight: 700; line-height: 1; }
.mm-summary-min { grid-column: 1; margin: 0; font-size: .78rem; color: var(--mm-muted); }
.mm-progress { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #e4e6ea; overflow: hidden; }
.mm-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mm-brand); transition: width .35s var(--mm-ease); }
.mm-progress-labels { display: none; }
.mm-summary-list { display: none; }
.mm-summary-msg { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--mm-muted); }
.mm-summary-msg.is-ready { color: #2f6b0e; font-weight: 600; }
.mm-btn-kit { grid-column: 2; grid-row: 1 / span 3; min-height: 48px; padding: 0 18px; font-size: .85rem; background: var(--mm-brand); color: var(--mm-ink); }
.mm-btn-kit:hover { background: var(--mm-brand-hover); }
.mm-btn-kit:disabled { background: #d5d8dd; color: #fff; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------- Footer (v2, restyled to the reference palette) ---------- */
.mm-footer { border-top: 1px solid var(--mm-line); background: #fff; color: var(--mm-ink); }
.mm-footer .mm-logo { align-items: flex-start; }
.mm-footer-top { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 36px; }
.mm-footer-brand p { margin: 14px 0 18px; max-width: 38ch; color: var(--mm-muted); line-height: 1.6; }
.mm-social { display: flex; gap: 8px; }
.mm-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mm-line); color: var(--mm-ink); transition: background-color .2s, color .2s; }
.mm-social a:hover { background: var(--mm-ink); color: #fff; }
.mm-social svg { width: 18px; height: 18px; }
.mm-footer-col h3 { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.mm-footer-col ul a { display: inline-block; padding: 7px 0; color: var(--mm-ink-2); }
.mm-footer-col ul a:hover { color: var(--mm-ink); text-decoration: underline; text-decoration-color: var(--mm-brand); text-decoration-thickness: 2px; }
.mm-footer-col address { font-style: normal; color: var(--mm-ink-2); line-height: 1.7; margin-bottom: 10px; }
.mm-footer-mail { font-weight: 600; color: var(--mm-ink); border-bottom: 2px solid var(--mm-brand); }
.mm-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 20px; padding-bottom: 26px; border-top: 1px solid var(--mm-line); font-size: .85rem; color: var(--mm-muted); }
.mm-pay { display: flex; gap: 8px; }
.mm-pay-badge { display: block; width: 46px; border: 1px solid var(--mm-line); border-radius: 6px; overflow: hidden; }
.mm-pay-badge svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .mm-v2 *, .mm-v2 *::before, .mm-v2 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   ≥ 600px
   ========================================================================== */
@media (min-width: 600px) {
  .mm-v2 { --mm-gutter: 32px; }
  .mm-hero-copy .mm-btn { width: auto; }
  .mm-benefits { grid-template-columns: repeat(4, auto); justify-content: start; gap: 18px 36px; }
  .mm-buy { max-width: 420px; }
  .mm-batteries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-tools { grid-template-columns: repeat(3, 1fr); }
  .mm-tool-search { flex-basis: 260px; flex-grow: 0; }
  .mm-footer-top { grid-template-columns: 1fr 1fr; }
  .mm-footer-brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   ≥ 760px
   ========================================================================== */
@media (min-width: 760px) {
  .mm-batteries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-kit-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .mm-kit-card:nth-child(3) { grid-column: auto; }
  .mm-kit-media, .mm-kit-card:nth-child(3) .mm-kit-media { aspect-ratio: 2.2 / 1; }
  .mm-kit-grid-scene { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .mm-kit-media-scene, .mm-kit-grid-scene .mm-kit-card:nth-child(3) .mm-kit-media-scene { aspect-ratio: 16 / 9; }
  .mm-kit-title { font-size: 1.25rem; }
  .mm-kit-text { font-size: .98rem; }
  .mm-tools { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   ≥ 1024px — desktop, laid out like the reference
   ========================================================================== */
@media (min-width: 1024px) {
  .mm-v2 { --mm-gutter: 48px; --mm-header-h: 80px; }

  /* Header: logo · nav · search/account/cart */
  .mm-header-inner { grid-template-columns: auto 1fr auto; gap: 40px; padding: 0 var(--mm-gutter); }
  .mm-menu-btn, .mm-drawer, .mm-v2 .mm-header #search-toggle { display: none; }
  .mm-logo { align-items: center; }
  .mm-logo-word { font-size: 2rem; }
  .mm-logo-tag { font-size: .6rem; margin-top: 2px; }
  .mm-nav { display: flex; align-self: stretch; gap: 8px; padding-left: 24px; }
  .mm-nav a {
    position: relative; display: flex; align-items: center; padding: 0 14px;
    font-size: .95rem; font-weight: 500; color: var(--mm-ink);
  }
  .mm-nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--mm-ink); transform: scaleX(0); transition: transform .2s var(--mm-ease); }
  .mm-nav a:hover::after, .mm-nav a[aria-current]::after { transform: scaleX(1); }
  .mm-header-actions { gap: 10px; }
  .mm-search { display: none; align-items: center; gap: 8px; width: 300px; height: 44px; padding: 0 14px; border-radius: 8px; background: #f1f2f4; margin-right: 14px; }
  .mm-search svg { width: 18px; height: 18px; color: var(--mm-muted); }
  .mm-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--mm-ink); outline: none; }
  .mm-search:focus-within { box-shadow: 0 0 0 2px var(--mm-ink); }
  .mm-header-left { display: none; }
  .mm-header .mm-icon-btn { width: 44px; }
  .mm-icon-btn svg { width: 26px; height: 26px; }

  /* Hero: photo fills the right, copy on the left over a dark fade */
  .mm-hero { min-height: 540px; display: flex; }
  .mm-hero-media { position: absolute; inset: 0 0 0 36%; aspect-ratio: auto; }
  .mm-hero-media::after { background: linear-gradient(90deg, #0b0b0c 0%, rgba(11, 11, 12, .85) 18%, rgba(11, 11, 12, .25) 48%, rgba(11, 11, 12, 0) 70%), linear-gradient(0deg, rgba(11, 11, 12, .75) 0%, rgba(11, 11, 12, 0) 32%); }
  .mm-hero-img { object-position: 50% 62%; }
  .mm-hero-inner { display: flex; flex-direction: column; justify-content: space-between; padding-top: 54px; padding-bottom: 30px; }
  .mm-hero-copy { max-width: 640px; }
  .mm-hero-sub { font-size: 1.25rem; max-width: 27em; margin-bottom: 26px; }
  .mm-hero-copy .mm-btn { min-height: 56px; padding: 0 48px; font-size: 1rem; }
  .mm-benefits { margin-top: 36px; padding-top: 0; border-top: 0; gap: 20px 56px; }
  .mm-benefits li { font-size: 1rem; }
  .mm-benefits .mm-i { width: 36px; height: 36px; }

  /* Best seller: product · copy · diagonal lifestyle photo */
  .mm-best-grid { grid-template-columns: 34% 1fr 30%; align-items: center; min-height: 420px; max-width: 1440px; margin: 0 auto; }
  .mm-best-product { margin: 0; padding: 28px 24px 28px var(--mm-gutter); }
  .mm-best-img { aspect-ratio: 1.1 / 1; }
  .mm-best-badge { width: 106px; height: 106px; font-size: 1.1rem; top: 44px; left: calc(var(--mm-gutter) - 22px); }
  .mm-best-copy { padding: 36px 32px; }
  .mm-best-title { font-size: 2.35rem; }
  .mm-best-sub { font-size: 1.25rem; }
  .mm-checks li { font-size: 1.08rem; }
  .mm-buy { grid-template-columns: 1fr auto; max-width: 520px; }
  .mm-buy .mm-btn { width: auto; min-height: 56px; padding: 0 34px; }
  .mm-select select, .mm-dd-btn { min-height: 56px; }
  .mm-buy-note { grid-column: 1 / -1; }
  .mm-best-scene { display: block; align-self: stretch; position: relative; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
  .mm-best-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* Popular kits */
  .mm-kits { padding: 44px 0 56px; }
  .mm-h2 { font-size: 3rem; }
  .mm-lead { font-size: 1.3rem; margin-bottom: 26px; }
  .mm-kit-grid { gap: 28px; }
  .mm-kit-title { font-size: 1.4rem; }
  .mm-kit-text { font-size: 1.05rem; margin-bottom: 14px; }

  /* Builder: main + Your Kit side panel */
  .mm-builder { padding: 44px 0 72px; }
  .mm-builder-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
  .mm-step-head h3 { font-size: 1.3rem; }
  .mm-step-num { width: 40px; height: 40px; font-size: 1.15rem; }
  .mm-batteries { padding-left: 52px; gap: 14px; max-width: 920px; }
  .mm-batteries-toggle { padding-left: 52px; max-width: 920px; margin-top: 18px; }
  .mm-battery { min-height: 100px; font-size: .92rem; }
  .mm-other { padding-left: 52px; max-width: 480px; }
  .mm-step-head-2 { align-items: center; flex-wrap: nowrap; margin-top: 30px; }
  .mm-step-head-2 > div { padding-top: 0; }
  .mm-tool-search { flex-basis: 250px; }
  .mm-tools { gap: 14px; }
  .mm-tool-name { font-size: .95rem; }

  .mm-summary {
    position: sticky; top: calc(var(--mm-header-h) + 24px); bottom: auto;
    margin: 0; display: block; padding: 26px 24px; border: 0; border-radius: 4px; box-shadow: var(--mm-card-shadow);
  }
  .mm-summary-head { gap: 12px; margin-bottom: 22px; }
  .mm-summary-head h3 { font-size: 1.2rem; }
  .mm-summary-head .mm-i { width: 28px; height: 28px; }
  .mm-summary-total { font-size: 2.4rem; margin-bottom: 6px; }
  .mm-summary-min { font-size: .95rem; margin-bottom: 18px; }
  .mm-progress { height: 12px; }
  .mm-progress-labels { display: flex; justify-content: space-between; margin: 8px 0 22px; font-size: .95rem; color: var(--mm-ink-2); }
  .mm-summary-list { display: grid; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
  .mm-summary-list:empty { display: none; }
  .mm-summary-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; }
  .mm-summary-list li span:first-child { color: var(--mm-ink-2); }
  .mm-summary-list button { border: 0; background: none; color: var(--mm-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px; }
  .mm-summary-list button:hover { color: var(--mm-ink); }
  .mm-summary-msg { font-size: .95rem; margin: 0 0 22px; min-height: 2.6em; }
  .mm-btn-kit { width: 100%; min-height: 52px; font-size: .95rem; }

  .mm-footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-top: 64px; }
  .mm-footer-brand { grid-column: auto; }
}

/* 1024–1279: logo + nav + a 300px field don't fit — search collapses to the icon (opens the search overlay) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mm-v2 .mm-header #search-toggle { display: inline-flex; }
  .mm-header-inner { gap: 24px; }
  .mm-nav { padding-left: 0; gap: 2px; }
  .mm-nav a { padding: 0 12px; }
}
@media (min-width: 1280px) {
  .mm-search { display: flex; }
}

/* Six nav items (Request a Product added): labels stay on one line; the search
   field shows only where logo + nav + field + icons fit, the icon below that. */
@media (min-width: 1024px) {
  .mm-nav a { white-space: nowrap; }
}
/* Seven nav items (Proof of Work added): the search field needs 1600px+; below that it is the icon. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .mm-v2 .mm-header #search-toggle { display: inline-flex; }
  .mm-search { display: none; }
}
@media (min-width: 1440px) {
  .mm-header-inner { gap: 28px; }
  .mm-nav { padding-left: 0; gap: 2px; }
  .mm-nav a { padding: 0 12px; }
  .mm-search { width: 260px; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .mm-header-inner { gap: 16px; }
  .mm-nav a { padding: 0 9px; font-size: .9rem; }
  .mm-nav a::after { left: 9px; right: 9px; }
}
@media (min-width: 1024px) and (max-width: 1119px) {
  .mm-header-inner { gap: 10px; }
  .mm-logo-word { font-size: 1.7rem; }
  .mm-nav a { padding: 0 7px; font-size: .86rem; }
  .mm-nav a::after { left: 7px; right: 7px; }
}

/* Hero with a separate phone photo (Customizer): the <picture> fills the media box like the <img>. */
.mm-hero-media picture { display: block; width: 100%; height: 100%; }

/* Header search field (restored 0.3.37): sits between the nav and currency/account/cart and
   takes the space that is left (up to 300px, at least 170px). Below 1320px the search icon
   (overlay) is used instead — logo + 7 nav items + field + icons don't fit there. */
@media (min-width: 1024px) {
  .mm-header-inner { grid-template-columns: auto auto minmax(0, 1fr); }
  .mm-header-actions { min-width: 0; }
  .mm-search { width: auto; flex: 1 1 300px; min-width: 170px; max-width: 300px; margin: 0 6px 0 4px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .mm-header-inner { gap: 20px; }
  .mm-nav { padding-left: 0; gap: 2px; }
  .mm-nav a { padding: 0 10px; }
  .mm-nav a::after { left: 10px; right: 10px; }
}
@media (min-width: 1320px) {
  .mm-search { display: flex; }
  .mm-v2 .mm-header #search-toggle { display: none; }
}
@media (min-width: 1440px) {
  .mm-header-inner { max-width: 1480px; } /* room for the search field next to 7 nav items */
}

/* ==========================================================================
   Brand identity (0.3.59) — master logo sheet: black · white · MarioMaker
   green #62d31f, official logo artwork in assets/brand/.
   ========================================================================== */
/* Official logo: horizontal M + MARIO MAKER lockup; icon-only on very narrow phones */
.mm-logo-official { flex-direction: row; align-items: center; }
.mm-logo-official img { display: block; width: auto; max-width: none; }
.mm-logo-official .mm-brand-logo { height: 32px; }
.mm-logo-official .mm-brand-icon { display: none; height: 36px; }
@media (max-width: 359px) {
  .mm-header .mm-logo-official .mm-brand-logo { display: none; }
  .mm-header .mm-logo-official .mm-brand-icon { display: block; }
}
@media (min-width: 1024px) {
  .mm-logo-official .mm-brand-logo { height: 46px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .mm-header .mm-logo-official .mm-brand-logo { height: 38px; }
}

/* Buttons: primary = green/black; secondary = white + black border, green on hover */
.mm-btn-brand:hover { box-shadow: 0 8px 20px -10px rgba(98, 211, 31, .6); }
.mm-btn-outline { border-color: var(--mm-ink); }
.mm-btn-outline:hover, .mm-btn-outline:focus-visible { background: var(--mm-brand); border-color: var(--mm-ink); color: var(--mm-ink); }
.mm-btn-ghost:hover, .mm-btn-ghost:focus-visible { background: var(--mm-brand); color: var(--mm-ink); box-shadow: inset 0 0 0 2px var(--mm-brand); }

/* Header: green active/hover marker, focus ring in brand green */
@media (min-width: 1024px) {
  .mm-nav a::after { background: var(--mm-brand); }
  .mm-nav a[aria-current] { font-weight: 600; }
}
.mm-icon-btn:hover { background: #f1fbea; }
.mm-header .cart-badge { box-shadow: 0 0 0 2px #fff; }

/* Hero: brand line above the heading */
.mm-hero-kicker { margin: 0 0 12px; font-family: var(--mm-font-head); font-size: .82rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--mm-brand); }
.mm-hero-kicker::before { content: ''; display: inline-block; width: 28px; height: 3px; margin: 0 12px 0 0; vertical-align: middle; background: var(--mm-brand); }
.mm-hero-sub { max-width: 30em; }

/* Best Seller tag: sharp, technical label instead of a round sticker */
.mm-best-badge { width: auto; height: auto; padding: 9px 14px; border-radius: 3px; left: 10px; top: 40px; font-size: .78rem; letter-spacing: .1em; line-height: 1; box-shadow: 0 6px 16px -10px rgba(17, 18, 20, .6); }
@media (min-width: 600px) {
  .mm-best-badge { width: auto; height: auto; padding: 11px 16px; font-size: .85rem; top: 44px; left: calc(var(--mm-gutter) + 14px); }
}

/* Footer: black, dark-background logo version */
.mm-footer { --mm-line: rgba(255, 255, 255, .12); border-top: 3px solid var(--mm-brand); background: #0b0b0c; color: #fff; }
.mm-footer .mm-logo-official .mm-brand-logo { height: 40px; }
.mm-footer-brand p { color: #a7abb3; }
.mm-footer-col h3 { color: #fff; }
.mm-footer-col ul a, .mm-footer-col address { color: #c9ccd2; }
.mm-footer-col ul a:hover { color: #fff; }
.mm-footer-mail { color: #fff; }
.mm-footer-bottom { color: #8a8f98; }
.mm-footer a:focus-visible { outline-color: var(--mm-brand); }
.mm-social a { color: #fff; }
.mm-social a:hover { background: var(--mm-brand); border-color: var(--mm-brand); color: var(--mm-ink); }
.mm-pay-badge { background: #fff; }
.mm-footer .mm-logo-word { color: #fff; }