/* ==========================================================================
   Music Matchmaker — scoped styles (.mm)
   Restyled to match the main All In One Music site: Poppins typography and
   the site's pink / teal / ink / accent palette, instead of the tool's
   original Fraunces + Inter + plum/wine/gold palette. All class names below
   are unchanged from the original tool (app.js generates this markup), only
   scoped under ".mm" and recolored so nothing else on the site is affected.
   ========================================================================== */

.mm {
  --plum: #1f4d63;                  /* site --teal */
  --wine: #8c3364;                  /* site --accent */
  --gold: #b25a86;                  /* site --accent-soft, secondary accent */
  --gold-soft: #f8faf5;             /* site --cream, light text/icons on dark */
  --cream: #ecd2d4;                 /* site --pink, page background wash */
  --paper: #f8faf5;                 /* site --cream, card surfaces */
  --ink: #14170f;                   /* site --ink */
  --muted: #55574c;                 /* site --ink-soft */
  --line: rgba(20, 23, 15, 0.15);   /* site --border */
  --ok: #2e7d5b;
  --shadow: 0 10px 40px rgba(20, 23, 15, 0.14);
  --shadow-sm: 0 4px 16px rgba(20, 23, 15, 0.10);
  --radius: 16px;
  font-family: var(--font);
}

.mm * { box-sizing: border-box; }
.mm button { font-family: inherit; cursor: pointer; }
.mm h1, .mm h2, .mm h3 { font-family: var(--font); }

/* ---------- Secondary bar: sits sticky right under the site header ---------- */
.mm .topbar {
  position: sticky;
  top: 82px;
  z-index: 45;
  background: rgba(243, 226, 227, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.mm .topbar__inner {
  max-width: var(--max-width, 1180px);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.mm .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .12s ease;
}
.mm .brand:hover, .mm .brand:active { background: var(--wine); transform: translateY(-1px); }
.mm .brand__logo {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.mm .brand__logo svg { width: 19px; height: 19px; display: block; }
.mm .brand__name { font-weight: 600; line-height: 1; }

.mm .progress {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.mm .pstep {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.mm .pstep__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: .2s;
}
.mm .pstep--done .pstep__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.mm .pstep--active .pstep__dot { background: var(--wine); border-color: var(--wine); color: #fff; }
.mm .pstep--active { color: var(--ink); font-weight: 600; }
.mm .pstep__sep { width: 20px; height: 1.5px; background: var(--line); }
@media (max-width: 900px) { .mm .pstep__label { display: none; } .mm .pstep__sep { width: 12px; } }

.mm .cartbtn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, background .15s ease;
}
.mm .cartbtn:hover, .mm .cartbtn:active { transform: translateY(-1px); background: var(--wine); }
.mm .cartbtn__icon { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.mm .cartbtn__icon svg { width: 19px; height: 19px; display: block; }
.mm .cartbtn__count {
  background: var(--gold-soft);
  color: var(--wine);
  min-width: 20px; height: 20px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  padding: 0 5px;
}
.mm .cartbtn.pulse { animation: mmPulse .4s ease; }
@keyframes mmPulse { 0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)} }

.mm .progress__bar { height: 3px; background: var(--line); }
.mm .progress__fill {
  height: 100%;
  width: 0;
  background: var(--wine);
  transition: width .35s ease;
}

/* ---------- Stage ---------- */
.mm .stage {
  max-width: var(--max-width, 1180px);
  margin: 0 auto;
  padding: 28px 24px 24px;
}
/* Alleen op stappen mét de vaste onderbalk (Terug/Volgende) is er extra
   ruimte nodig zodat die balk niet over de laatste inhoud heen valt. Op
   stappen zonder die balk (start, gelegenheid kiezen, bevestiging) blijft
   de pagina zo kort mogelijk, zodat de footer zonder scrollen zichtbaar is.
   De waarde is bewust krap boven de werkelijke hoogte van de balk gehouden
   (i.p.v. ruim eromheen), zodat korte stappen zoals Momenten zonder
   scrollen in beeld passen. */
body.mm-has-navbar .mm .stage { padding-bottom: 92px; }
.mm .step-head { text-align: center; margin-bottom: 22px; }
.mm .step-head h1 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 10px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.mm .step-head p { color: var(--muted); font-size: 16px; margin: 0; }
.mm .step-head .eyebrow { margin-bottom: 8px; }

/* ---------- Landing / hero (wizard intro, rendered inside #stage) ---------- */
.mm .hero {
  min-height: 38vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink);
  position: static;
  overflow: visible;
}
.mm .hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  margin: 0 0 20px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--plum) 0%, var(--wine) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mm .hero p { font-size: clamp(16px, 2.2vw, 19px); color: var(--muted); max-width: 560px; margin: 0 auto 28px; }
.mm .hero__note { margin: 0 auto 28px; font-size: clamp(12px, 2.2vw, 14px); color: var(--muted); }

/* ---------- Buttons ---------- */
.mm .btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; border-radius: 999px;
  padding: 15px 30px;
  font-size: 15px; font-weight: 600;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease, opacity .2s;
}
.mm .btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.mm .btn--primary:hover { transform: translateY(-2px); background: var(--wine); box-shadow: 0 10px 24px rgba(140,51,100,.28); }
.mm .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.mm .btn--ghost:hover, .mm .btn--ghost:active, .mm .btn--ghost:focus-visible { background: var(--wine); color: #fff; border-color: var(--wine); }
.mm .btn--big { padding: 18px 42px; font-size: 17px; }
.mm .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- Option grid (event types / moments) ---------- */
.mm .options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}
.mm .option {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
  transition: .18s;
  box-shadow: var(--shadow-sm);
}
.mm .option:hover { border-color: var(--wine); transform: translateY(-3px); }
.mm .option--selected { border-color: var(--wine); background: #fff; box-shadow: 0 8px 30px rgba(140,51,100,.18); }
.mm .option--selected::after {
  content: "✓";
  position: absolute; top: 12px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wine); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.mm .option__emoji { font-size: 34px; display: block; margin-bottom: 8px; }
.mm .option__title { font-weight: 600; font-size: 19px; color: var(--ink); }

/* ---------- Act cards ---------- */
.mm .acts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.mm .card {
  position: relative;
  background: var(--plum);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: .18s;
}
.mm .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mm .card--in { border-color: var(--wine); }
/* Foto bestrijkt de volledige card, onvervaagd — de plum panel eronder
   zorgt voor de leesbaarheid van naam/tekst. */
.mm .card__photo {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background-position: center;
}
.mm .card__role {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.92);
  color: var(--plum);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.mm .card__body {
  position: relative; z-index: 2;
  padding: clamp(200px, 90%, 340px) 18px 18px;
  display: flex; flex-direction: column; gap: 14px; flex: 1;
}
.mm .card__panel {
  background: var(--plum);
  margin: 0 -18px;
  padding: 10px 18px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.mm .card__name {
  font-weight: 700; font-size: 18px; color: #fff;
  text-transform: uppercase; letter-spacing: .3px; margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mm .card__price { font-weight: 700; color: var(--gold-soft); font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__price small { color: rgba(255,255,255,.8); font-weight: 500; font-size: 11.5px; }
.mm .card__basis { color: rgba(255,255,255,.8); font-size: 11px; margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__links { display: flex; align-items: center; gap: 10px; }
.mm .card__more, .mm .card__video { background: none; border: none; color: rgba(255,255,255,.95); font-weight: 600; font-size: 13px; padding: 0; text-align: left; text-decoration: underline; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__more:hover, .mm .card__video:hover { color: #fff; }
.mm .card__linksep { color: rgba(255,255,255,.55); font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__extra { font-size: 13.5px; color: rgba(255,255,255,.92); line-height: 1.55; border-top: 1px dashed rgba(255,255,255,.3); padding-top: 10px; display: none; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mm .card__extra.open { display: block; }
.mm .card__foot { margin-top: auto; padding-top: 4px; }
.mm .card__add {
  width: 100%;
  border: 1.5px solid var(--wine);
  background: #fff;
  color: var(--wine);
  border-radius: 999px;
  padding: 12px;
  font-weight: 600; font-size: 14px;
  transition: .15s;
}
.mm .card__add:hover { background: var(--wine); color: #fff; }
.mm .card__add--in { background: var(--wine); color: #fff; }

/* ---------- Sticky nav footer (JS-generated inside #stage) ---------- */
.mm .navbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  z-index: 30;
}
.mm .navbar__inner {
  max-width: var(--max-width, 1180px); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.mm .navbar__hint { color: var(--muted); font-size: 14px; }

/* De vaste onderbalk hierboven overlapt anders de site-footer eronder.
   Reserveer op stappen met die balk extra ruimte, zodat de footer bij
   helemaal doorscrollen volledig zichtbaar wordt — met dezelfde uitlijning
   als op de rest van de site. */
body.mm-has-navbar .site-footer { margin-bottom: 76px; }
@media (max-width: 640px) { body.mm-has-navbar .site-footer { margin-bottom: 96px; } }
/* Op korte stappen (bv. Momenten, met maar 4 keuzeknoppen, of het
   startscherm) is de pagina soms korter dan het scherm. Zonder
   onderstaande regel zou de footer dan ergens halverwege het scherm
   blijven staan in plaats van onderaan, met een grillige roze ruimte
   erna. Duw de footer daarom op de hele Matchmaker-pagina altijd naar de
   onderkant van (minimaal) het scherm — net als op de rest van de site —
   ongeacht welke stap er actief is, zodat je nooit hoeft te scrollen op
   korte stappen. */
body.mm-page { display: flex; flex-direction: column; min-height: 100vh; }
body.mm-page #main { flex: 1; }
.mm .navbar__hint b { color: var(--wine); }

/* ---------- Drawer (line-up) ---------- */
.mm .drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--paper);
  z-index: 60;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  box-shadow: -10px 0 40px rgba(20,23,15,.18);
}
.mm .drawer.open { transform: translateX(0); }
.mm .drawer__head {
  padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.mm .drawer__head h2 { margin: 0; font-size: 21px; color: var(--ink); font-weight: 700; }
.mm .drawer__body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.mm .scrim {
  position: fixed; inset: 0; background: rgba(20,23,15,.4);
  z-index: 55; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mm .scrim.open { opacity: 1; pointer-events: auto; }
.mm .iconbtn {
  background: none; border: none; font-size: 17px; color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%;
}
.mm .iconbtn:hover { background: var(--cream); color: var(--ink); }

/* line-up items */
.mm .lu-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.mm .lu-item__thumb { width: 52px; height: 52px; border-radius: 12px; flex: none; background-position: center; }
.mm .lu-item__info { flex: 1; min-width: 0; }
.mm .lu-item__eyebrow { font-size: 11px; font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.mm .lu-item__role { font-size: 12.5px; color: var(--muted); margin-bottom: 1px; }
.mm .lu-item__name { font-weight: 600; color: var(--ink); font-size: 15px; }
.mm .lu-item__price { color: var(--muted); font-size: 13px; }
.mm .lu-item__basis { color: var(--muted); font-style: italic; }
.mm .lu-item__rm { background: none; border: none; color: #b23; font-size: 13px; font-weight: 600; }
.mm .lu-empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.mm .lu-empty span { font-size: 40px; display: block; margin-bottom: 10px; }

/* pricing summary */
.mm .summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 18px;
}
.mm .summary__row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--ink); }
.mm .summary__row--muted { color: var(--muted); }
.mm .summary__row--save { color: var(--ok); font-weight: 600; }
.mm .summary__row--total { border-top: 1.5px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 700; color: var(--ink); }
.mm .discount-banner {
  background: linear-gradient(135deg, rgba(178,90,134,.14), rgba(140,51,100,.08));
  border: 1px dashed var(--wine);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--wine);
  margin: 14px 0 0;
  text-align: center;
  font-weight: 600;
}
.mm .discount-ladder { display: flex; gap: 6px; margin-top: 10px; }
.mm .discount-ladder .rung {
  flex: 1; text-align: center; font-size: 11px; font-weight: 700;
  padding: 6px 2px; border-radius: 8px; background: #fff; color: var(--muted); border: 1px solid var(--line);
}
.mm .discount-ladder .rung--on { background: var(--wine); color: #fff; border-color: var(--wine); }
.mm .discount-ladder .rung--next { border-color: var(--wine); color: var(--wine); }

/* ---------- Overview page ---------- */
.mm .overview { max-width: 720px; margin: 0 auto; }
.mm .ov-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.mm .ov-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mm .ov-row:last-child { border-bottom: none; }
.mm .ov-row__thumb { width: 56px; height: 56px; border-radius: 12px; flex: none; background-position: center; }
.mm .ov-row__info { flex: 1; }
.mm .ov-row__eyebrow { font-size: 11px; font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px; }
.mm .ov-row__role { font-size: 13px; color: var(--muted); margin-bottom: 1px; }
.mm .ov-row__name { font-weight: 600; color: var(--ink); font-size: 17px; }
.mm .ov-row__price { font-weight: 700; color: var(--wine); text-align: right; }
.mm .ov-row__basis { font-weight: 500; color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; }
.mm .ov-row__rm { background: none; border: 1px solid var(--line); border-radius: 8px; color: #b23; font-weight: 600; font-size: 12px; padding: 6px 10px; }

/* ---------- Form ---------- */
.mm .form { max-width: 620px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; }
.mm .field { margin-bottom: 18px; }
.mm .field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; color: var(--ink); }
.mm .field label .req { color: var(--wine); }
.mm .field input, .mm .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff;
  transition: .15s;
}
.mm .field input:focus, .mm .field textarea:focus { outline: none; border-color: var(--wine); background: #fff; box-shadow: 0 0 0 3px rgba(140,51,100,.12); }
.mm .field input.invalid, .mm .field textarea.invalid { border-color: #d3506a; background: #fff5f7; }
.mm .field .err { color: #c0304c; font-size: 12.5px; margin-top: 5px; display: none; }
.mm .field .err.show { display: block; }
.mm .field textarea { resize: vertical; min-height: 84px; }
.mm .field .checkbox {
  display: flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: 13px; color: var(--muted);
  margin-top: 8px; cursor: pointer;
}
.mm .field .checkbox input { width: auto; padding: 0; accent-color: var(--wine); }
.mm .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .mm .form-grid { grid-template-columns: 1fr; } }

/* ---------- Confirmation ---------- */
.mm .done { max-width: 640px; margin: 0 auto; text-align: center; }
.mm .done__check {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 44px;
  display: grid; place-items: center; margin: 10px auto 24px;
  box-shadow: var(--shadow);
}
.mm .done__panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px; text-align: left; margin-top: 26px; }
.mm .done__panel h3 { margin: 0 0 14px; color: var(--ink); }
.mm .kv { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.mm .kv:last-child { border-bottom: none; }
.mm .kv span:first-child { color: var(--muted); }

/* ---------- Video / moment modal ---------- */
.mm .modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,23,15,.62);
  display: none; place-items: center; padding: 20px;
}
.mm .modal.open { display: grid; }
.mm .modal__box { background: var(--paper); border-radius: var(--radius); width: min(760px, 96vw); overflow: hidden; box-shadow: var(--shadow); }
.mm .modal__box--sm { width: min(440px, 92vw); }
.mm .modal__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mm .modal__head h3 { margin: 0; color: var(--ink); }
.mm .modal__kicker { font-size: 11px; font-weight: 700; color: var(--wine); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.mm .modal__video { aspect-ratio: 16/9; background: #000; }
.mm .modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.mm .modal__body { padding: 22px; }
.mm .modal__hint { margin: 0 0 4px; color: var(--ink); font-size: 14.5px; line-height: 1.5; }

/* ---------- Moment picker (bruiloft) ---------- */
.mm .moment-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mm .mchip {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  padding: 10px 16px; border-radius: 16px; font-size: 14px; font-weight: 600;
  transition: .15s; display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  min-width: 168px; text-align: left;
}
.mm .mchip__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mm .mchip:hover { border-color: var(--wine); }
.mm .mchip--on { background: var(--wine); color: #fff; border-color: var(--wine); }
.mm .mchip--locked { cursor: default; }
.mm .mchip--locked:hover { border-color: var(--wine); }
.mm .mchip--extra:not(.mchip--on) { border-style: dashed; border-color: var(--wine); }
.mm .mchip__price { font-size: 12px; font-weight: 700; opacity: .8; }
.mm .mchip__basis { font-size: 11px; font-weight: 500; opacity: .75; text-align: center; }
.mm .moment-total { margin-top: 16px; font-size: 14px; color: var(--ink); text-align: center; }

/* ---------- Toast ---------- */
.mm .toast {
  position: fixed; left: 50%; bottom: 158px; z-index: 95;
  transform: translate(-50%, 16px);
  background: var(--ink); color: #fff;
  padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(92vw, 480px); text-align: center;
}
.mm .toast b { color: var(--gold-soft); font-weight: 700; }
.mm .toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Persistent discount message ---------- */
.mm .discount-float {
  position: fixed; left: 50%; bottom: 92px; z-index: 80;
  transform: translate(-50%, 12px);
  background: var(--wine); color: #fff;
  padding: 13px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(92vw, 520px); text-align: center;
}
.mm .discount-float b { color: var(--gold-soft); font-weight: 700; }
.mm .discount-float.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- Line-up regel op de bevestigingspagina ---------- */
.mm .lu-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.mm .lu-row:last-of-type { border-bottom: none; }
.mm .lu-row__text { flex: 1; min-width: 0; }
.mm .lu-row__moment {
  font-size: 11px; font-weight: 700; color: var(--wine);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 3px;
}
.mm .lu-row__role { font-size: 13px; color: var(--muted); margin-bottom: 1px; }
.mm .lu-row__name { font-weight: 600; color: var(--ink); font-size: 16px; }
.mm .lu-row__priceblock { text-align: right; }
.mm .lu-row__price { font-weight: 700; color: var(--wine); white-space: nowrap; }
.mm .lu-row__basis { font-weight: 500; color: var(--muted); font-size: 11px; margin-top: 2px; white-space: nowrap; }

.mm .fade { animation: mmFade .35s ease; }
@keyframes mmFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .mm .brand__name { display: none; }
  .mm .topbar__inner { gap: 12px; padding: 10px 16px; }
  .mm .cartbtn__label { display: none; }
}