@charset "UTF-8";
/* MunchMakers Redesign — entry point.
   All redesign styles are scoped under .mm so old site styles are
   not disturbed until each page is migrated to the new design. */
/* =========================================================
   MunchMakers Redesign — Design Tokens
   "Bloomberg terminal for stoners with a marketing budget"
   Sourced from Claude Design (claude.ai/design) — handoff bundle 2026-04-30
   ========================================================= */
:root {
  /* Brand */
  --mm-lime: #a4ca59;
  --mm-lime-ink: #6f8a36;
  --mm-lime-tint: #f0f5e1;
  --mm-ink: #14110f;
  --mm-ink-soft: #231f20;
  --mm-ink-2: #2a2624;
  --mm-ink-3: #3a3431;
  /* Neutrals — paper-warm */
  --mm-paper: #fafaf7;
  --mm-paper-2: #f3f2ed;
  --mm-paper-3: #e9e7e0;
  --mm-rule: #d9d6cd;
  --mm-rule-soft: #ebe9e2;
  /* Text */
  --mm-text: #14110f;
  --mm-text-2: #4a4540;
  --mm-text-3: #7a746d;
  --mm-text-4: #a8a39b;
  /* Accents — used VERY sparingly */
  --mm-accent-orange: #d97a2c;
  --mm-accent-blue: #2e6eb5;
  /* Status */
  --mm-ok: #2f7a3f;
  --mm-warn: #b58400;
  --mm-danger: #b8412e;
  /* Typography */
  --mm-font-display: "Geist", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mm-font-body: "Geist", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mm-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Spacing scale — 4px base */
  --mm-s-1: 4px;
  --mm-s-2: 8px;
  --mm-s-3: 12px;
  --mm-s-4: 16px;
  --mm-s-5: 20px;
  --mm-s-6: 24px;
  --mm-s-8: 32px;
  --mm-s-10: 40px;
  --mm-s-12: 48px;
  --mm-s-16: 64px;
  --mm-s-20: 80px;
  --mm-s-24: 96px;
  /* Radii — modest, B2B */
  --mm-r-1: 2px;
  --mm-r-2: 4px;
  --mm-r-3: 8px;
  --mm-r-pill: 999px;
  /* Shadow */
  --mm-shadow-1: 0 1px 0 rgba(20, 17, 15, 0.04), 0 1px 2px rgba(20, 17, 15, 0.04);
  --mm-shadow-2: 0 2px 0 rgba(20, 17, 15, 0.04), 0 6px 16px rgba(20, 17, 15, 0.06);
  --mm-shadow-3: 0 -4px 24px rgba(20, 18, 14, 0.10);
  /* Frame max */
  --mm-frame: 1320px;
  --mm-frame-narrow: 1180px;
  /* Mobile hit-target */
  --mm-hit: 44px;
}

/* =========================================================
   MunchMakers Redesign — Primitives
   All classes are prefixed with `mm-` so they never collide
   with existing site styles. Old templates render unchanged
   until each page is migrated to the new design.
   ========================================================= */
.mm-frame,
.mm-frame *,
.mm-site-header,
.mm-site-header *,
.mm-utility-bar,
.mm-utility-bar *,
.mm-mobile-bar,
.mm-mobile-bar *,
.mm-tabbar,
.mm-tabbar *,
.mm-drawer,
.mm-drawer *,
.mm-site-footer,
.mm-site-footer *,
.mm-page,
.mm-page * {
  box-sizing: border-box;
}

/* === Type ============================================== */
.mm-h-display {
  font-family: var(--mm-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--mm-ink);
  text-wrap: balance;
}

.mm-h-1 {
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  margin: 0;
}

.mm-h-2 {
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  margin: 0;
}

.mm-h-3 {
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  margin: 0;
}

.mm-h-4 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  margin: 0;
}

.mm-h-5 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  margin: 0;
}

.mm-eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mm-text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-eyebrow.no-rule::before {
  display: none;
}

.mm-mono {
  font-family: var(--mm-font-mono);
  font-feature-settings: "tnum";
}

.mm-tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.mm-lede {
  font-family: var(--mm-font-body);
  font-size: 18px;
  line-height: 1.45;
  color: var(--mm-text-2);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}

.mm-muted {
  color: var(--mm-text-3);
}

.mm-dim {
  color: var(--mm-text-4);
}

/* === Layout ============================================ */
.mm-frame {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 0 32px;
}

.mm-frame-narrow {
  max-width: var(--mm-frame-narrow);
  margin: 0 auto;
  padding: 0 32px;
}

.mm-row {
  display: flex;
}

.mm-col {
  display: flex;
  flex-direction: column;
}

.mm-gap-1 {
  gap: 4px;
}

.mm-gap-2 {
  gap: 8px;
}

.mm-gap-3 {
  gap: 12px;
}

.mm-gap-4 {
  gap: 16px;
}

.mm-gap-5 {
  gap: 20px;
}

.mm-gap-6 {
  gap: 24px;
}

.mm-gap-8 {
  gap: 32px;
}

.mm-gap-10 {
  gap: 40px;
}

.mm-divider {
  height: 1px;
  background: var(--mm-rule);
  width: 100%;
}

.mm-divider-soft {
  background: var(--mm-rule-soft);
}

.mm-hairline-top {
  border-top: 1px solid var(--mm-rule);
}

.mm-hairline-bottom {
  border-bottom: 1px solid var(--mm-rule);
}

/* === Buttons (mm-btn) ================================== */
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--mm-r-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--mm-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 60ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.mm-btn:active {
  transform: translateY(1px);
}

.mm-btn-primary {
  background: var(--mm-lime);
  color: var(--mm-ink);
  border-color: var(--mm-lime);
}

.mm-btn-primary:hover {
  background: #b6db6c;
  border-color: #b6db6c;
}

.mm-btn-ink {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink);
}

.mm-btn-ink:hover {
  background: var(--mm-ink-2);
  border-color: var(--mm-ink-2);
}

.mm-btn-ghost {
  background: transparent;
  color: var(--mm-ink);
  border-color: var(--mm-rule);
}

.mm-btn-ghost:hover {
  border-color: var(--mm-ink);
  background: var(--mm-paper-2);
}

.mm-btn-ghost-light {
  background: transparent;
  color: var(--mm-paper);
  border-color: var(--mm-ink-3);
}

.mm-btn-ghost-light:hover {
  border-color: var(--mm-paper);
  background: rgba(250, 250, 247, 0.08);
}

.mm-btn-link {
  background: transparent;
  border: 0;
  height: auto;
  padding: 0;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 500;
}

.mm-btn-lg {
  height: 56px;
  padding: 0 28px;
  font-size: 15px;
}

.mm-btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.mm-btn .arrow {
  display: inline-block;
  transition: transform 160ms ease;
}

.mm-btn:hover .arrow {
  transform: translateX(3px);
}

/* === Chips / pills / badges ============================ */
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--mm-r-pill);
  background: var(--mm-paper-2);
  color: var(--mm-text-2);
  border: 1px solid var(--mm-rule);
}

.mm-chip-ink {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink);
}

.mm-chip-lime {
  background: var(--mm-lime-tint);
  color: var(--mm-lime-ink);
  border-color: #d6e3b0;
}

.mm-chip-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 2px;
}

/* === Cards / surfaces =================================== */
.mm-card {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
}

.mm-surface-paper {
  background: var(--mm-paper);
}

.mm-surface-paper-2 {
  background: var(--mm-paper-2);
}

.mm-surface-ink {
  background: var(--mm-ink);
  color: var(--mm-paper);
}

.mm-lift {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.mm-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--mm-shadow-2);
  border-color: var(--mm-text-3);
}

/* === Striped placeholder =============================== */
.mm-ph {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--mm-paper-2) 0, var(--mm-paper-2) 8px, var(--mm-paper-3) 8px, var(--mm-paper-3) 16px);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-text-3);
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mm-ph-dark {
  background: repeating-linear-gradient(135deg, var(--mm-ink-2) 0, var(--mm-ink-2) 8px, var(--mm-ink-3) 8px, var(--mm-ink-3) 16px);
  color: rgba(250, 250, 247, 0.55);
  border-color: var(--mm-ink-3);
}

.mm-ph-lime {
  background: repeating-linear-gradient(135deg, var(--mm-lime-tint) 0, var(--mm-lime-tint) 8px, #e6efc7 8px, #e6efc7 16px);
  color: var(--mm-lime-ink);
  border-color: #d6e3b0;
}

.mm-ph-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--mm-rule);
  padding: 3px 8px;
  border-radius: var(--mm-r-pill);
  font-size: 10px;
}

.mm-ph-dark .mm-ph-label {
  background: rgba(20, 17, 15, 0.85);
  color: var(--mm-paper);
  border-color: var(--mm-ink-3);
}

/* === Misc helpers ====================================== */
.mm-kbd {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--mm-rule);
  border-radius: 3px;
  background: var(--mm-paper);
  color: var(--mm-text-2);
}

.mm-section-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  padding: 16px 0;
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
}

.mm-section-marker .num {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* === Page wrapper (use on redesigned pages) ============ */
/* Adds the paper-warm background + new fonts, scoped so old pages
   keep their existing look. */
.mm-page {
  background: var(--mm-paper);
  color: var(--mm-text);
  font-family: var(--mm-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mm-page a {
  color: inherit;
  text-decoration: none;
}

.mm-page button {
  font-family: inherit;
  cursor: pointer;
}

.mm-page img, .mm-page svg {
  display: block;
  max-width: 100%;
}

/* =========================================================
   MunchMakers Redesign — Header, footer, mobile nav
   ========================================================= */
/* === Logo lockup ======================================= */
.mm-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-logo .mm-logo__wordmark {
  font-family: var(--mm-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 22px;
  color: var(--mm-ink);
  line-height: 1;
}

.mm-logo .mm-logo__wordmark .dot {
  color: var(--mm-lime);
  margin-left: 1px;
}

.mm-logo--light .mm-logo__wordmark {
  color: var(--mm-paper);
}

.mm-logo .mm-logo__leaf path {
  fill: var(--mm-lime);
}

.mm-logo--compact .mm-logo__wordmark {
  font-size: 19px;
}

/* === Top utility bar (announcement) ==================== */
.mm-utility-bar {
  background: var(--mm-ink);
  color: var(--mm-paper);
  font-size: 12px;
  font-family: var(--mm-font-mono);
  letter-spacing: 0.04em;
}

.mm-utility-bar .mm-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}

.mm-utility-bar__promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-utility-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-lime);
  box-shadow: 0 0 0 3px rgba(164, 202, 89, 0.2);
}

.mm-utility-bar__code {
  color: var(--mm-lime);
  font-weight: 700;
  margin-left: 4px;
}

.mm-utility-bar__contact {
  display: flex;
  align-items: center;
  gap: 20px;
  color: rgba(250, 250, 247, 0.7);
}

.mm-utility-bar__contact .sep {
  opacity: 0.4;
}

.mm-utility-bar__contact a {
  color: inherit;
}

.mm-utility-bar__contact a:hover {
  color: var(--mm-paper);
}

/* === Header (desktop) ================================== */
.mm-site-header {
  background: var(--mm-paper);
  border-bottom: 1px solid var(--mm-rule);
  position: sticky;
  top: 0;
  z-index: 40;
}

.mm-site-header__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 72px;
}

.mm-site-header__brand {
  display: inline-flex;
  align-items: center;
}

.mm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: 4px;
  height: 40px;
  padding: 0 14px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.mm-search input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: var(--mm-ink);
  font-family: var(--mm-font-body);
}

.mm-search input::placeholder {
  color: var(--mm-text-3);
}

.mm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mm-header-actions .btn {
  height: 36px;
}

.mm-cart-pill {
  background: var(--mm-lime);
  color: var(--mm-ink);
  border-radius: 999px;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  letter-spacing: 0;
  margin-left: 6px;
}

/* === Sub-nav row (categories) ========================== */
.mm-subnav {
  border-top: 1px solid var(--mm-rule-soft);
}

.mm-subnav__row {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 44px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-2);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.mm-subnav a {
  border-bottom: 2px solid transparent;
  padding: 12px 0;
  color: var(--mm-text-2);
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
}

.mm-subnav a:hover {
  color: var(--mm-ink);
  border-bottom-color: var(--mm-rule);
}

.mm-subnav a.is-current {
  color: var(--mm-ink);
  font-weight: 600;
  border-bottom-color: var(--mm-ink);
}

.mm-subnav__spacer {
  flex: 1;
}

.mm-subnav__specialist {
  color: var(--mm-lime-ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mm-subnav__specialist::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* === Mobile chrome ===================================== */
.mm-mobile-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 249, 245, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mm-rule);
}

.mm-mobile-bar__promo {
  background: var(--mm-ink);
  color: var(--mm-paper);
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 6px 12px;
}

.mm-mobile-bar__promo strong {
  color: var(--mm-lime);
  font-weight: 700;
}

.mm-mobile-bar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.mm-mobile-bar__btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--mm-ink);
}

.mm-mobile-bar__brand {
  background: transparent;
  border: 0;
  padding: 0;
  flex: 1;
  text-align: left;
}

.mm-mobile-bar__cart-pill {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--mm-lime);
  color: var(--mm-ink);
  border-radius: 999px;
  padding: 1px 5px;
  font-family: var(--mm-font-mono);
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}

/* === Mobile bottom tab bar ============================= */
.mm-tabbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(250, 249, 245, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--mm-rule);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
}

.mm-tabbar__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 64px;
}

.mm-tabbar__btn {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--mm-text-3);
  position: relative;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.mm-tabbar__btn.is-active {
  color: var(--mm-ink);
  font-weight: 700;
}

.mm-tabbar__btn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 24px;
  height: 2px;
  background: var(--mm-lime);
  border-radius: 0 0 2px 2px;
}

.mm-tabbar__icon-wrap {
  position: relative;
}

.mm-tabbar__badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--mm-lime);
  color: var(--mm-ink);
  border-radius: 999px;
  padding: 1px 4px;
  font-family: var(--mm-font-mono);
  font-size: 8px;
  font-weight: 700;
  min-width: 14px;
  text-align: center;
}

/* === Mobile menu drawer ================================ */
.mm-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 15, 0.45);
  z-index: 99;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.mm-drawer-backdrop.is-open {
  display: block;
}

.mm-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  max-width: 360px;
  background: var(--mm-paper);
  z-index: 100;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}

.mm-drawer.is-open {
  display: flex;
  animation: mm-slide-right 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes mm-slide-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.mm-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--mm-rule);
}

.mm-drawer__close {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 24px;
  color: var(--mm-ink);
}

.mm-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.mm-drawer__section {
  padding: 16px 0;
  border-bottom: 1px solid var(--mm-rule-soft);
}

.mm-drawer__section .eyebrow {
  padding: 0 20px 8px;
}

.mm-drawer__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  font-family: var(--mm-font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--mm-ink);
}

.mm-drawer__specialist {
  margin: 20px;
  padding: 14px;
  background: var(--mm-ink);
  border-radius: 8px;
  color: var(--mm-paper);
  display: flex;
  gap: 12px;
  align-items: center;
}

.mm-drawer__specialist .ph {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mm-drawer__specialist .name {
  font-weight: 600;
  font-size: 14px;
}

.mm-drawer__specialist .phone {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: rgba(250, 250, 247, 0.7);
}

/* === Footer ============================================ */
.mm-site-footer {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 80px 0 32px;
  margin-top: 80px;
}

.mm-site-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--mm-ink-3);
}

.mm-site-footer__brand-block {
  display: flex;
  flex-direction: column;
}

.mm-site-footer__pitch {
  color: rgba(250, 250, 247, 0.7);
  font-size: 14px;
  line-height: 1.55;
  max-width: 380px;
  margin: 20px 0 0;
}

.mm-site-footer__cta-row {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.mm-site-footer__col-title {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.45);
  margin: 0 0 16px;
  font-weight: 500;
}

.mm-site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mm-site-footer__col a {
  color: var(--mm-paper);
  font-size: 14px;
  transition: color 120ms ease;
}

.mm-site-footer__col a:hover {
  color: var(--mm-lime);
}

.mm-site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(250, 250, 247, 0.5);
}

.mm-site-footer__bottom-links {
  display: inline-flex;
  gap: 20px;
  flex-wrap: wrap;
}

.mm-site-footer__bottom-links a {
  color: inherit;
}

.mm-site-footer__bottom-links a:hover {
  color: var(--mm-paper);
}

.mm-site-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.mm-site-footer__social a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--mm-ink-3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-paper);
  transition: border-color 120ms ease, background 120ms ease;
}

.mm-site-footer__social a:hover {
  border-color: var(--mm-lime);
  background: rgba(164, 202, 89, 0.08);
}

/* === Responsive breakpoints ============================ */
@media (max-width: 1023px) {
  .mm-utility-bar,
  .mm-site-header,
  .mm-subnav {
    display: none;
  }
  .mm-mobile-bar {
    display: block;
  }
  .mm-tabbar {
    display: block;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .mm-site-footer {
    padding: 56px 0 80px;
    margin-top: 56px;
  }
  .mm-site-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
  }
  .mm-site-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .mm-site-footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 767px) {
  .mm-frame,
  .mm-frame-narrow {
    padding: 0 20px;
  }
}
/* =========================================================
   MunchMakers Redesign — Homepage
   ========================================================= */
/* Page wrapper — paper-warm background + new fonts */
.mm-home {
  background: var(--mm-paper);
  color: var(--mm-text);
  font-family: var(--mm-font-body);
}

.mm-home,
.mm-home * {
  box-sizing: border-box;
}

.mm-home a {
  color: inherit;
  text-decoration: none;
}

.mm-home button {
  font-family: inherit;
  cursor: pointer;
}

.mm-home img,
.mm-home svg {
  display: block;
  max-width: 100%;
}

/* === Hero (asymmetric, dark-ink) ======================= */
.mm-hero {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-bottom: 1px solid var(--mm-ink-3);
  position: relative;
  overflow: hidden;
}

.mm-hero__ticker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 32px;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.4);
  text-transform: uppercase;
}

.mm-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
  padding: 96px 0 80px;
  min-height: 640px;
}

.mm-hero__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250, 250, 247, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.mm-hero__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-hero__headline {
  font-family: var(--mm-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
  color: var(--mm-paper);
  margin: 0;
  font-size: clamp(48px, 7vw, 116px);
  text-wrap: balance;
}

.mm-hero__headline em {
  font-style: italic;
  color: var(--mm-lime);
  font-weight: 700;
  font-family: var(--mm-font-display);
}

.mm-hero__lede {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.7);
  max-width: 540px;
  margin: 32px 0 0;
}

.mm-hero__cta-row {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.mm-hero__credits {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--mm-ink-3);
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.55);
  flex-wrap: wrap;
}

.mm-hero__credits .sep {
  opacity: 0.4;
}

.mm-hero__feature {
  margin-bottom: 8px;
  position: relative;
}

.mm-hero__feature .mm-ph {
  aspect-ratio: 4/5;
  border-radius: 8px;
}

.mm-hero__feature-title {
  font-family: var(--mm-font-display);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--mm-ink);
  text-align: center;
  line-height: 0.88;
}

.mm-hero__feature-caption {
  position: absolute;
  left: -16px;
  bottom: 24px;
  background: var(--mm-paper);
  color: var(--mm-ink);
  padding: 14px 18px;
  border-radius: 4px;
  max-width: 280px;
  box-shadow: var(--mm-shadow-2);
}

.mm-hero__feature-caption-eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.mm-hero__feature-caption-text {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* === Trust badges (horizontal) ========================= */
.mm-trust {
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
  background: var(--mm-paper);
}

.mm-trust__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.mm-trust__cell {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-trust__cell + .mm-trust__cell {
  border-left: 1px solid var(--mm-rule);
}

.mm-trust__k {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

.mm-trust__label {
  font-weight: 600;
  font-size: 16px;
  color: var(--mm-ink);
  letter-spacing: -0.01em;
}

.mm-trust__value {
  font-size: 13px;
  color: var(--mm-text-2);
}

/* === Big stat strip (dark) ============================== */
.mm-stats {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 80px 0;
}

.mm-stats__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 56px;
}

.mm-stats__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250, 250, 247, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-stats__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-stats__updated {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(250, 250, 247, 0.5);
  text-transform: uppercase;
}

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

.mm-stat {
  border-top: 1px solid var(--mm-ink-3);
  padding-top: 24px;
}

.mm-stat__value {
  font-family: var(--mm-font-display);
  color: var(--mm-paper);
  font-size: clamp(48px, 5.4vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.mm-stat--accent .mm-stat__value {
  color: var(--mm-lime);
}

.mm-stat__label {
  margin-top: 16px;
  color: rgba(250, 250, 247, 0.65);
  font-size: 14px;
  max-width: 220px;
  line-height: 1.4;
}

/* === Logo wall ========================================= */
.mm-logowall {
  padding: 64px 0;
}

.mm-logowall__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
}

.mm-logowall__updated {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mm-logowall__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--mm-rule);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.mm-logowall__cell {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--mm-rule);
  padding: 18px 22px;
  text-align: center;
}

.mm-logowall__cell img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 180ms ease, transform 220ms ease;
}

.mm-logowall__cell:hover img {
  opacity: 1;
  transform: scale(1.04);
}

.mm-logowall__cell:nth-child(6n) {
  border-right: 0;
}

.mm-logowall__cell:nth-child(n+7) {
  border-top: 1px solid var(--mm-rule);
}

/* === Featured categories =============================== */
.mm-featured-cats {
  padding: 80px 0;
  border-top: 1px solid var(--mm-rule);
}

.mm-featured-cats__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}

.mm-featured-cats__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--mm-ink);
  margin: 0;
  max-width: 28ch;
}

.mm-featured-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.mm-cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 160ms ease, border-color 120ms ease, box-shadow 160ms ease;
}

.mm-cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--mm-text-3);
  box-shadow: var(--mm-shadow-2);
}

.mm-cat-card__media {
  aspect-ratio: 5/4;
  background: var(--mm-paper-2);
  position: relative;
  overflow: hidden;
}

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

.mm-cat-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mm-cat-card__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--mm-ink);
  letter-spacing: -0.01em;
}

.mm-cat-card__meta {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

/* === Featured products grid ============================ */
.mm-featured-products {
  padding: 80px 0;
  background: var(--mm-paper-2);
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
}

.mm-featured-products__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}

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

.mm-product-card {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 160ms ease, border-color 120ms ease, box-shadow 160ms ease;
}

.mm-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--mm-text-3);
  box-shadow: var(--mm-shadow-2);
}

.mm-product-card__media {
  aspect-ratio: 1/1;
  background: var(--mm-paper-2);
  position: relative;
  overflow: hidden;
}

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

.mm-product-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-product-card__sku {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

.mm-product-card__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--mm-ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
}

.mm-product-card__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.mm-product-card__price {
  font-family: var(--mm-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-ink);
  font-variant-numeric: tabular-nums;
}

.mm-product-card__moq {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

/* === Final CTA band ==================================== */
.mm-final-cta {
  padding: 96px 0;
  background: var(--mm-ink);
  color: var(--mm-paper);
}

.mm-final-cta__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
}

.mm-final-cta__title {
  font-family: var(--mm-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.96;
  font-size: clamp(40px, 5vw, 76px);
  color: var(--mm-paper);
  margin: 0;
  text-wrap: balance;
}

.mm-final-cta__title em {
  color: var(--mm-lime);
  font-style: italic;
  font-weight: 700;
}

.mm-final-cta__lede {
  color: rgba(250, 250, 247, 0.7);
  font-size: 17px;
  line-height: 1.5;
  margin: 24px 0 32px;
  max-width: 480px;
}

.mm-final-cta__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mm-final-cta__specialist {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--mm-ink-2);
  border: 1px solid var(--mm-ink-3);
  border-radius: 8px;
}

.mm-final-cta__specialist .mm-ph {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mm-final-cta__specialist .name {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--mm-paper);
}

.mm-final-cta__specialist .role {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.55);
  text-transform: uppercase;
  margin-top: 4px;
}

/* === Responsive layer ================================== */
@media (max-width: 1023px) {
  .mm-hero__ticker {
    display: none;
  }
  .mm-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px 0 56px;
    min-height: 0;
  }
  .mm-hero__feature .mm-ph {
    aspect-ratio: 16/11;
  }
  .mm-trust__row {
    grid-template-columns: repeat(2, 1fr);
  }
  .mm-trust__cell:nth-child(odd) {
    border-left: 0;
  }
  .mm-trust__cell + .mm-trust__cell {
    border-top: 1px solid var(--mm-rule);
  }
  .mm-trust__cell:nth-child(2),
  .mm-trust__cell:nth-child(1) {
    border-top: 0;
  }
  .mm-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .mm-logowall__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .mm-logowall__cell {
    height: 96px;
    padding: 14px 18px;
  }
  .mm-logowall__cell {
    border-right: 1px solid var(--mm-rule);
  }
  .mm-logowall__cell:nth-child(3n) {
    border-right: 0;
  }
  .mm-logowall__cell:nth-child(n+4) {
    border-top: 1px solid var(--mm-rule);
  }
  .mm-featured-cats__grid,
  .mm-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mm-final-cta__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 639px) {
  .mm-hero__grid {
    padding: 48px 0 40px;
  }
  .mm-hero__credits {
    gap: 12px;
    font-size: 10px;
  }
  .mm-hero__feature-caption {
    left: 0;
    max-width: none;
    right: 16px;
  }
  .mm-stats {
    padding: 56px 0;
  }
  .mm-stats__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 32px;
  }
  .mm-stats__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mm-trust__row {
    grid-template-columns: 1fr;
  }
  .mm-trust__cell + .mm-trust__cell {
    border-left: 0;
    border-top: 1px solid var(--mm-rule);
  }
  .mm-logowall__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mm-logowall__cell {
    height: 84px;
    padding: 12px 14px;
    border-right: 1px solid var(--mm-rule);
  }
  .mm-logowall__cell:nth-child(2n) {
    border-right: 0;
  }
  .mm-logowall__cell:nth-child(n+3) {
    border-top: 1px solid var(--mm-rule);
  }
  .mm-logowall__cell img {
    max-height: 44px;
  }
  .mm-featured-cats__grid,
  .mm-product-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   MunchMakers Redesign — Collection (category) page
   Translates .design-handoffs/main/project/collection.jsx and
   .design-handoffs/mobile/project/mobile-collection.jsx.
   ========================================================= */
.mm-collection-page {
  background: var(--mm-paper);
  color: var(--mm-text);
  font-family: var(--mm-font-body);
  font-size: 15px;
  line-height: 1.5;
}

.mm-collection-page,
.mm-collection-page * {
  box-sizing: border-box;
}

.mm-collection-page a {
  color: inherit;
  text-decoration: none;
}

.mm-collection-page button {
  font-family: inherit;
  cursor: pointer;
}

.mm-collection-page img,
.mm-collection-page svg {
  display: block;
  max-width: 100%;
}

/* === Masthead (ink) ==================================== */
.mm-collection-mast {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-bottom: 1px solid var(--mm-ink-3);
}

.mm-collection-mast__inner {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 72px 32px 56px;
}

.mm-collection-mast__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.5);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.mm-collection-mast__crumbs a {
  color: inherit;
}

.mm-collection-mast__crumbs a:hover {
  color: var(--mm-paper);
}

.mm-collection-mast__crumbs > .sep {
  opacity: 0.45;
}

.mm-collection-mast__crumbs > .current {
  color: var(--mm-lime);
}

.mm-collection-mast__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: end;
}

.mm-collection-mast__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.mm-collection-mast__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-collection-mast__title {
  font-family: var(--mm-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
  color: var(--mm-paper);
  margin: 0;
  font-size: clamp(48px, 7vw, 112px);
  text-wrap: balance;
}

.mm-collection-mast__title em {
  font-style: italic;
  color: var(--mm-lime);
  font-weight: 700;
}

.mm-collection-mast__lede {
  margin: 24px 0 0;
  max-width: 56ch;
  color: rgba(250, 250, 247, 0.75);
  font-size: 16px;
  line-height: 1.5;
}

/* "Category at a glance" spec card */
.mm-collection-glance {
  background: rgba(250, 250, 247, 0.04);
  border: 1px solid var(--mm-ink-3);
  border-radius: 8px;
  padding: 24px;
}

.mm-collection-glance__title {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.55);
  margin-bottom: 16px;
}

.mm-collection-glance__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mm-font-mono);
  font-size: 12px;
}

.mm-collection-glance__table tr {
  border-top: 1px solid var(--mm-ink-3);
}

.mm-collection-glance__table tr:first-child {
  border-top: 0;
}

.mm-collection-glance__table td {
  padding: 10px 0;
}

.mm-collection-glance__table td:first-child {
  color: rgba(250, 250, 247, 0.5);
}

.mm-collection-glance__table td:last-child {
  text-align: right;
  color: var(--mm-paper);
  font-weight: 600;
}

.mm-collection-glance__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  height: 40px;
  padding: 0 16px;
  background: var(--mm-lime);
  color: var(--mm-ink);
  border: 1px solid var(--mm-lime);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.mm-collection-glance__cta:hover {
  background: #b6db6c;
  border-color: #b6db6c;
}

/* === Subcategory strip (editorial) ===================== */
.mm-collection-subcats {
  border-bottom: 1px solid var(--mm-rule);
  background: var(--mm-paper);
}

.mm-collection-subcats__inner {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 32px 32px 36px;
}

.mm-collection-subcats__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}

.mm-collection-subcats__title {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-collection-subcats__title::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-collection-subcats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.mm-collection-subcat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--mm-ink);
  transition: border-color 120ms ease, transform 80ms ease;
}

.mm-collection-subcat:hover {
  border-color: var(--mm-ink);
  transform: translateY(-1px);
}

.mm-collection-subcat__count {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
}

.mm-collection-subcat__arrow {
  font-family: var(--mm-font-mono);
  color: var(--mm-text-3);
  font-size: 14px;
}

/* === Body layout ======================================= */
.mm-collection-body {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 56px 32px 72px;
}

.mm-collection-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

/* === Filter rail (desktop sticky) ====================== */
.mm-collection-rail {
  position: sticky;
  top: 132px;
  align-self: start;
}

.mm-collection-rail__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.mm-collection-rail__title {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin: 0;
}

.mm-collection-rail__clear {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--mm-font-display);
  font-size: 12px;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.mm-collection-rail__groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mm-filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mm-text-3);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--mm-rule);
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
}

.mm-filter-group__head svg {
  color: var(--mm-text-3);
  transition: transform 160ms ease;
}

.mm-filter-group[aria-expanded=false] .mm-filter-group__head svg {
  transform: rotate(-90deg);
}

.mm-filter-group__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mm-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--mm-ink);
  cursor: pointer;
}

.mm-filter-option input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: var(--mm-lime-ink);
}

.mm-filter-option__count {
  color: var(--mm-text-3);
  margin-left: auto;
  font-family: var(--mm-font-mono);
  font-size: 11px;
}

.mm-filter-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-filter-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--mm-rule);
  cursor: pointer;
  overflow: hidden;
}

.mm-filter-color input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.mm-filter-color__swatch {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mm-filter-color input:checked ~ .mm-filter-color__swatch {
  box-shadow: 0 0 0 2px var(--mm-paper), 0 0 0 3px var(--mm-ink);
}

.mm-filter-range__bounds {
  display: flex;
  justify-content: space-between;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  margin-bottom: 10px;
}

.mm-filter-range__inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mm-filter-range__field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  height: 36px;
  padding: 0 8px;
  font-family: var(--mm-font-mono);
}

.mm-filter-range__field input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 13px;
  color: var(--mm-ink);
  padding-left: 4px;
}

.mm-filter-range__field span {
  color: var(--mm-text-3);
  font-size: 12px;
}

.mm-filter-range__sep {
  color: var(--mm-text-3);
  font-size: 11px;
}

.mm-collection-rail__cta {
  border-top: 1px solid var(--mm-rule);
  padding-top: 16px;
  font-size: 13px;
  color: var(--mm-text-2);
}

.mm-collection-rail__cta a {
  display: inline-block;
  margin-top: 6px;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 500;
}

.mm-collection-rail__apply {
  display: none; /* desktop submits inline; only mobile sheet uses this */
}

/* === Toolbar =========================================== */
.mm-collection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--mm-rule);
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.mm-collection-toolbar__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.mm-collection-toolbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 24px;
  padding: 0 10px;
  background: var(--mm-ink);
  color: var(--mm-paper);
  border: 1px solid var(--mm-ink);
  border-radius: var(--mm-r-pill);
}

.mm-collection-toolbar__chip a,
.mm-collection-toolbar__chip button {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
}

.mm-collection-toolbar__clear {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--mm-font-display);
  font-size: 12px;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.mm-collection-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mm-font-mono);
  font-size: 12px;
  flex-wrap: wrap;
}

.mm-collection-toolbar__count {
  color: var(--mm-text-3);
}

.mm-collection-toolbar__sep {
  color: var(--mm-text-4);
}

.mm-collection-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mm-text-2);
}

.mm-collection-toolbar__sort select {
  height: 32px;
  font-family: var(--mm-font-mono);
  font-size: 12px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  color: var(--mm-ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27><path fill=%27none%27 stroke=%27%237a746d%27 stroke-width=%271.4%27 d=%27M1 1l4 4 4-4%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Mobile filter toggle (hidden on desktop) */
.mm-collection-filter-btn {
  display: none;
}

/* === Product grid ====================================== */
.mm-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* === Product card (mm-product-card) ==================== */
.mm-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  position: relative;
}

.mm-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mm-shadow-2);
  border-color: var(--mm-text-3);
}

.mm-product-card__image-link {
  position: relative;
  aspect-ratio: 1/1;
  display: block;
  background: var(--mm-paper-2);
  border-bottom: 1px solid var(--mm-rule);
  overflow: hidden;
}

.mm-product-card__image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.mm-product-card:hover .mm-product-card__image-link img {
  transform: scale(1.04);
}

.mm-product-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-text-3);
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: repeating-linear-gradient(135deg, var(--mm-paper-2) 0, var(--mm-paper-2) 8px, var(--mm-paper-3) 8px, var(--mm-paper-3) 16px);
}

.mm-product-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--mm-r-pill);
  font-weight: 700;
  background: var(--mm-ink);
  color: var(--mm-paper);
}

.mm-product-card__badge--lime {
  background: var(--mm-lime);
  color: var(--mm-ink);
}

.mm-product-card__badge--bulk {
  background: var(--mm-paper-2);
  color: var(--mm-ink);
  border: 1px solid var(--mm-rule);
}

.mm-product-card__badge--soldout {
  background: rgba(20, 17, 15, 0.75);
  color: var(--mm-paper);
}

.mm-product-card__method {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  background: rgba(255, 255, 255, 0.92);
  padding: 3px 8px;
  border-radius: var(--mm-r-pill);
  border: 1px solid var(--mm-rule);
  color: var(--mm-text-2);
}

.mm-product-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.mm-product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

.mm-product-card__meta-rating {
  font-size: 11px;
  color: var(--mm-text-2);
}

.mm-product-card__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--mm-ink);
  line-height: 1.25;
  margin: 0;
}

.mm-product-card__name a {
  color: inherit;
}

.mm-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mm-font-display);
}

.mm-product-card__price {
  font-weight: 700;
  font-size: 18px;
  color: var(--mm-ink);
  letter-spacing: -0.01em;
}

.mm-product-card__price--sale {
  color: var(--mm-lime-ink);
}

.mm-product-card__price-original {
  font-size: 13px;
  color: var(--mm-text-3);
  text-decoration: line-through;
}

/* Bulk pricing strip — used when hasBulkPricing */
.mm-product-card__strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 4px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  overflow: hidden;
  font-family: var(--mm-font-mono);
  font-size: 10px;
}

.mm-product-card__strip-cell {
  padding: 8px 10px;
  border-right: 1px solid var(--mm-rule);
  background: #fff;
}

.mm-product-card__strip-cell:last-child {
  border-right: 0;
}

.mm-product-card__strip-cell--paper {
  background: var(--mm-paper-2);
}

.mm-product-card__strip-cell--lime {
  background: var(--mm-lime-tint);
}

.mm-product-card__strip-cell--lime .mm-product-card__strip-label {
  color: var(--mm-lime-ink);
}

.mm-product-card__strip-label {
  color: var(--mm-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mm-product-card__strip-value {
  color: var(--mm-ink);
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
  letter-spacing: -0.01em;
}

.mm-product-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-2);
  letter-spacing: 0.04em;
}

.mm-product-card__foot-cta {
  color: var(--mm-lime-ink);
  font-weight: 700;
}

/* === Active filters bar (above grid) =================== */
.mm-collection-active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.mm-collection-active__label {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

/* === Pagination ======================================== */
.mm-collection-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-family: var(--mm-font-mono);
}

.mm-collection-pagination a,
.mm-collection-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  font-size: 12px;
  color: var(--mm-ink);
  background: #fff;
}

.mm-collection-pagination a:hover {
  border-color: var(--mm-ink);
}

.mm-collection-pagination .is-current {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink);
  font-weight: 700;
}

.mm-collection-pagination .ellipsis {
  border: 0;
  color: var(--mm-text-3);
}

/* === Empty state ======================================= */
.mm-collection-empty {
  border: 1px dashed var(--mm-rule);
  border-radius: var(--mm-r-3);
  padding: 56px 24px;
  text-align: center;
  background: #fff;
}

.mm-collection-empty__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 8px 0 6px;
  color: var(--mm-ink);
}

.mm-collection-empty__text {
  color: var(--mm-text-2);
  margin: 0 0 18px;
}

/* === SEO description block ============================= */
.mm-collection-seo {
  max-width: var(--mm-frame-narrow);
  margin: 0 auto;
  padding: 56px 32px 96px;
  border-top: 1px solid var(--mm-rule);
}

.mm-collection-seo__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
  margin: 0 0 16px;
}

.mm-collection-seo__content {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mm-text-2);
  max-width: 64ch;
}

.mm-collection-seo__content p {
  margin: 0 0 14px;
}

.mm-collection-seo__content a {
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* === Mobile filter sheet =============================== */
.mm-filter-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.mm-filter-sheet.is-open {
  display: block;
}

.mm-filter-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 15, 0.45);
}

.mm-filter-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  background: var(--mm-paper);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mm-sheet-up 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes mm-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.mm-filter-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--mm-rule);
  border-radius: 2px;
  margin: 10px auto;
}

.mm-filter-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 20px 12px;
  border-bottom: 1px solid var(--mm-rule);
}

.mm-filter-sheet__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--mm-ink);
  margin: 0;
}

.mm-filter-sheet__close {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--mm-font-display);
  font-size: 14px;
  color: var(--mm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mm-filter-sheet__body {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mm-filter-sheet__foot {
  position: sticky;
  bottom: 0;
  background: var(--mm-paper);
  padding: 12px 20px;
  border-top: 1px solid var(--mm-rule);
  display: flex;
  gap: 8px;
}

.mm-filter-sheet__foot .mm-btn {
  flex: 1;
}

.mm-filter-sheet__foot .mm-btn-primary {
  flex: 2;
}

/* === Tablet (<= 1023px) ================================ */
@media (max-width: 1023px) {
  .mm-collection-mast__inner {
    padding: 56px 24px 44px;
  }
  .mm-collection-mast__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .mm-collection-mast__title {
    font-size: clamp(40px, 8vw, 80px);
  }
  .mm-collection-body {
    padding: 32px 24px 56px;
  }
  .mm-collection-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Hide desktop rail; show mobile button + sheet */
  .mm-collection-rail {
    display: none;
  }
  .mm-collection-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--mm-rule);
    background: #fff;
    color: var(--mm-ink);
    border-radius: var(--mm-r-pill);
    font-family: var(--mm-font-display);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .mm-collection-filter-btn .mm-collection-filter-btn__count {
    background: var(--mm-lime);
    color: var(--mm-ink);
    height: 18px;
    padding: 0 6px;
    border-radius: var(--mm-r-pill);
    font-family: var(--mm-font-mono);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
  }
  /* Make the toolbar sticky on mobile under the global header */
  .mm-collection-toolbar {
    position: sticky;
    top: 88px;
    z-index: 20;
    background: rgba(250, 249, 245, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin: -8px -24px 18px;
    padding: 10px 24px;
    border-top: 1px solid var(--mm-rule-soft);
  }
  .mm-collection-toolbar__chips {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
  }
  .mm-collection-toolbar__chips::-webkit-scrollbar {
    display: none;
  }
  .mm-collection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .mm-collection-mast__crumbs {
    font-size: 10px;
  }
  .mm-collection-mast__lede {
    font-size: 14px;
  }
  .mm-collection-glance {
    padding: 18px;
  }
  .mm-collection-subcats__inner {
    padding: 24px 24px 28px;
  }
  .mm-collection-subcats__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
}
/* === Phone (<= 639px) ================================== */
@media (max-width: 639px) {
  .mm-collection-mast__inner {
    padding: 28px 20px 32px;
  }
  .mm-collection-mast__title {
    font-size: clamp(36px, 11vw, 56px);
  }
  .mm-collection-mast__lede {
    font-size: 14px;
  }
  .mm-collection-glance {
    padding: 16px;
  }
  .mm-collection-glance__cta {
    height: 44px;
  }
  .mm-collection-body {
    padding: 20px 16px 40px;
  }
  .mm-collection-toolbar {
    margin: -8px -16px 14px;
    padding: 10px 16px;
    gap: 8px;
  }
  .mm-collection-toolbar__meta {
    width: 100%;
    justify-content: space-between;
  }
  .mm-collection-grid {
    gap: 8px;
  }
  .mm-product-card__body {
    padding: 12px;
    gap: 8px;
  }
  .mm-product-card__name {
    font-size: 14px;
  }
  .mm-product-card__price {
    font-size: 16px;
  }
  .mm-product-card__strip-cell {
    padding: 6px 8px;
  }
  .mm-collection-subcats__inner {
    padding: 18px 16px 22px;
  }
  .mm-collection-seo {
    padding: 32px 20px 56px;
  }
  .mm-collection-seo__title {
    font-size: 22px;
  }
}
/* =========================================================
   MunchMakers Redesign — Product detail page (PDP)
   Translates .design-handoffs/main/project/product.jsx +
   product-bits.jsx + .design-handoffs/mobile/project/mobile-product.jsx.
   Co-exists with legacy .pdp-* classes (kept on the same elements
   so legacy JS in product.hbs continues to find its data hooks).
   ========================================================= */
.mm-pdp-page {
  background: var(--mm-paper);
  color: var(--mm-text);
  font-family: var(--mm-font-body);
  font-size: 15px;
  line-height: 1.5;
}

.mm-pdp-page,
.mm-pdp-page * {
  box-sizing: border-box;
}

.mm-pdp-page a {
  color: inherit;
  text-decoration: none;
}

.mm-pdp-page button {
  font-family: inherit;
  cursor: pointer;
}

.mm-pdp-page img,
.mm-pdp-page svg {
  display: block;
  max-width: 100%;
}

/* === Breadcrumb hairline =============================== */
.mm-pdp-crumbs {
  border-bottom: 1px solid var(--mm-rule);
  background: var(--mm-paper);
}

.mm-pdp-crumbs__inner {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 18px 32px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mm-pdp-crumbs__inner > .sep {
  opacity: 0.4;
}

.mm-pdp-crumbs__inner a {
  color: inherit;
}

.mm-pdp-crumbs__inner a:hover {
  color: var(--mm-ink);
}

.mm-pdp-crumbs__inner > .current {
  color: var(--mm-ink);
}

/* === Layout ============================================ */
.mm-pdp-main {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 32px 32px 64px;
}

.mm-pdp-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

.mm-pdp-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* === Gallery (desktop) ================================= */
.mm-pdp-gallery {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
}

.mm-pdp-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mm-pdp-gallery__thumb {
  position: relative;
  aspect-ratio: 1/1;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  overflow: hidden;
}

.mm-pdp-gallery__thumb.is-active {
  border: 2px solid var(--mm-ink);
}

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

.mm-pdp-gallery__main {
  position: relative;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  overflow: hidden;
  aspect-ratio: 1/1;
}

.mm-pdp-gallery__slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.mm-pdp-gallery__slide {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

.mm-pdp-gallery__slide.is-active {
  display: flex;
}

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

.mm-pdp-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-pill);
  color: var(--mm-ink);
  cursor: pointer;
  z-index: 2;
  transition: background 120ms ease;
}

.mm-pdp-gallery__nav:hover {
  background: #fff;
}

.mm-pdp-gallery__prev {
  left: 16px;
}

.mm-pdp-gallery__next {
  right: 16px;
}

.mm-pdp-gallery__badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.mm-pdp-badge {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--mm-r-pill);
  font-weight: 700;
  background: var(--mm-ink);
  color: var(--mm-paper);
}

.mm-pdp-badge--lime {
  background: var(--mm-lime);
  color: var(--mm-ink);
}

.mm-pdp-badge--bulk {
  background: var(--mm-paper);
  color: var(--mm-ink);
  border: 1px solid var(--mm-rule);
}

/* === Tech specs table (below gallery on desktop) ======= */
.mm-pdp-techspecs {
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  overflow: hidden;
}

.mm-pdp-techspecs__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--mm-rule);
  background: var(--mm-paper-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

.mm-pdp-techspecs__title {
  color: var(--mm-text-3);
}

.mm-pdp-techspecs__head a {
  color: var(--mm-ink);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.mm-pdp-techspecs__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mm-font-mono);
  font-size: 13px;
}

.mm-pdp-techspecs__table tr {
  border-top: 1px solid var(--mm-rule-soft);
}

.mm-pdp-techspecs__table tr:first-child {
  border-top: 0;
}

.mm-pdp-techspecs__table td {
  padding: 12px 20px;
}

.mm-pdp-techspecs__table td:first-child {
  color: var(--mm-text-2);
  width: 200px;
  font-weight: 400;
}

.mm-pdp-techspecs__table td:last-child {
  color: var(--mm-ink);
  font-weight: 600;
}

.mm-pdp-techspecs__desc {
  padding: 20px;
  color: var(--mm-text-2);
  font-size: 14px;
  line-height: 1.65;
  border-top: 1px solid var(--mm-rule-soft);
}

.mm-pdp-techspecs__desc p {
  margin: 0 0 12px;
}

.mm-pdp-techspecs__desc p:last-child {
  margin: 0;
}

/* === Buy box (sticky right column) ===================== */
.mm-pdp-buy {
  position: sticky;
  top: 132px;
  align-self: start;
}

.mm-pdp-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mm-pdp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--mm-r-pill);
  background: var(--mm-paper-2);
  color: var(--mm-text-2);
  border: 1px solid var(--mm-rule);
}

.mm-pdp-chip--lime {
  background: var(--mm-lime-tint);
  color: var(--mm-lime-ink);
  border-color: #d6e3b0;
}

.mm-pdp-chip--lime::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-lime-ink);
}

.mm-pdp-chip--ink {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink);
}

.mm-pdp-chip--danger {
  background: #fdecea;
  color: #b8412e;
  border-color: #f4c5be;
}

.mm-pdp-eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.mm-pdp-title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-size: clamp(28px, 3.6vw, 52px);
  color: var(--mm-ink);
  margin: 0;
  text-wrap: balance;
}

.mm-pdp-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  color: var(--mm-text-2);
  font-size: 13px;
}

.mm-pdp-rating__stars {
  color: var(--mm-lime-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mm-pdp-rating__sep {
  color: var(--mm-text-4);
}

.mm-pdp-rating a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* === Price block ======================================= */
.mm-pdp-price {
  margin-top: 22px;
  padding: 16px 0;
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
}

.mm-pdp-price__label {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

.mm-pdp-price__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.mm-pdp-price__current {
  font-family: var(--mm-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.03em;
  color: var(--mm-ink);
  line-height: 1;
}

.mm-pdp-price__original {
  font-size: 16px;
  color: var(--mm-text-3);
  text-decoration: line-through;
  font-family: var(--mm-font-display);
}

.mm-pdp-price__unit {
  font-size: 13px;
  color: var(--mm-text-3);
}

.mm-pdp-price__save {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--mm-lime-ink);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* === Option pickers ==================================== */
.mm-pdp-options {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mm-pdp-option__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.mm-pdp-option__label {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--mm-ink);
  letter-spacing: -0.005em;
}

.mm-pdp-option__hint {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  letter-spacing: 0.04em;
}

.mm-pdp-option__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-pdp-option__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.mm-pdp-option__chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mm-pdp-option__chip.is-selected,
.mm-pdp-option__chip:has(input:checked) {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink);
}

.mm-pdp-option__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-pdp-option__swatch {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--mm-rule);
  background: #fff;
  overflow: hidden;
}

.mm-pdp-option__swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mm-pdp-option__swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mm-pdp-option__swatch.is-selected,
.mm-pdp-option__swatch:has(input:checked) {
  border: 2px solid var(--mm-ink);
  outline: 2px solid var(--mm-paper);
  outline-offset: -4px;
}

/* === Volume pricing table ============================== */
.mm-pdp-volume {
  margin-top: 28px;
}

.mm-pdp-volume__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.mm-pdp-volume__title {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-pdp-volume__title::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-pdp-volume__hint {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
}

.mm-pdp-volume__table {
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  overflow: hidden;
  background: #fff;
}

.mm-pdp-volume__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  width: 100%;
  border: 0;
  text-align: left;
  padding: 14px 16px;
  background: #fff;
  font-family: var(--mm-font-mono);
  font-size: 13px;
  color: var(--mm-ink);
  cursor: pointer;
  position: relative;
  transition: background 120ms ease;
}

.mm-pdp-volume__row + .mm-pdp-volume__row {
  border-top: 1px solid var(--mm-rule-soft);
}

.mm-pdp-volume__row:hover {
  background: var(--mm-paper-2);
}

.mm-pdp-volume__row.is-active {
  background: var(--mm-lime-tint);
}

.mm-pdp-volume__row.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--mm-lime-ink);
}

.mm-pdp-volume__head-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mm-rule);
  background: var(--mm-paper-2);
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

.mm-pdp-volume__head-row > :nth-child(2),
.mm-pdp-volume__head-row > :nth-child(3) {
  text-align: right;
}

.mm-pdp-volume__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mm-ink);
}

.mm-pdp-volume__pop {
  font-family: var(--mm-font-mono);
  font-size: 9px;
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 1px 6px;
  border-radius: var(--mm-r-pill);
  letter-spacing: 0.06em;
}

.mm-pdp-volume__price {
  text-align: right;
  font-weight: 700;
  color: var(--mm-ink);
}

.mm-pdp-volume__price s {
  color: var(--mm-text-3);
  font-weight: 400;
  margin-right: 6px;
}

.mm-pdp-volume__save {
  text-align: right;
  color: var(--mm-text-3);
  font-weight: 400;
}

.mm-pdp-volume__save--on {
  color: var(--mm-lime-ink);
  font-weight: 700;
}

/* === Quantity stepper (inline) ========================= */
.mm-pdp-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.mm-pdp-qty__label {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mm-text-3);
  margin-right: auto;
}

.mm-pdp-qty__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  cursor: pointer;
}

.mm-pdp-qty__btn:hover {
  border-color: var(--mm-ink);
}

.mm-pdp-qty__input {
  width: 80px;
  height: 44px;
  text-align: center;
  font-family: var(--mm-font-mono);
  font-weight: 700;
  font-size: 16px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  color: var(--mm-ink);
  outline: none;
}

.mm-pdp-qty__input:focus {
  border-color: var(--mm-ink);
}

/* === CTA cluster ======================================= */
.mm-pdp-cta {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mm-pdp-cta__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mm-pdp-cta__row > .mm-btn {
  flex: 1;
  min-width: 0;
}

.mm-pdp-cta__primary {
  flex: 1;
  height: 56px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--mm-lime);
  color: var(--mm-ink);
  border: 1px solid var(--mm-lime);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.mm-pdp-cta__primary:hover {
  background: #b6db6c;
  border-color: #b6db6c;
}

.mm-pdp-cta__primary[disabled] {
  background: var(--mm-rule);
  border-color: var(--mm-rule);
  color: var(--mm-text-3);
  cursor: not-allowed;
}

.mm-pdp-cta__ink {
  height: 56px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--mm-ink);
  color: var(--mm-paper);
  border: 1px solid var(--mm-ink);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mm-pdp-cta__ink:hover {
  background: var(--mm-ink-2);
}

.mm-pdp-cta__ghost {
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--mm-ink);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mm-pdp-cta__ghost:hover {
  border-color: var(--mm-ink);
  background: var(--mm-paper-2);
}

.mm-pdp-cta__wishlist {
  width: 56px;
  height: 56px;
  flex: 0 0 auto !important;
  background: transparent;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mm-pdp-cta__wishlist.is-active {
  color: #b8412e;
  border-color: #b8412e;
}

/* === Reassurance row =================================== */
.mm-pdp-reassure {
  margin-top: 22px;
  padding: 16px 0;
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mm-text-2);
}

.mm-pdp-reassure span::before {
  content: "● ";
  color: var(--mm-lime-ink);
}

/* === Editorial dark divider ============================ */
.mm-pdp-case {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 80px 0;
  border-top: 1px solid var(--mm-ink-3);
  border-bottom: 1px solid var(--mm-ink-3);
}

.mm-pdp-case__inner {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}

.mm-pdp-case__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.mm-pdp-case__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-pdp-case__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: clamp(32px, 4.6vw, 64px);
  color: var(--mm-paper);
  margin: 0;
  text-wrap: balance;
}

.mm-pdp-case__title em {
  font-style: italic;
  color: var(--mm-lime);
  font-weight: 700;
}

.mm-pdp-case__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.mm-pdp-case__feature {
  border-top: 1px solid var(--mm-ink-3);
  padding-top: 16px;
}

.mm-pdp-case__feature h3 {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--mm-paper);
  margin: 0 0 6px;
}

.mm-pdp-case__feature p {
  font-size: 14px;
  color: rgba(250, 250, 247, 0.65);
  line-height: 1.5;
  margin: 0;
}

/* === Reviews preview =================================== */
.mm-pdp-reviews-section {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 80px 32px;
}

.mm-pdp-reviews__marker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  padding: 16px 0;
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
  margin-bottom: 32px;
}

.mm-pdp-reviews__marker .num {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mm-pdp-reviews__marker .spacer {
  flex: 1;
}

.mm-pdp-reviews__marker .rating {
  color: var(--mm-text-3);
}

/* === Related / recently viewed ========================= */
.mm-pdp-related {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 0 32px 80px;
}

.mm-pdp-related__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}

.mm-pdp-related__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
  margin: 0;
}

.mm-pdp-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* === Sticky mobile bottom bar ========================== */
.mm-pdp-mobile-bar {
  display: none;
}

/* === Tablet (<= 1023px) ================================ */
@media (max-width: 1023px) {
  .mm-pdp-main {
    padding: 24px 24px 48px;
  }
  .mm-pdp-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Promote left wrapper's children to grid items so techspecs can sit BELOW the buy box on mobile, matching the JSX flow */
  .mm-pdp-left {
    display: contents;
  }
  .mm-pdp-gallery {
    order: 1;
  }
  .mm-pdp-buy {
    order: 2;
    position: static;
  }
  .mm-pdp-techspecs {
    order: 3;
    margin-top: 0;
  }
  .mm-pdp-gallery {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mm-pdp-gallery__thumbs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mm-pdp-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }
  .mm-pdp-gallery__thumb {
    flex: 0 0 80px;
  }
  .mm-pdp-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mm-pdp-case {
    padding: 56px 0;
  }
  .mm-pdp-case__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mm-pdp-case__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .mm-pdp-reviews-section {
    padding: 48px 24px;
  }
  .mm-pdp-related {
    padding: 0 24px 56px;
  }
  .mm-pdp-volume__head-row,
  .mm-pdp-volume__row {
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
  }
}
/* === Phone (<= 639px) ================================== */
@media (max-width: 639px) {
  .mm-pdp-crumbs__inner {
    padding: 12px 16px;
    font-size: 10px;
  }
  .mm-pdp-main {
    padding: 0 0 80px;
  }
  .mm-pdp-grid {
    gap: 0;
    padding: 0;
  }
  /* Edge-to-edge gallery on phone */
  .mm-pdp-gallery__main {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    aspect-ratio: 1/1;
  }
  .mm-pdp-gallery__nav {
    display: none;
  }
  .mm-pdp-gallery {
    gap: 0;
    padding: 0;
  }
  .mm-pdp-gallery__thumbs {
    padding: 8px 16px;
  }
  .mm-pdp-buy {
    padding: 16px 16px 0;
  }
  .mm-pdp-techspecs {
    margin: 16px;
  }
  .mm-pdp-related__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mm-pdp-reassure {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }
  .mm-pdp-case {
    padding: 40px 0;
  }
  .mm-pdp-case__inner {
    padding: 0 16px;
  }
  .mm-pdp-case__features {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mm-pdp-reviews-section {
    padding: 40px 16px;
  }
  .mm-pdp-related {
    padding: 0 16px 40px;
  }
  /* Sticky bottom bar */
  .mm-pdp-mobile-bar {
    display: flex;
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    background: rgba(250, 249, 245, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--mm-rule);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    align-items: center;
    z-index: 35;
  }
  .mm-pdp-mobile-bar__price {
    line-height: 1;
  }
  .mm-pdp-mobile-bar__label {
    font-family: var(--mm-font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--mm-text-3);
  }
  .mm-pdp-mobile-bar__total {
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--mm-ink);
    margin-top: 2px;
  }
  .mm-pdp-mobile-bar__cta {
    flex: 1;
    height: 52px;
    background: var(--mm-lime);
    color: var(--mm-ink);
    border: 1px solid var(--mm-lime);
    border-radius: var(--mm-r-2);
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  /* Hide top CTA cluster on phone — replaced by sticky mobile bar */
  .mm-pdp-cta__row--secondary {
    display: none;
  }
}
/* =========================================================
   MunchMakers Redesign — Cart page
   Translates .design-handoffs/main/project/cart.jsx and
   .design-handoffs/mobile/project/mobile-cart.jsx.
   Co-exists with legacy .cart-* classes (left on the same nodes
   so existing cart JS in app.js still finds its hooks).
   ========================================================= */
.mm-cart-page {
  background: var(--mm-paper);
  color: var(--mm-text);
  font-family: var(--mm-font-body);
  font-size: 15px;
  line-height: 1.5;
}

.mm-cart-page,
.mm-cart-page * {
  box-sizing: border-box;
}

.mm-cart-page a {
  color: inherit;
  text-decoration: none;
}

.mm-cart-page button {
  font-family: inherit;
  cursor: pointer;
}

.mm-cart-page img,
.mm-cart-page svg {
  display: block;
  max-width: 100%;
}

.mm-cart-frame {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 0 32px;
}

/* === Header band ======================================= */
.mm-cart-head {
  padding: 40px 0 24px;
}

.mm-cart-head__row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 16px;
}

.mm-cart-head__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.mm-cart-head__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-cart-head__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.98;
  font-size: clamp(36px, 4.6vw, 64px);
  color: var(--mm-ink);
  margin: 0;
  text-wrap: balance;
}

.mm-cart-head__title-meta {
  color: var(--mm-text-3);
  font-weight: 500;
}

.mm-cart-head__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mm-cart-head__btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.mm-cart-head__btn:hover {
  border-color: var(--mm-ink);
  background: var(--mm-paper-2);
}

/* === Body grid ========================================= */
.mm-cart-body {
  padding-bottom: 80px;
}

.mm-cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

/* === Line items ======================================== */
.mm-cart-list {
  border-top: 1px solid var(--mm-rule);
}

.mm-cart-line {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--mm-rule);
}

.mm-cart-line__image {
  position: relative;
  aspect-ratio: 1/1;
  height: auto;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  overflow: hidden;
  display: block;
}

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

.mm-cart-line__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  min-width: 0;
}

.mm-cart-line__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.mm-cart-line__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  height: 22px;
  padding: 0 8px;
  background: var(--mm-paper-2);
  color: var(--mm-text-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-pill);
}

.mm-cart-line__chip--lime {
  background: var(--mm-lime-tint);
  color: var(--mm-lime-ink);
  border-color: #d6e3b0;
}

.mm-cart-line__chip--lime::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mm-lime-ink);
}

.mm-cart-line__name {
  display: block;
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.012em;
  color: var(--mm-ink);
  text-decoration: none;
}

.mm-cart-line__name:hover {
  color: var(--mm-text-2);
}

.mm-cart-line__spec {
  margin-top: 6px;
  font-family: var(--mm-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mm-text-2);
}

.mm-cart-line__art-row {
  margin-top: 14px;
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 12px;
  flex-wrap: wrap;
}

.mm-cart-line__art-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-cart-line__art-thumb {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 1px solid var(--mm-rule);
  background: var(--mm-paper-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-mono);
  font-size: 9px;
  color: var(--mm-text-3);
  letter-spacing: 0.04em;
  overflow: hidden;
}

.mm-cart-line__art-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-cart-line__art-name {
  font-family: var(--mm-font-mono);
  color: var(--mm-text-2);
}

.mm-cart-line__edit-design {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mm-cart-line__sep {
  color: var(--mm-text-4);
}

.mm-cart-line__right {
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.mm-cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-cart-qty__btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  font-size: 16px;
  cursor: pointer;
}

.mm-cart-qty__btn:hover {
  border-color: var(--mm-ink);
}

.mm-cart-qty__input {
  width: 64px;
  height: 32px;
  text-align: center;
  font-family: var(--mm-font-mono);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  color: var(--mm-ink);
  outline: none;
}

.mm-cart-qty__input:focus {
  border-color: var(--mm-ink);
}

.mm-cart-line__total-block {
  text-align: right;
}

.mm-cart-line__total {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
  line-height: 1;
}

.mm-cart-line__breakdown {
  margin-top: 4px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mm-text-3);
}

.mm-cart-line__saved {
  margin-top: 2px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--mm-lime-ink);
}

.mm-cart-line__links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mm-cart-line__link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--mm-font-display);
  font-size: 12px;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.mm-cart-line__link--danger {
  color: #b8412e;
}

/* === NET-30 callout ==================================== */
.mm-cart-net30 {
  margin-top: 32px;
  padding: 24px;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

.mm-cart-net30__badge {
  width: 44px;
  height: 44px;
  border-radius: var(--mm-r-3);
  background: var(--mm-ink);
  color: var(--mm-lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--mm-font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

.mm-cart-net30__title {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--mm-ink);
}

.mm-cart-net30__body {
  font-size: 13px;
  color: var(--mm-text-2);
  margin-top: 4px;
}

.mm-cart-net30__cta {
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.mm-cart-net30__cta:hover {
  background: #fff;
  border-color: var(--mm-ink);
}

/* === "Pairs well" upsell ============================== */
.mm-cart-pairs {
  margin-top: 56px;
}

.mm-cart-pairs__marker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  padding: 16px 0;
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
  margin-bottom: 24px;
}

.mm-cart-pairs__marker .num {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mm-cart-pairs__marker .spacer {
  flex: 1;
}

.mm-cart-pairs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mm-cart-pairs__card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.mm-cart-pairs__card:hover {
  transform: translateY(-2px);
  border-color: var(--mm-text-3);
  box-shadow: var(--mm-shadow-2);
}

.mm-cart-pairs__thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: var(--mm-paper-2);
  overflow: hidden;
}

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

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

.mm-cart-pairs__sku {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

.mm-cart-pairs__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--mm-ink);
  margin-top: 4px;
  line-height: 1.3;
}

.mm-cart-pairs__price {
  margin-top: 4px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-2);
}

/* === Sticky dark order summary ========================= */
.mm-cart-aside {
  position: sticky;
  top: 132px;
  align-self: start;
}

.mm-cart-summary {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-radius: var(--mm-r-3);
  overflow: hidden;
}

.mm-cart-summary__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--mm-ink-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mm-cart-summary__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-cart-summary__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-cart-summary__live {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-lime);
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mm-cart-summary__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-lime);
}

.mm-cart-summary__body {
  padding: 20px 24px;
}

.mm-cart-summary__lines {
  width: 100%;
  font-family: var(--mm-font-mono);
  font-size: 13px;
}

.mm-cart-summary__line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  color: rgba(250, 250, 247, 0.65);
}

.mm-cart-summary__line > :last-child {
  color: var(--mm-paper);
}

.mm-cart-summary__line--discount > :last-child {
  color: var(--mm-lime);
}

.mm-cart-summary__line--muted > :last-child {
  color: rgba(250, 250, 247, 0.55);
}

.mm-cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-ink-3);
}

.mm-cart-summary__total-label {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.55);
  text-transform: uppercase;
}

.mm-cart-summary__total-value {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.025em;
  color: var(--mm-paper);
  line-height: 1;
}

.mm-cart-summary__delivery {
  padding: 16px 24px;
  background: rgba(250, 250, 247, 0.04);
  border-top: 1px solid var(--mm-ink-3);
}

.mm-cart-summary__delivery-label {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.6);
  margin-bottom: 4px;
}

.mm-cart-summary__delivery-window {
  font-family: var(--mm-font-display);
  font-weight: 600;
  color: var(--mm-paper);
}

.mm-cart-summary__delivery-note {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: rgba(250, 250, 247, 0.6);
  margin-top: 2px;
}

/* === Coupon row ======================================== */
.mm-cart-coupon {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.mm-cart-coupon__input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  color: var(--mm-ink);
  font-family: var(--mm-font-mono);
  font-size: 13px;
  outline: none;
}

.mm-cart-coupon__input:focus {
  border-color: var(--mm-ink);
}

.mm-cart-coupon__input::placeholder {
  color: var(--mm-text-4);
}

.mm-cart-coupon__btn {
  height: 44px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.mm-cart-coupon__btn:hover {
  background: var(--mm-paper-2);
  border-color: var(--mm-ink);
}

.mm-cart-coupon__applied {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--mm-lime-tint);
  border: 1px solid #d6e3b0;
  border-radius: var(--mm-r-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.mm-cart-coupon__remove {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mm-lime-ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mm-cart-coupon__message {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mm-text-3);
}

.mm-cart-coupon__message[data-type=error] {
  color: #b8412e;
}

.mm-cart-coupon__message[data-type=success] {
  color: var(--mm-lime-ink);
}

/* === CTA + secondary ==================================== */
.mm-cart-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  height: 56px;
  padding: 0 24px;
  background: var(--mm-lime);
  color: var(--mm-ink);
  border: 1px solid var(--mm-lime);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.mm-cart-cta:hover {
  background: #b6db6c;
  border-color: #b6db6c;
}

.mm-cart-cta__arrow {
  transition: transform 160ms ease;
}

.mm-cart-cta:hover .mm-cart-cta__arrow {
  transform: translateX(3px);
}

.mm-cart-quote-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  background: transparent;
  border: 0;
  padding: 6px 0;
  color: var(--mm-text-2);
  font-family: var(--mm-font-display);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* === Specialist card ================================== */
.mm-cart-specialist {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--mm-text-2);
}

.mm-cart-specialist__label {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

.mm-cart-specialist__row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mm-cart-specialist__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mm-lime-tint);
  border: 1px solid #d6e3b0;
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-lime-ink);
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 14px;
}

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

.mm-cart-specialist__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  color: var(--mm-ink);
}

.mm-cart-specialist__contact {
  color: var(--mm-text-2);
}

/* === Loyalty / trust under summary ===================== */
.mm-cart-loyalty {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: var(--mm-paper-2);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--mm-text-2);
}

.mm-cart-loyalty__icon {
  color: var(--mm-lime-ink);
  flex-shrink: 0;
}

.mm-cart-loyalty strong {
  color: var(--mm-ink);
  font-weight: 700;
}

.mm-cart-loyalty a {
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mm-cart-trust {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mm-text-2);
}

.mm-cart-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-cart-trust__item svg {
  color: var(--mm-lime-ink);
  flex-shrink: 0;
}

/* === Empty state ======================================= */
.mm-cart-empty {
  padding: 80px 32px;
  text-align: center;
  border: 1px dashed var(--mm-rule);
  border-radius: var(--mm-r-3);
  background: #fff;
  max-width: 720px;
  margin: 24px auto 96px;
}

.mm-cart-empty__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--mm-ink);
  margin: 8px 0;
}

.mm-cart-empty__text {
  color: var(--mm-text-2);
  margin: 0 auto 24px;
  max-width: 48ch;
}

.mm-cart-empty__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* === Mobile sticky bottom CTA ========================== */
.mm-cart-mobile-bar {
  display: none;
}

/* === Tablet (<= 1023px) ================================ */
@media (max-width: 1023px) {
  .mm-cart-frame {
    padding: 0 24px;
  }
  .mm-cart-head {
    padding: 28px 0 20px;
  }
  .mm-cart-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mm-cart-aside {
    position: static;
  }
  .mm-cart-line {
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 20px 0;
  }
  .mm-cart-line__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mm-cart-line__right {
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    min-width: 0;
  }
  .mm-cart-pairs__grid {
    grid-template-columns: 1fr;
  }
}
/* === Phone (<= 639px) ================================== */
@media (max-width: 639px) {
  .mm-cart-frame {
    padding: 0 16px;
  }
  .mm-cart-head {
    padding: 20px 0 12px;
  }
  .mm-cart-head__title {
    font-size: clamp(28px, 8vw, 36px);
  }
  .mm-cart-head__title-meta {
    display: block;
    font-size: 14px;
    margin-top: 4px;
  }
  .mm-cart-head__actions {
    display: none;
  }
  .mm-cart-line {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  .mm-cart-line__chips {
    gap: 4px;
  }
  .mm-cart-line__name {
    font-size: 16px;
  }
  .mm-cart-line__spec {
    font-size: 12px;
  }
  .mm-cart-line__art-row {
    gap: 10px;
  }
  .mm-cart-line__total {
    font-size: 22px;
  }
  .mm-cart-net30 {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    text-align: left;
  }
  .mm-cart-net30__cta {
    justify-self: start;
  }
  .mm-cart-pairs {
    margin-top: 32px;
  }
  .mm-cart-pairs__marker {
    font-size: 10px;
    padding: 12px 0;
    margin-bottom: 16px;
  }
  .mm-cart-summary__total-value {
    font-size: 28px;
  }
  .mm-cart-body {
    padding-bottom: 110px;
  }
  /* Sticky bottom mobile bar */
  .mm-cart-mobile-bar {
    display: flex;
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    background: rgba(250, 249, 245, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--mm-rule);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    align-items: center;
    z-index: 35;
  }
  .mm-cart-mobile-bar__price {
    line-height: 1;
  }
  .mm-cart-mobile-bar__label {
    font-family: var(--mm-font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--mm-text-3);
  }
  .mm-cart-mobile-bar__total {
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--mm-ink);
    margin-top: 2px;
  }
  .mm-cart-mobile-bar__cta {
    flex: 1;
    height: 52px;
    background: var(--mm-lime);
    color: var(--mm-ink);
    border: 1px solid var(--mm-lime);
    border-radius: var(--mm-r-2);
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
  }
}
/* =========================================================
   MunchMakers Redesign — Checkout step 1 (Contact + Address)
   Translates .design-handoffs/main/project/checkout.jsx +
   checkout-bits.jsx + .design-handoffs/mobile/project/mobile-checkout.jsx.
   Co-exists with legacy .checkout-* / .form-* classes (left in place
   so the existing checkout-step-1.js bundle continues to bind).
   ========================================================= */
.mm-co-page {
  background: var(--mm-paper);
  color: var(--mm-text);
  font-family: var(--mm-font-body);
  font-size: 15px;
  line-height: 1.5;
}

.mm-co-page,
.mm-co-page * {
  box-sizing: border-box;
}

.mm-co-page a {
  color: inherit;
  text-decoration: none;
}

.mm-co-page button {
  font-family: inherit;
  cursor: pointer;
}

.mm-co-page img,
.mm-co-page svg {
  display: block;
  max-width: 100%;
}

.mm-co-frame {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 0 32px;
}

/* === Slim secure header (ink) ========================== */
.mm-co-secure {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 12px 0;
  border-bottom: 1px solid var(--mm-ink-3);
}

.mm-co-secure__inner {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mm-co-secure__id {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.6);
}

.mm-co-secure__lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-lime);
}

.mm-co-secure__lock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-lime);
  box-shadow: 0 0 0 3px rgba(164, 202, 89, 0.2);
}

/* === Page header ======================================= */
.mm-co-pagehead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 32px 0 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.mm-co-pagehead__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.98;
  color: var(--mm-ink);
  margin: 0;
}

.mm-co-pagehead__back {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--mm-font-display);
  font-size: 13px;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* === Body grid ========================================= */
.mm-co-body {
  padding-bottom: 80px;
}

.mm-co-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

.mm-co-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* === Step indicator ==================================== */
.mm-co-steps {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
}

.mm-co-step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mm-co-step__num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-mono);
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--mm-rule);
  background: #fff;
  color: var(--mm-ink);
}

.mm-co-step--current .mm-co-step__num {
  border-color: var(--mm-ink);
  background: var(--mm-ink);
  color: var(--mm-paper);
}

.mm-co-step--done .mm-co-step__num {
  border-color: var(--mm-lime-ink);
  background: var(--mm-lime);
  color: var(--mm-ink);
}

.mm-co-step__label {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-bottom: 1px;
}

.mm-co-step__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--mm-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-co-step--current .mm-co-step__name {
  color: var(--mm-ink);
}

/* === Card sections ===================================== */
.mm-co-card {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  padding: 28px;
}

.mm-co-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-co-card__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-co-card__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-co-card__hint {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

/* === Continue with Google ============================== */
.mm-co-google {
  width: 100%;
  margin-bottom: 16px;
  height: 56px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.mm-co-google:hover {
  background: var(--mm-paper-2);
  border-color: var(--mm-ink);
}

.mm-co-google__g {
  width: 18px;
  height: 18px;
}

.mm-co-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

.mm-co-divider::before,
.mm-co-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mm-rule);
}

/* === Form fields ======================================= */
.mm-co-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-co-field + .mm-co-field {
  margin-top: 16px;
}

.mm-co-field-row {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.mm-co-field-row--2 {
  grid-template-columns: 1fr 1fr;
}

.mm-co-field-row--3 {
  grid-template-columns: 2fr 1fr 1fr;
}

.mm-co-field-row .mm-co-field {
  margin-top: 0;
}

.mm-co-label {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--mm-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.mm-co-label__req {
  color: #b8412e;
  font-weight: 700;
}

.mm-co-label__opt {
  color: var(--mm-text-3);
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.mm-co-input,
.mm-co-select,
.mm-co-textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  color: var(--mm-ink);
  font-family: var(--mm-font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mm-co-input:focus,
.mm-co-select:focus,
.mm-co-textarea:focus {
  border-color: var(--mm-ink);
  box-shadow: 0 0 0 3px rgba(20, 17, 15, 0.06);
}

.mm-co-input::placeholder,
.mm-co-textarea::placeholder {
  color: var(--mm-text-4);
}

.mm-co-textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.mm-co-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27><path fill=%27none%27 stroke=%27%237a746d%27 stroke-width=%271.4%27 d=%27M1 1l4 4 4-4%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.mm-co-help {
  font-size: 12px;
  color: var(--mm-text-3);
  line-height: 1.45;
  margin-top: 2px;
}

/* === Mode toggle (guest / create account) ============== */
.mm-co-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.mm-co-mode__option {
  position: relative;
  height: 64px;
  padding: 12px 18px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: border-color 120ms ease, background 120ms ease;
}

.mm-co-mode__option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mm-co-mode__option.is-selected,
.mm-co-mode__option:has(input:checked) {
  border-color: var(--mm-lime-ink);
  background: var(--mm-lime-tint);
}

.mm-co-mode__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--mm-ink);
}

.mm-co-mode__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--mm-rule);
  background: #fff;
  flex-shrink: 0;
}

.mm-co-mode__option.is-selected .mm-co-mode__dot,
.mm-co-mode__option:has(input:checked) .mm-co-mode__dot {
  background: var(--mm-lime-ink);
  border-color: var(--mm-lime-ink);
  box-shadow: inset 0 0 0 3px var(--mm-lime-tint);
}

.mm-co-mode__sub {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mm-text-2);
  text-transform: uppercase;
  padding-left: 22px;
}

/* === Inline checkbox row =============================== */
.mm-co-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: 13px;
  color: var(--mm-text-2);
  line-height: 1.45;
}

.mm-co-check input {
  accent-color: var(--mm-lime-ink);
  margin-top: 2px;
  flex-shrink: 0;
}

.mm-co-check--solo {
  margin-top: 0;
}

.mm-co-check strong {
  color: var(--mm-ink);
}

/* === Payment preview (step 3 ghost) ===================== */
.mm-co-preview {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  padding: 28px;
  opacity: 0.65;
}

.mm-co-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-co-preview__step {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-left: 8px;
}

.mm-co-preview__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-pill);
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mm-text-2);
}

.mm-co-preview__methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.mm-co-preview__method {
  height: 48px;
  border-radius: var(--mm-r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: 1px solid var(--mm-rule);
}

.mm-co-preview__method--paypal {
  background: #003087;
  color: #fff;
  font-family: Times, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  border-color: #003087;
}

.mm-co-preview__method--card {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink);
}

.mm-co-preview__method--apple {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink);
}

.mm-co-preview__method--google {
  background: #fff;
  color: var(--mm-ink);
}

.mm-co-preview__net30 {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--mm-paper-2);
  border-radius: var(--mm-r-2);
  font-size: 13px;
  color: var(--mm-text-2);
}

.mm-co-preview__net30 strong {
  color: var(--mm-ink);
}

/* === Bottom row (back + submit) ======================== */
.mm-co-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.mm-co-foot__back {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.mm-co-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  background: var(--mm-lime);
  color: var(--mm-ink);
  border: 1px solid var(--mm-lime);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.mm-co-submit:hover {
  background: #b6db6c;
  border-color: #b6db6c;
}

.mm-co-submit__arrow {
  transition: transform 160ms ease;
}

.mm-co-submit:hover .mm-co-submit__arrow {
  transform: translateX(3px);
}

/* === Error banner ====================================== */
.mm-co-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #fdecea;
  color: #7a2530;
  border: 1px solid #f4c5be;
  border-radius: var(--mm-r-2);
  font-size: 13px;
  line-height: 1.45;
}

.mm-co-error svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* === Privacy notice ==================================== */
.mm-co-privacy {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule-soft);
  border-radius: var(--mm-r-2);
  font-size: 12px;
  color: var(--mm-text-3);
  line-height: 1.5;
}

.mm-co-privacy svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}

.mm-co-privacy a {
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* === Sticky summary aside ============================== */
.mm-co-aside {
  position: sticky;
  top: 132px;
  align-self: start;
}

.mm-co-summary {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  overflow: hidden;
}

.mm-co-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mm-rule);
  background: var(--mm-paper-2);
}

.mm-co-summary__edit {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mm-co-summary__body {
  padding: 20px;
}

.mm-co-summary__line {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mm-rule-soft);
}

.mm-co-summary__line:last-child {
  border-bottom: 0;
}

.mm-co-summary__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: var(--mm-paper-2);
  overflow: hidden;
}

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

.mm-co-summary__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--mm-ink);
  line-height: 1.3;
}

.mm-co-summary__spec {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-top: 2px;
}

.mm-co-summary__qty {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-2);
  margin-top: 4px;
}

.mm-co-summary__line-price {
  font-family: var(--mm-font-display);
  font-weight: 700;
  text-align: right;
  color: var(--mm-ink);
}

.mm-co-summary__coupon {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.mm-co-summary__coupon input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: #fff;
  font-family: var(--mm-font-mono);
  font-size: 13px;
  color: var(--mm-ink);
  outline: none;
}

.mm-co-summary__coupon input:focus {
  border-color: var(--mm-ink);
}

.mm-co-summary__coupon-apply {
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  color: var(--mm-ink);
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.mm-co-summary__coupon-apply:hover {
  background: var(--mm-paper-2);
  border-color: var(--mm-ink);
}

.mm-co-summary__coupon-applied {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--mm-lime-tint);
  border: 1px solid #d6e3b0;
  border-radius: var(--mm-r-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.mm-co-summary__coupon-applied strong {
  color: var(--mm-lime-ink);
}

.mm-co-summary__coupon-message {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mm-text-3);
}

.mm-co-summary__totals {
  width: 100%;
  margin-top: 16px;
  font-family: var(--mm-font-mono);
  font-size: 12px;
}

.mm-co-summary__totals tr td {
  padding: 4px 0;
  color: var(--mm-text-2);
}

.mm-co-summary__totals tr td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--mm-ink);
}

.mm-co-summary__totals tr.is-pending td:last-child {
  color: var(--mm-text-3);
  font-weight: 400;
}

.mm-co-summary__totals tr.is-discount td:last-child {
  color: var(--mm-lime-ink);
}

.mm-co-summary__est {
  padding: 16px 20px;
  border-top: 1px solid var(--mm-rule);
  background: var(--mm-paper-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mm-co-summary__est-label {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

.mm-co-summary__est-value {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
}

/* === Trust footnote + specialist card ================== */
.mm-co-trust {
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--mm-text-2);
  line-height: 1.45;
}

.mm-co-trust__row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.mm-co-trust__dot {
  color: var(--mm-lime-ink);
  font-weight: 700;
  flex-shrink: 0;
}

.mm-co-trust strong {
  color: var(--mm-ink);
}

.mm-co-specialist {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--mm-ink);
  border-radius: var(--mm-r-3);
  background: var(--mm-ink);
  color: var(--mm-paper);
}

.mm-co-specialist__label {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.55);
  margin-bottom: 8px;
}

.mm-co-specialist__row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mm-co-specialist__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(164, 202, 89, 0.15);
  color: var(--mm-lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mm-co-specialist__title {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--mm-paper);
}

.mm-co-specialist__contact {
  font-size: 12px;
  color: rgba(250, 250, 247, 0.7);
}

.mm-co-specialist__contact a {
  color: rgba(250, 250, 247, 0.85);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* === Tablet (<= 1023px) ================================ */
@media (max-width: 1023px) {
  .mm-co-frame {
    padding: 0 24px;
  }
  .mm-co-secure__inner {
    padding: 0 24px;
  }
  .mm-co-pagehead {
    margin: 24px 0 16px;
  }
  .mm-co-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mm-co-aside {
    position: static;
  }
  .mm-co-card {
    padding: 20px;
  }
  .mm-co-preview {
    padding: 20px;
  }
  /* Step indicator: stack vertically */
  .mm-co-steps {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 20px;
  }
  .mm-co-mode {
    grid-template-columns: 1fr;
  }
  .mm-co-field-row--3 {
    grid-template-columns: 2fr 1fr;
  }
  .mm-co-field-row--3 > :nth-child(3) {
    grid-column: 1/-1;
  }
  .mm-co-foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }
  .mm-co-submit {
    width: 100%;
  }
}
/* === Phone (<= 639px) ================================== */
@media (max-width: 639px) {
  .mm-co-frame {
    padding: 0 16px;
  }
  .mm-co-secure {
    padding: 8px 0;
  }
  .mm-co-secure__inner {
    padding: 0 16px;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }
  .mm-co-pagehead {
    margin: 20px 0 12px;
  }
  .mm-co-pagehead__title {
    font-size: clamp(28px, 8vw, 36px);
  }
  .mm-co-card {
    padding: 16px;
  }
  .mm-co-preview {
    padding: 16px;
  }
  .mm-co-preview__methods {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mm-co-field-row--2,
  .mm-co-field-row--3 {
    grid-template-columns: 1fr;
  }
  .mm-co-field-row--3 > :nth-child(3) {
    grid-column: auto;
  }
  .mm-co-summary__head {
    padding: 14px 16px;
  }
  .mm-co-summary__body {
    padding: 14px 16px;
  }
  .mm-co-summary__est {
    padding: 14px 16px;
  }
}
/* =========================================================
   MunchMakers Redesign — Customer account portal
   Translates .design-handoffs/account/project/*.jsx +
   account-styles.css. "Bloomberg-terminal-for-stoners" feel:
   ink sidebar, paper-warm content, mono micro-copy, lime accents.
   ========================================================= */
.mm-acct {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 64px);
  background: var(--mm-paper-2);
  font-family: var(--mm-font-body);
  color: var(--mm-text);
}

.mm-acct,
.mm-acct * {
  box-sizing: border-box;
}

.mm-acct a {
  color: inherit;
  text-decoration: none;
}

.mm-acct button {
  font-family: inherit;
  cursor: pointer;
}

.mm-acct img,
.mm-acct svg {
  display: block;
  max-width: 100%;
}

/* === Sidebar (ink) ===================================== */
.mm-acct-side {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 28px 0;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mm-acct-side__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mm-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--mm-paper);
  padding: 0 24px 18px;
}

.mm-acct-side__logo span.dot {
  color: var(--mm-lime);
}

.mm-acct-org {
  padding: 0 24px 20px;
  border-bottom: 1px solid var(--mm-ink-3);
  margin-bottom: 16px;
}

.mm-acct-org__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--mm-r-3);
  background: var(--mm-lime);
  color: var(--mm-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.mm-acct-org__name {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 16px;
  margin-top: 12px;
  letter-spacing: -0.005em;
  color: var(--mm-paper);
}

.mm-acct-org__meta {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(250, 250, 247, 0.55);
  margin-top: 4px;
  text-transform: uppercase;
}

.mm-acct-org__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: var(--mm-r-pill);
  background: rgba(164, 202, 89, 0.15);
  color: var(--mm-lime);
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.mm-acct-org__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-lime);
}

.mm-acct-nav-section {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.4);
  padding: 16px 24px 6px;
  text-transform: uppercase;
}

.mm-acct-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 24px;
  color: rgba(250, 250, 247, 0.75);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  border-left: 2px solid transparent;
  text-decoration: none;
  font-family: inherit;
}

.mm-acct-nav-link:hover {
  color: var(--mm-paper);
  background: rgba(250, 250, 247, 0.04);
}

.mm-acct-nav-link.is-active {
  color: var(--mm-paper);
  background: rgba(250, 250, 247, 0.06);
  border-left-color: var(--mm-lime);
  font-weight: 600;
}

.mm-acct-nav-link__ico {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-mono);
}

.mm-acct-nav-link__badge {
  margin-left: auto;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--mm-lime);
  color: var(--mm-ink);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.mm-acct-side__foot {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid var(--mm-ink-3);
  font-family: var(--mm-font-mono);
  font-size: 10px;
  color: rgba(250, 250, 247, 0.5);
  letter-spacing: 0.06em;
}

.mm-acct-side__foot-person {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--mm-paper);
  margin-bottom: 8px;
  font-family: var(--mm-font-body);
  font-size: 13px;
  letter-spacing: 0;
}

.mm-acct-side__foot-person-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(164, 202, 89, 0.15);
  color: var(--mm-lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mm-acct-side__foot-back {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(250, 250, 247, 0.2);
  color: var(--mm-paper);
  font-family: var(--mm-font-display);
  font-weight: 500;
  font-size: 13px;
  height: 36px;
  border-radius: var(--mm-r-2);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mm-acct-side__foot-back:hover {
  background: rgba(250, 250, 247, 0.06);
}

/* === Main column ======================================= */
.mm-acct-main {
  padding: 32px 40px 80px;
  max-width: 1240px;
  min-width: 0;
}

.mm-acct-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.mm-acct-crumb a {
  color: inherit;
}

.mm-acct-crumb a:hover {
  color: var(--mm-ink);
}

.mm-acct-crumb > .sep {
  opacity: 0.5;
}

.mm-acct-crumb > .current {
  color: var(--mm-ink);
}

.mm-acct-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.mm-acct-head__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 48px);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--mm-ink);
  line-height: 0.98;
}

.mm-acct-head__sub {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-top: 6px;
}

.mm-acct-head__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mm-acct-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--mm-rule);
  background: #fff;
  color: var(--mm-ink);
  border-radius: var(--mm-r-2);
  font-family: var(--mm-font-display);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.mm-acct-btn:hover {
  border-color: var(--mm-ink);
  background: var(--mm-paper-2);
}

.mm-acct-btn--primary {
  background: var(--mm-lime);
  border-color: var(--mm-lime);
  color: var(--mm-ink);
  font-weight: 600;
}

.mm-acct-btn--primary:hover {
  background: #b6db6c;
  border-color: #b6db6c;
}

.mm-acct-btn--ink {
  background: var(--mm-ink);
  border-color: var(--mm-ink);
  color: var(--mm-paper);
  font-weight: 600;
}

.mm-acct-btn--ink:hover {
  background: var(--mm-ink-2);
  border-color: var(--mm-ink-2);
}

.mm-acct-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

/* === KPI cards ========================================= */
.mm-acct-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.mm-acct-kpi {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.mm-acct-kpi--dark {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-color: var(--mm-ink-3);
}

.mm-acct-kpi__label {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

.mm-acct-kpi--dark .mm-acct-kpi__label {
  color: rgba(250, 250, 247, 0.55);
}

.mm-acct-kpi__value {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.025em;
}

.mm-acct-kpi__delta {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mm-ok);
}

.mm-acct-kpi__delta--down {
  color: var(--mm-danger);
}

.mm-acct-kpi__delta--warn {
  color: var(--mm-warn);
}

.mm-acct-kpi__delta--neutral {
  color: var(--mm-text-3);
}

.mm-acct-kpi__spark {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 70%;
  height: 38px;
  opacity: 0.6;
}

/* === Section cards ===================================== */
.mm-acct-card {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  margin-bottom: 24px;
  overflow: hidden;
}

.mm-acct-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--mm-rule);
  flex-wrap: wrap;
  gap: 10px;
}

.mm-acct-card__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--mm-ink);
}

.mm-acct-card__sub {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 12px;
}

.mm-acct-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mm-acct-card__body {
  padding: 20px;
}

.mm-acct-card__body--flush {
  padding: 4px 0 0;
}

/* === Table ============================================= */
.mm-acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mm-acct-table thead th {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--mm-text-3);
  text-transform: uppercase;
  padding: 10px 20px;
  text-align: left;
  border-bottom: 1px solid var(--mm-rule);
  background: var(--mm-paper-2);
}

.mm-acct-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--mm-rule-soft);
  vertical-align: middle;
  color: var(--mm-text-2);
}

.mm-acct-table tbody tr:last-child td {
  border-bottom: 0;
}

.mm-acct-table tbody tr:hover {
  background: var(--mm-paper-2);
}

.mm-acct-table tbody tr.is-hoverable {
  cursor: pointer;
}

.mm-acct-table .mm-acct-table__sku {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mm-acct-table .mm-acct-table__num {
  font-family: var(--mm-font-mono);
  font-weight: 600;
  color: var(--mm-ink);
}

.mm-acct-table .mm-acct-table__name {
  font-family: var(--mm-font-display);
  font-weight: 600;
  color: var(--mm-ink);
  font-size: 14px;
}

.mm-acct-table .mm-acct-table__spec {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.mm-acct-table__product {
  display: flex;
  gap: 12px;
  align-items: center;
}

.mm-acct-table__thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--mm-r-2);
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  overflow: hidden;
  flex-shrink: 0;
}

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

.mm-acct-table-foot {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--mm-rule);
  background: var(--mm-paper-2);
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-acct-table-foot__pages {
  display: flex;
  gap: 6px;
}

/* === Status pills ====================================== */
.mm-acct-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 3px;
  font-family: var(--mm-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.mm-acct-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.mm-acct-pill--ok {
  background: rgba(47, 122, 63, 0.12);
  color: var(--mm-ok);
}

.mm-acct-pill--ok::before {
  background: var(--mm-ok);
}

.mm-acct-pill--warn {
  background: rgba(181, 132, 0, 0.14);
  color: var(--mm-warn);
}

.mm-acct-pill--warn::before {
  background: var(--mm-warn);
}

.mm-acct-pill--info {
  background: rgba(46, 110, 181, 0.12);
  color: var(--mm-accent-blue);
}

.mm-acct-pill--info::before {
  background: var(--mm-accent-blue);
}

.mm-acct-pill--danger {
  background: #fdecea;
  color: var(--mm-danger);
  border-color: #f4c5be;
}

.mm-acct-pill--danger::before {
  background: var(--mm-danger);
}

.mm-acct-pill--muted {
  background: var(--mm-paper-2);
  color: var(--mm-text-2);
  border-color: var(--mm-rule);
}

.mm-acct-pill--muted::before {
  background: var(--mm-text-3);
}

.mm-acct-pill--lime {
  background: rgba(164, 202, 89, 0.18);
  color: var(--mm-lime-ink);
}

.mm-acct-pill--lime::before {
  background: var(--mm-lime-ink);
}

/* === Filter tabs (orders page) ========================= */
.mm-acct-tabs {
  display: flex;
  padding: 8px 8px;
  gap: 4px;
  border-bottom: 1px solid var(--mm-rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mm-acct-tabs::-webkit-scrollbar {
  display: none;
}

.mm-acct-tab {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--mm-text-2);
  font-family: var(--mm-font-display);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--mm-r-2);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.mm-acct-tab.is-active {
  background: var(--mm-ink);
  color: var(--mm-paper);
}

.mm-acct-tab__count {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  background: var(--mm-paper-2);
  color: var(--mm-ink);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.mm-acct-tab.is-active .mm-acct-tab__count {
  background: var(--mm-lime);
}

.mm-acct-tabs__tools {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 8px;
}

.mm-acct-search {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: var(--mm-paper-2);
  font-family: var(--mm-font-body);
  font-size: 13px;
  color: var(--mm-ink);
  outline: none;
  width: 220px;
}

.mm-acct-search:focus {
  border-color: var(--mm-ink);
}

/* === Stage tracker ===================================== */
.mm-acct-stage-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.mm-acct-stage-track__seg {
  height: 6px;
  border-radius: 2px;
  background: var(--mm-paper-3);
}

.mm-acct-stage-track__seg.is-done {
  background: var(--mm-lime);
}

.mm-acct-stage-track__seg.is-current {
  background: var(--mm-ink);
}

.mm-acct-stage-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mm-font-mono);
  font-size: 9px;
  color: var(--mm-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mm-acct-stage-labels .is-done {
  color: var(--mm-ok);
}

.mm-acct-stage-labels .is-current {
  color: var(--mm-ink);
  font-weight: 700;
}

/* === Mini stat ========================================= */
.mm-acct-mini {
  padding: 14px 16px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: var(--mm-paper-2);
}

.mm-acct-mini__l {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mm-text-3);
  text-transform: uppercase;
}

.mm-acct-mini__v {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
  margin-top: 4px;
}

.mm-acct-mini__s {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-2);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === Activity feed ===================================== */
.mm-acct-feed {
  padding: 0 20px;
}

.mm-acct-feed__row {
  display: grid;
  grid-template-columns: 100px 32px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--mm-rule-soft);
}

.mm-acct-feed__row:last-child {
  border-bottom: 0;
}

.mm-acct-feed__time {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mm-text-3);
  padding-top: 2px;
  text-transform: uppercase;
}

.mm-acct-feed__ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-ink);
  font-weight: 700;
}

.mm-acct-feed__ico--lime {
  background: var(--mm-lime);
  border-color: var(--mm-lime);
}

.mm-acct-feed__ico--ink {
  background: var(--mm-ink);
  color: var(--mm-lime);
  border-color: var(--mm-ink);
}

.mm-acct-feed__title {
  font-family: var(--mm-font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--mm-ink);
}

.mm-acct-feed__sub {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-3);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mm-acct-feed__ext {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-2);
}

/* === Quick actions ===================================== */
.mm-acct-qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.mm-acct-qa {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}

.mm-acct-qa:hover {
  border-color: var(--mm-ink);
  transform: translateY(-1px);
}

.mm-acct-qa__ico {
  width: 36px;
  height: 36px;
  border-radius: var(--mm-r-2);
  background: var(--mm-lime-tint);
  color: var(--mm-lime-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--mm-font-display);
  font-weight: 800;
  font-size: 18px;
}

.mm-acct-qa__t {
  font-family: var(--mm-font-display);
  font-weight: 600;
  color: var(--mm-ink);
  font-size: 14px;
}

.mm-acct-qa__s {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  color: var(--mm-text-2);
  margin-top: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === 2-col / 3-col card grids ========================== */
.mm-acct-grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.mm-acct-grid-2 > .mm-acct-card {
  margin: 0;
}

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

/* === Address card / 3-up split ========================= */
.mm-acct-address-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.mm-acct-address {
  padding: 20px;
  border-right: 1px solid var(--mm-rule);
  background: #fff;
}

.mm-acct-address:last-child {
  border-right: 0;
}

.mm-acct-address.is-default {
  background: var(--mm-paper-2);
}

.mm-acct-address__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  align-items: center;
}

.mm-acct-address__name {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--mm-ink);
}

.mm-acct-address__body {
  font-size: 13px;
  color: var(--mm-text-2);
  line-height: 1.5;
}

.mm-acct-address__meta {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  color: var(--mm-text-3);
  letter-spacing: 0.04em;
  margin-top: 10px;
  text-transform: uppercase;
}

.mm-acct-address__actions {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* === Empty state ======================================= */
.mm-acct-empty {
  padding: 56px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--mm-rule);
  border-radius: var(--mm-r-3);
}

.mm-acct-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mm-paper-2);
  color: var(--mm-text-3);
  margin-bottom: 12px;
}

.mm-acct-empty__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
  margin: 0 0 6px;
}

.mm-acct-empty__text {
  color: var(--mm-text-2);
  font-size: 14px;
  margin: 0 0 18px;
}

/* === Tablet (<= 1023px) ================================ */
@media (max-width: 1023px) {
  .mm-acct {
    grid-template-columns: 1fr;
  }
  .mm-acct-side {
    position: static;
    height: auto;
    width: 100%;
  }
  .mm-acct-main {
    padding: 24px 24px 56px;
  }
  .mm-acct-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mm-acct-qa-grid {
    grid-template-columns: 1fr;
  }
  .mm-acct-grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mm-acct-grid-3 {
    grid-template-columns: 1fr;
  }
  .mm-acct-address-grid {
    grid-template-columns: 1fr;
  }
  .mm-acct-address {
    border-right: 0;
    border-bottom: 1px solid var(--mm-rule);
  }
  .mm-acct-address:last-child {
    border-bottom: 0;
  }
  /* Sidebar collapses to a horizontal scrolling nav band on tablet */
  .mm-acct-side {
    padding: 16px 0;
    overflow-x: auto;
  }
  .mm-acct-side__logo,
  .mm-acct-org,
  .mm-acct-side__foot {
    display: none;
  }
  .mm-acct-nav-section {
    display: none;
  }
  .mm-acct-side > div {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    flex-wrap: nowrap;
  }
  .mm-acct-nav-link {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    border-radius: 0;
    flex-shrink: 0;
  }
  .mm-acct-nav-link.is-active {
    border-left: 0;
    border-bottom-color: var(--mm-lime);
    background: transparent;
  }
}
/* === Phone (<= 639px) ================================== */
@media (max-width: 639px) {
  .mm-acct-main {
    padding: 16px 16px 80px;
  }
  .mm-acct-head {
    margin-bottom: 16px;
  }
  .mm-acct-head__title {
    font-size: clamp(28px, 8vw, 36px);
  }
  .mm-acct-kpi-grid {
    grid-template-columns: 1fr;
  }
  .mm-acct-card__head {
    padding: 14px 16px;
    align-items: flex-start;
    flex-direction: column;
  }
  .mm-acct-card__sub {
    margin-left: 0;
    margin-top: 4px;
  }
  .mm-acct-card__body {
    padding: 14px 16px;
  }
  .mm-acct-table thead {
    display: none;
  }
  .mm-acct-table tbody td {
    padding: 10px 12px;
  }
  .mm-acct-feed {
    padding: 0 16px;
  }
  .mm-acct-feed__row {
    grid-template-columns: 60px 28px 1fr;
  }
  .mm-acct-feed__ext {
    display: none;
  }
}
/* =========================================================
   MunchMakers Redesign — Inner pages
   Shared primitives for "everything that isn't homepage / category
   / product / cart / checkout / account / vendor": contact, FAQ,
   blog, search, sitemap, privacy, generic CMS pages, 404/error,
   tracking, mockup, sale, brand, gallery.
   Goal: every public inner page wraps content in `.mm-page` and
   gets unified type + spacing + chrome so it doesn't look out of
   place against the redesigned site.
   ========================================================= */
/* === Slim ink page masthead ============================ */
.mm-page-mast {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-bottom: 1px solid var(--mm-ink-3);
}

.mm-page-mast__inner {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 56px 32px 48px;
}

.mm-page-mast__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.5);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.mm-page-mast__crumbs a {
  color: inherit;
}

.mm-page-mast__crumbs a:hover {
  color: var(--mm-paper);
}

.mm-page-mast__crumbs > .sep {
  opacity: 0.45;
}

.mm-page-mast__crumbs > .current {
  color: var(--mm-lime);
}

.mm-page-mast__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.mm-page-mast__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-page-mast__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(40px, 5vw, 80px);
  color: var(--mm-paper);
  margin: 0;
  text-wrap: balance;
}

.mm-page-mast__title em {
  font-style: italic;
  color: var(--mm-lime);
  font-weight: 700;
}

.mm-page-mast__lede {
  margin: 20px 0 0;
  max-width: 56ch;
  color: rgba(250, 250, 247, 0.75);
  font-size: 17px;
  line-height: 1.5;
}

/* Light/paper variant for less weighty pages (sitemap, privacy, etc.) */
.mm-page-mast--paper {
  background: var(--mm-paper);
  color: var(--mm-ink);
  border-bottom: 1px solid var(--mm-rule);
}

.mm-page-mast--paper .mm-page-mast__crumbs {
  color: var(--mm-text-3);
}

.mm-page-mast--paper .mm-page-mast__crumbs > .current {
  color: var(--mm-ink);
}

.mm-page-mast--paper .mm-page-mast__eyebrow {
  color: var(--mm-text-3);
}

.mm-page-mast--paper .mm-page-mast__title {
  color: var(--mm-ink);
}

.mm-page-mast--paper .mm-page-mast__lede {
  color: var(--mm-text-2);
}

/* === Frames ============================================ */
.mm-page-frame {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 0 32px;
}

.mm-page-frame--narrow {
  max-width: var(--mm-frame-narrow);
  margin: 0 auto;
  padding: 0 32px;
}

.mm-page-section {
  padding: 56px 0;
}

.mm-page-section--lg {
  padding: 80px 0;
}

.mm-page-section--bg-paper-2 {
  background: var(--mm-paper-2);
}

/* === Long-form prose (CMS body, privacy, terms, blog post body) === */
.mm-prose {
  font-family: var(--mm-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--mm-text);
  max-width: 68ch;
}

.mm-prose--full {
  max-width: none;
}

.mm-prose > * + * {
  margin-top: 18px;
}

.mm-prose h1,
.mm-prose h2,
.mm-prose h3,
.mm-prose h4 {
  font-family: var(--mm-font-display);
  color: var(--mm-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mm-prose h1 {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  margin-top: 48px;
}

.mm-prose h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 40px;
}

.mm-prose h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 32px;
}

.mm-prose h4 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 24px;
}

.mm-prose p {
  margin: 0 0 16px;
}

.mm-prose a {
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mm-prose a:hover {
  color: var(--mm-lime-ink);
}

.mm-prose strong {
  color: var(--mm-ink);
  font-weight: 700;
}

.mm-prose ul,
.mm-prose ol {
  margin: 16px 0;
  padding-left: 24px;
}

.mm-prose li {
  margin-bottom: 8px;
}

.mm-prose ul li::marker {
  color: var(--mm-lime-ink);
}

.mm-prose blockquote {
  border-left: 3px solid var(--mm-lime);
  margin: 24px 0;
  padding: 8px 18px;
  font-style: italic;
  color: var(--mm-text-2);
}

.mm-prose hr {
  border: 0;
  border-top: 1px solid var(--mm-rule);
  margin: 40px 0;
}

.mm-prose code {
  font-family: var(--mm-font-mono);
  font-size: 13px;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  padding: 1px 6px;
  border-radius: 3px;
}

.mm-prose pre {
  font-family: var(--mm-font-mono);
  font-size: 13px;
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 18px 20px;
  border-radius: var(--mm-r-2);
  overflow-x: auto;
}

.mm-prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

.mm-prose img {
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}

.mm-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 24px 0;
}

.mm-prose th,
.mm-prose td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--mm-rule);
}

.mm-prose th {
  background: var(--mm-paper-2);
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

/* === Contact: 4-up info cards =========================== */
.mm-contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mm-contact-card {
  background: #fff;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 120ms ease, transform 120ms ease;
}

.mm-contact-card:hover {
  border-color: var(--mm-text-3);
  transform: translateY(-1px);
}

.mm-contact-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--mm-r-2);
  background: var(--mm-lime-tint);
  color: var(--mm-lime-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mm-contact-card__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--mm-ink);
  margin: 0;
  letter-spacing: -0.005em;
}

.mm-contact-card__text {
  font-size: 13px;
  color: var(--mm-text-2);
  margin: 0;
  line-height: 1.5;
}

.mm-contact-card__link {
  font-family: var(--mm-font-mono);
  font-size: 12px;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin-top: auto;
  word-break: break-all;
}

/* === Contact: layout (form + sidebar) =================== */
.mm-contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.mm-contact-callback {
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-radius: var(--mm-r-3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.mm-contact-callback__eyebrow {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, 0.55);
}

.mm-contact-callback__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--mm-paper);
  margin: 0;
}

.mm-contact-success {
  text-align: center;
  padding: 56px 24px;
  background: var(--mm-lime-tint);
  border: 1px solid #d6e3b0;
  border-radius: var(--mm-r-3);
}

.mm-contact-success__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  background: var(--mm-lime);
  color: var(--mm-ink);
  border-radius: 50%;
  margin-bottom: 14px;
}

.mm-contact-success__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--mm-ink);
  margin: 0 0 8px;
}

.mm-contact-success__text {
  color: var(--mm-text-2);
  margin: 0 auto 18px;
  max-width: 48ch;
}

.mm-contact-aside {
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  padding: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-text-2);
}

.mm-contact-aside h3 {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mm-contact-aside h3::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mm-contact-aside h3 + * {
  margin-top: 0;
}

/* === FAQ: search + nav + accordion ===================== */
.mm-faq-search {
  position: relative;
  max-width: 520px;
  margin-top: 24px;
}

.mm-faq-search input {
  width: 100%;
  height: 56px;
  padding: 0 18px 0 48px;
  border: 1px solid rgba(250, 250, 247, 0.2);
  border-radius: var(--mm-r-3);
  background: rgba(250, 250, 247, 0.06);
  color: var(--mm-paper);
  font-family: var(--mm-font-body);
  font-size: 15px;
  outline: none;
}

.mm-faq-search input::placeholder {
  color: rgba(250, 250, 247, 0.5);
}

.mm-faq-search input:focus {
  border-color: var(--mm-lime);
}

.mm-faq-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(250, 250, 247, 0.5);
  pointer-events: none;
}

.mm-faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}

.mm-faq-nav {
  position: sticky;
  top: 132px;
  align-self: start;
}

.mm-faq-nav__title {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin: 0 0 12px;
}

.mm-faq-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mm-faq-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--mm-text-2);
  border-left: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
  font-family: var(--mm-font-display);
}

.mm-faq-nav__link:hover {
  color: var(--mm-ink);
  background: var(--mm-paper-2);
}

.mm-faq-nav__link.is-active {
  color: var(--mm-ink);
  background: var(--mm-paper-2);
  border-left-color: var(--mm-lime);
  font-weight: 600;
}

.mm-faq-section {
  margin-bottom: 40px;
}

.mm-faq-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--mm-rule);
  border-bottom: 1px solid var(--mm-rule);
  margin-bottom: 16px;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-text-3);
}

.mm-faq-section__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mm-ink);
  color: var(--mm-paper);
  border-radius: 2px;
  font-family: var(--mm-font-mono);
  font-weight: 700;
}

.mm-faq-section__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--mm-ink);
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: none;
}

.mm-faq-item {
  border-bottom: 1px solid var(--mm-rule-soft);
}

.mm-faq-item__head {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--mm-ink);
  text-align: left;
  cursor: pointer;
}

.mm-faq-item__head svg {
  flex-shrink: 0;
  color: var(--mm-text-3);
  transition: transform 200ms ease;
}

.mm-faq-item.is-open .mm-faq-item__head svg {
  transform: rotate(180deg);
}

.mm-faq-item__body {
  padding: 0 0 18px;
  display: none;
  color: var(--mm-text-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 64ch;
}

.mm-faq-item.is-open .mm-faq-item__body {
  display: block;
}

.mm-faq-cta {
  margin-top: 32px;
  padding: 18px;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  text-align: center;
}

.mm-faq-cta p {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin: 0 0 10px;
}

/* === Blog =============================================== */
.mm-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.mm-blog-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease;
}

.mm-blog-card:hover {
  transform: translateY(-2px);
}

.mm-blog-card__image {
  aspect-ratio: 16/11;
  background: var(--mm-paper-2);
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  overflow: hidden;
  display: block;
}

.mm-blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.mm-blog-card:hover .mm-blog-card__image img {
  transform: scale(1.04);
}

.mm-blog-card__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-top: 6px;
}

.mm-blog-card__cat {
  color: var(--mm-lime-ink);
  font-weight: 700;
}

.mm-blog-card__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--mm-ink);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

.mm-blog-card__excerpt {
  font-size: 14px;
  color: var(--mm-text-2);
  line-height: 1.55;
  margin: 0;
}

.mm-blog-post-mast {
  background: var(--mm-paper);
  border-bottom: 1px solid var(--mm-rule);
}

.mm-blog-post-mast__inner {
  max-width: var(--mm-frame-narrow);
  margin: 0 auto;
  padding: 56px 32px 40px;
}

.mm-blog-post-mast__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-bottom: 14px;
}

.mm-blog-post-mast__title {
  font-family: var(--mm-font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  color: var(--mm-ink);
  margin: 0;
  text-wrap: balance;
}

.mm-blog-post-mast__lede {
  margin: 18px 0 0;
  max-width: 56ch;
  color: var(--mm-text-2);
  font-size: 17px;
  line-height: 1.5;
}

.mm-blog-post-cover {
  max-width: var(--mm-frame);
  margin: 0 auto;
  padding: 32px;
}

.mm-blog-post-cover img {
  width: 100%;
  height: auto;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* === Search results ===================================== */
.mm-search-input {
  position: relative;
  max-width: 600px;
  margin-bottom: 24px;
}

.mm-search-input input {
  width: 100%;
  height: 56px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-3);
  background: #fff;
  font-size: 15px;
  outline: none;
}

.mm-search-input input:focus {
  border-color: var(--mm-ink);
}

.mm-search-input svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mm-text-3);
  pointer-events: none;
}

.mm-search-result {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mm-rule-soft);
}

.mm-search-result__thumb {
  width: 80px;
  height: 80px;
  border: 1px solid var(--mm-rule);
  border-radius: var(--mm-r-2);
  background: var(--mm-paper-2);
  overflow: hidden;
}

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

.mm-search-result__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--mm-ink);
  margin: 0 0 4px;
}

.mm-search-result__excerpt {
  font-size: 13px;
  color: var(--mm-text-2);
  line-height: 1.5;
  margin: 0;
}

.mm-search-result__meta {
  font-family: var(--mm-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-text-3);
  margin-top: 6px;
}

/* === Empty state / 404 ================================= */
.mm-error-state {
  text-align: center;
  padding: 96px 24px;
  max-width: 540px;
  margin: 0 auto;
}

.mm-error-state__code {
  font-family: var(--mm-font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(80px, 14vw, 160px);
  line-height: 0.9;
  color: var(--mm-ink);
  margin: 0 0 12px;
}

.mm-error-state__code em {
  font-style: italic;
  color: var(--mm-lime);
  font-weight: 800;
}

.mm-error-state__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--mm-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.mm-error-state__text {
  color: var(--mm-text-2);
  margin: 0 0 24px;
}

/* === Tracking timeline ================================= */
.mm-tracking-mast {
  background: var(--mm-ink);
  color: var(--mm-paper);
  padding: 40px 0;
}

.mm-tracking-mast__num {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(250, 250, 247, 0.55);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mm-tracking-mast__title {
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.02em;
  color: var(--mm-paper);
  margin: 0;
}

/* === Buttons used inside inner pages ================== */
.mm-btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--mm-font-display);
  font-weight: 500;
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* === Tablet (<= 1023px) ================================ */
@media (max-width: 1023px) {
  .mm-page-mast__inner {
    padding: 36px 24px 32px;
  }
  .mm-page-frame,
  .mm-page-frame--narrow {
    padding: 0 24px;
  }
  .mm-page-section {
    padding: 40px 0;
  }
  .mm-page-section--lg {
    padding: 56px 0;
  }
  .mm-contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .mm-contact-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mm-faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mm-faq-nav {
    position: static;
  }
  .mm-faq-nav__list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mm-faq-nav__list::-webkit-scrollbar {
    display: none;
  }
  .mm-faq-nav__link {
    flex-shrink: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .mm-faq-nav__link.is-active {
    border-bottom-color: var(--mm-lime);
    border-left: 0;
  }
  .mm-blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
/* === Phone (<= 639px) ================================== */
@media (max-width: 639px) {
  .mm-page-mast__inner {
    padding: 28px 16px 24px;
  }
  .mm-page-frame,
  .mm-page-frame--narrow {
    padding: 0 16px;
  }
  .mm-page-section {
    padding: 28px 0;
  }
  .mm-page-section--lg {
    padding: 36px 0;
  }
  .mm-contact-cards {
    grid-template-columns: 1fr;
  }
  .mm-blog-grid {
    grid-template-columns: 1fr;
  }
  .mm-search-result {
    grid-template-columns: 60px 1fr;
  }
  .mm-search-result__meta {
    grid-column: 1/-1;
    margin-top: 8px;
  }
  .mm-tracking-mast {
    padding: 28px 0;
  }
  .mm-blog-post-mast__inner {
    padding: 32px 16px 24px;
  }
  .mm-blog-post-cover {
    padding: 16px;
  }
}