/* ==========================================================================
   Musicmaker lightweight theme (mm) — base stylesheet
   Step 1: reset + layout container + top information bar + minimal header
   ========================================================================== */

:root {
  --mm-dark: #1c1c1e;
  --mm-dark-2: #292929;
  --mm-red: #d01e24;
  --mm-ink: #1d2430;
  --mm-ink-2: #5b6472;
  --mm-ink-3: #98a0ad;
  --mm-ok: #1f9d4d;
  --mm-warn: #9a5b00;
  --mm-line: #e4e6ea;
  --mm-soft: #f5f6f8;
  --mm-bg: #ffffff;
  --mm-max: 1400px;
  /* Height of the stuck header, including its bottom border. Everything else
     that sticks or that an anchor jumps to offsets itself by this, so the
     number lives in one place; mm.js corrects it from the rendered header on
     load and on resize, so a wrapped nav cannot leave it stale. */
  --mm-stick: 77px;
  /* The gap between two modules on the home page. */
  --mm-stack: 24px;
  --mm-topbar-fg: #f2f2f4;
  --mm-topbar-muted: #a9a9b1;
  --mm-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mm-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

body.mm {
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-ink);
  font-family: var(--mm-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mm img { max-width: 100%; height: auto; }
/* Links inherit rather than turn browser-blue. This is deliberately written
   with :where() so the reset weighs nothing: as .mm a it out-specified every
   component class, so any card whose root became an <a> silently lost its own
   colour. That is what turned the promo banners' titles navy-on-navy the moment
   a button link was filled in and the <div> became an <a>. */
:where(.mm) a { color: inherit; text-decoration: none; }

.mm-container {
  max-width: var(--mm-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Top information bar
   -------------------------------------------------------------------------- */
.mm-topbar {
  background: var(--mm-dark);
  color: var(--mm-topbar-fg);
}

.mm-topbar .mm-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  min-height: 62px;
  flex-wrap: wrap;
}

.mm-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  color: var(--mm-topbar-fg);
}

.mm-topbar__item svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--mm-topbar-fg);
  opacity: .9;
}

.mm-topbar__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
}

.mm-topbar__t1 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-topbar-fg);
}

.mm-topbar__t2 {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--mm-topbar-muted);
}

.mm-topbar a.mm-topbar__item:hover .mm-topbar__t1,
.mm-topbar a.mm-topbar__item:hover .mm-topbar__t2 { color: #fff; }

/* First item hugs the left, last hugs the right, middle stays centered */
.mm-topbar__item:first-child { margin-right: auto; }
.mm-topbar__item:last-child { margin-left: auto; }

@media (max-width: 900px) {
  .mm-topbar .mm-container { justify-content: center; text-align: left; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .mm-topbar__item:first-child,
  .mm-topbar__item:last-child { margin: 0; }
}

/* Stacked, these three notices ran to 230px — a third of a phone screen spent
   on opening hours before the visitor sees what page they are on. One item
   survives here, and which one is set per item in the module. */
@media (max-width: 760px) {
  .mm-topbar .mm-container {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .mm-topbar__item { display: none; }
  /* Shrinkable, or a long subtext takes its max-content width, overflows the
     screen and makes the browser zoom the whole layout viewport out. */
  .mm-topbar__item.is-mobile { display: inline-flex; flex: 0 1 auto; min-width: 0; }
  .mm-topbar__text { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 7px; min-width: 0; }
  .mm-topbar__t1 { font-size: 11px; letter-spacing: .04em; }
  .mm-topbar__t2 { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Header (minimal, functional — refined in later steps)
   -------------------------------------------------------------------------- */
.mm-header {
  /* Search, basket and the category menu are wanted from anywhere on a page
     that runs to a dozen screens, so the header travels with the reader. The
     information bar above it does not: it is opening hours, read once. */
  position: sticky;
  top: 0;
  /* Under the phone bar (70), the drawers (69) and their scrim (68) — opening a
     drawer must dim the header, not sit beside it — and above everything that
     merely scrolls. */
  z-index: 50;
  border-bottom: 1px solid var(--mm-line);
  background: #fff;
}

/* Only once it is actually stuck: against a white page the 1px border alone
   leaves the text underneath looking like it belongs to the header. */
.mm-header.is-stuck { box-shadow: 0 6px 18px -12px rgba(15, 20, 28, .55); }

.mm-header .mm-container {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}

/* The header is a flex row; without this the logo anchor shrinks on narrow
   viewports and .mm img's max-width squashes the artwork out of proportion. */
.mm-logo { flex: none; display: block; }
.mm-logo img { display: block; width: auto; height: 34px; max-width: none; }
.mm-nav { display: flex; align-items: center; gap: 26px; }
.mm-nav__item { position: relative; display: flex; align-items: center; }
.mm-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 26px 0;
  color: var(--mm-ink);
  white-space: nowrap;
}
.mm-nav__link:hover { color: var(--mm-red); }
.mm-caret { width: 13px; height: 13px; margin-top: 1px; }

/* SHOP dropdown */
.mm-nav__drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  box-shadow: 0 12px 30px -8px rgba(20, 24, 30, .18);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.mm-has-drop:hover .mm-nav__drop,
.mm-has-drop:focus-within .mm-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mm-nav__drop a {
  display: block;
  padding: 8px 18px;
  font-size: 13.5px;
  color: var(--mm-ink);
  white-space: nowrap;
}
.mm-nav__drop a:hover { background: #f5f6f8; color: var(--mm-red); }

.mm-nav__list { margin: 0; padding: 0; list-style: none; }

/* Deliberately not position:relative. The sub-panel is a child of the row but
   anchors to the whole dropdown, so every panel opens level with the top of the
   column instead of hanging off whichever row the pointer happens to be on. */
.mm-nav__cat > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mm-nav__more { flex: none; color: var(--mm-ink-3); }
.mm-nav__cat:hover > a,
.mm-nav__cat:focus-within > a { background: #f5f6f8; color: var(--mm-red); }
.mm-nav__cat:hover > a .mm-nav__more,
.mm-nav__cat:focus-within > a .mm-nav__more { color: currentColor; }

.mm-nav__sub {
  position: absolute;
  top: -1px;
  left: 100%;
  /* Overlap the two borders so the panels read as one surface, and leave no gap
     for the pointer to fall through on its way across. */
  margin-left: -1px;
  min-width: 250px;
  /* At least as tall as the column it opens beside: the pointer travels
     straight right from any row, including the last one, and has to land
     inside the panel rather than in the space under it. */
  min-height: calc(100% + 2px);
  padding: 8px 0;
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 12px 30px -8px rgba(20, 24, 30, .18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s;
  z-index: 61;
}
/* The panel is inside the row in the DOM, so pointing at it keeps the row
   hovered and the panel open, however far from the row it sits. */
.mm-nav__cat:hover > .mm-nav__sub,
.mm-nav__cat:focus-within > .mm-nav__sub { opacity: 1; visibility: visible; }

/* Header graphic (module/doodle). flex-basis 0 so the slot only ever takes
   space nobody else wanted — the graphic can never push the menu or squeeze the
   search box, however wide the file is. Below 1100px the gap it lives in is too
   small to be worth anything, so it goes. */
.mm-doodle {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-doodle img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 52px;
}

.mm-header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mm-search {
  /* The positioning context for the suggestion panel below. */
  position: relative;
  display: flex;
  align-items: center;
  width: 340px;
  max-width: 38vw;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-search:focus-within {
  border-color: var(--mm-ink-2);
  box-shadow: 0 0 0 3px rgba(29, 36, 48, .06);
}
.mm-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 4px 10px 18px;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--mm-ink);
  outline: none;
}
.mm-search button {
  flex: none;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: var(--mm-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.mm-search button:hover { color: var(--mm-red); }

.mm-header__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mm-ink);
}
.mm-header__link:hover { color: var(--mm-red); }
.mm-header__link svg { width: 20px; height: 20px; }

.mm-cart-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mm-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}
.mm-cart-count[hidden] { display: none; }

@media (max-width: 1100px) {
  .mm-doodle { display: none; }
}

@media (max-width: 980px) {
  .mm-nav { display: none; }

  /* Search comes back to the header on phones. Account and basket stay on the
     bottom bar, so the field is all that is left of the right-hand group. It
     keeps its 340px and hugs the right on the auto margin it already has, and
     shrinks from there — so it runs from mid-screen to the edge on a phone
     without stretching to 600px on a tablet.

     min-width:0 all the way down or it will not shrink at all: an input carries
     a default width of about twenty characters, and that becomes the floor that
     pushes the whole header off a 320px screen. */
  .mm-header__right { flex: 0 1 auto; min-width: 0; }
  .mm-header__right .mm-header__link { display: none; }
  /* The header sticks here too. The bottom bar covers Home, Categories, Account
     and Basket; search is only in the header, so it has to travel with it. */
  .mm-search { flex: 1 1 auto; width: 340px; max-width: 100%; min-width: 0; }
  .mm-search input { width: 0; }
  /* A search box is the one thing on this bar people aim at, so it gets a full
     tap target rather than the 40px the desktop padding gives it. */
  .mm-search input { padding-top: 13px; padding-bottom: 13px; }
}

/* ==========================================================================
   Phone bottom bar and drawers
   ========================================================================== */
.mm-tabbar { display: none; }
.mm-drawer { display: none; }
.mm-drawer__scrim { display: none; }

@media (max-width: 980px) {
  .mm-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--mm-line);
    box-shadow: 0 -6px 20px -14px rgba(15, 20, 28, .5);
    /* Clears the home indicator on notched phones. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mm-tabbar__item {
    /* Four tabs across 390px leaves 97px each. Without min-width:0 the longest
       label sets the floor and the bar overflows the screen. */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--mm-ink-2);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  }
  .mm-tabbar__item svg { width: 23px; height: 23px; }
  .mm-tabbar__item:active { color: var(--mm-red); }
  .mm-tabbar__ico { position: relative; display: inline-flex; }
  .mm-tabbar__count {
    position: absolute;
    top: -5px;
    right: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--mm-red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
  }
  .mm-tabbar__count[hidden] { display: none; }

  /* The bar floats over the page, so the document needs to end above it or the
     last row of anything is permanently covered. */
  body.mm { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  .mm-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 69;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -18px 50px -18px rgba(15, 20, 28, .5);
  }
  .mm-drawer[hidden] { display: none; }
  .mm-drawer__bar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--mm-line);
  }
  .mm-drawer__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mm-ink);
  }
  .mm-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -12px -12px -12px 0;
    border: 0;
    background: none;
    color: var(--mm-ink-2);
    cursor: pointer;
  }
  .mm-drawer__list { list-style: none; margin: 0; padding: 0; }
  .mm-drawer__list a {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mm-line);
    color: var(--mm-ink);
    font-size: 15px;
    font-weight: 500;
  }
  .mm-drawer__list--alt a { font-weight: 700; }
  .mm-drawer__list--alt { margin-bottom: 12px; }

  .mm-drawer--top {
    top: 0;
    bottom: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: 0 14px 40px -22px rgba(15, 20, 28, .5);
  }
  .mm-drawer__search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
  .mm-drawer__search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--mm-line);
    border-radius: 6px;
    font: inherit;
    font-size: 15px;
  }
  .mm-drawer__search input:focus { outline: none; border-color: var(--mm-ink-3); }
  .mm-drawer__search button[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 0;
    border-radius: 6px;
    background: var(--mm-dark);
    color: #fff;
    cursor: pointer;
  }
  .mm-drawer__cancel {
    flex: none;
    min-height: 46px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--mm-ink-2);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }

  .mm-drawer__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 68;
    background: rgba(12, 14, 18, .5);
  }
  .mm-drawer__scrim[hidden] { display: none; }
}

/* Phones: the logo keeps its aspect ratio (see .mm-logo above), so buy the
   search field room by tightening the gaps rather than by squeezing artwork. */
@media (max-width: 600px) {
  :root { --mm-stick: 65px; }
  .mm-header .mm-container { gap: 12px; min-height: 64px; }
  .mm-header__right { gap: 12px; }
  .mm-logo img { height: 28px; }
}

/* --------------------------------------------------------------------------
   Brand index (product/manufacturer)
   --------------------------------------------------------------------------
   543 names on one page, so it is built to be scanned: a sticky A-Z index that
   stays reachable while you scroll, and columns that fill down rather than
   across so a letter reads as one block.
   -------------------------------------------------------------------------- */
.mm-brandlist { padding: 8px 0 56px; }

.mm-brandlist__count {
  margin: 6px 0 0;
  color: var(--mm-ink-2);
  font-size: 14px;
}

.mm-brandlist__index {
  position: sticky;
  top: var(--mm-stick);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 30px;
  padding: 12px 0;
  background: var(--mm-bg);
  border-bottom: 1px solid var(--mm-line);
}
.mm-brandlist__index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mm-brandlist__index a:hover {
  background: var(--mm-dark);
  border-color: var(--mm-dark);
  color: #fff;
}

.mm-brandlist__group { margin: 0 0 34px; }
/* The index is sticky under a sticky header, so an anchor would otherwise land
   under both of them. */
.mm-brandlist__group { scroll-margin-top: calc(var(--mm-stick) + 62px); }

.mm-brandlist__letter {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mm-line);
  font-family: var(--mm-serif);
  font-size: 26px;
  font-weight: 700;
  /* Cormorant hangs its descenders low; at line-height 1 the 9 in "0 - 9" is
     sliced off by the rule underneath. */
  line-height: 1.25;
  color: var(--mm-ink);
}

.mm-brandlist__names {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 4;
  column-gap: 24px;
}
.mm-brandlist__names li {
  break-inside: avoid;
  margin: 0 0 2px;
}
.mm-brandlist__names a {
  display: block;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 5px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--mm-ink);
}
.mm-brandlist__names a:hover { background: var(--mm-soft); color: var(--mm-red); }

@media (max-width: 980px) {
  .mm-brandlist__names { columns: 3; }
}
@media (max-width: 760px) {
  .mm-brandlist__names { columns: 2; }
  .mm-brandlist__letter { font-size: 22px; }
}
@media (max-width: 460px) {
  .mm-brandlist__names { columns: 1; }
  /* A full tap target rather than the tighter desktop line. */
  .mm-brandlist__names a { padding: 11px 8px; }
}

/* --------------------------------------------------------------------------
   Brand slider (module/brands)
   --------------------------------------------------------------------------
   Logos are 1000x1000 squares, so the tile is fixed and the artwork is fitted
   inside it rather than filling it — a wide wordmark and a round badge have to
   sit at the same optical weight beside each other. Thirteen of the brands with
   stock have no logo at all and get their name set instead.
   -------------------------------------------------------------------------- */
.mm-brands { padding: 0 0 24px; }

/* The shared arrow sits at a fixed 130px, measured against a product card.
   These tiles are a third of that height, so it needs centring on this row
   instead — otherwise it lands below the logos. */
.mm-brands .mm-featured__nav {
  top: 50%;
  transform: translateY(-50%);
  margin-top: -5px;
}

.mm-brands__row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 4px 0 14px;
  /* The arrows do the scrolling on a desktop; the bar underneath is noise. */
  scrollbar-width: none;
}
.mm-brands__row::-webkit-scrollbar { display: none; }

.mm-brand {
  /* Grows to fill the row when a handful of brands is featured, and stays at
     its basis when there are enough to scroll — with a row that overflows there
     is no free space to grow into, so the same rule serves both. */
  flex: 1 0 168px;
  scroll-snap-align: start;
  max-width: 260px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mm-brand:hover {
  border-color: var(--mm-ink-3);
  box-shadow: 0 8px 20px -12px rgba(20, 24, 30, .35);
  transform: translateY(-2px);
}
.mm-brand img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mm-brand__word {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -.01em;
  color: var(--mm-ink-2);
}
.mm-brand:hover .mm-brand__word { color: var(--mm-ink); }

@media (max-width: 600px) {
  .mm-brand { flex-basis: 138px; height: 92px; padding: 12px; }
  .mm-brands__row { gap: 12px; }
}

/* --------------------------------------------------------------------------
   USP / trust bar (module/usp)
   -------------------------------------------------------------------------- */
.mm-usp {
  background: #f5f5f6;
  border-bottom: 1px solid var(--mm-line);
}
.mm-usp .mm-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
  padding-top: 18px;
  padding-bottom: 18px;
}
.mm-usp__item {
  display: inline-flex;
  align-items: center;
  align-self: center;           /* keep divider at content height, not full row */
  gap: 13px;
  padding-left: 26px;
  border-left: 1px solid var(--mm-line);
  color: var(--mm-ink);
}
.mm-usp__item:nth-child(4n+1) {  /* first item in a 4-col row: no divider */
  padding-left: 0;
  border-left: 0;
}
.mm-usp__item svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--mm-ink);
  opacity: .82;
}
.mm-usp__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.mm-usp__t1 {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink);
}
.mm-usp__t2 {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--mm-ink-2);
}
a.mm-usp__item { text-decoration: none; }
a.mm-usp__item:hover .mm-usp__t1 { color: var(--mm-red); }

@media (max-width: 860px) {
  .mm-usp .mm-container { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .mm-usp__item:nth-child(2n+1) { padding-left: 0; border-left: 0; }  /* first in each 2-col row */
}
@media (max-width: 480px) {
  .mm-usp .mm-container { grid-template-columns: 1fr; }
  .mm-usp__item { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   Content + footer scaffolding (minimal for step 1)
   -------------------------------------------------------------------------- */
.mm-main { min-height: 40vh; }

/* ------------------------------------------------------ home page rhythm ---
   One gap between modules, set once, so the page stacks evenly whatever the
   shop switches on or off in the admin.

   Every module used to carry its own vertical padding, and the white that fell
   out between them ran 46, 28, 24, 24, 24, 32, 44, 24, 24 — and, between the
   community bar and the hero beneath it, nothing at all. Those two are the
   only modules that bring their own ground, dark and photograph, so the
   padding they have is inside the colour and no white ever showed.

   A flex column with a gap does the spacing instead. Modules that stand on the
   page's own white give their outer padding up, because for them that padding
   was never anything but the gap. The hero and the community bar keep theirs,
   which is the room their content needs inside their own colour, and the gap
   puts white around them.

   The opening hero still meets the header: a page that begins with a white
   strip begins with a mistake. At the foot it is the other way round — the
   closing hero had the rhythm's gap above it and the footer's own 56px below,
   so the banner sat off centre between the two. The rule under this one brings
   that side down to the same gap.

   Scoped to the home page on purpose: featured, the trust bar and the hero are
   placed on other layouts too, where the spacing is that page's own business.
   -------------------------------------------------------------------------- */
.mm-home {
  display: flex;
  flex-direction: column;
  gap: var(--mm-stack);
}

/* The footer keeps 56px above it everywhere else, where the last thing on the
   page is text on white and the dark band wants room. The home page ends on a
   full-bleed photograph with the rhythm's gap above it, and the same gap below
   is what makes it read as finished rather than cut off. A browser without
   :has() keeps the 56px, which is what it has today. */
.mm-content-container:has(> .mm-home) + .mm-footer { margin-top: var(--mm-stack); }

.mm-home > .mm-cattiles,
.mm-home > .mm-trust,
.mm-home > .mm-promos,
.mm-home > .mm-featured,
.mm-home > .mm-blog,
.mm-home > .mm-brands {
  padding-top: 0;
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hero banner (module/hero)
   -------------------------------------------------------------------------- */
.mm-hero {
  position: relative;
  background-color: #140b0b;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}
.mm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,6,6,.88) 0%, rgba(10,6,6,.58) 38%, rgba(10,6,6,.12) 66%, rgba(10,6,6,0) 100%);
}
.mm-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 56px;
  padding-bottom: 56px;
}
.mm-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #f2f2f4;
  margin-bottom: 16px;
}
.mm-hero__title {
  font-family: var(--mm-serif);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.03;
  margin: 0 0 18px;
  color: #fff;
  max-width: 12ch;
}
.mm-hero__sub {
  font-size: 18px;
  line-height: 1.5;
  color: #e8e4e2;
  margin: 0 0 30px;
  max-width: 36ch;
}
.mm-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* A brand page puts its mark above the eyebrow. The tile is white because a
   brand mark is drawn for light backgrounds and would disappear into the
   photograph without one; everything below it is the hero's own type. */
.mm-hero__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.mm-hero__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.mm-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 14px 26px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
a.mm-btn--light { background: #fff; color: var(--mm-ink); border-color: #fff; }
a.mm-btn--light:hover { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }
a.mm-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
a.mm-btn--outline:hover { background: #fff; color: var(--mm-ink); border-color: #fff; }
/* --outline is the hero variant: white on a dark photograph. On a white card it
   is white on white. This is the same idea for light surfaces, and unlike
   --outline it is not restricted to anchors — the review button is a <button>
   and was getting no variant at all. */
.mm-btn--line {
  background: transparent;
  color: var(--mm-ink);
  border-color: var(--mm-line);
}
.mm-btn--line:hover { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }
/* A small one, for buttons inside a table row. It existed only as
   .mm-co .mm-btn--sm, so anywhere outside the checkout it did nothing. */
.mm-btn--sm { padding: 8px 14px; font-size: 12px; }

@media (max-width: 600px) {
  .mm-hero__inner { min-height: 400px; padding-top: 40px; padding-bottom: 40px; }
  .mm-hero__sub { font-size: 16px; }
  .mm-hero__logo { width: 76px; height: 76px; margin-bottom: 16px; padding: 9px; }
}

/* --------------------------------------------------------------------------
   Category tiles (module/cattiles)
   -------------------------------------------------------------------------- */
/* The trust bar follows directly, and 46px here met its own 20px: 66 empty
   pixels between the last tile caption and the panel, more under the shorter
   tiles, since the row is as tall as the tallest. The space above still
   separates the tiles from the hero, so only the bottom gives way. */
.mm-cattiles { padding: 46px 0 8px; background: #fff; }
.mm-cattiles__row { display: flex; gap: 16px; justify-content: space-between; }
.mm-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--mm-ink);
}
.mm-tile__img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  background: #f1f2f4;
  display: block;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px -8px rgba(15, 20, 28, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mm-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-tile:hover .mm-tile__img { transform: translateY(-4px); box-shadow: 0 14px 28px -8px rgba(15, 20, 28, .38); }
.mm-tile__name { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mm-tile:hover .mm-tile__name { color: var(--mm-red); }
.mm-tile__sub { font-size: 12.5px; color: var(--mm-ink-2); margin-top: 5px; max-width: 16ch; line-height: 1.35; }

@media (max-width: 900px) {
  .mm-cattiles__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 22px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  .mm-tile { flex: 0 0 auto; width: 124px; }
  .mm-tile__img { width: 112px; height: 112px; }
}

/* --------------------------------------------------------------------------
   Promo cards (module/promos)
   -------------------------------------------------------------------------- */
.mm-promos { padding: 8px 0 24px; background: #fff; }
/* However many cards the module is given, on one line. minmax(0,1fr) rather
   than 1fr: a 1fr floor is min-content, and one long word in a title is enough
   to push the row wider than the page. */
.mm-promos__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mm-promos__row--1 { grid-template-columns: minmax(0, 1fr); }
.mm-promos__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-promos__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-promos__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Four across stops being readable before the phone breakpoint arrives — the
   title wraps at about eleven characters and the cards get narrower than they
   are tall. Two and two is better than four cramped. */
@media (max-width: 1180px) {
  .mm-promos__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mm-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 264px;
  padding: 28px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1c1c1e;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-decoration: none;
}
.mm-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,10,.55) 0%, rgba(12,10,10,.15) 42%, rgba(12,10,10,.78) 100%);
  transition: background .2s ease;
}
.mm-promo:hover::before { background: linear-gradient(180deg, rgba(12,10,10,.6) 0%, rgba(12,10,10,.25) 42%, rgba(12,10,10,.82) 100%); }
.mm-promo__body, .mm-promo__cta { position: relative; z-index: 1; }
.mm-promo__title {
  display: block;
  color: #fff;
  font-family: var(--mm-serif);
  /* Cormorant Garamond has far thinner strokes than the face this replaced, and
     white on a photograph is where that shows. Heavier and a touch larger to
     hold the same presence; on white it needs neither. */
  font-size: 34px;
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 8px;
  max-width: 11ch;
}
.mm-promo__sub { display: block; font-size: 15px; color: #ece9e8; max-width: 24ch; line-height: 1.4; }
.mm-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  margin-top: 18px;
}
.mm-promo__cta svg { transition: transform .15s ease; }
.mm-promo:hover .mm-promo__cta { color: #fff; }
.mm-promo:hover .mm-promo__cta svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .mm-promos__row,
  .mm-promos__row--2,
  .mm-promos__row--3,
  .mm-promos__row--4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mm-promo { min-height: 220px; }
}

/* --------------------------------------------------------------------------
   Featured products (module/featured)
   -------------------------------------------------------------------------- */
/* 24px above comes from the section before this one; this gives it the same
   underneath, so the block sits evenly rather than hard against what follows. */
.mm-featured { padding: 0 0 24px; background: #fbfbfc; }
.mm-featured__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  /* Lined up with the text inside the tiles and banners rather than with their
     outer edge — the cards carry 28px of their own padding, so a heading on the
     container edge reads as sticking out to the left of everything above it. */
  padding: 0 28px;
}
/* The section heading now reads as the promo cards do — same serif, same case.
   Cormorant Garamond sets small for its size, so this is 32px against the old
   22px and carries about the same weight on the page. */
.mm-featured__title {
  margin: 0;
  font-family: var(--mm-serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mm-ink);
}
.mm-featured__viewall { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mm-ink); white-space: nowrap; }
.mm-featured__viewall:hover { color: var(--mm-red); }
.mm-featured__viewall svg { transition: transform .15s ease; }
.mm-featured__viewall:hover svg { transform: translateX(3px); }

/* The inset earns its keep on a desktop, where the heading sits beside cards
   that carry the same padding. On a phone the cards are full width, the
   relationship is not visible, and 28px each side is enough to break the
   heading over two lines — so it goes, and the type comes down with it.
   This has to sit after the rules it overrides: a media query carries no extra
   weight, and the base rule is further down the file. */
@media (max-width: 600px) {
  .mm-featured__title { font-size: 22px; }
}

.mm-featured__viewport { position: relative; }
.mm-featured__row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.mm-featured__row::-webkit-scrollbar { height: 0; width: 0; }

.mm-featured__nav {
  position: absolute;
  top: 130px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--mm-line);
  background: #fff;
  color: var(--mm-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(15, 20, 28, .25);
  z-index: 3;
  transition: background .15s ease, color .15s ease;
}
.mm-featured__nav:hover { background: var(--mm-dark); color: #fff; border-color: var(--mm-dark); }
/* display:flex beats the hidden attribute on its own, and every one of these
   sliders hides its arrows when there is nothing past the edge. */
.mm-featured__nav[hidden] { display: none; }
.mm-featured__nav--prev { left: -14px; }
.mm-featured__nav--next { right: -14px; }

.mm-card {
  flex: 0 0 auto;
  width: calc((100% - 100px) / 6);
  min-width: 208px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.mm-card:hover { box-shadow: 0 14px 30px -12px rgba(15, 20, 28, .28); transform: translateY(-3px); }

.mm-card__imgwrap { position: relative; aspect-ratio: 1 / 1; background: #f5f6f8; }
.mm-card__imglink { display: block; width: 100%; height: 100%; }
.mm-card__imgwrap img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mm-card__body { padding: 14px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mm-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 14px; }
.mm-card__wish {
  flex: none;
  border: 0;
  background: none;
  padding: 2px;
  color: var(--mm-ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.mm-card__wish svg { width: 16px; height: 16px; }
.mm-card__wish:hover { color: var(--mm-red); }
.mm-card__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: 9px;
}
.mm-card__name:hover { color: var(--mm-red); }
/* Availability on the card, reading as the same fact as the dot on the product
   page — same three states, same three colours, sized down to a card's line. */
.mm-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-ink-2);
  /* One line: "Out Of Stock" and "2 - 3 Days" fit, and a long custom status
     truncates rather than pushing the wishlist button off the card. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mm-card__stock-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mm-card__stock--in { color: var(--mm-ok); }
.mm-card__stock--lead { color: var(--mm-warn); }
.mm-card__stock--out { color: var(--mm-ink-3); }
.mm-card__price { font-size: 16px; font-weight: 700; color: var(--mm-ink); margin-bottom: 4px; }
.mm-card__price-now { color: var(--mm-ink); }
.mm-card__price-now.is-special { color: var(--mm-red); }
.mm-card__price-old { text-decoration: line-through; color: var(--mm-ink-2); font-weight: 500; font-size: 14px; margin-left: 6px; }
.mm-card__cart {
  margin-top: auto;
  padding: 11px 12px;
  border: 0;
  border-radius: 5px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .15s ease;
}
.mm-card__cart:hover { background: var(--mm-red); }

@media (max-width: 1100px) { .mm-card { width: calc((100% - 60px) / 4); } }
@media (max-width: 760px) {
  .mm-card { width: calc((100% - 20px) / 2); min-width: 0; }
  .mm-featured__nav { display: none; }
}

/* --------------------------------------------------------------------------
   Blog posts (module/blogposts)
   -------------------------------------------------------------------------- */
.mm-blog { padding: 20px 0 24px; background: #fff; }
.mm-blog__grid { display: flex; gap: 40px; align-items: center; }
.mm-blog__intro { flex: 0 0 25%; padding-left: 28px; }
.mm-blog__heading { font-family: var(--mm-serif); font-size: 32px; font-weight: 600; line-height: 1.12; margin: 0 0 14px; }
.mm-blog__lead { font-size: 15px; color: var(--mm-ink-2); line-height: 1.55; margin: 0 0 22px; max-width: 30ch; }
a.mm-btn--dark { border-color: var(--mm-ink); color: var(--mm-ink); background: transparent; }
a.mm-btn--dark:hover { background: var(--mm-ink); color: #fff; border-color: var(--mm-ink); }
a.mm-btn--dark svg { margin-left: 8px; transition: transform .15s ease; }
a.mm-btn--dark:hover svg { transform: translateX(3px); }

.mm-blog__posts { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mm-post { display: flex; flex-direction: column; color: var(--mm-ink); }
.mm-post__img { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #f1f2f4; margin-bottom: 14px; }
.mm-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mm-post:hover .mm-post__img img { transform: scale(1.04); }
.mm-post__cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mm-red); margin-bottom: 8px; }
.mm-post__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-post:hover .mm-post__title { color: var(--mm-red); }
.mm-post__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); }
.mm-post__more svg { transition: transform .15s ease; }
.mm-post:hover .mm-post__more svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .mm-blog__grid { flex-direction: column; gap: 28px; align-items: stretch; }
  .mm-blog__intro { flex: none; }
  .mm-blog__posts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Footer (common/footer)
   -------------------------------------------------------------------------- */
.mm-footer {
  margin-top: 56px;
  background: var(--mm-dark);
  color: var(--mm-topbar-muted);
  font-size: 14px;
}
/* Links here inherit the muted body colour and only brighten on hover; the
   footer used to underline every one of them, which at twenty-odd links read
   as a wall of rules rather than as navigation. */
.mm-footer a:hover { color: #fff; }

.mm-footer__main { padding: 52px 0 44px; }

.mm-footer__grid {
  display: grid;
  /* The address needs the room; the three link columns are four short words
     wide and are sized to their content, not to a fair share. */
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px 48px;
}

/* ----------------------------------------------------- brand / details --- */
.mm-footer__logo { display: inline-block; margin-bottom: 20px; }
.mm-footer__logo img { width: 185px; height: auto; display: block; }

.mm-footer__addr {
  display: flex;
  gap: 11px;
  margin: 0 0 18px;
  font-style: normal;
  line-height: 1.65;
}
.mm-footer__addr svg { width: 18px; height: 18px; flex: none; margin-top: 4px; opacity: .7; }
.mm-footer__addr strong { color: #fff; font-weight: 600; }
.mm-footer__vat { font-size: 12.5px; color: #8a8a90; }

.mm-footer__reach {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-footer__reach a { display: inline-flex; align-items: center; gap: 11px; transition: color .15s ease; }
.mm-footer__reach svg { width: 18px; height: 18px; flex: none; opacity: .7; }

.mm-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.mm-footer__social a {
  width: 38px;
  height: 38px;
  border: 1px solid #3d3d40;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mm-footer__social svg { width: 18px; height: 18px; }
.mm-footer__social a:hover { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }

/* ------------------------------------------------------- link columns ---- */
.mm-footer__col { min-width: 0; }
.mm-footer__ch {
  margin: 0 0 16px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mm-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mm-footer__links a { transition: color .15s ease; }

/* --------------------------------------------------------- bottom bar ---- */
.mm-footer__bar { border-top: 1px solid #333336; }
.mm-footer__bar .mm-container {
  display: flex;
  align-items: center;
  /* Wraps rather than overflows: an over-wide footer would push the document
     past the viewport and make a phone browser zoom the whole layout out. */
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 12.5px;
}
.mm-footer__copy { white-space: nowrap; }
/* Payment marks and the credit travel together on the right, so a narrow
   window drops them onto the next line as one group. */
.mm-footer__pay { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-footer__pay .mm-pay { width: 42px; height: auto; display: block; }
.mm-footer__by { white-space: nowrap; }
.mm-footer__by a { text-decoration: underline; }

@media (max-width: 1100px) {
  /* The address block wants a full row; the three link columns still fit side
     by side and stay a single scan. */
  .mm-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
  .mm-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .mm-footer { margin-top: 36px; font-size: 13.5px; }
  .mm-footer__main { padding: 36px 0 30px; }
  /* Three columns of four words each wrap to two lines a link at this width.
     Two columns keep the labels on one line without running the footer long. */
  .mm-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .mm-footer__logo img { width: 150px; }
  /* An 18px-tall link is a miss waiting to happen on a phone. The row keeps its
     own height instead of relying on the gap between rows, which is not tappable
     and does not stop a thumb landing on the neighbour. */
  .mm-footer__links { gap: 0; }
  .mm-footer__links a { display: flex; align-items: center; min-height: 44px; }
  .mm-footer__reach { gap: 0; }
  .mm-footer__reach a { min-height: 44px; }
  .mm-footer__social a { width: 44px; height: 44px; }
  .mm-footer__bar .mm-container { font-size: 12px; }
  .mm-footer__pay { margin-left: 0; }
  .mm-footer__copy,
  .mm-footer__by { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Toasts (cart / wishlist feedback, driven by mm.js)
   -------------------------------------------------------------------------- */
.mm-toasts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
}
.mm-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  border: 1px solid var(--mm-line);
  border-left: 4px solid var(--mm-ok);
  border-radius: 8px;
  background: #fff;
  color: var(--mm-ink);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 14px 34px -12px rgba(15, 20, 28, .34);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .2s ease, transform .2s ease;
}
.mm-toast.is-visible { opacity: 1; transform: translateX(0); }
.mm-toast--error { border-left-color: var(--mm-red); }
.mm-toast__body { flex: 1 1 auto; min-width: 0; }
.mm-toast__body a { color: var(--mm-red); text-decoration: underline; }
.mm-toast__close {
  flex: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--mm-ink-3);
  cursor: pointer;
}
.mm-toast__close:hover { color: var(--mm-ink); }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.mm-crumbs { background: var(--mm-soft); border-bottom: 1px solid var(--mm-line); }
.mm-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 11px 0;
  font-size: 12.5px;
  color: var(--mm-ink-2);
}
.mm-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.mm-crumbs li + li::before { content: "/"; color: var(--mm-ink-3); }
.mm-crumbs a { color: var(--mm-ink-2); }
.mm-crumbs a:hover { color: var(--mm-red); }
.mm-crumbs .is-current { color: var(--mm-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Buttons — button-element variants of the home page .mm-btn
   -------------------------------------------------------------------------- */
.mm-btn--solid { background: var(--mm-dark); color: #fff; border-color: var(--mm-dark); }
.mm-btn--solid:hover { background: var(--mm-red); border-color: var(--mm-red); }
.mm-btn--red { background: var(--mm-red); color: #fff; border-color: var(--mm-red); }
.mm-btn--red:hover { background: #ac171d; border-color: #ac171d; }
.mm-btn--ghost { background: #fff; color: var(--mm-ink); border-color: var(--mm-line); }
.mm-btn--ghost:hover { border-color: var(--mm-ink); }
.mm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   Product page (PDP)
   ========================================================================== */
.mm-pdp { padding: 26px 0 8px; }

.mm-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 44px;
  align-items: start;
}
/* The grid runs the length of the page down to the end of the tabs, and the buy
   panel spans every row of it. That gives sticky something to travel inside:
   confined to the gallery row it had 270px of movement, which is not following
   anyone anywhere; across the tabs it is about 1,600px. */
.mm-pdp__gallery { grid-column: 1; }
.mm-pdp__grid > .mm-pdp__section,
.mm-pdp__grid > .mm-tabs { grid-column: 1; margin-top: 40px; }
.mm-pdp__buy {
  grid-column: 2;
  grid-row: 1 / -1;
  position: sticky;
  top: calc(var(--mm-stick) + 20px);
}

/* ------------------------------------------------------------- gallery --- */
.mm-pdp__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--mm-ink);
}

.mm-pdp__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; }
.mm-stars { display: inline-flex; gap: 2px; color: #d6d9de; }
.mm-pdp__reviews-link { color: var(--mm-ink-2); border-bottom: 1px solid var(--mm-line); cursor: pointer; }
.mm-pdp__reviews-link:hover { color: var(--mm-red); border-bottom-color: currentColor; }

/* Square to the column it sits in, so the picture grows with the layout instead
   of floating in the middle of a fixed 480px box. The store renders product
   images at 228px; the gallery asks for 900 (see the controller).

   No max-height: with an aspect-ratio, capping the height caps the width with
   it, and the stage came out 620px against a 768px column while the thumbnail
   strip and the video below ran the full width. The container's own 1400px
   ceiling already holds the column to 768, so the stage tops out there. */
.mm-gallery__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 20px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.mm-gallery__stage img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mm-gallery__stage a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }

/* One row, driven by arrows rather than a scrollbar: nine thumbnails wrapped
   onto two rows and made the strip 176px tall. The row is still a scroller —
   trackpads and touch keep working — the arrows are just the visible handle. */
.mm-gallery__strip { position: relative; margin-top: 12px; }
.mm-gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mm-gallery__thumbs::-webkit-scrollbar { display: none; }
.mm-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--mm-line);
  border-radius: 50%;
  background: #fff;
  color: var(--mm-ink);
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(15, 20, 28, .25);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.mm-gallery__nav[hidden] { display: none; }
.mm-gallery__nav:hover { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }
.mm-gallery__nav--prev { left: 0; }
.mm-gallery__nav--next { right: 0; }
.mm-gallery__thumb {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  width: 84px;
  height: 84px;
  padding: 5px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}
.mm-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mm-gallery__thumb:hover { border-color: var(--mm-ink-2); }
.mm-gallery__thumb.is-active { border-color: var(--mm-dark); box-shadow: inset 0 0 0 1px var(--mm-dark); }
.mm-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(20, 24, 30, .45);
  color: #fff;
}
.mm-gallery__play svg { width: 24px; height: 24px; }

/* ----------------------------------------------------------- buy panel --- */
.mm-buy__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--mm-ink-2); }
.mm-buy__brand a { font-weight: 700; color: var(--mm-ink); text-transform: uppercase; letter-spacing: .03em; }
.mm-buy__brand a:hover { color: var(--mm-red); }
/* The artwork is square with wide internal margins — the wordmark fills about a
   third of it — so the box has to be several times the height the mark should
   read at. No negative margin to claw the row height back: it pulled the logo
   over the panel edge above and the price box below. */
.mm-buy__brand img { height: 56px; width: auto; }

.mm-price {
  padding: 18px 20px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: var(--mm-soft);
  margin-bottom: 16px;
}
.mm-price__now { font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--mm-ink); }
.mm-price__now.is-special { color: var(--mm-red); }
.mm-price__was { margin-left: 10px; font-size: 16px; font-weight: 400; color: var(--mm-ink-3); text-decoration: line-through; }
.mm-price__tax { margin-top: 6px; font-size: 12.5px; color: var(--mm-ink-2); }
.mm-price__note { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--mm-red); }

.mm-price__discounts { margin-top: 12px; border-top: 1px solid var(--mm-line); padding-top: 10px; font-size: 12.5px; color: var(--mm-ink-2); }
.mm-price__discounts dt { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); margin-bottom: 4px; }
.mm-price__discounts dd { margin: 0 0 2px; }

.mm-promo-badges { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.mm-promo-badge {
  border: 1px solid rgba(208, 30, 36, .35);
  border-left: 3px solid var(--mm-red);
  border-radius: 6px;
  background: #fdf4f4;
  padding: 10px 13px;
  font-size: 13px;
}
.mm-promo-badge__type {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mm-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mm-promo-badge__desc { margin-top: 4px; font-size: 12.5px; color: var(--mm-ink-2); }

/* --------------------------------------------- availability + delivery -- */
.mm-avail {
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}
.mm-avail__row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; }
.mm-avail__row + .mm-avail__row { border-top: 1px solid var(--mm-line); }
.mm-avail__text { min-width: 0; }
.mm-avail__ico { flex: none; margin-top: 2px; color: var(--mm-ink-3); }
.mm-avail__t1 { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--mm-ink); }
.mm-avail__t1 span { font-weight: 400; color: var(--mm-ink-2); }
.mm-avail__t2 { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--mm-ink-2); }

/* The state is carried by the dot and by the text colour independently, so it
   still reads without colour perception. Lead-time statuses ("2 - 3 Days",
   "10 Days") are a delivery promise, not a refusal — never red. */
.mm-avail__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; }
.mm-avail__row--in .mm-avail__dot { background: var(--mm-ok); box-shadow: 0 0 0 3px rgba(31, 157, 77, .18); }
.mm-avail__row--in .mm-avail__t1 { color: var(--mm-ok); }
.mm-avail__row--lead .mm-avail__dot { background: var(--mm-warn); box-shadow: 0 0 0 3px rgba(154, 91, 0, .16); }
.mm-avail__row--lead .mm-avail__t1 { color: var(--mm-warn); }
.mm-avail__row--out .mm-avail__dot { background: var(--mm-red); box-shadow: 0 0 0 3px rgba(208, 30, 36, .16); }
.mm-avail__row--out .mm-avail__t1 { color: var(--mm-red); }

/* options */
.mm-options { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.mm-option__label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); }
.mm-option__required { color: var(--mm-red); }
.mm-option.has-error .mm-option__label { color: var(--mm-red); }
.mm-option.has-error .mm-input,
.mm-option.has-error .mm-select { border-color: var(--mm-red); }

.mm-input, .mm-select, .mm-textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--mm-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-input:focus, .mm-select:focus, .mm-textarea:focus {
  border-color: var(--mm-ink-2);
  box-shadow: 0 0 0 3px rgba(29, 36, 48, .06);
}
.mm-textarea { resize: vertical; }

.mm-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mm-choice:hover { border-color: var(--mm-ink-2); }
.mm-choice.is-active { border-color: var(--mm-dark); background: var(--mm-dark); color: #fff; }
.mm-choice input { margin: 0; }
.mm-choice--image { padding: 4px; }
.mm-choice--image img { width: 44px; height: 44px; object-fit: contain; display: block; }
.mm-option__file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-option__filename { font-size: 12.5px; color: var(--mm-ink-2); }

/* qty + add to cart */
.mm-buy__row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mm-qty {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.mm-qty__btn {
  width: 40px;
  border: 0;
  background: var(--mm-soft);
  color: var(--mm-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mm-qty__btn:hover { background: var(--mm-dark); color: #fff; }
.mm-qty__input {
  width: 58px;
  border: 0;
  border-left: 1px solid var(--mm-line);
  border-right: 1px solid var(--mm-line);
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--mm-ink);
  background: #fff;
  outline: none;
  -moz-appearance: textfield;
}
.mm-qty__input::-webkit-outer-spin-button,
.mm-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mm-buy__cart { flex: 1 1 220px; justify-content: center; gap: 10px; padding-top: 0; padding-bottom: 0; min-height: 52px; }
.mm-buy__cart svg { width: 19px; height: 19px; }

.mm-buy__pay { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.mm-buy__pay img { height: 34px; width: auto; }

/* reassurance block — mirrors the home page trust bar wording */
.mm-buy__assure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  margin-bottom: 16px;
}
.mm-buy__assure-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.mm-buy__assure-item svg { width: 22px; height: 22px; flex: none; color: var(--mm-ink); opacity: .8; }
.mm-buy__assure-item strong { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mm-buy__assure-item span { color: var(--mm-ink-2); font-size: 12.5px; }

.mm-buy__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--mm-ink-2); }
.mm-buy__meta strong { color: var(--mm-ink); font-weight: 600; }

/* ------------------------------------------------------------- bundles --- */
.mm-pdp__section { margin-top: 40px; }
.mm-pdp__section-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink);
}

.mm-bundle {
  border: 1px solid var(--mm-line);
  border-left: 4px solid var(--mm-red);
  border-radius: 8px;
  background: #fff;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.mm-bundle__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--mm-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.mm-bundle__name { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--mm-ink); }
.mm-bundle__items { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.mm-bundle__item { display: flex; align-items: center; gap: 11px; font-size: 13px; min-width: 0; }
.mm-bundle__item img { width: 58px; height: 58px; flex: none; object-fit: contain; border: 1px solid var(--mm-line); border-radius: 5px; background: #fff; }
.mm-bundle__item a { font-weight: 600; color: var(--mm-ink); }
.mm-bundle__item a:hover { color: var(--mm-red); }
.mm-bundle__item-price { font-size: 12.5px; color: var(--mm-ink-2); }
.mm-bundle__plus { font-size: 20px; font-weight: 700; color: var(--mm-ink-3); }
.mm-bundle__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-line);
}
.mm-bundle__price { font-size: 26px; font-weight: 700; color: var(--mm-ink); }
.mm-bundle__price-was { font-size: 15px; color: var(--mm-ink-3); text-decoration: line-through; }
.mm-bundle__save {
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--mm-ok);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mm-bundle__actions .mm-btn { margin-left: auto; }

/* bundle components, shown when the product itself is a bundle */
.mm-bundle-parts { margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--mm-line); border-radius: 8px; background: var(--mm-soft); }
.mm-bundle-parts__title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.mm-bundle-parts ul { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.mm-bundle-parts li { padding: 4px 0; border-bottom: 1px dashed var(--mm-line); }
.mm-bundle-parts li:last-child { border-bottom: 0; }
.mm-bundle-parts li span { color: var(--mm-ink-2); }
.mm-bundle-parts__was { font-size: 14px; color: var(--mm-ink-3); text-decoration: line-through; }
.mm-bundle-parts__now { font-size: 22px; font-weight: 700; color: var(--mm-ink); }
.mm-bundle-parts__save { font-size: 13px; font-weight: 700; color: var(--mm-red); }

/* ---------------------------------------------------------------- tabs --- */
.mm-tabs { margin-top: 40px; }
.mm-tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--mm-line); }
.mm-tabs__tab {
  padding: 14px 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-2);
  cursor: pointer;
}
.mm-tabs__tab:hover { color: var(--mm-ink); }
.mm-tabs__tab[aria-selected="true"] { color: var(--mm-ink); border-bottom-color: var(--mm-red); }
.mm-tabs__panel { padding: 26px 0 6px; }
.mm-tabs__panel[hidden] { display: none; }
.mm-prose { font-size: 15px; line-height: 1.7; color: var(--mm-ink); max-width: 90ch; }
.mm-prose img { border-radius: 6px; }
/* ".mm a" strips colour and underline so UI chrome (nav, cards, tiles) can carry
   its own affordance. Editorial content is the opposite case: a link inside admin
   authored copy has no surrounding cue, so it has to look like a link. Anything
   rendering HTML from the admin belongs in .mm-prose for this reason. */
.mm-prose a {
  color: var(--mm-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.mm-prose a:hover { text-decoration-thickness: 2px; }
.mm-prose a:focus-visible { outline: 2px solid var(--mm-red); outline-offset: 2px; border-radius: 2px; }

.mm-attrs { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13.5px; }
.mm-attrs caption {
  text-align: left;
  padding: 10px 14px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 6px 6px 0 0;
}
.mm-attrs th, .mm-attrs td { padding: 9px 14px; border-bottom: 1px solid var(--mm-line); text-align: left; vertical-align: top; }
.mm-attrs th { width: 38%; font-weight: 600; color: var(--mm-ink); }
.mm-attrs tr:nth-child(even) th, .mm-attrs tr:nth-child(even) td { background: #fafbfc; }

/* -------------------------------------------------------------- reviews -- */
/* Summary on the left, the reviews themselves on the right — the shape people
   already know from every shop that takes reviews seriously. */
/* The rating under the title jumps here; clear the stuck header. */
.mm-reviews-section { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--mm-line); scroll-margin-top: calc(var(--mm-stick) + 16px); }
.mm-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.mm-reviews__head .mm-pdp__section-title { margin: 0; }
.mm-reviews { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: start; }
.mm-reviews__summary { min-width: 0; }
.mm-reviews__note { font-size: 13.5px; color: var(--mm-ink-2); }
.mm-reviews__note a { color: var(--mm-red); text-decoration: underline; }
.mm-review-form { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--mm-line); max-width: 620px; }
.mm-review-form[hidden] { display: none; }

@media (max-width: 860px) {
  .mm-reviews { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.mm-review { padding: 16px 0; border-bottom: 1px solid var(--mm-line); }
.mm-review:last-of-type { border-bottom: 0; }
.mm-review .author { font-size: 13.5px; font-weight: 700; color: var(--mm-ink); margin-bottom: 4px; }
.mm-review .author i { font-style: normal; }
.mm-review .rating { margin-bottom: 6px; }
.mm-review .text { font-size: 14px; line-height: 1.6; color: var(--mm-ink); }
.mm-review-empty { font-size: 14px; color: var(--mm-ink-2); }
.mm-reviews .pagination { margin-top: 16px; font-size: 13px; }
.mm-reviews .pagination a, .mm-reviews .pagination b { padding: 0 5px; color: var(--mm-ink-2); }
.mm-reviews .pagination a:hover { color: var(--mm-red); }

.mm-review-form { padding: 22px; border: 1px solid var(--mm-line); border-radius: 8px; background: var(--mm-soft); }
.mm-review-form h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mm-field { margin-bottom: 14px; }
.mm-field > label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); }
.mm-field__hint { margin-top: 6px; font-size: 12px; color: var(--mm-ink-2); }
.mm-rate { display: inline-flex; gap: 4px; }
.mm-rate input { position: absolute; opacity: 0; pointer-events: none; }
.mm-rate label { display: inline-flex; cursor: pointer; color: #d6d9de; transition: color .12s ease; }
.mm-rate label svg { width: 24px; height: 24px; }
.mm-rate.is-lit-1 label:nth-of-type(-n+1),
.mm-rate.is-lit-2 label:nth-of-type(-n+2),
.mm-rate.is-lit-3 label:nth-of-type(-n+3),
.mm-rate.is-lit-4 label:nth-of-type(-n+4),
.mm-rate.is-lit-5 label:nth-of-type(-n+5) { color: #f2a41c; }
.mm-captcha { display: flex; align-items: center; gap: 12px; }
.mm-captcha img { border: 1px solid var(--mm-line); border-radius: 5px; }

/* ---------------------------------------------- related product sliders -- */

/* ------------------------------------------------------------ sticky bar - */
/* Desktop keeps the same bar, but only once the real button has scrolled out of
   view — on a phone it is always there, because there the buy box is a screen
   or more away for most of the page. */
.mm-sticky-buy { display: none; }
.mm-sticky-buy__inner { display: flex; align-items: center; gap: 16px; }
.mm-sticky-buy__title { display: none; }

@media (min-width: 761px) {
  body.mm.mm-buy-offscreen { padding-bottom: 78px; }

  .mm-buy-offscreen .mm-sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: block;
    padding: 13px 0;
    background: #fff;
    border-top: 1px solid var(--mm-line);
    box-shadow: 0 -10px 30px -18px rgba(15, 20, 28, .45);
  }

  /* The phone bar is fixed to the floor until 980px, so between here and there
     two bars want the same strip. This variant kept the pre-navigation
     behaviour — flush to the floor — and lost, because the navigation sits at
     z-index 70 to its 60: 57 of its 74 pixels were behind the tabs, and the
     Add to Cart button and the price with them. On a tablet the sticky buy bar
     could not be used at all.
     The max-width:760px variant below already stacks above the navigation and
     reserves room for both; this is the same arrangement for the band the fix
     missed. Past 980px the navigation is gone and bottom:0 is right again. */
  @media (max-width: 980px) {
    body.mm.mm-buy-offscreen { padding-bottom: calc(78px + 56px + env(safe-area-inset-bottom, 0px)); }

    .mm-buy-offscreen .mm-sticky-buy {
      bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
  }
  .mm-buy-offscreen .mm-sticky-buy__title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 600;
    color: var(--mm-ink);
  }
  .mm-buy-offscreen .mm-sticky-buy__price { flex: none; font-size: 20px; font-weight: 700; color: var(--mm-ink); }
  .mm-buy-offscreen .mm-sticky-buy .mm-btn { flex: none; }
}

@media (max-width: 1100px) { .mm-card { width: calc((100% - 60px) / 4); } }
@media (max-width: 760px) {
  .mm-card { width: calc((100% - 20px) / 2); min-width: 0; }
  .mm-featured__nav { display: none; }
}

/* --------------------------------------------------------------------------
   Trust bar + payment methods (module/trustbar)
   -------------------------------------------------------------------------- */
/* The bar is a floating panel, not a band welded to the header — it needs air
   above it as much as below. Was 0 on top, which read as stuck to the header. */
.mm-trust { padding: 20px 0 16px; background: #fff; }
.mm-trust__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: #f5f5f6;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  padding: 22px 28px;
}
.mm-trust__items { display: flex; flex: 1 1 auto; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-right: 32px; }
.mm-trust__item { display: inline-flex; align-items: center; gap: 12px; }
.mm-trust__item svg { width: 26px; height: 26px; flex: none; color: var(--mm-ink); opacity: .82; }
.mm-trust__text { display: flex; flex-direction: column; line-height: 1.3; }
.mm-trust__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mm-ink); }
.mm-trust__sub { font-size: 12.5px; color: var(--mm-ink-2); }
.mm-trust__pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-trust__pay .mm-pay { width: 46px; height: auto; display: block; }

/* The Apple Pay and Google Pay marks are real artwork rather than drawn SVGs,
   so they arrive without the white card the others paint into their own
   viewBox. border-box keeps their outer width equal to the SVGs' beside them. */
img.mm-pay {
  box-sizing: border-box;
  border: 1px solid #e6e8eb;
  border-radius: 4px;
  background: #fff;
}

@media (max-width: 860px) {
  .mm-trust__bar { flex-direction: column; align-items: flex-start; gap: 20px; }
  .mm-trust__items { justify-content: flex-start; padding-right: 0; gap: 18px 36px; }
}

/* Same argument as the top bar: reassurance belongs near the page, not in front
   of it. Three claims plus five payment marks stacked to 268px. One claim
   survives, chosen per item in the module; the payment marks belong at the
   checkout, not above every category. */
@media (max-width: 760px) {
  .mm-trust { padding: 10px 0; }
  .mm-trust__bar { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0; padding: 10px 14px; }
  .mm-trust__items { flex: 0 1 auto; flex-wrap: nowrap; justify-content: center; gap: 0; padding-right: 0; }
  .mm-trust__item { display: none; }
  .mm-trust__item.is-mobile { display: inline-flex; flex: none; gap: 9px; }
  .mm-trust__item svg { width: 20px; height: 20px; }
  .mm-trust__title { font-size: 12px; }
  .mm-trust__sub { font-size: 12px; }
  .mm-trust__pay { display: none; }
}

/* --------------------------------------------------------------------------
   Blog posts (module/blogposts)
   -------------------------------------------------------------------------- */
.mm-blog { padding: 20px 0 24px; background: #fff; }
.mm-blog__grid { display: flex; gap: 40px; align-items: center; }
.mm-blog__intro { flex: 0 0 25%; padding-left: 28px; }
.mm-blog__heading { font-family: var(--mm-serif); font-size: 32px; font-weight: 600; line-height: 1.12; margin: 0 0 14px; }
.mm-blog__lead { font-size: 15px; color: var(--mm-ink-2); line-height: 1.55; margin: 0 0 22px; max-width: 30ch; }
a.mm-btn--dark { border-color: var(--mm-ink); color: var(--mm-ink); background: transparent; }
a.mm-btn--dark:hover { background: var(--mm-ink); color: #fff; border-color: var(--mm-ink); }
a.mm-btn--dark svg { margin-left: 8px; transition: transform .15s ease; }
a.mm-btn--dark:hover svg { transform: translateX(3px); }

.mm-blog__posts { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mm-post { display: flex; flex-direction: column; color: var(--mm-ink); }
.mm-post__img { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #f1f2f4; margin-bottom: 14px; }
.mm-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mm-post:hover .mm-post__img img { transform: scale(1.04); }
.mm-post__cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mm-red); margin-bottom: 8px; }
.mm-post__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-post:hover .mm-post__title { color: var(--mm-red); }
.mm-post__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); }
.mm-post__more svg { transition: transform .15s ease; }
.mm-post:hover .mm-post__more svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .mm-blog__grid { flex-direction: column; gap: 28px; align-items: stretch; }
  .mm-blog__intro { flex: none; }
  .mm-blog__posts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Newsletter / community (module/newsletter)
   -------------------------------------------------------------------------- */
/* 52px top and bottom put 104 empty pixels into a 255px band — two fifths of
   the black was padding, which is what the shop meant by "too much black". The
   row itself is only as tall as the sign-up column, so the rest of this
   section tightens that column rather than the strip around it. */
.mm-news { background: var(--mm-dark); color: #fff; padding: 30px 0; }
.mm-news__grid { display: flex; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mm-news__signup { flex: 1 1 44%; min-width: 300px; max-width: 540px; }
.mm-news__heading { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; color: #fff; }
/* 46ch broke the one sentence this module has over two lines, and the row is
   as tall as this column — so that wrap cost the whole bar a line. 66ch is
   still inside a comfortable measure and lets it sit on one. */
.mm-news__intro { font-size: 14px; color: var(--mm-topbar-muted); margin: 0 0 14px; max-width: 66ch; line-height: 1.45; }
.mm-news__form { display: flex; gap: 10px; max-width: 470px; }
.mm-news__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 15px;
  border: 1px solid #3a3a3d;
  border-radius: 5px;
  background: #2a2a2c;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.mm-news__input::placeholder { color: #8a8a90; }
.mm-news__input:focus { border-color: var(--mm-red); }
.mm-news__btn {
  flex: none;
  padding: 10px 22px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: var(--mm-ink);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.mm-news__btn:hover { background: var(--mm-red); color: #fff; }

.mm-news__benefits { flex: 1 1 auto; display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.mm-news__benefit { display: flex; align-items: center; gap: 13px; max-width: 210px; }
.mm-news__ico { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3d3d40; display: inline-flex; align-items: center; justify-content: center; }
.mm-news__ico svg { width: 18px; height: 18px; color: var(--mm-topbar-muted); }
.mm-news__text { display: flex; flex-direction: column; line-height: 1.35; }
.mm-news__btitle { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.mm-news__bsub { font-size: 12.5px; color: var(--mm-topbar-muted); }

@media (max-width: 900px) {
  .mm-news__grid { flex-direction: column; align-items: flex-start; gap: 24px; }
  .mm-news__benefits { justify-content: flex-start; gap: 16px; }
}


/* --------------------------------------------------------------------------
   Toasts (cart / wishlist feedback, driven by mm.js)
   -------------------------------------------------------------------------- */
.mm-toasts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 36px));
}
.mm-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  border: 1px solid var(--mm-line);
  border-left: 4px solid var(--mm-ok);
  border-radius: 8px;
  background: #fff;
  color: var(--mm-ink);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 14px 34px -12px rgba(15, 20, 28, .34);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .2s ease, transform .2s ease;
}
.mm-toast.is-visible { opacity: 1; transform: translateX(0); }
.mm-toast--error { border-left-color: var(--mm-red); }
.mm-toast__body { flex: 1 1 auto; min-width: 0; }
.mm-toast__body a { color: var(--mm-red); text-decoration: underline; }
.mm-toast__close {
  flex: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--mm-ink-3);
  cursor: pointer;
}
.mm-toast__close:hover { color: var(--mm-ink); }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.mm-crumbs { background: var(--mm-soft); border-bottom: 1px solid var(--mm-line); }
.mm-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 11px 0;
  font-size: 12.5px;
  color: var(--mm-ink-2);
}
.mm-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.mm-crumbs li + li::before { content: "/"; color: var(--mm-ink-3); }
.mm-crumbs a { color: var(--mm-ink-2); }
.mm-crumbs a:hover { color: var(--mm-red); }
.mm-crumbs .is-current { color: var(--mm-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Buttons — button-element variants of the home page .mm-btn
   -------------------------------------------------------------------------- */
.mm-btn--solid { background: var(--mm-dark); color: #fff; border-color: var(--mm-dark); }
.mm-btn--solid:hover { background: var(--mm-red); border-color: var(--mm-red); }
.mm-btn--red { background: var(--mm-red); color: #fff; border-color: var(--mm-red); }
.mm-btn--red:hover { background: #ac171d; border-color: #ac171d; }
.mm-btn--ghost { background: #fff; color: var(--mm-ink); border-color: var(--mm-line); }
.mm-btn--ghost:hover { border-color: var(--mm-ink); }
.mm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   Product page (PDP)
   ========================================================================== */
.mm-pdp { padding: 26px 0 8px; }

.mm-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 44px;
  align-items: start;
}
/* The grid runs the length of the page down to the end of the tabs, and the buy
   panel spans every row of it. That gives sticky something to travel inside:
   confined to the gallery row it had 270px of movement, which is not following
   anyone anywhere; across the tabs it is about 1,600px. */
.mm-pdp__gallery { grid-column: 1; }
.mm-pdp__grid > .mm-pdp__section,
.mm-pdp__grid > .mm-tabs { grid-column: 1; margin-top: 40px; }
.mm-pdp__buy {
  grid-column: 2;
  grid-row: 1 / -1;
  position: sticky;
  top: calc(var(--mm-stick) + 20px);
}

/* ------------------------------------------------------------- gallery --- */
.mm-pdp__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--mm-ink);
}

.mm-pdp__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; }
.mm-stars { display: inline-flex; gap: 2px; color: #d6d9de; }
.mm-pdp__reviews-link { color: var(--mm-ink-2); border-bottom: 1px solid var(--mm-line); cursor: pointer; }
.mm-pdp__reviews-link:hover { color: var(--mm-red); border-bottom-color: currentColor; }

/* Square to the column it sits in, so the picture grows with the layout instead
   of floating in the middle of a fixed 480px box. The store renders product
   images at 228px; the gallery asks for 900 (see the controller).

   No max-height: with an aspect-ratio, capping the height caps the width with
   it, and the stage came out 620px against a 768px column while the thumbnail
   strip and the video below ran the full width. The container's own 1400px
   ceiling already holds the column to 768, so the stage tops out there. */
.mm-gallery__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 20px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.mm-gallery__stage img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mm-gallery__stage a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }

/* One row, driven by arrows rather than a scrollbar: nine thumbnails wrapped
   onto two rows and made the strip 176px tall. The row is still a scroller —
   trackpads and touch keep working — the arrows are just the visible handle. */
.mm-gallery__strip { position: relative; margin-top: 12px; }
.mm-gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mm-gallery__thumbs::-webkit-scrollbar { display: none; }
.mm-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--mm-line);
  border-radius: 50%;
  background: #fff;
  color: var(--mm-ink);
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(15, 20, 28, .25);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.mm-gallery__nav[hidden] { display: none; }
.mm-gallery__nav:hover { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }
.mm-gallery__nav--prev { left: 0; }
.mm-gallery__nav--next { right: 0; }
.mm-gallery__thumb {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  width: 84px;
  height: 84px;
  padding: 5px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}
.mm-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mm-gallery__thumb:hover { border-color: var(--mm-ink-2); }
.mm-gallery__thumb.is-active { border-color: var(--mm-dark); box-shadow: inset 0 0 0 1px var(--mm-dark); }
.mm-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(20, 24, 30, .45);
  color: #fff;
}
.mm-gallery__play svg { width: 24px; height: 24px; }

/* ----------------------------------------------------------- buy panel --- */

.mm-price {
  padding: 18px 20px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: var(--mm-soft);
  margin-bottom: 16px;
}
.mm-price__now { font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--mm-ink); }
.mm-price__now.is-special { color: var(--mm-red); }
.mm-price__was { margin-left: 10px; font-size: 16px; font-weight: 400; color: var(--mm-ink-3); text-decoration: line-through; }
.mm-price__tax { margin-top: 6px; font-size: 12.5px; color: var(--mm-ink-2); }
.mm-price__note { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--mm-red); }

.mm-price__discounts { margin-top: 12px; border-top: 1px solid var(--mm-line); padding-top: 10px; font-size: 12.5px; color: var(--mm-ink-2); }
.mm-price__discounts dt { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); margin-bottom: 4px; }
.mm-price__discounts dd { margin: 0 0 2px; }

.mm-promo-badges { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.mm-promo-badge {
  border: 1px solid rgba(208, 30, 36, .35);
  border-left: 3px solid var(--mm-red);
  border-radius: 6px;
  background: #fdf4f4;
  padding: 10px 13px;
  font-size: 13px;
}
.mm-promo-badge__type {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mm-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mm-promo-badge__desc { margin-top: 4px; font-size: 12.5px; color: var(--mm-ink-2); }

/* --------------------------------------------- availability + delivery -- */
.mm-avail {
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}
.mm-avail__row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; }
.mm-avail__row + .mm-avail__row { border-top: 1px solid var(--mm-line); }
.mm-avail__text { min-width: 0; }
.mm-avail__ico { flex: none; margin-top: 2px; color: var(--mm-ink-3); }
.mm-avail__t1 { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--mm-ink); }
.mm-avail__t1 span { font-weight: 400; color: var(--mm-ink-2); }
.mm-avail__t2 { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--mm-ink-2); }

/* The state is carried by the dot and by the text colour independently, so it
   still reads without colour perception. Lead-time statuses ("2 - 3 Days",
   "10 Days") are a delivery promise, not a refusal — never red. */
.mm-avail__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; }
.mm-avail__row--in .mm-avail__dot { background: var(--mm-ok); box-shadow: 0 0 0 3px rgba(31, 157, 77, .18); }
.mm-avail__row--in .mm-avail__t1 { color: var(--mm-ok); }
.mm-avail__row--lead .mm-avail__dot { background: var(--mm-warn); box-shadow: 0 0 0 3px rgba(154, 91, 0, .16); }
.mm-avail__row--lead .mm-avail__t1 { color: var(--mm-warn); }
.mm-avail__row--out .mm-avail__dot { background: var(--mm-red); box-shadow: 0 0 0 3px rgba(208, 30, 36, .16); }
.mm-avail__row--out .mm-avail__t1 { color: var(--mm-red); }

/* options */
.mm-options { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.mm-option__label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); }
.mm-option__required { color: var(--mm-red); }
.mm-option.has-error .mm-option__label { color: var(--mm-red); }
.mm-option.has-error .mm-input,
.mm-option.has-error .mm-select { border-color: var(--mm-red); }

.mm-input, .mm-select, .mm-textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--mm-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-input:focus, .mm-select:focus, .mm-textarea:focus {
  border-color: var(--mm-ink-2);
  box-shadow: 0 0 0 3px rgba(29, 36, 48, .06);
}
.mm-textarea { resize: vertical; }

.mm-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mm-choice:hover { border-color: var(--mm-ink-2); }
.mm-choice.is-active { border-color: var(--mm-dark); background: var(--mm-dark); color: #fff; }
.mm-choice input { margin: 0; }
.mm-choice--image { padding: 4px; }
.mm-choice--image img { width: 44px; height: 44px; object-fit: contain; display: block; }
.mm-option__file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-option__filename { font-size: 12.5px; color: var(--mm-ink-2); }

/* qty + add to cart */
.mm-buy__row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mm-qty {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.mm-qty__btn {
  width: 40px;
  border: 0;
  background: var(--mm-soft);
  color: var(--mm-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mm-qty__btn:hover { background: var(--mm-dark); color: #fff; }
.mm-qty__input {
  width: 58px;
  border: 0;
  border-left: 1px solid var(--mm-line);
  border-right: 1px solid var(--mm-line);
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--mm-ink);
  background: #fff;
  outline: none;
  -moz-appearance: textfield;
}
.mm-qty__input::-webkit-outer-spin-button,
.mm-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mm-buy__cart { flex: 1 1 220px; justify-content: center; gap: 10px; padding-top: 0; padding-bottom: 0; min-height: 52px; }
.mm-buy__cart svg { width: 19px; height: 19px; }

.mm-buy__pay { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.mm-buy__pay img { height: 34px; width: auto; }

/* reassurance block — mirrors the home page trust bar wording */
.mm-buy__assure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  margin-bottom: 16px;
}
.mm-buy__assure-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.mm-buy__assure-item svg { width: 22px; height: 22px; flex: none; color: var(--mm-ink); opacity: .8; }
.mm-buy__assure-item strong { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mm-buy__assure-item span { color: var(--mm-ink-2); font-size: 12.5px; }

.mm-buy__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--mm-ink-2); }
.mm-buy__meta strong { color: var(--mm-ink); font-weight: 600; }

/* ------------------------------------------------------------- bundles --- */
.mm-pdp__section { margin-top: 40px; }
.mm-pdp__section-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink);
}

.mm-bundle {
  border: 1px solid var(--mm-line);
  border-left: 4px solid var(--mm-red);
  border-radius: 8px;
  background: #fff;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.mm-bundle__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--mm-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.mm-bundle__name { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--mm-ink); }
.mm-bundle__items { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.mm-bundle__item { display: flex; align-items: center; gap: 11px; font-size: 13px; min-width: 0; }
.mm-bundle__item img { width: 58px; height: 58px; flex: none; object-fit: contain; border: 1px solid var(--mm-line); border-radius: 5px; background: #fff; }
.mm-bundle__item a { font-weight: 600; color: var(--mm-ink); }
.mm-bundle__item a:hover { color: var(--mm-red); }
.mm-bundle__item-price { font-size: 12.5px; color: var(--mm-ink-2); }
.mm-bundle__plus { font-size: 20px; font-weight: 700; color: var(--mm-ink-3); }
.mm-bundle__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-line);
}
.mm-bundle__price { font-size: 26px; font-weight: 700; color: var(--mm-ink); }
.mm-bundle__price-was { font-size: 15px; color: var(--mm-ink-3); text-decoration: line-through; }
.mm-bundle__save {
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--mm-ok);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mm-bundle__actions .mm-btn { margin-left: auto; }

/* bundle components, shown when the product itself is a bundle */
.mm-bundle-parts { margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--mm-line); border-radius: 8px; background: var(--mm-soft); }
.mm-bundle-parts__title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.mm-bundle-parts ul { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.mm-bundle-parts li { padding: 4px 0; border-bottom: 1px dashed var(--mm-line); }
.mm-bundle-parts li:last-child { border-bottom: 0; }
.mm-bundle-parts li span { color: var(--mm-ink-2); }
.mm-bundle-parts__was { font-size: 14px; color: var(--mm-ink-3); text-decoration: line-through; }
.mm-bundle-parts__now { font-size: 22px; font-weight: 700; color: var(--mm-ink); }
.mm-bundle-parts__save { font-size: 13px; font-weight: 700; color: var(--mm-red); }

/* ---------------------------------------------------------------- tabs --- */
.mm-tabs { margin-top: 40px; }
.mm-tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--mm-line); }
.mm-tabs__tab {
  padding: 14px 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-2);
  cursor: pointer;
}
.mm-tabs__tab:hover { color: var(--mm-ink); }
.mm-tabs__tab[aria-selected="true"] { color: var(--mm-ink); border-bottom-color: var(--mm-red); }
.mm-tabs__panel { padding: 26px 0 6px; }
.mm-tabs__panel[hidden] { display: none; }
.mm-prose { font-size: 15px; line-height: 1.7; color: var(--mm-ink); max-width: 90ch; }
.mm-prose img { border-radius: 6px; }
/* ".mm a" strips colour and underline so UI chrome (nav, cards, tiles) can carry
   its own affordance. Editorial content is the opposite case: a link inside admin
   authored copy has no surrounding cue, so it has to look like a link. Anything
   rendering HTML from the admin belongs in .mm-prose for this reason. */
.mm-prose a {
  color: var(--mm-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.mm-prose a:hover { text-decoration-thickness: 2px; }
.mm-prose a:focus-visible { outline: 2px solid var(--mm-red); outline-offset: 2px; border-radius: 2px; }

.mm-attrs { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13.5px; }
.mm-attrs caption {
  text-align: left;
  padding: 10px 14px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 6px 6px 0 0;
}
.mm-attrs th, .mm-attrs td { padding: 9px 14px; border-bottom: 1px solid var(--mm-line); text-align: left; vertical-align: top; }
.mm-attrs th { width: 38%; font-weight: 600; color: var(--mm-ink); }
.mm-attrs tr:nth-child(even) th, .mm-attrs tr:nth-child(even) td { background: #fafbfc; }

/* -------------------------------------------------------------- reviews -- */

.mm-review { padding: 16px 0; border-bottom: 1px solid var(--mm-line); }
.mm-review:last-of-type { border-bottom: 0; }
.mm-review .author { font-size: 13.5px; font-weight: 700; color: var(--mm-ink); margin-bottom: 4px; }
.mm-review .author i { font-style: normal; }
.mm-review .rating { margin-bottom: 6px; }
.mm-review .text { font-size: 14px; line-height: 1.6; color: var(--mm-ink); }
.mm-review-empty { font-size: 14px; color: var(--mm-ink-2); }
.mm-reviews .pagination { margin-top: 16px; font-size: 13px; }
.mm-reviews .pagination a, .mm-reviews .pagination b { padding: 0 5px; color: var(--mm-ink-2); }
.mm-reviews .pagination a:hover { color: var(--mm-red); }

.mm-review-form { padding: 22px; border: 1px solid var(--mm-line); border-radius: 8px; background: var(--mm-soft); }
.mm-review-form h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.mm-field { margin-bottom: 14px; }
.mm-field > label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); }
.mm-field__hint { margin-top: 6px; font-size: 12px; color: var(--mm-ink-2); }
.mm-rate { display: inline-flex; gap: 4px; }
.mm-rate input { position: absolute; opacity: 0; pointer-events: none; }
.mm-rate label { display: inline-flex; cursor: pointer; color: #d6d9de; transition: color .12s ease; }
.mm-rate label svg { width: 24px; height: 24px; }
.mm-rate.is-lit-1 label:nth-of-type(-n+1),
.mm-rate.is-lit-2 label:nth-of-type(-n+2),
.mm-rate.is-lit-3 label:nth-of-type(-n+3),
.mm-rate.is-lit-4 label:nth-of-type(-n+4),
.mm-rate.is-lit-5 label:nth-of-type(-n+5) { color: #f2a41c; }
.mm-captcha { display: flex; align-items: center; gap: 12px; }
.mm-captcha img { border: 1px solid var(--mm-line); border-radius: 5px; }

/* ---------------------------------------------- related product sliders -- */

@media (max-width: 1100px) {
  .mm-pdp__grid { gap: 32px; }
}

@media (max-width: 980px) {
  /* One column: the panel is a block in the reading order again, and nothing
     spans anything, so the placement and the sticky both have to go.
     minmax(0, 1fr), not 1fr — a plain fr track takes min-content as its floor,
     and the scrolling thumbnail strip then widened the whole page. */
  .mm-pdp__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mm-pdp__gallery,
  .mm-pdp__grid > .mm-pdp__section,
  .mm-pdp__grid > .mm-tabs,
  .mm-pdp__buy { grid-column: auto; grid-row: auto; margin-top: 0; }
  .mm-pdp__buy { position: static; }
  .mm-reviews { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* One column means the gallery gets the full page width, and a square stage
   there is taller than the window — 940px of picture on a 900px screen. A
   flatter ratio shortens it without narrowing it, which is what a max-height
   would have done. Phones are narrow enough for the square to be fine. */
@media (max-width: 980px) and (min-width: 601px) {
  .mm-gallery__stage { aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
  .mm-pdp__title { font-size: 21px; }
  .mm-buy__brand img { height: 44px; }
  .mm-gallery__stage { padding: 14px; }
  .mm-gallery__thumb { width: 68px; height: 68px; }
  .mm-price__now { font-size: 27px; }

  /* Room for both bars. The buy bar predates the navigation bar and sat flush
     to the floor at z-index 900, which covered every tab on the page — the
     whole of the site navigation was unreachable from any product page. */
  body.mm.mm-has-sticky-buy { padding-bottom: calc(72px + 56px + env(safe-area-inset-bottom, 0px)); }

  .mm-has-sticky-buy .mm-sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: block;
    padding: 10px 0;
    background: #fff;
    border-top: 1px solid var(--mm-line);
    box-shadow: 0 -8px 24px -12px rgba(15, 20, 28, .35);
  }
  .mm-sticky-buy__price { flex: 1 1 auto; font-size: 18px; font-weight: 700; color: var(--mm-ink); }
  .mm-sticky-buy .mm-btn { flex: none; }
}

/* ==========================================================================
   Category page
   ========================================================================== */
.mm-cat { padding: 28px 0 56px; }

.mm-cat__head { margin-bottom: 24px; }
.mm-cat__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mm-ink);
}

/* ============================================================ category hero */
/* Dark band behind the title. It renders with or without artwork, so a
   category whose banner has not been shot yet still looks finished. */
/* Fixed band, deliberately not content-driven: the crop of the artwork has to
   be identical on every category, so the copy is what adapts to the hero. The
   bottom 96px stays clear for the refine card that straddles the lower edge. */
.mm-cathero {
  position: relative;
  box-sizing: border-box;
  height: 420px;
  background: var(--mm-dark);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 34px 0 96px;
  overflow: hidden;
}
.mm-cathero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 18, 20, .92) 0%, rgba(18, 18, 20, .78) 45%, rgba(18, 18, 20, .35) 100%);
}
.mm-cathero:not(.has-image)::before { background: none; }
.mm-cathero > .mm-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}

.mm-cathero__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}
.mm-cathero__crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.mm-cathero__crumbs li + li::before { content: "/"; opacity: .45; }
.mm-cathero__crumbs a { color: rgba(255, 255, 255, .72); }
.mm-cathero__crumbs a:hover { color: #fff; }
.mm-cathero__crumbs .is-current { color: #fff; font-weight: 600; }

.mm-cathero__title {
  margin: 0 0 12px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.mm-cathero__lead {
  margin: 0 0 22px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.65;
}
/* The description is admin HTML, so it keeps its paragraphs and links. Overflow
   is clamped rather than scrolled: the hero is a fixed frame and the editor
   writes to fit it. The full text stays in the DOM, so nothing is lost to
   search engines — only the part past the fourth line stops being painted. */
.mm-cathero__lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  flex: 0 1 auto;
  min-height: 0;
}
.mm-cathero__lead > *:first-child { margin-top: 0; }
.mm-cathero__lead > *:last-child { margin-bottom: 0; }
.mm-cathero__lead img { max-width: 100%; height: auto; border-radius: 6px; }
.mm-cathero__cta { gap: 8px; }

/* --------------------------------------------------------- page frame --- */
/* Short pages left the footer floating mid-screen with white below it — the
   login page is 660px on a 900px window. A column that fills the viewport puts
   the footer on the floor instead. The fixed furniture (bottom bar, drawers,
   sticky buy) is out of flow, so none of it is a flex item here. */
body.mm {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.mm-content-container { flex: 1 0 auto; }
.mm-footer { flex-shrink: 0; }

/* --------------------------------------------------------- search panel --- */
/* The other listings refine from the sidebar. A search refines by changing the
   query, so its controls sit above the results, where the query is. */
.mm-search__panel {
  margin-bottom: 24px;
  padding: 20px 22px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-soft);
}
.mm-search__row { display: flex; align-items: flex-end; gap: 14px; }
.mm-search__q { flex: 1 1 auto; min-width: 0; margin: 0; }
.mm-search__cat { flex: 0 1 300px; min-width: 0; margin: 0; }
.mm-search__go { flex: none; min-height: 46px; }
.mm-search__opts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; }
.mm-search__opts .mm-auth__check { margin: 0; }

@media (max-width: 760px) {
  .mm-search__panel { padding: 16px; }
  .mm-search__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .mm-search__cat { flex: 1 1 auto; }
  .mm-search__go { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------- listing / account --- */
/* Shared by the pages that are a heading and a body: specials, and the account
   forms. They were falling through to the old default theme, which is Bootstrap
   markup the mm sheet knows nothing about. */
.mm-listing__head { margin-bottom: 22px; }
/* A manufacturer page has a brand to introduce and no banner to do it with —
   none of the 543 manufacturers has one, all of them have a logo. */
.mm-brandhead { display: flex; align-items: center; gap: 18px; }
.mm-brandhead__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  flex: none;
  padding: 10px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: #fff;
}
.mm-brandhead__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

@media (max-width: 600px) {
  .mm-brandhead { gap: 14px; }
  .mm-brandhead__logo { width: 64px; height: 64px; padding: 8px; }
}
.mm-listing__title { font-size: 30px; font-weight: 700; letter-spacing: -.015em; color: var(--mm-ink); margin: 0; }

/* The panel is the page: artwork on the left carrying the invitation, the form
   on the right carrying the work. One card, so the two halves share an edge
   rather than floating apart. */
.mm-auth { padding: 34px 0 48px; }
.mm-auth__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(15, 20, 28, .4);
}
.mm-auth__panel.has-art { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); max-width: 1100px; }
/* Registration asks for a lot more than sign-in, so the form half gets the
   room and the artwork settles for what is left. */
.mm-auth__panel--wide { max-width: 720px; }
.mm-auth__panel--wide.has-art { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); max-width: 1180px; }

.mm-auth__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 40px;
  background-color: var(--mm-dark);
  background-size: cover;
  background-position: center;
}
/* The photograph is dark at the bottom and light at the top; the wash makes the
   copy legible wherever the crop lands. */
.mm-auth__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 11, 13, .92) 0%, rgba(10, 11, 13, .72) 34%, rgba(10, 11, 13, .28) 66%, rgba(10, 11, 13, .18) 100%);
}
.mm-auth__art-copy { position: relative; z-index: 1; max-width: 30ch; }
.mm-auth__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #fff;
  margin-bottom: 18px;
}
.mm-auth__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--mm-red);
}
.mm-auth__headline {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #fff;
}
.mm-auth__blurb { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .82); }

.mm-auth__form { padding: 46px 48px; }
/* Sentence case throughout this panel: the mm defaults shout in uppercase,
   which is right on a product grid and wrong on a sign-in form. */
.mm-auth__form .mm-field label {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mm-ink);
}
.mm-auth__form .mm-btn { text-transform: none; letter-spacing: 0; font-size: 15px; }
.mm-auth__title { margin: 0 0 8px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--mm-ink); }
.mm-auth__lead { margin: 0 0 28px; font-size: 14.5px; color: var(--mm-ink-2); }
.mm-auth__section {
  margin: 26px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--mm-line);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mm-ink-3);
}
.mm-auth__section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* Two per row where the pair belongs together — name, city and postcode — and
   full width where the value is long. */
.mm-auth__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.mm-field__error { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mm-red); }
.mm-auth__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mm-ink-2);
  cursor: pointer;
}
.mm-auth__check input { margin-top: 2px; flex: none; }
.mm-auth__consents { margin: 22px 0 26px; display: grid; gap: 12px; }

.mm-auth__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.mm-auth__chip {
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--mm-line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mm-ink-2);
  white-space: nowrap;
}

.mm-field__optional {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--mm-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mm-ink-3);
}
.mm-field__note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mm-ink-3); }

/* Password strength: four segments filling as the four rules are met, so the
   bar and the checklist are the same statement said twice rather than two. */
.mm-pw { margin-top: 12px; }
.mm-pw__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.mm-pw__track span { height: 4px; border-radius: 2px; background: var(--mm-line); transition: background .18s ease; }
.mm-pw__track[data-level="1"] span:nth-child(-n+1) { background: #d0342c; }
.mm-pw__track[data-level="2"] span:nth-child(-n+2) { background: #d98324; }
.mm-pw__track[data-level="3"] span:nth-child(-n+3) { background: #c9a227; }
.mm-pw__track[data-level="4"] span { background: var(--mm-ok); }
.mm-pw__reqs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.mm-pw__reqs li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--mm-ink-3); }
.mm-pw__reqs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--mm-line);
}
.mm-pw__reqs li.is-met { color: var(--mm-ok); }
.mm-pw__reqs li.is-met::before { background: var(--mm-ok); border-color: var(--mm-ok); }

.mm-auth__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-ink-2);
}
.mm-auth__note svg { flex: none; margin-top: 1px; color: var(--mm-ink-3); }
.mm-auth__note strong { display: block; color: var(--mm-ink); }

.mm-auth__benefits { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.mm-auth__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}
.mm-auth__benefits svg { flex: none; margin-top: 3px; color: var(--mm-red); }
.mm-auth__check a { color: var(--mm-red); text-decoration: underline; }
.mm-auth__form select.mm-input { appearance: auto; }

.mm-inputgroup { position: relative; display: flex; align-items: center; }
.mm-inputgroup__ico { position: absolute; left: 14px; color: var(--mm-ink-3); pointer-events: none; }
.mm-inputgroup .mm-input { padding-left: 44px; }
.mm-inputgroup:has(.mm-inputgroup__reveal) .mm-input { padding-right: 46px; }
.mm-inputgroup__reveal {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--mm-ink-3);
  cursor: pointer;
}
.mm-inputgroup__reveal:hover { color: var(--mm-ink); }
.mm-inputgroup__reveal.is-on { color: var(--mm-red); }

.mm-auth__row { display: flex; justify-content: flex-end; margin: -4px 0 20px; }
.mm-auth__forgot { font-size: 13.5px; font-weight: 600; color: var(--mm-red); }
.mm-auth__forgot:hover { text-decoration: underline; }
.mm-auth__submit { width: 100%; justify-content: center; min-height: 52px; }

.mm-auth__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mm-ink-3);
}
.mm-auth__divider::before,
.mm-auth__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mm-line); }

/* On the sign-in page the divider above supplies this gap. Sign-up has no
   divider, so the card sat flush against the submit button — an adjacent
   sibling rule gives it the room without doubling the space on login. */
form + .mm-auth__register { margin-top: 30px; }
.mm-auth__register {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
}
.mm-auth__register-text { min-width: 0; }
.mm-auth__register-t { font-size: 15px; font-weight: 700; color: var(--mm-ink); }
.mm-auth__register-s { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--mm-ink-2); }
.mm-auth__register .mm-btn { flex: none; }

.mm-auth__help { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--mm-ink-2); }
.mm-auth__help a { color: var(--mm-ink); font-weight: 700; text-decoration: underline; }
.mm-auth__help a:hover { color: var(--mm-red); }

@media (max-width: 900px) {
  /* The artwork is the invitation, not the task — on a narrow screen it would
     only stand between the visitor and the form. */
  .mm-auth__panel.has-art { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .mm-auth__art { display: none; }
}

@media (max-width: 760px) {
  .mm-auth { padding: 20px 0 32px; }
  .mm-auth__form { padding: 28px 22px; }
  .mm-auth__pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mm-pw__reqs { grid-template-columns: minmax(0, 1fr); }
  .mm-auth__head { flex-direction: column; gap: 10px; }
  .mm-auth__title { font-size: 26px; }
  .mm-auth__register { flex-direction: column; align-items: stretch; }
  .mm-auth__register .mm-btn { justify-content: center; }
}

/* --------------------------------------------------------------- video --- */
/* Sits under the thumbnails and matches the stage above it, so the column
   reads as one piece of media rather than a picture and a bolted-on player. */
.mm-video {
  margin: 16px 0 0;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.mm-video__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #0f1114;
  cursor: pointer;
}
.mm-video__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding-left: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--mm-red);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55);
  transition: transform .15s ease, background .15s ease;
}
.mm-video__poster:hover .mm-video__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.mm-video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.mm-video__caption {
  padding: 10px 14px;
  border-top: 1px solid var(--mm-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--mm-ink-2);
}
.mm-video.is-playing .mm-video__caption { display: none; }

@media (max-width: 760px) {
  .mm-video { margin-top: 14px; }
  .mm-video__play { width: 58px; height: 58px; }
}

/* ------------------------------------------------------------ lightbox --- */
.mm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 72px;
  background: rgba(12, 14, 18, .92);
}
.mm-lightbox[hidden] { display: none; }
body.mm-lightbox-open { overflow: hidden; }
.mm-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}

.mm-lightbox__close,
.mm-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.mm-lightbox__close:hover,
.mm-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.mm-lightbox__close { top: 18px; right: 18px; }
.mm-lightbox__nav--prev { left: 14px; top: 50%; margin-top: -24px; }
.mm-lightbox__nav--next { right: 14px; top: 50%; margin-top: -24px; }
.mm-lightbox.is-single .mm-lightbox__nav,
.mm-lightbox.is-single .mm-lightbox__count { display: none; }
.mm-lightbox__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .mm-lightbox { padding: 56px 12px; }
  .mm-lightbox__nav { width: 42px; height: 42px; }
  .mm-lightbox__nav--prev { left: 6px; }
  .mm-lightbox__nav--next { right: 6px; }
}

/* ------------------------------------------------------- refine subcats -- */
/* Lifts over the hero. The negative margin matches the hero's bottom padding
   minus the overlap, so the card always straddles the edge. */
.mm-refine {
  position: relative;
  z-index: 2;
  margin-top: -60px;
  margin-bottom: 34px;
  padding: 22px 26px 26px;
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(15, 20, 28, .35);
}
.mm-refine__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.mm-refine__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-ink);
}

/* One scrolling row rather than a wrapping grid — a category with 14 children
   used to spill onto a second row and stretch the panel. Mirrors the product
   slider so both carousels behave the same. */
.mm-refine__viewport { position: relative; }
.mm-refine__row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 0;
  /* Centre a short row, but "safe" reverts to start as soon as it overflows —
     plain "center" would push the first items past the left edge where they
     cannot be scrolled back to. Needs no JavaScript to hold. */
  justify-content: safe center;
}
.mm-refine__row::-webkit-scrollbar { height: 0; width: 0; }
/* Room for the arrows only when they are actually there. */
.mm-refine__viewport.has-nav .mm-refine__row { padding-left: 22px; padding-right: 22px; }

.mm-refine__nav {
  position: absolute;
  top: 42px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--mm-line);
  background: #fff;
  color: var(--mm-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(15, 20, 28, .25);
  z-index: 3;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.mm-refine__nav:hover:not([disabled]) { background: var(--mm-dark); color: #fff; border-color: var(--mm-dark); }
.mm-refine__nav[disabled] { opacity: .35; cursor: default; }
.mm-refine__nav[hidden] { display: none; }
.mm-refine__nav--prev { left: -10px; }
.mm-refine__nav--next { right: -10px; }

.mm-refine__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  /* Never shrink below 104px — that is what makes the row overflow and the
     arrows appear. No growing: stretched tiles would leave nothing to centre. */
  flex: 0 0 104px;
  scroll-snap-align: start;
}
.mm-refine__img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mm-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mm-refine__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-refine__item:hover .mm-refine__img { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(15, 20, 28, .4); }
.mm-refine__name {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--mm-ink);
}
.mm-refine__item:hover .mm-refine__name { color: var(--mm-red); }
.mm-refine__view { font-size: 11.5px; color: var(--mm-ink-3); }

/* A handful of children should sit centred and a little bigger rather than
   strung along the left edge with dead space beside them. */
.mm-refine__viewport.is-roomy .mm-refine__item { flex-basis: 132px; }
.mm-refine__viewport.is-roomy .mm-refine__img { width: 108px; height: 108px; }
.mm-refine__viewport.is-roomy .mm-refine__name { font-size: 12.5px; }
.mm-refine__viewport.is-roomy .mm-refine__view { font-size: 12px; }


/* ------------------------------------------------------ sidebar + main --- */
.mm-cat__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.mm-cat__layout.has-left { grid-template-columns: 250px minmax(0, 1fr); }
.mm-cat__layout.has-right { grid-template-columns: minmax(0, 1fr) 250px; }
.mm-cat__layout.has-left.has-right { grid-template-columns: 250px minmax(0, 1fr) 250px; }
.mm-cat__side { min-width: 0; }
.mm-cat__side > * + * { margin-top: 24px; }
.mm-cat__main { min-width: 0; }

/* The filters follow the page down; the subcategory list above them does not.
   The results run to several thousand pixels, so without this the visitor
   scrolls past the filters and has to come back up to change one. The
   subcategory list is a place to go rather than a control to keep reaching
   for, so it scrolls away like the rest of the page.

   Sticking the filters means the column has to be as tall as the row — a
   sticky child cannot travel past its own parent — so the layout stretches
   here rather than aligning to the top. The column draws nothing of its own,
   so a taller box changes nothing on screen.

   The filters carry their own scroll, because the box can outgrow the window
   once a category has enough brands.

   Above the phone breakpoint only: below it the sidebar is not a column at all
   but a sheet that slides up from the bottom. */
@media (min-width: 981px) {
  .mm-cat__layout.has-left { align-items: stretch; }

  /* column_left wraps the modules in a plain div, and a sticky element cannot
     travel past its own parent — without this the filters stop where that
     wrapper ends, a few hundred pixels down. */
  .mm-cat__side #column-left { height: 100%; }

  #mm-filter {
    position: sticky;
    top: calc(var(--mm-stick) + 16px);
    max-height: calc(100vh - var(--mm-stick) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------------------------------------------------------- toolbar ------ */
.mm-cat__toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--mm-line);
  margin-bottom: 22px;
}
.mm-cat__control--sort { justify-self: center; }
.mm-cat__count { font-size: 13.5px; color: var(--mm-ink-2); }
.mm-cat__count strong { color: var(--mm-ink); font-weight: 700; }
.mm-cat__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.mm-cat__control { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.mm-cat__control > span {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-3);
  white-space: nowrap;
}
.mm-cat__control select {
  font: inherit;
  font-size: 13px;
  color: var(--mm-ink);
  background: #fff;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  padding: 7px 10px;
  max-width: 200px;
  cursor: pointer;
}
.mm-cat__control select:focus { outline: none; border-color: var(--mm-ink-3); }

.mm-cat__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  background: #fff;
  color: var(--mm-ink-2);
  cursor: pointer;
}
.mm-cat__view-btn:hover { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }
.mm-cat__view-ico { display: inline-flex; }
.mm-cat__view-ico[hidden] { display: none; }

/* --------------------------------------------------------- filter sheet -- */
/* All of this is dormant above the phone breakpoint: the sidebar is a sidebar,
   so the opener and the sheet's own chrome have nothing to do. */
.mm-cat__filters-btn,
.mm-sheet__bar,
.mm-sheet__foot,
.mm-sheet__scrim { display: none; }

.mm-cat__filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--mm-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Results are swapped in place rather than reloaded, so the wait needs to be
   visible — otherwise a slow filter looks like a control that did nothing. */
.mm-cat__main.is-loading { position: relative; }
.mm-cat__main.is-loading .mm-cat__grid { opacity: .45; transition: opacity .15s ease; pointer-events: none; }
.mm-cat__main.is-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mm-red);
  animation: mm-progress 1s ease-in-out infinite;
}
@keyframes mm-progress {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-cat__main.is-loading::after { animation: none; }
}

/* ------------------------------------------------------------- grid ------ */
.mm-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}
/* .mm-card is sized for the horizontal sliders — let the grid drive it here. */
.mm-cat__grid .mm-card { flex: none; width: auto; }

.mm-cat__grid--list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mm-cat__grid--list .mm-card { flex-direction: row; }
.mm-cat__grid--list .mm-card__imgwrap { flex: 0 0 180px; width: 180px; }
.mm-cat__grid--list .mm-card__body { padding: 16px 18px; }
.mm-cat__grid--list .mm-card__name { font-size: 15px; -webkit-line-clamp: 2; }
.mm-cat__grid--list .mm-card__price { font-size: 18px; }
.mm-cat__grid--list .mm-card__cart { margin-top: 14px; align-self: flex-start; padding-left: 26px; padding-right: 26px; }

.mm-card__brand {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-ink-3);
  margin-bottom: 5px;
}
.mm-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--mm-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* -------------------------------------------------------- pagination ----- */
/* One pager, under the results. The numbered list that used to sit here as
   well said the same thing twice, in two different shapes. */
.mm-cat__pagerbar {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.mm-cat__pagerbar:not(:empty) {
  padding-top: 20px;
  border-top: 1px solid var(--mm-line);
}

.mm-cat__empty { padding: 48px 0; text-align: center; }
.mm-cat__empty p { margin: 0 0 20px; font-size: 15px; color: var(--mm-ink-2); }

/* ----------------------------------------------------- sidebar catnav ---- */
.mm-catnav { border: 1px solid var(--mm-line); border-radius: 8px; overflow: hidden; }
.mm-catnav__title {
  margin: 0;
  padding: 13px 16px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mm-catnav__list, .mm-catnav__sub { list-style: none; margin: 0; padding: 0; }
.mm-catnav__item + .mm-catnav__item { border-top: 1px solid var(--mm-line); }
.mm-catnav__link {
  display: block;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--mm-ink-2);
}
.mm-catnav__link:hover { background: var(--mm-soft); color: var(--mm-ink); }
.mm-catnav__link.is-active { color: var(--mm-red); font-weight: 700; }
.mm-catnav__item.is-open > .mm-catnav__link { color: var(--mm-ink); font-weight: 700; }
.mm-catnav__sub { background: var(--mm-soft); border-top: 1px solid var(--mm-line); }
.mm-catnav__sub .mm-catnav__link { padding-left: 28px; font-size: 13px; }
.mm-catnav__sub .mm-catnav__sub .mm-catnav__link { padding-left: 42px; font-size: 12.5px; }

@media (max-width: 980px) {
  .mm-cathero { height: 410px; }
  .mm-cat__layout,
  .mm-cat__layout.has-left,
  .mm-cat__layout.has-right,
  .mm-cat__layout.has-left.has-right { grid-template-columns: minmax(0, 1fr); }
  .mm-cat__side { order: 2; }
  .mm-cat__main { order: 1; }
}

@media (max-width: 760px) {
  .mm-cat { padding: 20px 0 40px; }
  .mm-cathero { height: 400px; padding: 22px 0 76px; }
  .mm-cathero__title { font-size: 30px; }
  /* The narrow column takes about 46 characters a line against 76 on desktop,
     so the same house-standard copy needs five lines here to survive intact. */
  .mm-cathero__lead { font-size: 14px; -webkit-line-clamp: 5; line-clamp: 5; }
  .mm-refine { margin-top: -52px; padding: 18px 16px 20px; }
  .mm-refine__row { gap: 12px; }
  .mm-refine__item { flex-basis: 88px; }
  .mm-refine__img { width: 68px; height: 68px; }
  .mm-refine__nav { top: 34px; }
  .mm-cat__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .mm-cat__controls { width: 100%; }
  .mm-cat__control { flex: 1 1 auto; }
  .mm-cat__control select { flex: 1 1 auto; max-width: none; }
  .mm-cat__grid--list .mm-card__imgwrap { flex-basis: 120px; width: 120px; }

}

/* The single-column layout starts at 980px, so the sidebar is stranded below
   the grid from here down — not only on phones. The sheet has to cover the
   same range, and with it the button that opens it. */
@media (max-width: 980px) {
  /* Filtering and sorting only. The view toggle goes: two columns of cards is
     the only sensible layout on a phone, and the button was competing for the
     space filtering actually needs. */
  .mm-cat__toolbar {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "filters sort";
    gap: 12px;
  }
  .mm-cat__view-btn { display: none; }
  .mm-cat__filters-btn { grid-area: filters; }
  .mm-cat__control--sort { grid-area: sort; justify-self: end; justify-content: flex-end; min-width: 0; }
  /* A bare select reading "Default" says nothing about what it sorts, so the
     label stays; it is the pager that moved rather than the wording. */
  .mm-cat__control--sort > span { font-size: 12px; }
  .mm-cat__control--sort select { min-height: 44px; min-width: 0; }

  .mm-cat__filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--mm-line);
    border-radius: 6px;
    background: #fff;
    color: var(--mm-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  /* The sidebar itself becomes the sheet — same markup, same modules, lifted
     over the page instead of stranded 11 screens below it. */
  .mm-cat__side--left {
    position: fixed;
    left: 0;
    right: 0;
    /* Stops above the bottom bar rather than under it — the bar sits at z-index
       70, so a sheet flush to the floor had its own Show results button covered
       by it and the tap went to the bar instead. */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 69;
    max-height: 74vh;
    margin: 0;
    padding: 0 14px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -18px 50px -18px rgba(15, 20, 28, .5);
    /* Clear the bar as well as the sheet's own height, or the closed sheet
       still occupies the strip behind the bar. */
    transform: translateY(calc(100% + 56px + env(safe-area-inset-bottom, 0px)));
    transition: transform .24s ease;
  }
  .mm-filters-open .mm-cat__side--left { transform: translateY(0); }

  .mm-sheet__bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -14px 14px;
    padding: 14px;
    background: #fff;
    border-bottom: 1px solid var(--mm-line);
  }
  .mm-sheet__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mm-ink);
  }
  .mm-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    border: 0;
    background: none;
    color: var(--mm-ink-2);
    cursor: pointer;
  }
  .mm-sheet__foot {
    position: sticky;
    bottom: 0;
    display: block;
    margin: 16px -14px -14px;
    padding: 12px 14px;
    background: #fff;
    border-top: 1px solid var(--mm-line);
  }
  .mm-sheet__done { width: 100%; justify-content: center; min-height: 48px; }

  .mm-sheet__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 68;
    background: rgba(12, 14, 18, .5);
  }
  .mm-sheet__scrim[hidden] { display: none; }
}

/* ==========================================================================
   Account hub (account/account)
   --------------------------------------------------------------------------
   Was the default theme's markup: a stack of narrow boxes down the left of an
   empty page, with the journal3 sidebar repeating the same links underneath.
   One grid of cards instead, grouped the way the controller groups them.
   ========================================================================== */
.mm-account { padding: 30px 0 60px; }

.mm-account__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--mm-line);
}

.mm-account__title {
  margin: 0 0 6px;
  font-family: var(--mm-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mm-ink);
}

.mm-account__lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mm-ink-2); }
.mm-account__logout { flex: none; }

.mm-account__group { margin-bottom: 38px; }
.mm-account__group:last-child { margin-bottom: 0; }

.mm-account__grouptitle {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-ink-3);
}

.mm-account__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
}

.mm-account__card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 18px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-bg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mm-account__card:hover {
  border-color: var(--mm-ink-3);
  box-shadow: 0 10px 24px -18px rgba(15, 20, 28, .55);
  transform: translateY(-1px);
}

.mm-account__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mm-soft);
  color: var(--mm-ink);
  transition: background .15s ease, color .15s ease;
}
.mm-account__ico svg { width: 20px; height: 20px; }
.mm-account__card:hover .mm-account__ico { background: var(--mm-dark); color: #fff; }

/* min-width:0 or a long description stretches the card past its grid track. */
.mm-account__cardtext { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }

.mm-account__cardtitle { font-size: 15px; font-weight: 700; color: var(--mm-ink); }
.mm-account__cardsub {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mm-ink-2);
}

.mm-account__go { flex: none; color: var(--mm-ink-3); transition: transform .15s ease, color .15s ease; }
.mm-account__card:hover .mm-account__go { color: var(--mm-ink); transform: translateX(3px); }

@media (max-width: 600px) {
  .mm-account { padding: 22px 0 44px; }
  .mm-account__title { font-size: 30px; }
  .mm-account__head { margin-bottom: 26px; padding-bottom: 18px; }
  /* One column: two 288px tracks do not fit, and auto-fill would give one
     anyway — this only spares the minmax a needless recalculation. */
  .mm-account__grid { grid-template-columns: minmax(0, 1fr); }
  .mm-account__logout { width: 100%; text-align: center; }
}

/* ==========================================================================
   Your details (account/details)
   --------------------------------------------------------------------------
   Contact, password, newsletter and the address book, which were four pages.
   Each panel saves on its own, so each carries its own footer and its own
   confirmation rather than one Save at the bottom of everything.
   ========================================================================== */
.mm-details { padding: 30px 0 60px; }

.mm-panel {
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-bg);
  margin-bottom: 20px;
}
.mm-panel:last-child { margin-bottom: 0; }

.mm-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mm-line);
}

.mm-panel__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--mm-ink); }
.mm-panel__sub { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--mm-ink-2); }
.mm-panel__body { padding: 22px; }

.mm-panel__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* The warning takes the free space so it reads from the left while the buttons
   stay on the right. */
.mm-form__warning { flex: 1 1 auto; margin-top: 0; text-align: left; }
.mm-form__saved { font-size: 13px; font-weight: 600; color: var(--mm-ok); }
.mm-form__saved[hidden] { display: none; }

.mm-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 18px;
}

.mm-input.is-invalid { border-color: var(--mm-red); }

.mm-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mm-ink); cursor: pointer; }
.mm-check input { width: 16px; height: 16px; accent-color: var(--mm-red); }

/* ----- the newsletter switch ----- */
.mm-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; }
.mm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mm-switch__track {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--mm-line);
  transition: background .18s ease;
}
.mm-switch__dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 20, 28, .35);
  transition: transform .18s ease;
}
.mm-switch input:checked + .mm-switch__track { background: var(--mm-ok); }
.mm-switch input:checked + .mm-switch__track .mm-switch__dot { transform: translateX(20px); }
.mm-switch input:focus-visible + .mm-switch__track { outline: 2px solid var(--mm-ink); outline-offset: 2px; }
.mm-switch__label { font-size: 13.5px; font-weight: 600; color: var(--mm-ink); }

/* ----- address book ----- */
.mm-addr__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.mm-addr__empty { margin: 0; font-size: 14px; color: var(--mm-ink-2); }

.mm-addr {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
}
.mm-addr__who { font-size: 14.5px; font-weight: 700; color: var(--mm-ink); }
.mm-addr__tag {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mm-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink-2);
}
.mm-addr__lines { margin: 6px 0 12px; font-size: 13px; line-height: 1.55; color: var(--mm-ink-2); }
.mm-addr__acts { margin-top: auto; display: flex; gap: 14px; }
.mm-addr__act {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink);
  cursor: pointer;
}
.mm-addr__act:hover { color: var(--mm-red); }
.mm-addr__act--danger { color: var(--mm-ink-3); }
.mm-addr__act--danger:hover { color: var(--mm-red); }

.mm-addr__form {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--mm-line);
}
.mm-addr__form[hidden] { display: none; }
.mm-addr__formtitle { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--mm-ink); }

@media (max-width: 600px) {
  .mm-details { padding: 22px 0 44px; }
  .mm-panel__head { padding: 16px; }
  .mm-panel__body { padding: 16px; }
  .mm-form__grid { grid-template-columns: minmax(0, 1fr); }
  .mm-addr__list { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the footer reads top to bottom: message, confirmation, then the
     button across the full width where a thumb expects it. */
  .mm-panel__foot { flex-direction: column; align-items: stretch; }
  .mm-panel__foot .mm-btn { width: 100%; text-align: center; }
  .mm-form__warning { text-align: center; }
  .mm-form__saved { text-align: center; }
}

/* ==========================================================================
   Account records (orders, returns, downloads, points, transactions, ...)
   --------------------------------------------------------------------------
   These pages are all the same shape: a heading, a table of rows, a pager. One
   set of classes for the lot rather than eight near-copies, and the table turns
   into stacked cards on a phone through data-label rather than a second markup.
   ========================================================================== */
.mm-acct { padding: 30px 0 60px; }

.mm-acct__panel {
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-bg);
  overflow: hidden;
}

.mm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mm-table th {
  padding: 13px 16px;
  border-bottom: 1px solid var(--mm-line);
  background: var(--mm-soft);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-2);
  text-align: left;
  white-space: nowrap;
}
.mm-table td { padding: 15px 16px; border-bottom: 1px solid var(--mm-line); vertical-align: top; color: var(--mm-ink); }
.mm-table tr:last-child td { border-bottom: 0; }
.mm-table tbody tr:hover td { background: #fbfbfc; }
.mm-table .is-right { text-align: right; }
.mm-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-table__main { font-weight: 600; }
.mm-table__sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mm-ink-2); }

/* Status pill. Neutral on purpose: an order status is free text from the shop's
   own status table — "HUMM in progess", "Stock problem" — and a colour would
   mean guessing which of those is good news. */
.mm-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mm-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--mm-ink-2);
  white-space: nowrap;
}

.mm-acct__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* The wish list is the one record page with a picture in it. */
.mm-wish__cell { width: 78px; }
.mm-wish__thumb { display: block; width: 62px; }
.mm-wish__thumb img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* A column of radio choices — return reasons, opened yes/no. */
.mm-radios { display: flex; flex-direction: column; gap: 9px; }
.mm-return__captcha { margin-top: 10px; }
.mm-return__captcha img { display: block; border: 1px solid var(--mm-line); border-radius: 6px; }

/* Empty state, shared by every one of these pages. */
.mm-empty { padding: 54px 24px; text-align: center; }
.mm-empty__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--mm-soft);
  color: var(--mm-ink-3);
}
.mm-empty__ico svg { width: 25px; height: 25px; }
.mm-empty p { margin: 0 0 18px; font-size: 14.5px; color: var(--mm-ink-2); }

/* The pager comes from the Pagination library as .links and .results. */
.mm-acct__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13px;
  color: var(--mm-ink-2);
}
.mm-acct__pager .links { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-acct__pager .links a,
.mm-acct__pager .links b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mm-ink);
}
.mm-acct__pager .links b { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }
.mm-acct__pager .links a:hover { border-color: var(--mm-ink); }
.mm-acct__pager .results { order: -1; }

/* ----- record detail (an order, a return, a subscription) ----- */
.mm-rec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--mm-line);
}
.mm-rec__cell { padding: 18px 20px; border-right: 1px solid var(--mm-line); }
.mm-rec__cell:last-child { border-right: 0; }
.mm-rec__label {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-3);
}
.mm-rec__value { font-size: 14px; line-height: 1.6; color: var(--mm-ink); }
.mm-rec__section { padding: 20px; border-bottom: 1px solid var(--mm-line); }
.mm-rec__section:last-child { border-bottom: 0; }
.mm-rec__sectiontitle { margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink); }

@media (max-width: 760px) {
  .mm-acct { padding: 22px 0 44px; }

  /* The table becomes a stack of cards. Each cell keeps its column name from
     the data-label the template writes, so there is one markup, not two. */
  .mm-table thead { display: none; }
  .mm-table, .mm-table tbody, .mm-table tr, .mm-table td { display: block; width: auto; }
  .mm-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mm-line);
  }
  .mm-table tr:last-child { border-bottom: 0; }
  .mm-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }
  .mm-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mm-ink-3);
    text-align: left;
  }
  /* A cell with nothing to label — the actions — spans the row instead. */
  .mm-table td[data-label=""]::before { content: none; }
  .mm-table td[data-label=""] { justify-content: flex-end; padding-top: 10px; }
  /* The thumbnail is the row's own picture, not a value against a label. */
  .mm-table td.mm-wish__cell { width: auto; justify-content: flex-start; padding-bottom: 8px; }
  /* In a totals row the title cell is the label, and the value cell already
     carries it as data-label — stacked, that printed "Sub-Total" twice. */
  .mm-table tfoot td[data-label=""] { display: none; }
  .mm-table tbody tr:hover td { background: none; }

  .mm-rec__cell { border-right: 0; border-bottom: 1px solid var(--mm-line); }
  .mm-rec__cell:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Content pages (information/information, contact, sitemap)
   --------------------------------------------------------------------------
   Terms, Privacy, Delivery and the rest were rendering with no container at
   all: text ran from one edge of the window to the other, which at 1440px is
   a 200-character line and unreadable. The body is held to a measure and the
   page is centred, which is what the shop asked for.
   ========================================================================== */
.mm-page { padding: 34px 0 64px; }

.mm-page__body { max-width: 78ch; margin: 0 auto; }

.mm-page__title {
  margin: 0 0 26px;
  font-family: var(--mm-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.12;
  color: var(--mm-ink);
}

.mm-page__meta { margin: -18px 0 26px; font-size: 13px; color: var(--mm-ink-3); }

/* The body of these pages is editor HTML from the admin, so it is styled by
   element rather than by class — there are no classes to hook onto, and the
   people writing it should not have to learn any. */
.mm-prose { font-size: 15.5px; line-height: 1.75; color: var(--mm-ink-2); }
.mm-prose > *:first-child { margin-top: 0; }
.mm-prose > *:last-child { margin-bottom: 0; }
.mm-prose p { margin: 0 0 18px; }
.mm-prose h1, .mm-prose h2, .mm-prose h3, .mm-prose h4 {
  margin: 34px 0 12px;
  font-family: var(--mm-font);
  font-weight: 700;
  line-height: 1.3;
  color: var(--mm-ink);
}
.mm-prose h1, .mm-prose h2 { font-size: 20px; }
.mm-prose h3 { font-size: 17px; }
.mm-prose h4 { font-size: 15.5px; }
.mm-prose ul, .mm-prose ol { margin: 0 0 18px; padding-left: 22px; }
.mm-prose li { margin-bottom: 7px; }
.mm-prose a { color: var(--mm-red); text-decoration: underline; text-underline-offset: 2px; }
.mm-prose a:hover { color: var(--mm-ink); }
.mm-prose strong, .mm-prose b { color: var(--mm-ink); font-weight: 700; }
.mm-prose hr { margin: 28px 0; border: 0; border-top: 1px solid var(--mm-line); }
.mm-prose blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--mm-line);
  color: var(--mm-ink-2);
}
/* Editor content carries its own widths and inline styles; these stop a wide
   image or a pasted table pushing the page sideways. */
.mm-prose img { max-width: 100%; height: auto; border-radius: 6px; }
.mm-prose iframe { max-width: 100%; }
.mm-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.mm-prose th, .mm-prose td { padding: 10px 12px; border: 1px solid var(--mm-line); text-align: left; }
.mm-prose th { background: var(--mm-soft); font-weight: 700; color: var(--mm-ink); }
.mm-prose__wide { overflow-x: auto; }

/* .mm-prose assumes a light ground. On the category hero the same admin HTML
   sits on a photograph, so the colours invert while the link affordance —
   colour plus underline — is kept.
   This has to follow every .mm-prose rule above. The variant carries no extra
   specificity, so placed earlier it simply loses to the later .mm-prose block,
   which is how the hero description ended up dark grey on a dark picture. */
.mm-prose--invert { color: rgba(255, 255, 255, .92); }
.mm-prose--invert strong, .mm-prose--invert b, .mm-prose--invert h1,
.mm-prose--invert h2, .mm-prose--invert h3, .mm-prose--invert h4 { color: #fff; }
.mm-prose--invert a { color: #fff; text-decoration-color: rgba(255, 255, 255, .65); }
.mm-prose--invert a:hover { color: #fff; text-decoration-color: #fff; }
.mm-prose--invert a:focus-visible { outline-color: #fff; }
.mm-prose--invert blockquote { border-left-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .82); }

/* ----- sitemap ----- */
.mm-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px 40px;
  align-items: start;
}
.mm-sitemap__title {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-ink-3);
}
.mm-sitemap__title + .mm-sitemap__list { margin-bottom: 30px; }
.mm-sitemap__list { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.mm-sitemap__list > li { margin-bottom: 9px; }
.mm-sitemap__list a { color: var(--mm-ink); }
.mm-sitemap__list a:hover { color: var(--mm-red); }
.mm-sitemap__sub { list-style: none; margin: 7px 0 14px; padding-left: 14px; border-left: 1px solid var(--mm-line); }
.mm-sitemap__sub li { margin-bottom: 6px; font-size: 13.5px; }
.mm-sitemap__sub a { color: var(--mm-ink-2); }

/* ----- done: one confirmation for the contact form, sign-out, an order,
   a return. It used to be the default theme's page, edge to edge. ----- */
.mm-done { max-width: 620px; margin: 0 auto; padding: 52px 30px 46px; text-align: center; }
.mm-done__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(31, 157, 77, .12);
  color: var(--mm-ok);
}
.mm-done__ico svg { width: 28px; height: 28px; }
.mm-done__title { margin: 0 0 12px; font-family: var(--mm-serif); font-size: 30px; font-weight: 500; }
.mm-done__text { margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--mm-ink-2); }
.mm-done__text p { margin: 0 0 10px; }
.mm-done__text p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .mm-done { padding: 40px 20px 36px; }
  .mm-done__title { font-size: 25px; }
}

/* ----- account banner, on every page behind the sign-in ----- */
.mm-acchero {
  position: relative;
  background: var(--mm-dark) center / cover no-repeat;
  color: #fff;
}
/* Legible over any photograph, and still a banner without one. */
.mm-acchero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Heavy where the name sits and light at the far end, so whatever is in the
     photograph gets to be seen. The sign-out button carries its own border and
     does not need the backdrop darkened for it. */
  background: linear-gradient(90deg, rgba(15, 18, 24, .9) 0%, rgba(15, 18, 24, .66) 45%, rgba(15, 18, 24, .34) 100%);
}
.mm-acchero--plain::before { background: rgba(15, 18, 24, .3); }

.mm-acchero__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 190px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.mm-acchero__text { flex: 1 1 auto; min-width: 0; }

.mm-acchero__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .72);
}

/* The shop asked for the name larger, so it carries the banner rather than
   sitting under a heading that repeats it. */
.mm-acchero__name {
  margin: 0 0 10px;
  font-family: var(--mm-serif);
  font-size: 54px;
  font-weight: 500;
  line-height: 1;
}

.mm-acchero__lead {
  margin: 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
}

.mm-acchero__out {
  flex: none;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}
.mm-acchero__out:hover { background: #fff; color: var(--mm-ink); border-color: #fff; }

@media (max-width: 900px) {
  .mm-acchero__name { font-size: 42px; }
}

@media (max-width: 600px) {
  .mm-acchero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .mm-acchero__name { font-size: 34px; }
  .mm-acchero__lead { font-size: 14.5px; }
  .mm-acchero__out { align-self: stretch; text-align: center; }
}

/* ----- suggestions under the header search box ----- */
.mm-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px -16px rgba(15, 20, 28, .38);
}
.mm-suggest[hidden] { display: none; }

.mm-suggest__group { padding: 4px 0; }
.mm-suggest__group + .mm-suggest__group { border-top: 1px solid var(--mm-line); margin-top: 4px; }

.mm-suggest__label {
  display: block;
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mm-ink-3);
}

.mm-suggest__cat,
.mm-suggest__item,
.mm-suggest__brand,
.mm-suggest__all {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--mm-ink);
}
.mm-suggest__cat:hover, .mm-suggest__cat.is-active,
.mm-suggest__item:hover, .mm-suggest__item.is-active,
.mm-suggest__brand:hover, .mm-suggest__brand.is-active,
.mm-suggest__all:hover, .mm-suggest__all.is-active { background: var(--mm-soft); }

/* A brand is a destination, not a product, so it reads as one: the logo where
   the product photo goes, and what clicking it does spelled out on the right. */
.mm-suggest__brand img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.mm-suggest__brandmark {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--mm-soft);
}
.mm-suggest__brand .mm-suggest__name { font-weight: 600; }
.mm-suggest__go {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-red);
}

.mm-suggest__item img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.mm-suggest__name { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.mm-suggest__price { flex: none; font-weight: 600; white-space: nowrap; }

.mm-suggest__all { justify-content: center; font-weight: 600; color: var(--mm-red); }
.mm-suggest__empty { margin: 0; padding: 14px 10px; font-size: 14px; color: var(--mm-ink-2); text-align: center; }

@media (max-width: 760px) {
  /* The box is narrow up here, so the panel takes the width of the header
     rather than of the field it hangs from. */
  .mm-suggest { left: auto; right: 0; width: min(92vw, 420px); }
  .mm-suggest__item img { width: 34px; height: 34px; }
}

/* ----- contact ----- */
.mm-contact { padding: 34px 0 64px; }
.mm-contact__head { max-width: 62ch; margin-bottom: 26px; }
.mm-contact__lead { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--mm-ink-2); }

/* Map and store card side by side, the map taking the room. */
.mm-contact__top {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}

.mm-contact__map {
  min-height: 380px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--mm-soft);
}
.mm-contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.mm-contact__card {
  display: flex;
  flex-direction: column;
  padding: 26px 28px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-soft);
}

.mm-contact__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mm-ink-3);
}
.mm-contact__eyebrow--sm { margin-bottom: 4px; letter-spacing: .06em; }

.mm-contact__cardtitle {
  margin: 0 0 22px;
  font-family: var(--mm-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--mm-ink);
}

.mm-contact__facts { list-style: none; margin: 0; padding: 0; }
.mm-contact__facts li,
.mm-contact__hours { display: flex; gap: 14px; padding: 13px 0; }
.mm-contact__facts li { border-bottom: 1px solid var(--mm-line); }
.mm-contact__facts svg,
.mm-contact__hours svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--mm-ink); }

.mm-contact__value { display: flex; flex-direction: column; min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--mm-ink); }
.mm-contact__value strong { font-weight: 600; }
.mm-contact__sub { margin-top: 2px; font-size: 13.5px; color: var(--mm-ink-2); }
.mm-contact__value a { color: var(--mm-ink); }
.mm-contact__value a:hover { color: var(--mm-red); }

.mm-contact__hours { padding-bottom: 22px; }

/* Pinned to the foot of the card so it lines up whatever the address runs to. */
.mm-contact__directions { margin-top: auto; align-self: flex-start; gap: 10px; }

/* ----- the message panel ----- */
.mm-contact__panel {
  padding: 30px 32px 34px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: var(--mm-soft);
}
.mm-contact__blurb { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--mm-ink-2); }
.mm-contact__panel .mm-input { background: #fff; }
.mm-contact__send { gap: 10px; margin-top: 4px; }

/* The asterisk the design puts beside a required label. */
.mm-field__req { color: var(--mm-red); }

@media (max-width: 900px) {
  .mm-contact__top { grid-template-columns: minmax(0, 1fr); }
  .mm-contact__map { min-height: 300px; }
  .mm-contact__directions { align-self: stretch; justify-content: center; }
}

@media (max-width: 600px) {
  .mm-page { padding: 24px 0 46px; }
  .mm-page__title { font-size: 30px; margin-bottom: 20px; }
  .mm-prose { font-size: 15px; }
  .mm-contact { padding: 24px 0 46px; }
  .mm-contact__map { min-height: 240px; }
  .mm-contact__card { padding: 22px; }
  .mm-contact__panel { padding: 22px 20px 26px; }
  .mm-contact__cardtitle { font-size: 25px; }
  .mm-contact__send { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Alerts (shared)
   ========================================================================== */
.mm-alert {
  padding: 13px 16px;
  border: 1px solid var(--mm-line);
  border-left-width: 4px;
  border-radius: 5px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--mm-ink);
}
.mm-alert a { color: var(--mm-red); text-decoration: underline; }
.mm-alert--error { border-left-color: var(--mm-red); background: #fdf3f3; }
.mm-alert--ok { border-left-color: var(--mm-ok); background: #f2faf5; }
.mm-alert--info { border-left-color: var(--mm-ink-2); background: var(--mm-soft); }

/* ==========================================================================
   Cart page
   ========================================================================== */
.mm-cart { padding: 28px 0 56px; }
.mm-cart__title { margin: 0 0 20px; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }

.mm-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.mm-cart__items { min-width: 0; }

/* ------------------------------------------------------------- table ----- */
.mm-cart__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mm-cart__table thead th {
  padding: 11px 12px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
}
.mm-cart__table thead th:first-child { border-radius: 6px 0 0 0; }
.mm-cart__table thead th:last-child { border-radius: 0 6px 0 0; }
.mm-cart__table thead th.mm-cart__c-name { text-align: left; }
.mm-cart__table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--mm-line);
  text-align: center;
  vertical-align: middle;
}
.mm-cart__table tbody td.mm-cart__c-name { text-align: left; }
.mm-cart__c-img { width: 100px; }
.mm-cart__c-img img { width: 78px; height: 78px; object-fit: contain; mix-blend-mode: multiply; }
.mm-cart__name { font-weight: 600; color: var(--mm-ink); }
.mm-cart__name:hover { color: var(--mm-red); }
.mm-cart__oos { margin-left: 5px; color: var(--mm-red); font-weight: 700; }
.mm-cart__opts { list-style: none; margin: 5px 0 0; padding: 0; font-size: 12.5px; color: var(--mm-ink-2); }
.mm-cart__reward { margin-top: 4px; font-size: 12px; color: var(--mm-ink-3); }
.mm-cart__bundle { margin-top: 5px; font-size: 12px; }
.mm-cart__bundle-was { color: var(--mm-ink-3); text-decoration: line-through; margin-right: 6px; }
.mm-cart__bundle-save { color: var(--mm-red); font-weight: 700; }
.mm-cart__c-model, .mm-cart__c-avail { color: var(--mm-ink-2); font-size: 13px; }
.mm-cart__c-price { white-space: nowrap; }
.mm-cart__c-total { white-space: nowrap; font-weight: 700; }

.mm-cart__qty { display: inline-flex; align-items: center; gap: 6px; }
.mm-cart__qty .mm-qty__btn { width: 30px; }
.mm-cart__qty .mm-qty__input { width: 44px; }
.mm-cart__qty-fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  color: var(--mm-ink-2);
}
.mm-cart__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  background: #fff;
  color: var(--mm-ink-2);
  cursor: pointer;
}
.mm-cart__icon-btn:hover { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }
.mm-cart__icon-btn--danger:hover { background: var(--mm-red); border-color: var(--mm-red); }

/* -------------------------------------------------------- side panel ----- */
.mm-cart__side {
  padding: 22px;
  background: var(--mm-soft);
  border: 1px solid var(--mm-line);
  border-radius: 8px;
}
.mm-cart__side-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink);
}
.mm-cart__continue { width: 100%; justify-content: center; gap: 8px; }
.mm-cart__side-intro { margin: 14px 0 16px; font-size: 13px; line-height: 1.6; color: var(--mm-ink-2); }

.mm-acc { border: 1px solid var(--mm-line); border-radius: 6px; background: #fff; margin-bottom: 8px; }
.mm-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-ink);
}
.mm-acc__head::-webkit-details-marker { display: none; }
.mm-acc__head::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  margin-left: 10px;
  border-right: 2px solid var(--mm-ink-3);
  border-bottom: 2px solid var(--mm-ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.mm-acc[open] > .mm-acc__head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mm-acc[open] > .mm-acc__head { border-bottom: 1px solid var(--mm-line); }
.mm-acc__body { padding: 14px; }
.mm-acc__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink-3);
}
.mm-acc__label + .mm-input, .mm-acc__body select.mm-input { margin-bottom: 12px; }
.mm-acc__hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--mm-ink-2); }
.mm-acc__row { display: flex; gap: 8px; }
.mm-acc__row .mm-btn { flex: none; }
.mm-acc__row--split { margin-top: 12px; }
.mm-acc__row--split .mm-btn { flex: 1 1 0; justify-content: center; }
.mm-acc__submit { width: 100%; justify-content: center; }

.mm-cart__totals { width: 100%; border-collapse: collapse; margin: 18px 0 16px; font-size: 14px; }
.mm-cart__totals th, .mm-cart__totals td { padding: 8px 0; text-align: right; font-weight: 400; color: var(--mm-ink-2); }
.mm-cart__totals th { text-align: left; }
.mm-cart__totals tr.is-grand th, .mm-cart__totals tr.is-grand td {
  padding-top: 12px;
  border-top: 1px solid var(--mm-line);
  font-size: 18px;
  font-weight: 700;
  color: var(--mm-ink);
}
.mm-cart__checkout { width: 100%; justify-content: center; gap: 9px; padding: 14px 22px; font-size: 14px; }
.mm-cart__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid rgba(208, 30, 36, .3);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mm-red);
}
.mm-cart__clear:hover { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }

/* ============================================================== modal ===== */
body.mm-modal-open { overflow: hidden; }
.mm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mm-modal[hidden] { display: none; }
.mm-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 28, .55); }
.mm-modal__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 60px -20px rgba(15, 20, 28, .5);
}
.mm-modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--mm-line); }
.mm-modal__head h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.mm-modal__close { margin-left: auto; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--mm-ink-3); cursor: pointer; }
.mm-modal__close:hover { color: var(--mm-ink); }
.mm-modal__body { padding: 18px 20px; overflow-y: auto; }
.mm-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--mm-line); }

.mm-shipmethod + .mm-shipmethod { margin-top: 18px; }
.mm-shipmethod h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-ink-3); }
.mm-shipmethod__error { margin: 0; font-size: 13px; color: var(--mm-red); }
.mm-shipmethod__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--mm-line);
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
}
.mm-shipmethod__opt + .mm-shipmethod__opt { margin-top: 8px; }
.mm-shipmethod__opt:hover { border-color: var(--mm-ink-2); }
.mm-shipmethod__opt span { flex: 1 1 auto; }
.mm-shipmethod__opt b { font-weight: 700; }

/* =========================================================== not found === */
.mm-notfound { padding: 60px 0 80px; }
.mm-notfound__title { margin: 0 0 12px; font-size: 28px; font-weight: 700; }
.mm-notfound__text { margin: 0 0 24px; font-size: 15px; color: var(--mm-ink-2); }

@media (max-width: 1100px) {
  .mm-cart__layout { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 900px) {
  .mm-cart__layout { grid-template-columns: minmax(0, 1fr); }

  .mm-cart__table thead { display: none; }
  .mm-cart__table, .mm-cart__table tbody, .mm-cart__table tr, .mm-cart__table td { display: block; width: auto; }
  .mm-cart__table tr {
    position: relative;
    padding: 14px 14px 14px 108px;
    min-height: 108px;
    border: 1px solid var(--mm-line);
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .mm-cart__table tbody td { padding: 3px 0; border: 0; text-align: left; }
  .mm-cart__table tbody td.mm-cart__c-img { position: absolute; top: 14px; left: 14px; padding: 0; }
  .mm-cart__c-img img { width: 80px; height: 80px; }
  .mm-cart__table tbody td:empty { display: none; }
  .mm-cart__table tbody td[data-label]:not(.mm-cart__c-name)::before {
    content: attr(data-label) ": ";
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mm-ink-3);
  }
  .mm-cart__c-qty { padding-top: 8px !important; }
}

@media (max-width: 760px) {
  .mm-cart { padding: 20px 0 40px; }
  .mm-cart__title { font-size: 23px; }
}

/* ------------------------------------------- cart: live quantity saving -- */
/* The submit button is the no-JS fallback; the script hides it once it runs. */
.mm-cart__items.is-live .mm-cart__update { display: none; }

.mm-cart__spinner {
  width: 16px;
  height: 16px;
  flex: none;
  display: none;
  border: 2px solid var(--mm-line);
  border-top-color: var(--mm-ink-2);
  border-radius: 50%;
  animation: mm-spin .7s linear infinite;
}
.mm-cart__table tr.is-saving .mm-cart__spinner { display: inline-block; }
.mm-cart__table tr.is-saving .mm-cart__c-total { opacity: .45; }

@keyframes mm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mm-cart__spinner { animation-duration: 2s; }
}

/* ==========================================================================
   Blog — index, category and article
   ========================================================================== */
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--mm-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm-ink-2);
  white-space: nowrap;
}
.mm-chip:hover { border-color: var(--mm-ink); color: var(--mm-ink); }
.mm-chip.is-active { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }
.mm-chip span { font-size: 11px; font-weight: 400; opacity: .65; }

/* ------------------------------------------------------------- index ----- */
.mm-bloglist { padding: 28px 0 56px; }
.mm-bloglist__head { margin-bottom: 22px; }
.mm-bloglist__title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.mm-bloglist__intro { margin-top: 12px; }
.mm-bloglist__search { display: flex; gap: 8px; margin-top: 16px; max-width: 480px; }
.mm-bloglist__search .mm-btn { flex: none; }
.mm-bloglist__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.mm-bloglist__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}

/* The home-page strip uses .mm-post as a link; on the index it is a card with
   its own body, so scope the extra structure to the --card modifier. */
.mm-post--card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.mm-post--card:hover { box-shadow: 0 14px 30px -12px rgba(15, 20, 28, .28); transform: translateY(-3px); }
.mm-post--card .mm-post__img {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--mm-soft);
  overflow: hidden;
}
.mm-post--card .mm-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-post__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.mm-post--card .mm-post__cat {
  align-self: flex-start;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-red);
}
.mm-post--card .mm-post__title {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mm-ink);
}
.mm-post--card .mm-post__title:hover { color: var(--mm-red); }
.mm-post__lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mm-ink-2);
}
.mm-post__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--mm-line);
}
.mm-post__date { font-size: 12px; color: var(--mm-ink-3); }
.mm-post--card .mm-post__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink);
}
.mm-post--card .mm-post__more:hover { color: var(--mm-red); }

/* ----------------------------------------------------------- article ----- */
.mm-article { padding: 28px 0 60px; }
.mm-article__head { max-width: 90ch; margin: 0 auto 22px; }
.mm-article__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mm-article__date { font-size: 12.5px; color: var(--mm-ink-3); }
.mm-article__title {
  margin: 0;
  font-family: var(--mm-serif);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--mm-ink);
}
.mm-article__lead { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--mm-ink-2); }

.mm-article__cover { margin: 0 0 30px; border-radius: 10px; overflow: hidden; }
.mm-article__cover img { width: 100%; display: block; }

.mm-article__body { max-width: 90ch; margin: 0 auto; font-size: 16px; }
.mm-article__body img { border-radius: 8px; margin: 18px 0; }
.mm-article__body h2, .mm-article__body h3 { margin: 32px 0 12px; font-weight: 700; }
.mm-article__body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--mm-red);
  font-family: var(--mm-serif);
  font-size: 19px;
  font-style: italic;
  color: var(--mm-ink-2);
}

.mm-article__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 90ch; margin: 34px auto 0; }
.mm-article__tags-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-3);
  margin-right: 4px;
}

.mm-article__back { max-width: 90ch; margin: 30px auto 0; gap: 8px; }
.mm-article__related { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--mm-line); }
.mm-article__related .mm-featured__title { margin-bottom: 20px; }

@media (max-width: 760px) {
  .mm-bloglist { padding: 20px 0 40px; }
  .mm-bloglist__title { font-size: 23px; }
  .mm-bloglist__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mm-bloglist__search { flex-wrap: wrap; }
  .mm-article { padding: 20px 0 40px; }
  .mm-article__title { font-size: 27px; }
  .mm-article__lead { font-size: 15px; }
}

/* ------------------------------------------------------- rating summary -- */
.mm-reviews__main { min-width: 0; }

.mm-rsum {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--mm-line);
}
.mm-rsum__score { text-align: center; }
.mm-rsum__big { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--mm-ink); }
.mm-rsum__of { font-size: 12.5px; color: var(--mm-ink-3); }
.mm-rsum__score .mm-stars { margin-top: 8px; }
.mm-rsum__count { margin-top: 8px; font-size: 12.5px; color: var(--mm-ink-2); }

.mm-rsum__bars { display: flex; flex-direction: column; gap: 5px; }
.mm-rsum__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.mm-rsum__bar:hover:not(.is-empty) { background: var(--mm-soft); }
.mm-rsum__bar.is-active { background: var(--mm-soft); box-shadow: inset 0 0 0 1px var(--mm-line); }
.mm-rsum__bar.is-empty { cursor: default; opacity: .55; }
.mm-rsum__bar:focus-visible { outline: 2px solid var(--mm-red); outline-offset: 1px; }
.mm-rsum__k { width: 38px; flex: none; color: var(--mm-ink-2); font-variant-numeric: tabular-nums; }
.mm-rsum__t { flex: 1 1 auto; height: 8px; background: var(--mm-soft); border-radius: 4px; overflow: hidden; }
.mm-rsum__bar.is-active .mm-rsum__t { background: #fff; }
.mm-rsum__f { display: block; height: 100%; background: #f2a41c; border-radius: 4px; }
.mm-rsum__n { width: 28px; flex: none; text-align: right; color: var(--mm-ink-3); font-variant-numeric: tabular-nums; }

.mm-rsum__all {
  align-self: flex-start;
  margin-top: 6px;
  padding: 0 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-red);
  cursor: pointer;
}
.mm-rsum__all[hidden] { display: none; }
.mm-rsum__all:hover { text-decoration: underline; }

.mm-rsum__empty {
  padding: 30px 26px;
  border: 1px dashed var(--mm-line);
  border-radius: 8px;
  text-align: center;
  margin-bottom: 22px;
}
.mm-rsum__empty-t { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.mm-rsum__empty-s { font-size: 13.5px; color: var(--mm-ink-2); margin-bottom: 18px; }

@media (max-width: 760px) {
  .mm-rsum { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mm-rsum__score { text-align: left; }
}

/* ---------------------------------------------- sidebar: subcategories --- */
/* One level at a time, with a way back up — the module lists the children of
   the category you are on, so the sidebar never becomes a full tree dump. */
.mm-subcat { border: 1px solid var(--mm-line); border-radius: 8px; overflow: hidden; }
.mm-subcat__title {
  margin: 0;
  padding: 13px 16px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mm-subcat__back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--mm-line);
  background: var(--mm-soft);
  font-size: 12.5px;
  color: var(--mm-ink-2);
}
.mm-subcat__back:hover { color: var(--mm-red); }
.mm-subcat__back strong { color: var(--mm-ink); font-weight: 700; }
.mm-subcat__back:hover strong { color: var(--mm-red); }
.mm-subcat__back svg { flex: none; }

.mm-subcat__list { list-style: none; margin: 0; padding: 0; }
.mm-subcat__list li + li { border-top: 1px solid var(--mm-line); }
.mm-subcat__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  color: var(--mm-ink-2);
}
.mm-subcat__link:hover { background: var(--mm-soft); color: var(--mm-ink); }
.mm-subcat__link.is-active { color: var(--mm-red); font-weight: 700; background: var(--mm-soft); }
.mm-subcat__name { min-width: 0; }
.mm-subcat__count {
  flex: none;
  font-size: 12px;
  color: var(--mm-ink-3);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- sidebar: filters ---- */
.mm-filter { border: 1px solid var(--mm-line); border-radius: 8px; overflow: hidden; margin-top: 20px; }
.mm-filter__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mm-filter__clear { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.mm-filter__clear:hover { color: #fff; text-decoration: underline; }

.mm-filter__group { padding: 14px 16px; }
.mm-filter__group + .mm-filter__group { border-top: 1px solid var(--mm-line); }
.mm-filter__label {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-3);
}

.mm-filter__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.mm-filter__opt { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; color: var(--mm-ink-2); }
.mm-filter__opt:hover { color: var(--mm-ink); }
.mm-filter__opt.is-active { color: var(--mm-red); font-weight: 700; }
/* The tick doubles as the state, so the choice reads without relying on colour. */
.mm-filter__box {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--mm-line);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.mm-filter__opt.is-active .mm-filter__box { background: var(--mm-red); border-color: var(--mm-red); color: #fff; }

.mm-filter__range { display: flex; gap: 10px; margin-bottom: 12px; }
.mm-filter__range label { flex: 1 1 0; min-width: 0; }
.mm-filter__range span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-ink-3);
}
.mm-filter__range .mm-input { padding: 8px 10px; font-size: 13px; }
.mm-filter__apply { width: 100%; justify-content: center; }

/* ------------------------------------------------------- compact pager --- */
/* "[3] of 12  >" — typing a page and pressing enter jumps straight there. */
.mm-pager { display: inline-flex; align-items: center; gap: 8px; }
.mm-pager__input {
  width: 52px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mm-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.mm-pager__input::-webkit-outer-spin-button,
.mm-pager__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm-pager__input:focus { outline: none; border-color: var(--mm-ink-2); box-shadow: 0 0 0 3px rgba(29, 36, 48, .06); }
.mm-pager__of { font-size: 13.5px; color: var(--mm-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* An arrow is present only when it leads somewhere: next alone on page one,
   both in between, back alone on the last. Nothing greyed out. */
.mm-pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--mm-line);
  border-radius: 5px;
  background: #fff;
  color: var(--mm-ink);
}
.mm-pager__arrow:hover { background: var(--mm-dark); border-color: var(--mm-dark); color: #fff; }


/* --------------------------------------------- filters: price bands ------ */
.mm-filter__radio {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--mm-line);
  border-radius: 50%;
  background: #fff;
}
.mm-filter__opt.is-active .mm-filter__radio {
  border-color: var(--mm-red);
  border-width: 5px;
}
.mm-filter__opt-name { flex: 1 1 auto; min-width: 0; }
.mm-filter__count { flex: none; font-size: 12px; color: var(--mm-ink-3); font-variant-numeric: tabular-nums; }

.mm-filter__price { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mm-line); }
.mm-filter__hint {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--mm-ink-3);
}
.mm-filter__range { display: flex; align-items: flex-end; gap: 8px; }
.mm-filter__dash { padding-bottom: 9px; color: var(--mm-ink-3); }
.mm-filter__apply { width: 100%; justify-content: center; margin-top: 10px; }
/* ==========================================================================
   Checkout
   ==========================================================================
   Built to the designer's mock-up. The layout, the numbered sections, the
   option cards and the sticky order summary are theirs; the colours, type and
   corner radii are the shop's, because a checkout that looks like a different
   site than the one you shopped on is how people abandon baskets. The mock-up
   asks for 18px corners — the rest of mm is a 4–10px scale, so it is 10px here.

   Every selector below dresses markup the checkout JS already binds to. No id,
   name or handler was changed to make this stylesheet work.
   ========================================================================== */
.mm-co { padding: 8px 0 64px; }

.mm-co__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
}
.mm-co__title {
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 800;
}
.mm-co__lead { margin: 0; color: var(--mm-ink-2); line-height: 1.5; }
.mm-co__secure {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--mm-ink-2);
  font-size: 13px;
  white-space: nowrap;
}
.mm-co__secure svg { color: var(--mm-ok); flex: 0 0 auto; }

.mm-co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .82fr);
  gap: 24px;
  align-items: start;
}
.mm-co__form {
  display: grid;
  gap: 18px;
  counter-reset: mmco;
}

/* ---- section card ------------------------------------------------------- */
.mm-co .checkout-section,
.mm-co__sec {
  padding: 26px 28px;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(28, 28, 30, .035);
}
.mm-co__sec { counter-increment: mmco; }
.mm-co__sec--flat { counter-increment: none; padding: 18px 28px; }

.mm-co__sec-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px;
}
.mm-co__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mm-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mm-co__num::before { content: counter(mmco); }

.mm-co .title.section-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-ink);
}
.mm-co__sec-lead {
  margin: 0;
  color: var(--mm-ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- fields ------------------------------------------------------------- */
.mm-co__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mm-co__full { grid-column: 1 / -1; }
.mm-co__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mm-co .form-group { margin: 0; min-width: 0; }
.mm-co .control-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-ink);
}
.mm-co__opt-tag { color: var(--mm-ink-3); font-weight: 500; }
.mm-co .required > .control-label::after {
  content: "*";
  margin-left: 3px;
  color: var(--mm-red);
  font-weight: 700;
}

.mm-co .form-control {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
  color: var(--mm-ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-co textarea.form-control {
  height: auto;
  min-height: 92px;
  padding: 12px 13px;
  line-height: 1.55;
  resize: vertical;
}
.mm-co .form-control:hover { border-color: var(--mm-ink-3); }
.mm-co .form-control:focus {
  border-color: var(--mm-red);
  box-shadow: 0 0 0 3px rgba(208, 30, 36, .13);
}
.mm-co select.form-control { cursor: pointer; }

.mm-co .error.text-danger {
  margin-top: 6px;
  color: var(--mm-red);
  font-size: 12px;
  font-weight: 600;
}

/* ---- checkboxes --------------------------------------------------------- */
.mm-co__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--mm-ink-2);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.mm-co__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--mm-red);
  cursor: pointer;
}
.mm-co__makeaccount { margin-top: 18px; }
.mm-co__billing { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--mm-line); }
.mm-co__billing .payment-address-fields { margin-top: 18px; }
.mm-co__sublabel {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mm-ink-3);
}

/* ---- sign-in prompt ----------------------------------------------------- */
.mm-co__signin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: var(--mm-soft);
}
.mm-co__signin strong { display: block; margin-bottom: 3px; font-size: 13px; color: var(--mm-ink); }
.mm-co__signin span { color: var(--mm-ink-2); font-size: 12px; }
.mm-co__signin-btn { flex: 0 0 auto; }

.mm-co__loginbox {
  display: grid;
  gap: 14px;
  margin: 0 0 20px;
  padding: 18px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fbfbfc;
}
.mm-co__loginbox-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mm-co__loginbox-foot a { color: var(--mm-ink-2); font-size: 13px; }
.mm-co__loginbox-foot a:hover { color: var(--mm-red); }

.mm-co .mm-btn { padding: 12px 20px; }
.mm-co .mm-btn--sm { padding: 8px 14px; font-size: 12px; }

/* ---- option cards (delivery + payment) ---------------------------------- */
.mm-co__opts { display: grid; gap: 11px; }
.mm-co__opt {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 14px 16px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-co__opt:hover { border-color: var(--mm-ink-3); }
.mm-co__opt.is-picked,
.mm-co__opt:has(input:checked) {
  border-color: var(--mm-dark);
  box-shadow: inset 0 0 0 1px var(--mm-dark);
}
.mm-co__opt input[type="radio"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--mm-dark);
  cursor: pointer;
}
.mm-co__opt-body { flex: 1 1 auto; min-width: 0; }
.mm-co__opt-body strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.mm-co__opt-body small { display: block; margin-top: 3px; color: var(--mm-ink-2); font-size: 12px; }
.mm-co__opt-price {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mm-co__hint {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--mm-line);
  border-radius: 8px;
  background: var(--mm-soft);
  color: var(--mm-ink-2);
  font-size: 13px;
  line-height: 1.5;
}
.mm-co__hint.is-error { border-style: solid; border-color: var(--mm-red); color: var(--mm-red); background: #fff; }
/* A hint that introduces the options — why a delivery option is missing, or
   that there are none — sits directly above them, and with no margin of its
   own it read as the top of the first card. */
.mm-co__hint + .mm-co__opts { margin-top: 18px; }

/* ---- order note --------------------------------------------------------- */
.mm-co__notes-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mm-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.mm-co__notes-tag { color: var(--mm-ink-2); font-size: 13px; font-weight: 500; }
.mm-co__notes-box { margin-top: 16px; }

/* ---- address book ------------------------------------------------------- */
.mm-co .address-book { margin: 0 0 20px; }
.mm-co .address-book-header .section-title { margin-bottom: 10px; font-size: 13px; }
.mm-co .address-book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.mm-co .address-book-row {
  padding: 13px 15px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-co .address-book-row:hover { border-color: var(--mm-ink-3); }
.mm-co .address-book-row.is-selected {
  border-color: var(--mm-dark);
  box-shadow: inset 0 0 0 1px var(--mm-dark);
}
.mm-co .address-book-address small { display: block; color: var(--mm-ink-2); font-size: 12px; }
.mm-co .address-book-new {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mm-ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.mm-co .address-book-new:hover { color: var(--mm-red); }

.mm-co .shipping-address-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.mm-co .shipping-address-message { font-size: 12px; font-weight: 600; }
.mm-co .shipping-address-message.error { color: var(--mm-red); }
.mm-co .shipping-address-message.success { color: var(--mm-ok); }

/* ---- order summary ------------------------------------------------------ */
.mm-co__summary { position: sticky; top: calc(var(--mm-stick) + 16px); min-width: 0; }
.mm-co__summary-inner {
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(28, 28, 30, .035);
  overflow: hidden;
}
.mm-co__summary-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--mm-line); }
.mm-co__summary-head h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mm-co__summary-head p { margin: 0; color: var(--mm-ink-2); font-size: 13px; }

.mm-co__lines { max-height: 340px; overflow-y: auto; }
.mm-co__line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--mm-line);
}
.mm-co__line-img {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: var(--mm-soft);
  overflow: hidden;
}
.mm-co__line-img img { max-width: 100%; max-height: 100%; }
.mm-co__line-copy { min-width: 0; }
.mm-co__line-copy a {
  display: block;
  color: var(--mm-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.mm-co__line-copy a:hover { color: var(--mm-red); }
.mm-co__line-copy span { display: block; margin-top: 4px; color: var(--mm-ink-2); font-size: 12px; }
.mm-co__line-warn { color: var(--mm-red) !important; font-weight: 700; }
.mm-co__line-price {
  align-self: start;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mm-co__totals { width: 100%; border-collapse: collapse; }
/* Recomputing must never collapse this block: the confirm button sits under it,
   and a panel that shrinks mid-click moves the button out from under the
   cursor — the click then lands on the gap and the order is never placed. */
.mm-co__totals.is-busy { opacity: .45; transition: opacity .12s ease; }
.mm-co__totals td { padding: 0; }
.mm-co__total > td { padding: 6px 22px; color: var(--mm-ink-2); font-size: 13px; }
.mm-co__total:first-child > td { padding-top: 18px; }
.mm-co__total-v { text-align: right; color: var(--mm-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-co__total.is-grand > td {
  padding-top: 14px;
  padding-bottom: 18px;
  border-top: 1px solid var(--mm-line);
  color: var(--mm-ink);
}
.mm-co__total.is-grand .mm-co__total-l { font-size: 15px; font-weight: 800; }
.mm-co__total.is-grand .mm-co__total-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

.mm-co__summary-foot { padding: 4px 22px 22px; border-top: 1px solid var(--mm-line); }
.mm-co__terms { margin: 16px 0; }
.mm-co__terms a { color: var(--mm-red); font-weight: 700; }
.mm-co__place {
  display: block;
  width: 100%;
  min-height: 52px;
  text-align: center;
  justify-content: center;
  cursor: pointer;
}
.mm-co__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.mm-co__trust li {
  padding: 8px 4px;
  border-radius: 6px;
  background: var(--mm-soft);
  color: var(--mm-ink-2);
  font-size: 10.5px;
  text-align: center;
}

/* ---- spinner + alerts --------------------------------------------------- */
.mm-co__spinner {
  display: block;
  width: 22px;
  height: 22px;
  margin: 16px auto;
  border: 2px solid var(--mm-line);
  border-top-color: var(--mm-ink-3);
  border-radius: 50%;
  animation: mm-co-spin .7s linear infinite;
}
@keyframes mm-co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-co__spinner { animation-duration: 2.4s; } }

.mm-co .warning {
  margin: 0 0 20px;
  padding: 13px 16px;
  border: 1px solid var(--mm-red);
  border-radius: 8px;
  background: #fdf2f2;
  color: var(--mm-red);
  font-size: 13.5px;
  font-weight: 600;
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .mm-co__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); }
}
@media (max-width: 900px) {
  .mm-co__grid { grid-template-columns: minmax(0, 1fr); }

  /* The summary used to be pulled above the form here, to show the basket
     first. It took the Confirm order button with it: on a phone the button sat
     at 677px and the last field at 3208px, so a guest filled the form in and
     then had to scroll back up most of the page to place the order.

     It reads better after the form in any case. The totals are filled in by
     the shipping step, so above the form they are a spinner, and nobody should
     be asked to confirm an order before the total has been worked out. */
  .mm-co__summary { position: static; }
  .mm-co__lines { max-height: none; }
}
@media (max-width: 620px) {
  .mm-co { padding-bottom: 40px; }
  .mm-co__head { display: block; }
  .mm-co__title { font-size: 30px; }
  .mm-co__secure { margin-top: 14px; white-space: normal; }
  .mm-co .checkout-section,
  .mm-co__sec { padding: 20px 17px; }
  .mm-co__sec--flat { padding: 16px 17px; }
  .mm-co__fields,
  .mm-co__pair { grid-template-columns: minmax(0, 1fr); }
  .mm-co__full { grid-column: auto; }
  .mm-co__signin { display: block; }
  .mm-co__signin-btn { margin-top: 12px; }
  .mm-co__summary-head,
  .mm-co__line,
  .mm-co__summary-foot { padding-left: 17px; padding-right: 17px; }
  .mm-co__total > td { padding-left: 17px; padding-right: 17px; }
  .mm-co__loginbox-foot { display: block; }
  .mm-co__loginbox-foot .mm-btn { margin-top: 12px; width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Confirm — the review step between the checkout form and the payment provider
   --------------------------------------------------------------------------
   Shares the checkout's shell: same head, same two-column grid, same summary
   panel. What is new is the explanation of what happens next, because this is
   the page where the customer is about to be handed to someone else's website
   and ought to know it before it happens.

   The pay control is rendered by whichever payment extension is selected, so
   the button styling here targets what those templates emit rather than a
   class of ours. Nothing about their markup or their handlers is changed.
   -------------------------------------------------------------------------- */
.mm-co__sec--plain { counter-increment: none; }

.mm-cf__sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 20px;
}
.mm-cf__h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-ink);
}
.mm-cf__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef8f2;
  color: #16743a;
  font-size: 12px;
  font-weight: 700;
}
.mm-cf__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-ok);
}

.mm-cf__panel {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: var(--mm-soft);
}
.mm-cf__panel-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
  color: var(--mm-dark);
}
.mm-cf__panel h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.mm-cf__panel p { margin: 0; color: var(--mm-ink-2); font-size: 13px; line-height: 1.6; }

.mm-cf__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.mm-cf__flow li {
  padding: 16px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
}
.mm-cf__flow span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 0 10px;
  border-radius: 50%;
  background: var(--mm-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mm-cf__flow strong { display: block; margin-bottom: 5px; font-size: 13px; }
.mm-cf__flow small { display: block; color: var(--mm-ink-2); font-size: 12px; line-height: 1.45; }

.mm-cf__review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mm-cf__item {
  padding: 16px;
  border: 1px solid var(--mm-line);
  border-radius: 8px;
  background: #fff;
}
.mm-cf__item small {
  display: block;
  margin-bottom: 7px;
  color: var(--mm-ink-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mm-cf__item strong { display: block; font-size: 14px; line-height: 1.45; }
.mm-cf__item > span { display: block; margin-top: 4px; color: var(--mm-ink-2); font-size: 12px; line-height: 1.5; }
.mm-cf__edit {
  display: inline-block;
  margin-top: 9px;
  color: var(--mm-red);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.mm-cf__edit:hover { text-decoration: underline; }

/* ---- the payment extension's own button --------------------------------- */
.mm-cf__pay { margin: 16px 0 0; }
.mm-cf__pay .buttons,
.mm-cf__pay .buttons .right,
.mm-cf__pay .buttons .pull-right,
.mm-cf__pay form { margin: 0; padding: 0; float: none; }
.mm-cf__pay input[type="button"],
.mm-cf__pay input[type="submit"],
.mm-cf__pay button,
.mm-cf__pay a.button {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid var(--mm-red);
  border-radius: 4px;
  background: var(--mm-red);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.mm-cf__pay input[type="button"]:hover:enabled,
.mm-cf__pay input[type="submit"]:hover:enabled,
.mm-cf__pay button:hover:enabled,
.mm-cf__pay a.button:not(.is-disabled):hover { background: #ac171d; border-color: #ac171d; }
.mm-cf__pay input:disabled,
.mm-cf__pay button:disabled,
.mm-cf__pay a.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: auto;
}
.mm-cf__pay .alert,
.mm-cf__pay .alert-danger {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--mm-warn);
  border-radius: 6px;
  background: #fff8ec;
  color: var(--mm-warn);
  font-size: 12.5px;
  line-height: 1.45;
}

.mm-cf__help {
  margin: 11px 0 0;
  color: var(--mm-ink-3);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.mm-co__line--voucher { grid-template-columns: minmax(0, 1fr) auto; }

@media (max-width: 620px) {
  .mm-cf__sec-head { display: block; }
  .mm-cf__badge { margin-top: 12px; }
  .mm-cf__panel { grid-template-columns: minmax(0, 1fr); }
  .mm-cf__flow,
  .mm-cf__review { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Cookie notice (common/footer)
   --------------------------------------------------------------------------
   A card in the corner rather than a bar across the foot of the page. The bar
   version covered the width of the window to say something most people have
   read a hundred times, and on a phone it landed on top of the bottom bar. */
.mm-cookie {
  position: fixed;
  left: 20px;
  bottom: 20px;
  /* Over the page and the header, under the drawers and their scrim: a sheet
     opening should cover the notice, not fight it. Above the toasts' 9999 is
     wrong too — a cart confirmation must not be blocked by this. */
  z-index: 66;
  width: 380px;
  max-width: calc(100vw - 40px);
}

.mm-cookie__card {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: 12px;
  background: var(--mm-dark);
  color: var(--mm-topbar-muted);
  box-shadow: 0 24px 48px -20px rgba(15, 20, 28, .65);
  animation: mm-cookie-in .28s ease both;
}

/* Sliding up from the edge rather than fading in on top of the content: it
   reads as something arriving, not as something that was always there. */
@keyframes mm-cookie-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-cookie__card { animation: none; }
}

.mm-cookie__x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--mm-topbar-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mm-cookie__x:hover { background: #333336; color: #fff; }

.mm-cookie__head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding-right: 28px; }
.mm-cookie__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #3d3d40;
  border-radius: 50%;
  color: var(--mm-topbar-fg);
}
.mm-cookie__ico svg { width: 20px; height: 20px; }
.mm-cookie__title {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mm-cookie__text {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  /* The shop's wording runs to sixty words. It stays whole — it is the text the
     shop stands behind — but it is set small and given room to breathe rather
     than crammed onto two lines of a bar. */
}

.mm-cookie__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mm-cookie__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm-topbar-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mm-cookie__link:hover { color: #fff; }
.mm-cookie__btn {
  flex: none;
  min-height: 44px;
  padding: 11px 26px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--mm-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mm-cookie__btn:hover { background: var(--mm-red); color: #fff; }

.mm-cookie.is-going { opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease; }

/* Clearing the fixed furniture at the foot of the screen is a different
   question from how the card itself is laid out, and the two were sharing one
   breakpoint. The phone bar exists up to 980px, so from there down the notice
   has to sit above it — at 700px it was covering the navigation outright. */
@media (max-width: 980px) {
  .mm-cookie { bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)); }

  /* A product page puts the buy bar between the notice and the navigation, and
     that bar is z-index 900 — above the notice, whatever the notice does. It
     covered the button that dismisses it, which left the card sitting there
     with nothing but the small × to close it. 72px is the height the body's
     own padding-bottom already reserves for that bar. */
  body.mm-has-sticky-buy .mm-cookie {
    bottom: calc(72px + 56px + 12px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 620px) {
  /* Full width at the foot of the screen. */
  .mm-cookie {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .mm-cookie__card { padding: 18px 18px 16px; }
  .mm-cookie__text { margin-bottom: 16px; }
  .mm-cookie__actions { gap: 12px; }
  .mm-cookie__btn { flex: 1 1 auto; }
}

/* The old jQuery banner. It is still injected into the other themes by the
   cookiepolicy vqmod, which the mm theme now opts out of. */
.cc-cookies {
  padding: 16px 20px !important;
  background: rgba(15, 17, 20, .96) !important;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
.cc-cookies a { color: #fff !important; text-decoration: underline !important; }
.cc-cookies a:hover { color: var(--mm-red) !important; }
.cc-cookies .cc-cookie-accept,
.cc-cookies a.cc-cookie-accept {
  display: inline-flex !important;
  align-items: center;
  margin-left: 10px;
  padding: 8px 16px !important;
  border-radius: 5px;
  background: var(--mm-red) !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}

/* The action row follows the order panel, so it brings its own room —
   .mm-acct__actions is otherwise used inside a page header, where the header
   supplies the spacing. */
.mm-payact { margin-top: 24px; }

/* The payment provider's form is rendered by the payment extension, in the
   default theme's markup — one <input type="button"> carrying Bootstrap's
   classes. The retry page is the only place that form stands on its own, so
   the button is dressed here rather than by forking the extension's template,
   which the checkout confirm step shares. */
.mm-payform .buttons { margin: 0; }
.mm-payform input[type="button"],
.mm-payform .button {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border: 2px solid var(--mm-dark);
  border-radius: 4px;
  background: var(--mm-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mm-payform input[type="button"]:hover,
.mm-payform .button:hover { background: var(--mm-red); border-color: var(--mm-red); }
.mm-payform input[type="button"][disabled] { opacity: .6; cursor: default; }

/* iOS Safari zooms the page in on any field whose text is under 16px and
   leaves it zoomed, so the layout looks pushed past its margins. Only iOS
   matches this query; everywhere else the fields keep their designed sizes. */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
  select,
  textarea { font-size: 16px !important; }
}