/* ==========================================================================
   Colour tones (theme 0.4.35) — backgrounds, shades and the colours that
   must follow them. Loaded after premium.css (inc/home-premium.php), so it
   only re-tints surfaces; layout, type, the green buttons and product
   images are untouched.

   Dark blue-black header, deep blue-grey hero / featured / promo blocks,
   warm off-white content sections, white cards and fields on top. Product
   pages, cart and checkout stay light. Image wells behind product photos
   (.mm-card-media, .pdx-stage, .mm-tool-img, .mm-use-media) keep their
   original neutral colour on purpose.
   ========================================================================== */
.mm-v2 {
  --tone-canvas: #f5f2e9;    /* page background */
  --tone-band: #edeae1;      /* alternate light sections, page heads */
  --tone-band-cool: #e6e9e5; /* kit builder band */
  --tone-soft: #f9f7f2;      /* action rows inside white cards */
  --tone-line: #e2ddd1;      /* hairlines on light */
  --tone-line-strong: #cbc5b8;

  --tone-head: #0e1920;      /* header */
  --tone-hero: #1d2e37;      /* homepage hero */
  --tone-feature: #15232b;   /* featured / promo sections and cards */
  --tone-feature-hi: #1c2d36;/* soft light spot inside featured sections */
  --tone-deep: #080f13;      /* footer, top bar */
  --tone-on-dark: #ffffff;
  --tone-on-dark-soft: #aeb8bc;          /* muted text on dark (≥ 7:1 on --tone-feature) */
  --tone-dark-line: rgba(255, 255, 255, .12);

  --mm-line: var(--tone-line);
  --mm-line-strong: var(--tone-line-strong);
  background: var(--tone-canvas);
}
body.mm-v2 { --border: var(--tone-line); }

/* ---------- Light canvas ---------- */
.mm-v2 main,
.mm-sec,
.mm-flag.mm-best,
.mm-kits,
.mm-hero-strip { background: var(--tone-canvas); }

/* ---------- Light bands (clean separation between sections) ---------- */
.mm-build-band,
.mm-info-band,
.mm-page-head-grey,
.mm-hero.mm-hero-light,
.pdx-timeline,
body.mm-v2 .woocommerce-checkout #payment { background: var(--tone-band); }
.mm-page-head-cool,
.mm-build-intro,
.mm-builder-page { background: var(--tone-band-cool); }
.mm-trust-grid { background: var(--tone-line); }
.mm-pill-info, .mm-pill-muted { background: var(--tone-band); }
.woocommerce-cart table.shop_table.cart td.actions,
.mm-myacc-content table.shop_table th { background: var(--tone-soft); }
body.mm-v2 form.woocommerce-checkout #wc-stripe-express-checkout-button-separator::before { background: var(--tone-canvas); }

/* ==========================================================================
   Header — dark blue-black, white text, subtle borders
   ========================================================================== */
.mm-v2 .site-header.mm-header { background: var(--tone-head); border-bottom-color: var(--tone-dark-line); color: var(--tone-on-dark); }
.mm-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .7); }
.mm-header .mm-logo { color: var(--tone-on-dark); }
.mm-header .mm-logo-tag { color: var(--tone-on-dark-soft); }
.mm-header .mm-icon-btn { color: var(--tone-on-dark); }
.mm-header .mm-icon-btn:hover { background: rgba(255, 255, 255, .08); }
.mm-v2 .mm-header .mm-nav a { color: rgba(255, 255, 255, .84); }
.mm-v2 .mm-header .mm-nav a:hover,
.mm-v2 .mm-header .mm-nav a[aria-current] { color: var(--tone-on-dark); }
.mm-v2 .mm-header .mm-nav a::after { background: var(--mm-brand); }
.mm-v2 .mm-header .mm-search { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--tone-dark-line); }
.mm-v2 .mm-header .mm-search svg { color: var(--tone-on-dark-soft); }
.mm-v2 .mm-header .mm-search input { color: var(--tone-on-dark); }
.mm-v2 .mm-header .mm-search input::placeholder { color: var(--tone-on-dark-soft); opacity: 1; }
.mm-v2 .mm-header .mm-search:focus-within { box-shadow: inset 0 0 0 1px var(--mm-brand); }
.mm-header .mm-currency:not(.mm-currency-in-drawer) .mm-currency-btn { border-color: rgba(255, 255, 255, .42); background: transparent; color: var(--tone-on-dark); }
.mm-header .mm-currency:not(.mm-currency-in-drawer) .mm-currency-btn:hover,
.mm-header .mm-currency:not(.mm-currency-in-drawer) .mm-currency-btn[aria-expanded="true"] { border-color: var(--mm-brand); }
/* Panels that open from the header stay light */
.mm-header .mm-currency-menu,
.mm-v2 .mm-header .mm-drawer { color: var(--mm-ink); }
.mm-v2 .mm-header .mm-drawer { background: var(--tone-canvas); }
/* Official logo: light artwork on the dark header at every width (the icon-only artwork is dark) */
@media (max-width: 359px) {
  .mm-header .mm-logo-official .mm-brand-logo { display: block; height: 24px; }
  .mm-header .mm-logo-official .mm-brand-icon { display: none; }
}
.mm-topbar { background: var(--tone-deep); border-bottom: 1px solid var(--tone-dark-line); }

/* ==========================================================================
   Deep blue-grey — homepage hero, featured and promo sections
   ========================================================================== */
.mm-hero:not(.mm-hero-light) { background: var(--tone-hero); }
.mm-hero-media::after { background: linear-gradient(180deg, rgba(29, 46, 55, 0) 55%, #1d2e37 100%); }
@media (min-width: 1024px) {
  .mm-hero-media::after { background: linear-gradient(90deg, #1d2e37 0%, rgba(29, 46, 55, .86) 18%, rgba(29, 46, 55, .25) 48%, rgba(29, 46, 55, 0) 70%), linear-gradient(0deg, rgba(29, 46, 55, .75) 0%, rgba(29, 46, 55, 0) 32%); }
}

.mm-why,
.mm-final { background: radial-gradient(ellipse at 18% 40%, var(--tone-feature-hi), var(--tone-feature) 62%); color: var(--tone-on-dark); }
.mm-why .mm-h2, .mm-why .mm-eyebrow, .mm-why-grid h3,
.mm-final-title { color: var(--tone-on-dark); }
.mm-why .mm-lead, .mm-why-grid p,
.mm-final-text { color: var(--tone-on-dark-soft); }
.mm-why-grid li { border-top-color: rgba(255, 255, 255, .28); }
.mm-why-num { color: var(--mm-brand); }
.mm-final .mm-btn-ghost { color: var(--tone-on-dark); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.mm-final .mm-btn-ghost:hover,
.mm-final .mm-btn-ghost:focus-visible { background: var(--mm-brand); color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px var(--mm-brand); }

.mm-kit-cta-inner,
.mm-byo-card { background: var(--tone-feature); }

/* ---------- Footer ---------- */
.mm-footer { background: var(--tone-deep); }