/* =============================================================
   1. CSS variables — emitted from the 193 typed settings
   ============================================================= */

:root {
  /* Color — brand */
  --mm-color-primary: #E11D48;
  --mm-color-primary-hover: #BE123C;
  --mm-color-primary-press: #9F1239;
  --mm-color-primary-subtle: #FFF1F2;
  --mm-color-primary-muted: #FFE4E6;
  --mm-color-primary-foreground: #FFFFFF;
  --mm-color-secondary: #18181B;

  /* Color — surface */
  --mm-color-background: #FFFFFF;
  --mm-color-foreground: #18181B;
  --mm-color-surface-1: #FFFFFF;
  --mm-color-surface-2: #FAFAFA;
  --mm-color-surface-3: #F4F4F5;
  --mm-color-surface-inverse: #18181B;
  --mm-color-surface-inverse-foreground: #FAFAFA;

  /* Color — text */
  --mm-color-text-heading: #18181B;
  --mm-color-text-body: #3F3F46;
  --mm-color-text-muted: #71717A;
  --mm-color-text-subtle: #A1A1AA;
  --mm-color-text-link: #E11D48;
  --mm-color-text-link-hover: #BE123C;
  --mm-color-text-on-brand: #FFFFFF;
  --mm-color-text-on-inverse: #FAFAFA;

  /* Color — border + status + other */
  --mm-color-border-subtle: #E4E4E7;
  --mm-color-border-default: #D4D4D8;
  --mm-color-border-strong: #A1A1AA;
  --mm-color-focus-ring: #E11D48;
  --mm-color-success: #15803D;
  --mm-color-success-bg: #DCFCE7;
  --mm-color-success-foreground: #FFFFFF;
  --mm-color-warning: #D97706;
  --mm-color-warning-bg: #FEF3C7;
  --mm-color-warning-foreground: #FFFFFF;
  --mm-color-error: #DC2626;
  --mm-color-error-bg: #FEE2E2;
  --mm-color-error-foreground: #FFFFFF;
  --mm-color-info: #1D4ED8;
  --mm-color-info-bg: #DBEAFE;
  --mm-color-info-foreground: #FFFFFF;
  --mm-color-divider: #E4E4E7;
  --mm-color-scrim: rgba(0,0,0,0.5);
  --mm-color-highlight: #FEF08A;

  /* Typography — families */
  --mm-font-heading-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mm-font-body-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mm-font-mono-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Typography — scale */
  --mm-font-scale-unit: 16px;
  --mm-font-size-xs: 12px;
  --mm-font-size-sm: 14px;
  --mm-font-size-base: 16px;
  --mm-font-size-lg: 18px;
  --mm-font-size-xl: 20px;
  --mm-font-size-2xl: 24px;
  --mm-font-size-3xl: 30px;
  --mm-font-size-4xl: 36px;
  --mm-font-size-5xl: 48px;

  /* Typography — headings */
  --mm-h1-size: 48px;
  --mm-h1-weight: 700;
  --mm-h1-line-height: 1.1;
  --mm-h2-size: 36px;
  --mm-h2-weight: 700;
  --mm-h2-line-height: 1.15;
  --mm-h3-size: 28px;
  --mm-h3-weight: 600;
  --mm-h3-line-height: 1.2;
  --mm-h4-size: 22px;
  --mm-h4-weight: 600;
  --mm-h4-line-height: 1.3;
  --mm-h5-size: 18px;
  --mm-h5-weight: 600;
  --mm-h5-line-height: 1.4;
  --mm-h6-size: 16px;
  --mm-h6-weight: 600;
  --mm-h6-line-height: 1.4;

  /* Typography — body, caption, mono, tracking */
  --mm-body-size: 16px;
  --mm-body-weight: 400;
  --mm-body-line-height: 1.6;
  --mm-caption-size: 13px;
  --mm-mono-size: 14px;
  --mm-letter-spacing-heading: -0.02em;
  --mm-letter-spacing-body: 0em;

  /* Spacing — scale */
  --mm-spacing-unit: 4px;
  --mm-spacing-0: 0;
  --mm-spacing-0-5: 2px;
  --mm-spacing-1: 4px;
  --mm-spacing-2: 8px;
  --mm-spacing-3: 12px;
  --mm-spacing-4: 16px;
  --mm-spacing-5: 20px;
  --mm-spacing-6: 24px;
  --mm-spacing-8: 32px;
  --mm-spacing-10: 40px;
  --mm-spacing-12: 48px;
  --mm-spacing-16: 64px;
  --mm-spacing-20: 80px;
  --mm-spacing-24: 96px;
  --mm-spacing-32: 128px;
  --mm-spacing-40: 160px;
  --mm-spacing-48: 192px;
  --mm-spacing-64: 256px;

  /* Spacing — layout */
  --mm-container-max-width: 1280px;
  --mm-container-padding-x: 24px;
  --mm-section-padding-y: 80px;
  --mm-gutter: 24px;
  --mm-component-gap: 16px;

  /* Radii */
  --mm-radius-none: 0;
  --mm-radius-xs: 4px;
  --mm-radius-sm: 8px;
  --mm-radius-md: 14px;
  --mm-radius-lg: 18px;
  --mm-radius-xl: 24px;
  --mm-radius-2xl: 32px;
  --mm-radius-full: 9999px;
  --mm-radius-button: 8px;
  --mm-radius-input: 8px;
  --mm-radius-card: 14px;
  --mm-radius-modal: 18px;
  --mm-radius-badge: 4px;

  /* Shadows */
  --mm-shadow-none: none;
  --mm-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --mm-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --mm-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --mm-shadow-xl: 0 12px 40px rgba(0,0,0,0.16);
  --mm-shadow-2xl: 0 24px 60px rgba(0,0,0,0.20);
  --mm-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);
  --mm-shadow-card: 0 1px 2px rgba(0,0,0,0.05);
  --mm-shadow-modal: 0 12px 40px rgba(0,0,0,0.16);
  --mm-shadow-dropdown: 0 4px 12px rgba(0,0,0,0.08);

  /* Motion */
  --mm-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --mm-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --mm-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --mm-easing-spring: cubic-bezier(0.5, 0, 0.1, 1.5);
  --mm-duration-instant: 75ms;
  --mm-duration-fast: 150ms;
  --mm-duration-normal: 250ms;
  --mm-duration-slow: 400ms;
  --mm-duration-slower: 600ms;
  --mm-hover-scale: 1.02;
  --mm-hover-lift-y: -2px;
  --mm-hover-opacity: 0.85;
  --mm-active-scale: 0.96;
  --mm-mount-stagger-delay: 60ms;
  --mm-mount-fade-in-duration: 400ms;

  /* Components — button + input + card + modal + badge */
  --mm-button-primary-bg: #E11D48;
  --mm-button-primary-fg: #FFFFFF;
  --mm-button-primary-border: transparent;
  --mm-button-primary-hover-bg: #BE123C;
  --mm-button-secondary-bg: #FFFFFF;
  --mm-button-secondary-fg: #18181B;
  --mm-button-secondary-border: #D4D4D8;
  --mm-button-secondary-hover-bg: #FAFAFA;
  --mm-button-ghost-hover-bg: #F4F4F5;
  --mm-button-ghost-fg: #3F3F46;
  --mm-button-padding-x: 20px;
  --mm-button-padding-y: 12px;
  --mm-button-height: 44px;
  --mm-button-font-weight: 600;
  --mm-input-bg: #FFFFFF;
  --mm-input-border: #D4D4D8;
  --mm-input-placeholder: #A1A1AA;
  --mm-input-focus-ring-width: 2px;
  --mm-input-padding-x: 14px;
  --mm-input-height: 44px;
  --mm-card-bg: #FFFFFF;
  --mm-card-border-color: #E4E4E7;
  --mm-card-border-width: 1px;
  --mm-card-padding: 24px;
  --mm-card-gap: 16px;
  --mm-modal-max-width: 560px;
  --mm-modal-padding: 32px;
  --mm-badge-font-size: 11px;

  /* Layout */
  --mm-header-height: 72px;
  --mm-product-grid-gap: 24px;

  /* Iconography */
  --mm-icon-size-sm: 16px;
  --mm-icon-size-md: 20px;
  --mm-icon-size-lg: 24px;
}

/* =============================================================
   2. Base
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--mm-font-body-family);
  font-size: var(--mm-body-size);
  font-weight: var(--mm-body-weight);
  line-height: var(--mm-body-line-height);
  letter-spacing: var(--mm-letter-spacing-body);
  color: var(--mm-color-text-body);
  background: var(--mm-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--mm-color-primary-muted); color: var(--mm-color-foreground); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mm-font-heading-family);
  color: var(--mm-color-text-heading);
  letter-spacing: var(--mm-letter-spacing-heading);
  margin: 0;
}
h1 { font-size: var(--mm-h1-size); font-weight: var(--mm-h1-weight); line-height: var(--mm-h1-line-height); }
h2 { font-size: var(--mm-h2-size); font-weight: var(--mm-h2-weight); line-height: var(--mm-h2-line-height); }
h3 { font-size: var(--mm-h3-size); font-weight: var(--mm-h3-weight); line-height: var(--mm-h3-line-height); }
h4 { font-size: var(--mm-h4-size); font-weight: var(--mm-h4-weight); line-height: var(--mm-h4-line-height); }
h5 { font-size: var(--mm-h5-size); font-weight: var(--mm-h5-weight); line-height: var(--mm-h5-line-height); }
h6 { font-size: var(--mm-h6-size); font-weight: var(--mm-h6-weight); line-height: var(--mm-h6-line-height); }

a {
  color: var(--mm-color-text-link);
  text-decoration: none;
  transition: color var(--mm-duration-fast) var(--mm-easing-out);
}
a:hover { color: var(--mm-color-text-link-hover); }
a:focus-visible { outline: 2px solid var(--mm-color-focus-ring); outline-offset: 2px; }

img { max-width: 100%; display: block; height: auto; }
button { font-family: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--mm-color-focus-ring); outline-offset: 2px; }

/* =============================================================
   3. Layout primitives
   ============================================================= */

.mm-main { min-height: calc(100vh - var(--mm-header-height)); }
.mm-container {
  width: 100%;
  max-width: var(--mm-container-max-width);
  margin: 0 auto;
  padding: 0 var(--mm-container-padding-x);
}

.mm-skip-link {
  position: absolute; top: -40px; left: 8px;
  padding: 8px 16px;
  background: var(--mm-color-foreground);
  color: var(--mm-color-background);
  border-radius: var(--mm-radius-sm);
  z-index: 9999;
}
.mm-skip-link:focus { top: 8px; }

/* =============================================================
   4. Components
   ============================================================= */

/* Buttons */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mm-spacing-2);
  font-family: var(--mm-font-body-family);
  font-weight: var(--mm-button-font-weight);
  font-size: var(--mm-font-size-base);
  padding: var(--mm-button-padding-y) var(--mm-button-padding-x);
  height: var(--mm-button-height);
  border-radius: var(--mm-radius-button);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--mm-duration-fast) var(--mm-easing-out),
    border-color var(--mm-duration-fast) var(--mm-easing-out),
    transform var(--mm-duration-fast) var(--mm-easing-out);
}
.mm-btn:active { transform: scale(var(--mm-active-scale)); }

.mm-btn-primary {
  background: var(--mm-button-primary-bg);
  color: var(--mm-button-primary-fg);
  border-color: var(--mm-button-primary-border);
}
.mm-btn-primary:hover { background: var(--mm-button-primary-hover-bg); color: var(--mm-button-primary-fg); }

.mm-btn-secondary {
  background: var(--mm-button-secondary-bg);
  color: var(--mm-button-secondary-fg);
  border-color: var(--mm-button-secondary-border);
}
.mm-btn-secondary:hover { background: var(--mm-button-secondary-hover-bg); }

.mm-btn-ghost {
  background: transparent;
  color: var(--mm-button-ghost-fg);
  border-color: transparent;
}
.mm-btn-ghost:hover { background: var(--mm-button-ghost-hover-bg); }

.mm-btn-full { width: 100%; }
.mm-btn-sm { height: 36px; padding: 8px 14px; font-size: var(--mm-font-size-sm); }
.mm-btn-lg { height: 52px; padding: 16px 28px; font-size: var(--mm-font-size-lg); }

/* Inputs */
.mm-input {
  font-family: var(--mm-font-body-family);
  font-size: var(--mm-font-size-base);
  background: var(--mm-input-bg);
  color: var(--mm-color-foreground);
  border: 1px solid var(--mm-input-border);
  border-radius: var(--mm-radius-input);
  padding: 0 var(--mm-input-padding-x);
  height: var(--mm-input-height);
  width: 100%;
  transition: border-color var(--mm-duration-fast) var(--mm-easing-out), box-shadow var(--mm-duration-fast) var(--mm-easing-out);
}
.mm-input::placeholder { color: var(--mm-input-placeholder); }
.mm-input:focus {
  outline: none;
  border-color: var(--mm-color-primary);
  box-shadow: 0 0 0 var(--mm-input-focus-ring-width) var(--mm-color-primary-subtle);
}

/* =============================================================
   5. Sections
   ============================================================= */

/* Cart */
.mm-cart { padding: var(--mm-spacing-10) 0; }
.mm-cart-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 var(--mm-container-padding-x);
}
.mm-cart-header { margin-bottom: var(--mm-spacing-8); }
.mm-cart-title { font-size: var(--mm-font-size-3xl); }
.mm-cart-count { color: var(--mm-color-text-muted); font-size: var(--mm-font-size-sm); margin: var(--mm-spacing-1) 0 0; }
.mm-cart-grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: var(--mm-spacing-12); align-items: start;
}
@media (max-width: 768px) {
  .mm-cart-grid { grid-template-columns: 1fr; gap: var(--mm-spacing-6); }
}

.mm-cart-line {
  display: grid; grid-template-columns: 104px 1fr auto;
  gap: var(--mm-spacing-5); padding: var(--mm-spacing-5) 0;
  border-bottom: 1px solid var(--mm-color-border-subtle);
  align-items: center;
}
@media (max-width: 768px) {
  .mm-cart-line { grid-template-columns: 80px 1fr; gap: var(--mm-spacing-4); align-items: flex-start; }
}
.mm-cart-line-image {
  width: 104px; height: 104px; flex-shrink: 0;
  border-radius: var(--mm-radius-card); overflow: hidden;
  background: var(--mm-color-surface-2);
}
.mm-cart-line-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .mm-cart-line-image { width: 80px; height: 80px; }
}
.mm-cart-line-info { display: flex; flex-direction: column; gap: var(--mm-spacing-1); min-width: 0; }
.mm-cart-line-name {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight); font-size: var(--mm-font-size-base);
  color: var(--mm-color-text-heading);
}
.mm-cart-line-variant { font-size: var(--mm-font-size-xs); color: var(--mm-color-text-muted); margin: 0; }
.mm-cart-line-sku { font-size: 11px; color: var(--mm-color-text-subtle); font-family: var(--mm-font-mono-family); margin: 0; }
.mm-cart-line-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--mm-spacing-2);
  min-width: 130px;
}
@media (max-width: 768px) {
  .mm-cart-line-actions { display: contents; }
}
.mm-cart-line-price { font-family: var(--mm-font-heading-family); font-weight: var(--mm-h4-weight); font-size: var(--mm-font-size-base); color: var(--mm-color-text-heading); margin: 0; }
.mm-cart-line-remove {
  background: transparent; border: 0; padding: 0;
  color: var(--mm-color-text-muted); font-size: var(--mm-font-size-xs);
  text-decoration: underline; cursor: pointer;
  font-family: var(--mm-font-body-family);
}
.mm-cart-line-remove:hover { color: var(--mm-color-foreground); }

/* Quantity stepper */
.mm-qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--mm-color-border-default);
  border-radius: var(--mm-radius-sm); overflow: hidden;
  background: var(--mm-color-surface-1);
}
.mm-qty-btn {
  width: 32px; height: 32px;
  background: transparent; border: 0;
  cursor: pointer; color: var(--mm-color-foreground);
  font-size: 14px; font-family: var(--mm-font-body-family);
}
.mm-qty-btn:hover { background: var(--mm-color-surface-2); }
.mm-qty-value {
  min-width: 32px; padding: 0 var(--mm-spacing-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mm-font-mono-family); font-size: 13px;
  border-left: 1px solid var(--mm-color-border-subtle);
  border-right: 1px solid var(--mm-color-border-subtle);
}

/* Cart continue link + summary */
.mm-cart-continue { margin-top: var(--mm-spacing-5); }
.mm-cart-summary {
  background: var(--mm-color-surface-1);
  border: 1px solid var(--mm-color-border-subtle);
  border-radius: var(--mm-radius-card);
  padding: var(--mm-spacing-6);
  box-shadow: var(--mm-shadow-card);
  position: sticky; top: 88px;
  align-self: flex-start;
}
.mm-cart-summary-title {
  font-size: var(--mm-font-size-base);
  font-weight: var(--mm-h4-weight);
  margin: 0 0 var(--mm-spacing-4);
}
.mm-cart-summary-rows { display: flex; flex-direction: column; gap: var(--mm-spacing-2); margin: 0; }
.mm-cart-summary-row { display: flex; justify-content: space-between; font-size: var(--mm-font-size-sm); color: var(--mm-color-text-muted); }
.mm-cart-summary-row dt, .mm-cart-summary-row dd { margin: 0; }
.mm-cart-summary-row dd { font-family: var(--mm-font-heading-family); font-weight: 500; color: var(--mm-color-text-heading); }
.mm-cart-summary-divider { border-top: 1px solid var(--mm-color-border-subtle); margin: var(--mm-spacing-2) 0; }
.mm-cart-summary-total dt, .mm-cart-summary-total dd { font-size: var(--mm-font-size-base); color: var(--mm-color-text-heading); font-weight: var(--mm-h3-weight); }
.mm-cart-promo { margin-top: var(--mm-spacing-4); }
.mm-cart-promo summary { cursor: pointer; font-size: var(--mm-font-size-xs); color: var(--mm-color-text-muted); list-style: none; }
.mm-cart-promo summary span { text-decoration: underline; }
.mm-cart-promo-form { display: flex; gap: var(--mm-spacing-2); margin-top: var(--mm-spacing-2); }
.mm-cart-promo-form .mm-input { flex: 1; }
.mm-cart-secure {
  margin-top: var(--mm-spacing-3); display: flex; align-items: center; justify-content: center;
  gap: var(--mm-spacing-1); font-size: 11px; color: var(--mm-color-text-muted);
}

/* =============================================================
   4b. Form primitives — used by cart, checkout, account, search
   ============================================================= */

.mm-field { display: flex; flex-direction: column; gap: var(--mm-spacing-1); }
.mm-field-label {
  font-size: var(--mm-font-size-xs);
  font-weight: 500;
  color: var(--mm-color-text-body);
}
.mm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mm-spacing-3); }
@media (max-width: 640px) { .mm-field-row { grid-template-columns: 1fr; } }

.mm-checkbox {
  display: flex; align-items: center; gap: var(--mm-spacing-2);
  font-size: var(--mm-font-size-sm); color: var(--mm-color-text-body);
  cursor: pointer;
}
.mm-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--mm-color-primary);
  cursor: pointer;
}

/* =============================================================
   5b. Header
   ============================================================= */

.mm-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--mm-color-background);
  border-bottom: 1px solid var(--mm-color-border-subtle);
}
.mm-header-inner {
  max-width: var(--mm-container-max-width);
  margin: 0 auto;
  padding: 0 var(--mm-container-padding-x);
  height: var(--mm-header-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mm-spacing-6);
}
.mm-header-logo { display: flex; align-items: center; text-decoration: none; }
.mm-header-wordmark {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h3-weight);
  font-size: var(--mm-font-size-lg);
  color: var(--mm-color-foreground);
  letter-spacing: var(--mm-letter-spacing-heading);
}
.mm-header-nav { display: flex; gap: var(--mm-spacing-6); }
.mm-header-nav-link {
  color: var(--mm-color-text-body); text-decoration: none;
  font-size: var(--mm-font-size-sm); font-weight: 500;
  transition: color var(--mm-duration-fast) var(--mm-easing-out);
}
.mm-header-nav-link:hover { color: var(--mm-color-foreground); }
.mm-header-actions { display: flex; align-items: center; gap: var(--mm-spacing-4); }
.mm-header-action {
  color: var(--mm-color-foreground); position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--mm-radius-sm);
  transition: background var(--mm-duration-fast) var(--mm-easing-out);
}
.mm-header-action:hover { background: var(--mm-color-surface-2); }
.mm-header-cart-count {
  position: absolute; top: -2px; right: -4px;
  background: var(--mm-color-primary); color: var(--mm-color-primary-foreground);
  font-size: 10px; font-weight: 600;
  min-width: 18px; height: 18px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
@media (max-width: 768px) {
  .mm-header-nav { display: none; }
}

/* =============================================================
   5c. Footer
   ============================================================= */

.mm-footer {
  background: var(--mm-color-surface-2);
  padding: var(--mm-spacing-12) 0;
  margin-top: var(--mm-spacing-16);
  border-top: 1px solid var(--mm-color-border-subtle);
}
.mm-footer-inner {
  max-width: var(--mm-container-max-width);
  margin: 0 auto;
  padding: 0 var(--mm-container-padding-x);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--mm-spacing-6);
  align-items: start;
}
.mm-footer-brand { display: flex; flex-direction: column; gap: var(--mm-spacing-1); }
.mm-footer-shop-name {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  font-size: var(--mm-font-size-base);
  color: var(--mm-color-text-heading);
  margin: 0;
}
.mm-footer-address {
  color: var(--mm-color-text-muted);
  font-size: var(--mm-font-size-sm);
  margin: 0;
}
.mm-footer-nav { display: flex; gap: var(--mm-spacing-5); flex-wrap: wrap; }
.mm-footer-link {
  color: var(--mm-color-text-body);
  text-decoration: none;
  font-size: var(--mm-font-size-sm);
}
.mm-footer-link:hover { color: var(--mm-color-foreground); }
.mm-footer-copyright {
  grid-column: 1 / -1;
  color: var(--mm-color-text-subtle);
  font-size: var(--mm-font-size-xs);
  margin: var(--mm-spacing-4) 0 0;
  padding-top: var(--mm-spacing-4);
  border-top: 1px solid var(--mm-color-border-subtle);
}
@media (max-width: 640px) {
  .mm-footer-inner { grid-template-columns: 1fr; }
}

/* =============================================================
   5d. Cart drawer
   ============================================================= */

.mm-cart-drawer {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.mm-cart-drawer[data-open="false"] { display: none; }
.mm-cart-drawer-overlay {
  position: absolute; inset: 0;
  background: var(--mm-color-scrim);
  pointer-events: auto;
}
.mm-cart-drawer-panel {
  position: relative;
  width: 100%; max-width: 420px; height: 100%;
  background: var(--mm-color-background);
  display: flex; flex-direction: column;
  pointer-events: auto;
  box-shadow: var(--mm-shadow-xl);
}
.mm-cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--mm-spacing-5);
  border-bottom: 1px solid var(--mm-color-border-subtle);
}
.mm-cart-drawer-title {
  font-size: var(--mm-font-size-lg);
  margin: 0;
}
.mm-cart-drawer-close {
  background: transparent; border: 0;
  color: var(--mm-color-text-muted);
  cursor: pointer; padding: var(--mm-spacing-1);
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-cart-drawer-close:hover { color: var(--mm-color-foreground); }
.mm-cart-drawer-body { flex: 1; overflow-y: auto; padding: var(--mm-spacing-4); }
.mm-cart-drawer-items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--mm-spacing-4);
}
.mm-cart-drawer-item {
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: var(--mm-spacing-3); align-items: start;
}
.mm-cart-drawer-item-image img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--mm-radius-card);
}
.mm-cart-drawer-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-cart-drawer-item-name {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  font-size: var(--mm-font-size-sm);
  color: var(--mm-color-text-heading);
  text-decoration: none;
}
.mm-cart-drawer-item-variant {
  font-size: var(--mm-font-size-xs);
  color: var(--mm-color-text-muted);
  margin: 0;
}
.mm-cart-drawer-item-meta {
  display: flex; justify-content: space-between; gap: var(--mm-spacing-2);
  font-size: var(--mm-font-size-xs);
  color: var(--mm-color-text-muted);
  margin: var(--mm-spacing-1) 0 0;
}
.mm-cart-drawer-item-price { color: var(--mm-color-text-heading); font-weight: 500; }
.mm-cart-drawer-item-remove {
  background: transparent; border: 0;
  color: var(--mm-color-text-muted);
  cursor: pointer; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-cart-drawer-item-remove:hover { color: var(--mm-color-error); }
.mm-cart-drawer-footer {
  padding: var(--mm-spacing-5);
  border-top: 1px solid var(--mm-color-border-subtle);
  display: flex; flex-direction: column; gap: var(--mm-spacing-3);
}
.mm-cart-drawer-subtotal {
  display: flex; justify-content: space-between;
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  color: var(--mm-color-text-heading);
}
.mm-cart-drawer-shipping-note {
  color: var(--mm-color-text-muted);
  font-size: var(--mm-font-size-xs);
  margin: 0;
}
.mm-cart-drawer-empty { padding: var(--mm-spacing-6) var(--mm-spacing-2); }

/* =============================================================
   5e. Checkout
   ============================================================= */

.mm-checkout { padding: var(--mm-spacing-8) 0; }
.mm-checkout-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 var(--mm-container-padding-x);
}
.mm-checkout-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--mm-spacing-6);
}
.mm-checkout-title { font-size: var(--mm-font-size-3xl); margin: 0; }
.mm-checkout-secure-badge {
  display: inline-flex; align-items: center; gap: var(--mm-spacing-1);
  padding: 5px 10px;
  border: 1px solid var(--mm-color-border-default);
  border-radius: var(--mm-radius-full);
  color: var(--mm-color-text-muted);
  font-size: var(--mm-font-size-xs);
}
@media (max-width: 768px) { .mm-checkout-secure-badge { display: none; } }

.mm-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--mm-spacing-12);
  align-items: start;
}
@media (max-width: 1024px) {
  .mm-checkout-grid { grid-template-columns: 1fr; gap: var(--mm-spacing-6); }
}

.mm-checkout-sections { display: flex; flex-direction: column; gap: var(--mm-spacing-6); }

.mm-checkout-express {
  border: 1px solid var(--mm-color-border-default);
  border-radius: var(--mm-radius-card);
  padding: var(--mm-spacing-5);
  background: var(--mm-color-surface-1);
}
.mm-checkout-express-label {
  font-size: var(--mm-font-size-xs);
  color: var(--mm-color-text-muted);
  text-align: center;
  margin: 0 0 var(--mm-spacing-3);
}
.mm-checkout-express-buttons {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--mm-spacing-2);
}
.mm-checkout-express-btn {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--mm-radius-md);
  cursor: pointer;
  font-size: var(--mm-font-size-sm); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.mm-checkout-express-apple { background: #000; color: #fff; }
.mm-checkout-express-gpay { background: #fff; color: #202124; border-color: #dadce0; }
.mm-checkout-express-shoppay { background: #5A31F4; color: #fff; }

.mm-checkout-divider {
  display: flex; align-items: center; gap: var(--mm-spacing-3);
  margin-top: var(--mm-spacing-4);
  color: var(--mm-color-text-muted);
  font-size: var(--mm-font-size-xs);
}
.mm-checkout-divider::before, .mm-checkout-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--mm-color-border-subtle);
}

.mm-checkout-section {
  border: 1px solid var(--mm-color-border-subtle);
  border-radius: var(--mm-radius-card);
  padding: var(--mm-spacing-5);
  background: var(--mm-color-surface-1);
}
.mm-checkout-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mm-spacing-3);
  margin-bottom: var(--mm-spacing-4);
}
.mm-checkout-step-marker {
  width: 24px; height: 24px;
  border-radius: var(--mm-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  font-family: var(--mm-font-mono-family);
  flex-shrink: 0;
}
.mm-checkout-step-marker[data-status="active"] { background: var(--mm-color-foreground); color: var(--mm-color-background); }
.mm-checkout-step-marker[data-status="done"] { background: var(--mm-color-primary); color: var(--mm-color-primary-foreground); }
.mm-checkout-step-marker[data-status="todo"] {
  background: transparent; color: var(--mm-color-text-muted);
  border: 1px solid var(--mm-color-border-default);
}
.mm-checkout-section-title { margin: 0; font-size: var(--mm-font-size-lg); flex: 1; min-width: 0; }
.mm-checkout-section-edit {
  background: transparent; border: 0; padding: 0;
  color: var(--mm-color-text-muted); font-size: var(--mm-font-size-xs);
  text-decoration: underline; cursor: pointer;
}
.mm-checkout-section-form { display: flex; flex-direction: column; gap: var(--mm-spacing-3); }

.mm-stripe-mount {
  /* mount point for Stripe Elements; replaces empty div with iframe at runtime */
  display: flex; align-items: center;
  padding: 0 var(--mm-spacing-3);
}

.mm-checkout-encrypted-note {
  display: flex; align-items: center; gap: var(--mm-spacing-1);
  font-size: var(--mm-font-size-xs);
  color: var(--mm-color-text-muted);
  margin: 0;
}

/* Order summary right column */
.mm-checkout-summary {
  background: var(--mm-color-surface-1);
  border: 1px solid var(--mm-color-border-subtle);
  border-radius: var(--mm-radius-card);
  padding: var(--mm-spacing-5);
  position: sticky; top: 88px;
}
.mm-checkout-summary-title {
  margin: 0 0 var(--mm-spacing-4);
  font-size: var(--mm-font-size-base);
  font-weight: var(--mm-h4-weight);
}
.mm-checkout-summary-items {
  list-style: none; padding: 0; margin: 0 0 var(--mm-spacing-4);
  display: flex; flex-direction: column; gap: var(--mm-spacing-3);
}
.mm-checkout-summary-item {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: var(--mm-spacing-3); align-items: center;
}
.mm-checkout-summary-item-image { position: relative; width: 56px; height: 56px; }
.mm-checkout-summary-item-image img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--mm-radius-sm);
}
.mm-checkout-summary-item-qty {
  position: absolute; top: -6px; right: -6px;
  background: var(--mm-color-foreground); color: var(--mm-color-background);
  font-size: 10px; font-weight: 600;
  min-width: 18px; height: 18px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.mm-checkout-summary-item-info { min-width: 0; }
.mm-checkout-summary-item-name {
  font-size: var(--mm-font-size-sm); margin: 0;
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  color: var(--mm-color-text-heading);
}
.mm-checkout-summary-item-variant {
  font-size: var(--mm-font-size-xs); color: var(--mm-color-text-muted); margin: 0;
}
.mm-checkout-summary-item-price {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  color: var(--mm-color-text-heading);
  font-size: var(--mm-font-size-sm);
  margin: 0;
}

.mm-checkout-summary-promo { margin-bottom: var(--mm-spacing-4); }
.mm-checkout-summary-promo summary {
  cursor: pointer; font-size: var(--mm-font-size-xs);
  color: var(--mm-color-text-muted); text-decoration: underline;
  list-style: none;
}
.mm-checkout-summary-promo-form {
  display: flex; gap: var(--mm-spacing-2); margin-top: var(--mm-spacing-2);
}
.mm-checkout-summary-promo-form .mm-input { flex: 1; }

.mm-checkout-summary-totals { display: flex; flex-direction: column; gap: var(--mm-spacing-2); margin: 0; }
.mm-checkout-summary-row {
  display: flex; justify-content: space-between;
  font-size: var(--mm-font-size-sm); color: var(--mm-color-text-muted);
}
.mm-checkout-summary-row dt, .mm-checkout-summary-row dd { margin: 0; }
.mm-checkout-summary-row dd {
  font-family: var(--mm-font-heading-family);
  color: var(--mm-color-text-heading);
}
.mm-checkout-summary-divider {
  border-top: 1px solid var(--mm-color-border-subtle);
  margin: var(--mm-spacing-2) 0;
}
.mm-checkout-summary-total dt, .mm-checkout-summary-total dd {
  font-size: var(--mm-font-size-base);
  font-weight: var(--mm-h3-weight);
  color: var(--mm-color-text-heading);
}
.mm-checkout-summary-trust {
  display: flex; align-items: center; gap: var(--mm-spacing-1);
  margin: var(--mm-spacing-3) 0 0;
  font-size: 11px;
  color: var(--mm-color-text-muted);
  flex-wrap: wrap;
}

.mm-checkout-mobile-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--mm-color-surface-1);
  border-top: 1px solid var(--mm-color-border-subtle);
  padding: var(--mm-spacing-3) var(--mm-spacing-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mm-spacing-3);
  z-index: 50;
}
@media (min-width: 1025px) { .mm-checkout-mobile-cta { display: none !important; } }
.mm-checkout-mobile-total {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h3-weight);
  font-size: var(--mm-font-size-lg);
}

/* =============================================================
   5f. Order confirmation
   ============================================================= */

.mm-confirmation { padding: var(--mm-spacing-12) 0; }
.mm-confirmation-inner {
  max-width: 760px; margin: 0 auto; width: 100%;
  padding: 0 var(--mm-container-padding-x);
}
.mm-confirmation-header {
  text-align: center;
  margin-bottom: var(--mm-spacing-10);
}
.mm-confirmation-success-mark {
  width: 72px; height: 72px;
  margin: 0 auto var(--mm-spacing-4);
  border-radius: var(--mm-radius-full);
  background: var(--mm-color-success-bg);
  color: var(--mm-color-success);
  display: flex; align-items: center; justify-content: center;
}
.mm-confirmation-greeting {
  font-family: var(--mm-font-heading-family);
  color: var(--mm-color-text-muted);
  font-size: var(--mm-font-size-sm);
  letter-spacing: 0.08em;
  margin: 0 0 var(--mm-spacing-2);
}
.mm-confirmation-title {
  font-size: var(--mm-font-size-4xl);
  margin: 0;
  line-height: 1.15;
}
.mm-confirmation-subtitle {
  margin-top: var(--mm-spacing-3);
  color: var(--mm-color-text-muted);
  font-size: var(--mm-font-size-base);
}
.mm-confirmation-email { color: var(--mm-color-text-heading); }

.mm-confirmation-card {
  background: var(--mm-color-surface-1);
  border: 1px solid var(--mm-color-border-subtle);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-spacing-7);
  margin-bottom: var(--mm-spacing-5);
  box-shadow: var(--mm-shadow-card);
}
.mm-confirmation-card-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--mm-spacing-4);
  margin-bottom: var(--mm-spacing-5);
  padding-bottom: var(--mm-spacing-4);
  border-bottom: 1px solid var(--mm-color-border-subtle);
}
@media (max-width: 640px) {
  .mm-confirmation-card-meta { grid-template-columns: 1fr; }
}
.mm-confirmation-meta-row { display: flex; flex-direction: column; gap: var(--mm-spacing-1); }
.mm-confirmation-meta-label {
  font-size: 11px;
  color: var(--mm-color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.mm-confirmation-meta-value {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  color: var(--mm-color-text-heading);
  font-size: var(--mm-font-size-sm);
  margin: 0;
}
.mm-confirmation-meta-mono {
  font-family: var(--mm-font-mono-family);
  word-break: break-all;
  font-weight: 400;
}

.mm-confirmation-items {
  list-style: none; padding: 0; margin: 0 0 var(--mm-spacing-5);
  display: flex; flex-direction: column; gap: var(--mm-spacing-3);
}
.mm-confirmation-item {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: var(--mm-spacing-3); align-items: center;
}
.mm-confirmation-item-image { width: 60px; height: 60px; }
.mm-confirmation-item-image img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--mm-radius-sm);
}
.mm-confirmation-item-info { min-width: 0; }
.mm-confirmation-item-name {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  color: var(--mm-color-text-heading);
  font-size: var(--mm-font-size-sm);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-confirmation-item-meta {
  font-size: var(--mm-font-size-xs);
  color: var(--mm-color-text-muted); margin: 0;
}
.mm-confirmation-item-price {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
  color: var(--mm-color-text-heading);
  font-size: var(--mm-font-size-sm);
  margin: 0;
}

.mm-confirmation-card-footer {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--mm-spacing-6);
  padding-top: var(--mm-spacing-4);
  border-top: 1px solid var(--mm-color-border-subtle);
}
@media (max-width: 640px) {
  .mm-confirmation-card-footer { grid-template-columns: 1fr; gap: var(--mm-spacing-4); }
}
.mm-confirmation-footer-col { display: flex; flex-direction: column; gap: var(--mm-spacing-1); }
.mm-confirmation-address {
  font-style: normal;
  font-size: var(--mm-font-size-sm);
  color: var(--mm-color-text-heading);
  line-height: 1.5;
}
.mm-confirmation-payment {
  font-size: var(--mm-font-size-sm);
  color: var(--mm-color-text-heading);
  line-height: 1.5;
  margin: 0;
}
.mm-confirmation-payment-total {
  font-family: var(--mm-font-heading-family);
  font-weight: var(--mm-h4-weight);
}

.mm-confirmation-next {
  background: var(--mm-color-surface-2);
  border: 1px solid var(--mm-color-border-subtle);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-spacing-5);
  margin-bottom: var(--mm-spacing-6);
}
.mm-confirmation-next-title {
  font-size: var(--mm-font-size-base);
  font-weight: var(--mm-h4-weight);
  margin: 0 0 var(--mm-spacing-2);
}
.mm-confirmation-next-body {
  font-size: var(--mm-font-size-sm);
  color: var(--mm-color-text-muted);
  margin: 0;
  line-height: 1.6;
}
.mm-confirmation-next-actions {
  display: flex; gap: var(--mm-spacing-2);
  margin-top: var(--mm-spacing-4);
  flex-wrap: wrap;
}
.mm-confirmation-support {
  text-align: center;
  font-size: var(--mm-font-size-xs);
  color: var(--mm-color-text-muted);
  margin: 0;
}

/* =============================================================
   6. Snippets — empty state
   ============================================================= */

.mm-empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--mm-spacing-16) var(--mm-spacing-6);
  max-width: 520px; margin: 0 auto;
}
.mm-empty-illustration { margin-bottom: var(--mm-spacing-6); }

/* Placeholder image — used when products have no featured_image */
.mm-placeholder {
  width: 100%; height: 100%;
  display: block; position: relative;
  background: var(--mm-color-surface-2);
  border-radius: inherit;
}
.mm-placeholder svg { width: 100%; height: 100%; display: block; }
.mm-empty-heading {
  font-size: var(--mm-font-size-2xl); margin: 0 0 var(--mm-spacing-3);
  color: var(--mm-color-text-heading);
}
.mm-empty-body {
  margin: 0 0 var(--mm-spacing-8);
  color: var(--mm-color-text-muted);
}

/* =============================================================
   7. Utilities
   ============================================================= */

.mm-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}