/* Page-level layouts. Sections are added per phase. */

/* ---------- Template reference pages (tpl-*): not part of the site, do not port ---------- */
.tpl-hero { padding-block: var(--s-7) var(--s-8); overflow: hidden; }
.tpl-hero__in { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; position: relative; }
.tpl-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(var(--s-5) * -1); position: relative; }
.tpl-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-7) 96px; }
.tpl-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); scroll-margin-top: 100px; min-width: 0; }
.tpl-sec > header { display: grid; gap: 4px; }
.tpl-box > * { min-width: 0; } /* let carousels scroll instead of widening the box */
.tpl-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); background: var(--surface); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow); }
.tpl-grid2 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tpl-icons { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); color: var(--second-strong); }
.tpl-icons figure { display: grid; justify-items: center; gap: 6px; padding: 14px 4px; border-radius: var(--r-md); background: var(--paper); }
.tpl-icons figcaption { font: 500 11px/1.2 ui-monospace, Consolas, monospace; color: var(--ink-soft); }
.tpl-pages { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tpl-pages a { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); font-weight: 500; }
.tpl-pages a:hover { box-shadow: inset 0 0 0 2px var(--second); }
.tpl-pages .is-todo { opacity: .55; pointer-events: none; }
.tpl-pages small { margin-inline-start: auto; color: var(--ink-soft); }
.tpl-launch { display: flex; flex-wrap: wrap; gap: 10px; }
.tpl-notes { display: grid; gap: 6px; padding-inline-start: 20px; color: var(--ink-soft); font-size: 15px; }
.tpl-notes b { color: var(--ink); }
.tpl-sub { font-size: 16px; color: var(--ink-soft); margin-top: 12px; }
.tpl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.tpl-tiles .mm-tile { min-height: 210px; }
.tpl-agechart { display: grid; max-width: 640px; height: 520px; }
.tpl-agechart .mm-tile--ages { grid-column: auto; grid-row: auto; }
.tpl-split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; align-items: start; }
.tpl-narrow { min-width: 0; }
.tpl-buybar { display: flex; gap: 12px; align-items: center; justify-content: space-between; max-width: 420px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 -4px 16px rgb(38 52 74 / .1); }
@media (max-width: 960px) { .tpl-split { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Shell: strip, header, mobile tab bar
   ===================================================================== */
.mm-hide-sm { } .mm-show-sm { display: none !important; }
@media (max-width: 760px) { .mm-hide-sm { display: none !important; } .mm-show-sm { display: revert !important; } }

/* One light strip: quick links · rotating promos · language & currency */
.mm-strip { background: var(--panel); color: var(--ink); font: 500 13px/1.2 var(--font-body); }
.mm-strip .mm-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 40px; }
.mm-strip a, .mm-strip button { color: var(--ink); text-decoration: none; background: none; border: 0; padding: 6px 4px; font: inherit; display: inline-flex; gap: 5px; align-items: center; }
.mm-strip a:hover, .mm-strip button:hover { color: var(--second-strong); }
.mm-strip .mm-icon { --icon: 16px; }
.mm-strip__links { display: flex; gap: 14px; }
.mm-strip__prefs { display: flex; gap: 14px; justify-content: flex-end; }
.mm-strip__promo { display: grid; justify-items: center; }
.mm-strip__promo > * { grid-area: 1 / 1; display: inline-flex; gap: 8px; align-items: center; transition: opacity .4s, transform .4s; }
.mm-strip__promo > :not(.is-on) { opacity: 0; transform: translateY(8px); }
.mm-strip__promo .mm-icon { color: var(--warning); }

.mm-header { position: sticky; top: 0; z-index: 40; background: var(--paper); }
.mm-header .mm-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; }
.mm-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.mm-lockup img { width: 52px; height: 52px; border-radius: 50%; }
.mm-lockup b { display: block; font: 800 26px/1 var(--font-display); color: var(--second-strong); }
.mm-lockup small { display: block; font: 600 15px/1.3 var(--font-display); color: var(--accent-strong); }
/* Pill nav: every link carries a rainbow dot */
.mm-nav { display: flex; gap: 4px; background: var(--surface); border-radius: var(--r-pill); padding: 6px; box-shadow: 0 6px 24px rgb(30 58 92 / .1); }
.mm-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font: 500 15px/1 var(--font-body); }
.mm-nav a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1.5px rgb(38 52 74 / .15); }
.mm-nav a:hover { background: var(--second-soft); }
.mm-nav a[aria-current] { background: var(--second-soft); color: var(--second-strong); font-weight: 600; }
.mm-nav .mm-icon { --icon: 16px; }
.mm-header__icons { display: flex; gap: 6px; }

.mm-tabbar { display: none; }
@media (max-width: 760px) {
  .mm-strip .mm-wrap { grid-template-columns: 1fr; }
  .mm-header .mm-wrap { min-height: 68px; gap: 8px; }
  .mm-lockup img { width: 42px; height: 42px; } .mm-lockup b { font-size: 22px; } .mm-lockup small { font-size: 13px; }
  body:has(.mm-tabbar) { padding-bottom: 76px; }
  .mm-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; inset-inline: 0; bottom: 0;
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); box-shadow: 0 -4px 16px rgb(30 58 92 / .08);
  }
  .mm-tabbar a { display: grid; justify-items: center; gap: 3px; font-size: 11px; color: var(--ink-soft); text-decoration: none; position: relative; }
  .mm-tabbar .mm-icon { --icon: 22px; box-sizing: content-box; padding: 3px 12px; border-radius: var(--r-pill); }
  .mm-tabbar [aria-current="page"] { color: var(--second-strong); font-weight: 600; }
  .mm-tabbar [aria-current="page"] .mm-icon { background: var(--second-soft); }
  .mm-tabbar .mm-count { top: -4px; inset-inline-end: calc(50% - 24px); }
}

/* =====================================================================
   Home
   ===================================================================== */
/* Bento: chunky toy-block tiles */
.mm-bento { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 270px 270px 210px; padding-block: 8px 48px; }
.mm-tile {
  position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg, var(--surface)); padding: 24px; color: var(--ink); text-decoration: none;
  display: grid; align-content: start; gap: 6px; box-shadow: 0 6px 0 rgb(38 52 74 / .07); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
a.mm-tile:hover { transform: translateY(-5px) rotate(-.8deg); }
a.mm-tile:nth-child(odd):hover { transform: translateY(-5px) rotate(.8deg); }
.mm-tile h3 { font-size: 22px; }
.mm-tile .meta { font-size: 14px; color: var(--ink-soft); }
.mm-tile .mm-art { position: absolute; width: 140px; bottom: -14px; inset-inline-end: -8px; rotate: -8deg; }
a.mm-tile:hover .mm-art { transform: rotate(8deg) scale(1.05); }
.mm-tile .mm-art--icon { --icon: 96px; width: auto; color: var(--warning); }
.mm-tile .go { position: absolute; bottom: 20px; inset-inline-start: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--second-strong); }
.mm-tile .big-num { font: 800 40px/1.1 var(--font-display); color: var(--success); margin-top: 6px; white-space: nowrap; }

/* Hero tile: CMS slides; the slide image fills the circle Milo peeks from */
.mm-tile--hero { grid-column: 1 / 3; grid-row: 1 / 3; padding: 44px 40px; align-content: center; background: var(--sky); }
.mm-tile--hero > * { position: relative; }
.mm-tile--hero h1 { margin-block: 8px 12px; max-width: 13ch; }
.mm-tile--hero p { max-width: 32ch; color: var(--ink-soft); }
.mm-tile--hero .mm-row { margin-top: 22px; }
.mm-peek { position: absolute !important; bottom: -54px; inset-inline-end: -30px; --size: 240px; --tilt: -10deg; object-fit: cover; }
[dir="rtl"] .mm-peek { --tilt: 10deg; }
.mm-tile--hero:hover .mm-peek { animation: mm-peek .8s ease-in-out; }
@keyframes mm-peek { 40% { translate: 0 -14px; } }
.mm-slidedots { position: absolute !important; bottom: 24px; inset-inline-start: 40px; display: flex; gap: 6px; }
.mm-slidedots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgb(46 107 163 / .25); transition: width .3s; }
.mm-slidedots button[aria-current="true"] { width: 28px; background: var(--second-strong); }

/* Age chart tile: rainbow bars are ages; Milo hops onto the chosen one */
.mm-tile--ages { grid-column: 3 / 5; grid-row: 1 / 3; grid-template-rows: auto 1fr auto; padding: 26px 28px 20px; }
.mm-agechart__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mm-agechart__head h2 { font-size: 24px; }
.mm-agechart__bars {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; padding-top: 76px; min-height: 0;
  background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 40px) 0 0 / 100% calc(100% - 64px) no-repeat;
}
.mm-agebar { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 10px; border: 0; background: none; padding: 0; color: var(--ink); }
.mm-agebar__fill { align-self: end; position: relative; height: var(--h); border-radius: 18px 18px 8px 8px; background: var(--c); transition: height .4s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
.mm-agebar:hover .mm-agebar__fill { height: calc(var(--h) + 8px); }
.mm-agebar[aria-pressed="true"] .mm-agebar__fill { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--second-strong); }
.mm-agebar__label { display: grid; justify-items: center; line-height: 1.2; }
.mm-agebar__label b { font: 800 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.mm-agebar__label small { font-size: 12px; color: var(--ink-soft); }
.mm-agebar[aria-pressed="true"] .mm-agebar__label b { color: var(--second-strong); }
.mm-agechart__milo { position: absolute; bottom: 100%; left: 50%; translate: -50% 6px; --size: 64px; pointer-events: none; }
.mm-agechart__milo.is-hop { animation: mm-hop-in .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mm-hop-in { 0% { transform: translateY(-40px) scale(.85); opacity: .3; } 70% { transform: translateY(4px); } }
.mm-agechart__stage { text-align: center; font: 600 14px var(--font-body); color: var(--accent-strong); margin-top: 10px; }

/* Balloons: categories floating in a sky band (a CMS category image can fill the balloon; the icon is the fallback) */
.mm-balloons { display: flex; justify-content: center; gap: 12px 40px; flex-wrap: wrap; }
.mm-balloon { display: grid; justify-items: center; text-decoration: none; color: var(--ink); font: 700 17px/1.3 var(--font-display); }
.mm-balloon__b {
  width: 108px; height: 124px; border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%; background: var(--bg);
  display: grid; place-items: center; position: relative; color: var(--ink); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.mm-balloon__b::before { content: ""; position: absolute; top: 18px; inset-inline-start: 22px; width: 16px; height: 24px; border-radius: 50%; background: #fff; opacity: .6; rotate: 25deg; }
.mm-balloon__b::after { content: ""; position: absolute; bottom: -7px; width: 14px; height: 10px; background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mm-balloon .mm-icon { --icon: 42px; stroke-width: 1.8; }
.mm-balloon svg.string { width: 20px; height: 34px; margin-top: 4px; color: var(--second); }
.mm-balloon:hover .mm-balloon__b { transform: translateY(-10px) rotate(-4deg); }
.mm-balloon:nth-child(even):hover .mm-balloon__b { transform: translateY(-10px) rotate(4deg); }

@media (max-width: 960px) {
  .mm-nav { display: none; }
  .mm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .mm-tile--hero, .mm-tile--ages { grid-column: 1 / -1; grid-row: auto; }
  .mm-tile--hero { min-height: 420px; }
  .mm-tile--ages { height: 440px; }
  .mm-tile { min-height: 180px; }
}
@media (max-width: 760px) {
  .mm-bento { gap: 12px; padding-bottom: 40px; }
  .mm-tile { padding: 18px; min-height: 160px; }
  .mm-tile--hero { padding: 26px 20px 60px; min-height: 0; }  /* shorter, so the age chart shows sooner */
  .mm-peek { --size: 136px; bottom: -34px; inset-inline-end: -22px; }
  .mm-slidedots { inset-inline-start: 22px; bottom: 20px; }
  .mm-tile--ages { height: 380px; padding: 18px 14px 14px; }
  .mm-agechart__head h2 { font-size: 20px; }
  .mm-agechart__bars { gap: 6px; padding-top: 60px; }
  .mm-agebar__label b { font-size: 17px; } .mm-agebar__label small { font-size: 11px; }
  .mm-agechart__milo { --size: 48px; }
  .mm-tile .mm-art { width: 96px; }
  .mm-tile .mm-art--icon { --icon: 68px; width: auto; }
  .mm-tile h3 { font-size: 19px; }
  .mm-tile .big-num { font-size: 24px; }
  .mm-balloons { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 20px; margin-inline: -16px; padding: 14px 16px 4px; scrollbar-width: none; }
  .mm-balloon__b { width: 84px; height: 96px; } .mm-balloon .mm-icon { --icon: 32px; } .mm-balloon { font-size: 15px; flex: none; }
}

/* =====================================================================
   Shell: dropdowns, mega-menu, mobile drawer, footer, WhatsApp
   ===================================================================== */
.mm-nav > button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-pill); border: 0; background: none; color: var(--ink); font: 500 15px/1 var(--font-body); }
.mm-nav > button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1.5px rgb(38 52 74 / .15); }
.mm-nav > button:hover, .mm-nav > button[aria-expanded="true"] { background: var(--second-soft); color: var(--second-strong); }
.mm-nav > button .mm-icon { --icon: 16px; transition: rotate .2s; }
.mm-nav > button[aria-expanded="true"] .mm-icon { rotate: 180deg; }
.mm-header .mm-wrap { position: relative; }

/* Dropdowns (currency, guest account) */
.mm-popwrap { position: relative; }
.mm-pop {
  position: absolute; z-index: 60; top: calc(100% + 10px); inset-inline-end: 0; min-width: 220px; margin: 0; padding: 8px; list-style: none;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-float); animation: mm-drop .25s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes mm-drop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.mm-pop a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font: 500 14px/1.3 var(--font-body); }
.mm-pop a:hover { background: var(--second-soft); }
.mm-pop a[aria-current] { color: var(--second-strong); font-weight: 600; background: var(--second-soft); }
.mm-pop--sm { min-width: 190px; }
.mm-pop--account { width: 280px; padding: 20px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.mm-pop--account p { font-size: 14px; color: var(--ink-soft); }
.mm-pop--account b { font: 700 18px var(--font-display); color: var(--ink); }

/* Mega-menu: every category with its sub-categories, plus shop-by-age */
.mm-mega {
  position: absolute; z-index: 60; top: calc(100% - 6px); inset-inline: var(--s-5); display: grid; grid-template-columns: 1fr 260px; gap: 24px;
  padding: 28px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-float); animation: mm-drop .3s cubic-bezier(.3, 1.4, .5, 1);
}
.mm-mega__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.mm-mega__title { display: flex; gap: 10px; align-items: center; font: 700 18px/1.2 var(--font-display); color: var(--ink); text-decoration: none; margin-bottom: 8px; }
.mm-mega__title:hover { color: var(--second-strong); }
.ic { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--bg); }
.ic .mm-icon { --icon: 22px; }
.mm-mega__cat ul { list-style: none; margin: 0; padding: 0; padding-inline-start: 50px; display: grid; gap: 2px; }
.mm-mega__cat ul a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.mm-mega__cat ul a:hover { color: var(--second-strong); }
.mm-mega__all { color: var(--second-strong) !important; font-weight: 600; }
.mm-mega__all .mm-icon { --icon: 16px; }
.mm-mega__side { background: var(--sky); border-radius: var(--r-md); padding: 22px; display: grid; gap: 12px; justify-items: center; align-content: center; text-align: center; }
.mm-mega__side b { font: 700 19px var(--font-display); color: var(--ink); }
.mm-mega__ages { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mm-mega__ages a { padding: 7px 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); text-decoration: none; font: 500 14px/1.2 var(--font-body); }
.mm-mega__ages a:hover { background: var(--second-strong); color: #fff; }

/* Drawers: side panels from a <dialog>; start side by default, --end for cart & wishlist */
.mm-drawer {
  --from: -100%; position: fixed; margin: 0; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; height: 100dvh; max-height: none;
  width: min(380px, 88vw); max-width: none; padding: 0; border: 0; background: var(--paper); color: var(--ink);
  border-start-end-radius: var(--r-lg); border-end-end-radius: var(--r-lg); box-shadow: 0 0 60px rgb(38 52 74 / .2);
  flex-direction: column;
}
[dir="rtl"] .mm-drawer { --from: 100%; }
.mm-drawer[open] { display: flex; animation: mm-slide .35s cubic-bezier(.2, 1, .3, 1); }
.mm-drawer::backdrop { background: rgb(38 52 74 / .4); }
@keyframes mm-slide { from { transform: translateX(var(--from)); } }
.mm-drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 16px 12px; background: var(--sky); }
.mm-drawer__body { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 16px; align-content: start; }
.mm-drawer__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.mm-drawer__foot > a:not(.mm-btn) { display: inline-flex; gap: 6px; align-items: center; color: var(--second-strong); font-weight: 600; text-decoration: none; }

/* Drill-down menu (mobile) */
.mm-menu { display: grid; gap: 4px; animation: mm-menu-in .3s ease; }
@keyframes mm-menu-in { from { opacity: 0; transform: translateX(calc(var(--from, -100%) * -.08)); } }
.mm-menu > a, .mm-menu > button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--ink); text-decoration: none; text-align: start; font: 600 17px/1.3 var(--font-display);
}
.mm-menu > a:hover, .mm-menu > button:hover { background: var(--second-soft); }
.mm-menu > button > .mm-icon:last-child { margin-inline-start: auto; --icon: 18px; color: var(--ink-soft); }
.mm-menu .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.mm-menu > .is-small { min-height: 44px; font: 500 15px/1.3 var(--font-body); color: var(--ink-soft); }
.mm-menu > .is-small .mm-icon { --icon: 18px; color: var(--second-strong); }
.mm-menu .mm-divider { margin-block: 8px; }
.mm-menu__back { color: var(--second-strong) !important; font: 600 15px var(--font-body) !important; min-height: 44px !important; }
.mm-menu__back .mm-icon { --icon: 18px; margin-inline-start: 0 !important; }
.mm-menu__all { color: var(--second-strong) !important; }

/* Instagram strip */
.mm-insta { padding-block: 64px 0; overflow: hidden; }
.mm-insta__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 16vw, 210px); gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 6px var(--s-5) 16px; }
.mm-insta__tile { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--bg); display: grid; place-items: center; overflow: hidden; rotate: -2deg; transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1); }
.mm-insta__tile:nth-child(even) { rotate: 2deg; }
.mm-insta__tile:hover { rotate: 0deg; }
.mm-insta__hover { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(46 107 163 / .75); color: #fff; opacity: 0; transition: opacity .2s; }
.mm-insta__hover .mm-icon { --icon: 36px; }
.mm-insta__tile:hover .mm-insta__hover, .mm-insta__tile:focus-visible .mm-insta__hover { opacity: 1; }

/* Footer: a light lilac band under a cloud edge */
.mm-footer { --band: var(--lilac); position: relative; background: var(--band); margin-top: 56px; padding-top: 56px; }
.mm-footer::before {
  content: ""; position: absolute; inset-inline: 0; top: -21px; height: 22px;
  background: radial-gradient(circle at 22px 22px, var(--band) 21px, transparent 22px) 0 0 / 44px 22px repeat-x;
}
.mm-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, .8fr)) 1.6fr; gap: 32px; padding-bottom: 40px; }
.mm-footer h3 { font-size: 18px; margin-bottom: 12px; }
.mm-footer__slogan { font: 700 18px var(--font-display); color: var(--accent-strong); margin-block: 12px 16px; }
.mm-footer__contact { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.mm-footer__contact li { display: flex; gap: 10px; align-items: center; }
.mm-footer__contact .mm-icon { --icon: 18px; color: var(--accent-strong); }
.mm-footer__contact a { color: var(--ink); text-decoration: none; }
.mm-footer__contact a:hover { color: var(--second-strong); }
.mm-footer__col { display: grid; gap: 8px; align-content: start; }
.mm-footer__col a { color: var(--ink-soft); text-decoration: none; font-size: 15px; width: fit-content; }
.mm-footer__col a:hover { color: var(--second-strong); text-decoration: underline; }
.mm-footer__news { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 10px; align-content: start; box-shadow: 0 6px 0 rgb(38 52 74 / .06); }
.mm-footer__news h3 { margin: 0; }
.mm-footer__news p { font-size: 14px; color: var(--ink-soft); }
.mm-footer__news .mm-milo { position: absolute; top: -26px; inset-inline-end: 18px; }
.mm-footer__newsrow { display: flex; gap: 8px; }
.mm-footer__newsrow .mm-input { min-height: 48px; border-radius: var(--r-pill); }
.mm-footer__captcha { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.mm-footer__captcha a { color: var(--ink-soft); }
.mm-footer__social { display: flex; gap: 8px; }
.mm-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-block: 18px 22px; border-top: 1.5px dashed rgb(106 72 168 / .25); font-size: 14px; color: var(--ink-soft); }

/* Floating WhatsApp button: bottom end (flips in Arabic) */
.mm-wa {
  position: fixed; z-index: 45; bottom: 24px; inset-inline-end: 24px; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--success); color: #fff; box-shadow: 0 4px 0 rgb(38 52 74 / .2), 0 10px 24px rgb(47 125 79 / .3);
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.mm-wa .mm-icon { --icon: 28px; }
.mm-wa:hover { transform: scale(1.08) rotate(-6deg); }
.mm-wa__tip {
  position: absolute; inset-inline-end: calc(100% + 10px); white-space: nowrap; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: 600 13px var(--font-body); box-shadow: var(--shadow); opacity: 0; translate: 6px 0; transition: .2s; pointer-events: none;
}
[dir="rtl"] .mm-wa__tip { translate: -6px 0; }
.mm-wa:hover .mm-wa__tip, .mm-wa:focus-visible .mm-wa__tip { opacity: 1; translate: 0 0; }

@media (max-width: 1100px) {
  .mm-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-footer__brand { grid-column: 1 / -1; }
  .mm-footer__news { grid-column: 1 / -1; margin-top: 16px; }
  .mm-mega__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mm-insta { padding-top: 48px; }
  .mm-insta__track { grid-auto-columns: 42%; padding-inline: var(--s-4); }
  .mm-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .mm-footer__col:last-of-type { grid-column: 1 / -1; }
  .mm-footer__newsrow { flex-direction: column; }
  .mm-footer__bottom { flex-direction: column; text-align: center; }
  .mm-wa { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 16px; width: 52px; height: 52px; }
  .mm-wa__tip { display: none; }
}

/* =====================================================================
   Overlays: cart & wishlist drawers, search, quick view, page banner
   ===================================================================== */
.mm-tabbar button { display: grid; justify-items: center; gap: 3px; font: 400 11px var(--font-body); color: var(--ink-soft); background: none; border: 0; padding: 0; position: relative; }

/* End-side drawers (cart, wishlist) */
.mm-drawer--end { --from: 100%; inset-inline-start: auto; inset-inline-end: 0; border-radius: 0; border-start-start-radius: var(--r-lg); border-end-start-radius: var(--r-lg); width: min(420px, 92vw); }
[dir="rtl"] .mm-drawer--end { --from: -100%; }
.mm-drawer__head--blush { background: var(--blush); }
.mm-drawer__title { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.mm-drawer__title .mm-icon { --icon: 24px; color: var(--second-strong); }
.mm-drawer__head--blush .mm-drawer__title .mm-icon { color: var(--action-strong); }
.mm-drawer__foot--stack { display: grid; gap: 12px; }
.mm-sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.mm-sum .mm-price { font-size: 24px; }

/* A line in the cart or wishlist */
.mm-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); transition: opacity .3s, transform .35s cubic-bezier(.5, -.4, .7, 1); }
.mm-line.is-leaving { opacity: 0; transform: scale(.6) rotate(-6deg); }
.mm-line__img { aspect-ratio: 1; border-radius: 12px; background: var(--bg); display: grid; place-items: center; }
.mm-line__img .mm-art { width: 72%; }
.mm-line__info { display: grid; gap: 4px; min-width: 0; }
.mm-line__name { font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--ink); text-decoration: none; }
.mm-line__variant { font-size: 13px; color: var(--ink-soft); }
.mm-line__warn { display: inline-flex; gap: 4px; align-items: center; font: 500 12px var(--font-body); color: var(--warning); }
.mm-line__warn .mm-icon { --icon: 14px; }
.mm-line__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.mm-price { white-space: nowrap; }
.mm-line .mm-price { font-size: 17px; }

/* Fly-to-cart: the product art hops into the cart icon */
.mm-fly { position: fixed; z-index: 100; pointer-events: none; border-radius: 50%; background: var(--surface); box-shadow: 0 8px 20px rgb(38 52 74 / .2); display: grid; place-items: center; }
.mm-fly .mm-art { width: 70%; }

/* Search overlay: full screen, sky top with a cloud edge */
.mm-search { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.mm-search[open] { animation: mm-search-in .3s ease; }
@keyframes mm-search-in { from { opacity: 0; transform: translateY(-16px); } }
.mm-search__top { position: relative; background: var(--sky); padding-block: 28px 30px; }
.mm-search__top::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 22px; background: radial-gradient(circle at 22px 0, var(--sky) 21px, transparent 22px) 0 0 / 44px 22px repeat-x; transform: translateY(100%); }
.mm-search__bar { display: flex; align-items: center; gap: 14px; }
.mm-search__bar .mm-inputwrap { flex: 1; }
.mm-search__bar .mm-input { min-height: 60px; border-radius: var(--r-pill); font-size: 18px; border-color: var(--surface); padding-inline-start: 52px; }
.mm-search__bar .mm-inputwrap > .mm-icon { --icon: 24px; }
.mm-search__bar > .mm-iconbtn { background: var(--surface); width: 52px; height: 52px; }
.mm-search__body { padding-block: 48px 64px; }
.mm-search__cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mm-search__cats a { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--r-md); background: var(--bg); color: var(--ink); text-decoration: none; font: 700 16px var(--font-display); box-shadow: inset 0 -5px 0 rgb(38 52 74 / .07); transition: transform .2s; }
.mm-search__cats a:hover { transform: translateY(-3px); }
.mm-search__cats .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--surface); }
.mm-search__cats .ic .mm-icon { --icon: 28px; }
.mm-search__msg { display: grid; justify-items: center; gap: 14px; padding-block: 48px; color: var(--ink-soft); font-weight: 500; }
.mm-search__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mm-sres { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; animation: mm-pop .35s cubic-bezier(.3, 1.4, .5, 1) backwards; transition: transform .2s; }
.mm-sres:hover { transform: translateY(-3px); }
.mm-sres__img { aspect-ratio: 1; border-radius: 12px; background: var(--bg); display: grid; place-items: center; }
.mm-sres__img .mm-art { width: 72%; }
.mm-sres small { display: block; font-size: 12px; color: var(--second-strong); font-weight: 600; }
.mm-sres span { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.mm-sres b { font: 700 16px var(--font-display); }
.mm-sres mark { background: var(--butter); color: inherit; } /* no padding: it would break Arabic letter joins */
.mm-search__more { text-align: center; margin-top: 12px; }

/* Quick view */
.mm-qv { width: min(940px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.mm-qv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 32px; }
.mm-qv__gallery { display: grid; gap: 10px; align-content: start; }
.mm-qv__main { aspect-ratio: 1; border-radius: var(--r-md); background: var(--bg); display: grid; place-items: center; }
.mm-qv__main .mm-art { width: 64%; animation: mm-pop .4s cubic-bezier(.3, 1.4, .5, 1); }
.mm-qv__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mm-qv__thumbs button { aspect-ratio: 1; border-radius: 12px; border: 0; padding: 0; background: var(--bg); display: grid; place-items: center; box-shadow: inset 0 0 0 2px transparent; }
.mm-qv__thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--second-strong); }
.mm-qv__thumbs .mm-art { width: 64%; }
.mm-qv__info { display: grid; gap: 14px; align-content: start; }
.mm-qv__info h2 { font-size: 26px; }
.mm-qv__buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mm-qv__buy .mm-btn--action { flex: 1; }

/* Inner-page banner */
.mm-banner { position: relative; background: var(--sky); padding-block: 36px 52px; margin-bottom: 40px; overflow: hidden; }
.mm-banner::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 22px; background: radial-gradient(circle at 22px 22px, var(--paper) 21px, transparent 22px) 0 0 / 44px 22px repeat-x; }
.mm-banner__in { position: relative; display: grid; gap: 8px; min-height: 110px; align-content: center; }
.mm-banner h1 { font-size: 40px; line-height: 1.2; }
.mm-banner__art { position: absolute; inset-inline-end: var(--s-5); bottom: -52px; width: 220px; }
.mm-banner__art svg { width: 100%; }
.mm-banner__art .mm-milo { position: absolute; left: 50%; bottom: 0; translate: -50% 0; --size: 92px; --tilt: 0deg; }
/* Page scene: three pastel props float around Milo (icons picked per page in banner_props) */
.mm-banner__prop { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); border: 3px solid var(--surface); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow); rotate: -10deg; animation: mm-float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.mm-banner__prop .mm-icon { --icon: 18px; }
.mm-banner__prop:nth-of-type(1) { left: -16%; top: 34%; }
.mm-banner__prop:nth-of-type(2) { left: 14%; top: -8%; rotate: 8deg; width: 30px; height: 30px; }
.mm-banner__prop:nth-of-type(3) { right: -12%; top: 18%; rotate: 12deg; }

@media (max-width: 960px) {
  .mm-search__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mm-search__top { padding-block: 14px 18px; }
  .mm-search__bar .mm-input { min-height: 52px; font-size: 16px; }
  .mm-search__body { padding-block: 36px 40px; }
  .mm-search__grid { grid-template-columns: minmax(0, 1fr); }
  .mm-qv__grid { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; }
  .mm-qv__buy .mm-btn--action { order: -1; flex-basis: 100%; }
  .mm-banner { padding-block: 22px 44px; margin-bottom: 28px; }
  .mm-banner h1 { font-size: 28px; }
  .mm-banner__art { width: 130px; bottom: -34px; inset-inline-end: 8px; }
  .mm-banner__art .mm-milo { --size: 56px; }
  .mm-banner__prop { width: 28px; height: 28px; border-width: 2px; }
  .mm-banner__prop .mm-icon { --icon: 14px; }
  .mm-banner__prop:nth-of-type(1) { left: -4%; top: 30%; }
  .mm-banner__prop:nth-of-type(3) { right: -2%; top: 4%; }
  .mm-banner__prop:nth-of-type(2) { width: 24px; height: 24px; }
}

/* =====================================================================
   Phase 2: home tabs & benefits, shop, product page
   ===================================================================== */
.mm-banner--slim { padding-block: 18px 40px; margin-bottom: 28px; }
.mm-banner--slim .mm-banner__in { min-height: 0; }
.mm-banner--slim .mm-banner__art { width: 140px; bottom: -44px; }
.mm-banner--slim .mm-banner__art .mm-milo { --size: 60px; }

/* Benefits: four promises as stitched fabric patches, slightly askew */
.mm-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.mm-benefits li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 24px 16px; border-radius: var(--r-lg); background: var(--bg); outline: 2px dashed rgb(255 255 255 / .95); outline-offset: -8px; rotate: -1deg; transition: rotate .4s var(--ease-spring); }
.mm-benefits li:nth-child(even) { rotate: 1.2deg; }
.mm-benefits li:hover { rotate: 0deg; }
.mm-benefits__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; margin-bottom: 6px; rotate: -6deg; transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1); }
.mm-benefits li:nth-child(even) .mm-benefits__ic { rotate: 6deg; }
.mm-benefits li:hover .mm-benefits__ic { rotate: 0deg; }
.mm-benefits__ic .mm-icon { --icon: 30px; }
.mm-benefits b { font: 700 17px/1.3 var(--font-display); color: var(--ink); }
.mm-benefits span:not(.mm-benefits__ic) { font-size: 14px; color: var(--ink-soft); }

/* Product carousel (related products) */
.mm-carousel { position: relative; min-width: 0; }
.mm-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 34px 4px 16px; }
.mm-carousel__track > * { scroll-snap-align: start; }
.mm-carousel__arrows { position: absolute; top: -64px; inset-inline-end: 0; display: flex; gap: 8px; }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Shop layout */
.mm-shop { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 32px; }
.mm-shop__side { padding: 4px; }
.mm-shop__main { display: grid; gap: 16px; }
.mm-shop__results { position: relative; }
.mm-shop__loading { display: none; gap: 12px; color: var(--ink-soft); }
.mm-shop__sorting { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 0; }
.mm-shop__results.is-loading > .mm-grid { display: none; }
.mm-shop__results.is-loading .mm-shop__loading { display: grid; }
.mm-shop__pager { margin-top: 24px; }
.mm-shop__empty { padding-block: 64px; }

/* Filters */
.mm-filters { display: grid; gap: 14px; }
.mm-filter { border: 0; margin: 0; padding: 16px; border-radius: var(--r-lg); background: var(--well); display: grid; gap: 10px; min-width: 0; }
.mm-filter legend { float: inline-start; width: 100%; font: 700 17px var(--font-display); color: var(--ink); margin-bottom: 6px; padding: 0; }
.mm-filter__cat summary { display: flex; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; list-style: none; font-weight: 500; }
.mm-filter__cat summary::-webkit-details-marker { display: none; }
.mm-filter__cat summary .ic { width: 32px; height: 32px; border-radius: 10px; }
.mm-filter__cat summary .ic .mm-icon { --icon: 18px; }
.mm-filter__cat summary small { margin-inline-start: auto; font-size: 12px; color: var(--ink-soft); background: var(--paper); border-radius: var(--r-pill); padding: 2px 8px; }
.mm-filter__cat > div { display: grid; gap: 6px; padding: 6px 0 8px; padding-inline-start: 42px; }
.mm-filter__cat .mm-check { font-size: 14px; }
.mm-filter__cat .mm-check input { width: 20px; height: 20px; }
/* Age & size filter: the growth chart in miniature, multi-select */
.mm-agepick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 130px; }
.mm-agepick__bar { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: stretch; gap: 2px; border: 0; background: none; padding: 0; color: var(--ink); }
.mm-agepick__bar i { align-self: end; height: var(--h); border-radius: 10px 10px 4px 4px; background: var(--line); transition: background-color .2s, height .3s cubic-bezier(.3, 1.5, .5, 1); }
.mm-agepick__bar:hover i { height: calc(var(--h) + 6px); }
.mm-agepick__bar[aria-pressed="true"] i { background: var(--c); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--second-strong); }
.mm-agepick__bar b { font: 800 14px/1.1 var(--font-display); text-align: center; margin-top: 6px; }
.mm-agepick__bar small { font-size: 10px; color: var(--ink-soft); text-align: center; }
.mm-filter .mm-swatches .mm-swatch { width: 32px; height: 32px; }
/* Price range: two thumbs on one track */
.mm-range { position: relative; height: 28px; }
.mm-range__track { position: absolute; inset-inline: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: var(--r-pill); background: var(--line); }
.mm-range__track i { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--lo); inset-inline-end: calc(100% - var(--hi)); border-radius: inherit; background: var(--second); }
.mm-range input { position: absolute; inset: 0; width: 100%; margin: 0; appearance: none; background: none; pointer-events: none; }
.mm-range input::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 3px solid var(--second-strong); box-shadow: var(--shadow); cursor: grab; }
.mm-range input::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 3px solid var(--second-strong); cursor: grab; }
.mm-range__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-range__inputs label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.mm-range__inputs .mm-input { min-height: 42px; padding: 8px 12px; }
.mm-filters__actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; position: sticky; bottom: 0; padding-block: 8px; background: var(--paper); }

/* Toolbar + active chips */
.mm-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 10px; padding-inline-start: 18px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); }
.mm-toolbar__count { color: var(--ink-soft); }
.mm-toolbar__count b { color: var(--ink); font-size: 17px; }
.mm-toolbar__sort { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.mm-toolbar__sort .mm-select { min-height: 42px; width: auto; border-radius: var(--r-pill); padding-block: 8px; }
.mm-activechips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mm-chip.is-leaving { animation: mm-chip-out .25s ease forwards; }
@keyframes mm-chip-out { to { opacity: 0; transform: scale(.6); } }

/* Product page */
.mm-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.mm-gallery { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; position: sticky; top: 100px; }
.mm-gallery__main { grid-column: 2; grid-row: 1; position: relative; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--bg); display: grid; place-items: center; overflow: hidden; transition: background-color .3s; cursor: zoom-in; }
.mm-gallery__main .mm-art { width: 58%; }
.mm-gallery__main:hover .mm-art { transform: scale(1.12); }
.mm-gallery__badges { position: absolute; top: 16px; inset-inline-start: 16px; }
.mm-gallery__prev, .mm-gallery__next { position: absolute; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity .2s; }
.mm-gallery__prev { inset-inline-start: 14px; } .mm-gallery__next { inset-inline-end: 14px; }
.mm-gallery__main:hover .mm-gallery__prev, .mm-gallery__main:hover .mm-gallery__next, .mm-gallery button:focus-visible { opacity: 1; }
.mm-gallery__thumbs { grid-column: 1; grid-row: 1; display: grid; gap: 10px; align-content: start; }
.mm-gallery__thumbs button { aspect-ratio: 1; border: 0; padding: 0; border-radius: var(--r-md); background: var(--bg); display: grid; place-items: center; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s, transform .2s; }
.mm-gallery__thumbs button:hover { transform: translateY(-2px); }
.mm-gallery__thumbs button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--second-strong); }
.mm-gallery__thumbs .mm-art { width: 62%; }
.mm-pdp__info { display: grid; gap: 18px; align-content: start; }
.mm-pdp__title { display: flex; gap: 12px; align-items: start; justify-content: space-between; }
.mm-pdp__title h1 { font-size: 32px; }
.mm-pdp__price { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mm-pdp__price .mm-price { font-size: 32px; }
.mm-pdp__price s { font-size: 16px; }
.mm-stock > span { display: flex; gap: 6px; align-items: center; }
.mm-stock .mm-icon { --icon: 16px; }
.mm-pdp__buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.mm-pdp__buy .mm-btn--action { flex: 1.3; }
.mm-pdp__buy .mm-btn--action-outline { flex: 1; }
.mm-pdp__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.mm-pdp__links a { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.mm-pdp__links .mm-icon { --icon: 18px; }
.mm-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; border-radius: var(--r-md); background: var(--panel); font: 500 14px var(--font-body); }
.mm-trust span { display: inline-flex; gap: 8px; align-items: center; }
.mm-trust .mm-icon { --icon: 20px; color: var(--warning); }
.mm-meta { display: grid; gap: 6px; margin: 0; font-size: 14px; }
.mm-meta div { display: flex; gap: 8px; }
.mm-meta dt { color: var(--ink-soft); min-width: 110px; }
.mm-meta dd { margin: 0; font-weight: 500; }
/* Age fit: which ages this product suits */
.mm-agefit { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.mm-agefit__bars { display: grid; grid-template-columns: repeat(5, 46px); gap: 6px; align-items: end; height: 70px; }
.mm-agefit__bars span { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 3px; }
.mm-agefit__bars i { align-self: end; height: var(--h); border-radius: 8px 8px 3px 3px; background: var(--line); }
.mm-agefit__bars .is-on i { background: var(--c); }
.mm-agefit__bars b { font: 700 12px var(--font-display); text-align: center; color: var(--ink-soft); }
.mm-agefit__bars .is-on b { color: var(--ink); }
/* Description / reviews tabs */
.mm-pdp__tabs { margin-top: 64px; display: grid; scroll-margin-top: 100px; }
.mm-pdp__panel { display: grid; gap: 32px; }
/* Product tabs as a notebook: folder tabs on a page with a paper stack and a strip of tape */
.mm-pdp__tabs > .mm-tabs { background: none; box-shadow: none; padding: 0 22px; gap: 6px; overflow: visible; }
.mm-pdp__tabs .mm-tab { border-radius: 18px 18px 0 0; padding: 12px 22px 12px; background: var(--butter); color: var(--ink); translate: 0 6px; transition: translate .3s var(--ease-spring), background-color .2s; }
.mm-pdp__tabs .mm-tab + .mm-tab { background: var(--sky); }
.mm-pdp__tabs .mm-tab:hover { translate: 0 2px; color: var(--ink); }
.mm-pdp__tabs .mm-tab[aria-selected="true"] { background: var(--surface); color: var(--second-strong); translate: 0 0; box-shadow: inset 0 4px 0 var(--rb-2); }
.mm-pdp__tabs .mm-tab + .mm-tab[aria-selected="true"] { box-shadow: inset 0 4px 0 var(--rb-4); }
.mm-pdp__tabs .mm-pdp__panel { position: relative; padding: 32px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 6px 0 -2px var(--sky), 0 12px 0 -4px var(--lilac); }
.mm-pdp__tabs .mm-pdp__panel::before { content: ""; position: absolute; top: -12px; inset-inline-end: 48px; width: 96px; height: 26px; border-radius: 3px; background: rgb(249 180 191 / .7); rotate: 4deg; }
.mm-pdp__panel .mm-review { background: var(--paper); box-shadow: none; }
.mm-prose { max-width: 72ch; display: grid; gap: 12px; color: var(--ink); }
.mm-prose ul { padding-inline-start: 20px; display: grid; gap: 6px; }
.mm-prose li::marker { color: var(--rb-4); }
.mm-reviews { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
.mm-reviews__side { display: grid; gap: 20px; position: sticky; top: 100px; }
.mm-reviews__list { display: grid; gap: 14px; }
.mm-rsum { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 20px; border-radius: var(--r-lg); background: var(--panel); }
.mm-rsum__score { display: grid; justify-items: center; gap: 4px; }
.mm-rsum__score b { font: 800 52px/1 var(--font-display); color: var(--ink); }
.mm-stars .is-half { fill: none; }
.mm-rsum__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mm-rsum__bars li { display: grid; grid-template-columns: 12px 14px 1fr 20px; gap: 6px; align-items: center; font-size: 13px; }
.mm-rsum__bars .mm-icon { --icon: 13px; fill: var(--panel-deep); color: var(--panel-deep); }
.mm-rsum__track { height: 10px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.mm-rsum__track i { display: block; height: 100%; border-radius: inherit; }
.mm-review { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.mm-review.is-mine { box-shadow: inset 0 0 0 2px var(--second); }
.mm-review__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font: 800 20px var(--font-display); color: var(--ink); }
.mm-review__body { display: grid; gap: 6px; }
.mm-review__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.mm-review__head time { margin-inline-start: auto; }
.mm-rform { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-lg); background: var(--sky); }
.mm-rform h3 { font-size: 19px; }
.mm-starpick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.mm-starpick legend { width: 100%; margin-bottom: 4px; }
.mm-starpick input { position: absolute; opacity: 0; pointer-events: none; }
.mm-starpick label { cursor: pointer; color: var(--surface); transition: transform .15s; }
.mm-starpick label .mm-icon { --icon: 34px; fill: currentColor; stroke: var(--panel-deep); stroke-width: 1.5; }
.mm-starpick label:hover, .mm-starpick label:hover ~ label, .mm-starpick input:checked ~ label { color: var(--panel-deep); }
.mm-starpick label:hover { transform: scale(1.15) rotate(-8deg); }
.mm-starpick input:focus-visible + label { outline: 3px solid var(--second-strong); border-radius: 8px; }
.mm-rguest { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 20px; border-radius: var(--r-lg); background: var(--sky); color: var(--ink-soft); }
.mm-rguest .mm-icon { --icon: 28px; color: var(--second-strong); }
.mm-pdp__related { margin-top: 72px; }
/* Mobile sticky buy bar */
.mm-buybar { display: none; }

@media (max-width: 1100px) {
  .mm-shop { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
  .mm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-reviews { grid-template-columns: minmax(0, 1fr); }
  .mm-reviews__side { position: static; }
  .mm-carousel__track { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 960px) {
  .mm-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mm-gallery { position: static; }
}
@media (max-width: 760px) {
  .mm-shop { grid-template-columns: minmax(0, 1fr); }
  .mm-toolbar { border-radius: var(--r-lg); padding: 10px; }
  .mm-toolbar__count { order: 3; flex-basis: 100%; font-size: 14px; }
  .mm-activechips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .mm-activechips > * { flex: none; }
  .mm-benefits li { padding: 18px 10px; }
  .mm-benefits__ic { width: 52px; height: 52px; } .mm-benefits__ic .mm-icon { --icon: 24px; }
  .mm-benefits b { font-size: 15px; }
  .mm-carousel__track { grid-auto-columns: 62%; margin-inline: -16px; padding-inline: 16px; }
  .mm-carousel__arrows { display: none; }
  .mm-gallery { grid-template-columns: minmax(0, 1fr); margin-inline: -16px; }
  .mm-gallery__main { grid-column: 1; border-radius: 0; }
  .mm-gallery__thumbs { grid-column: 1; grid-row: 2; grid-template-columns: repeat(5, 1fr); padding-inline: 16px; }
  .mm-gallery__prev, .mm-gallery__next { opacity: 1; }
  .mm-pdp__title h1 { font-size: 24px; }
  .mm-pdp__price .mm-price { font-size: 26px; }
  .mm-pdp__buy .mm-btn { flex-basis: 100%; }
  .mm-pdp__buy .mm-stepper { order: 3; }
  .mm-agefit { flex-direction: column; align-items: stretch; }
  .mm-agefit__bars { grid-template-columns: repeat(5, 1fr); }
  .mm-rsum { grid-template-columns: minmax(0, 1fr); }
  .mm-pdp__tabs > .mm-tabs { padding-inline: 12px; }
  .mm-pdp__tabs .mm-pdp__panel { padding: 22px 16px; }
  .mm-pdp__tabs .mm-pdp__panel::before { width: 70px; inset-inline-end: 24px; }
  .mm-review { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; }
  .mm-review__avatar { width: 40px; height: 40px; font-size: 17px; }
  body:has(.mm-buybar) { padding-bottom: 84px; }
  .mm-buybar {
    position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: flex; gap: 12px; align-items: center; justify-content: space-between;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); box-shadow: 0 -4px 16px rgb(38 52 74 / .1);
    transition: transform .3s cubic-bezier(.2, 1, .3, 1);
  }
  .mm-buybar[hidden] { display: flex !important; transform: translateY(110%); }
  /* Milo's head peeks over the bar's edge once it slides in */
  .mm-buybar::before { content: ""; position: absolute; bottom: 100%; inset-inline-start: 42%; width: 46px; height: 26px; background: url(../img/milome-mark-512.png) 50% 0 / 46px auto no-repeat; pointer-events: none; }
  .mm-buybar:not([hidden])::before { animation: mm-peek-up .5s var(--ease-spring) .35s backwards; }
  .mm-buybar__info { display: grid; min-width: 0; }
  .mm-buybar__name { font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mm-buybar .mm-price { font-size: 19px; }
  .mm-buybar .mm-pricebox s { font-size: 12px; }
  body:has(.mm-buybar) .mm-wa { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   Phase 3: cart, wishlist, checkout, order success
   ===================================================================== */
.mm-buypage { display: grid; gap: 28px; padding-bottom: 32px; }
.mm-tag.is-leaving { opacity: 0; scale: .6; transition: opacity .3s, scale .35s cubic-bezier(.5, -.4, .7, 1); }
.mm-line__warn.is-danger { color: var(--danger); }

/* Journey: the logo's rainbow as the order's path */
.mm-journey { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(640px, 100%); }
.mm-journey li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font: 600 14px/1.3 var(--font-body); color: var(--ink-soft); }
.mm-journey li::before { content: ""; position: absolute; top: 22px; inset-inline-start: calc(-50% + 30px); inset-inline-end: calc(50% + 30px); height: 8px; border-radius: var(--r-pill); background: var(--line); }
.mm-journey li:first-child::before { display: none; }
.mm-journey li.is-done::before, .mm-journey li.is-now::before { background: var(--c); }
.mm-journey__dot { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 3px var(--line); color: var(--ink-faint); }
.mm-journey .is-done .mm-journey__dot { background: var(--c); box-shadow: none; color: var(--ink); }
.mm-journey .is-now .mm-journey__dot { background: var(--c); box-shadow: 0 0 0 5px var(--surface), 0 0 0 8px var(--c); color: var(--ink); animation: mm-breathe 2.4s ease-in-out infinite; }
.mm-journey .is-now, .mm-journey .is-done { color: var(--ink); }
@keyframes mm-breathe { 50% { transform: scale(1.06); } }

/* Cart page */
.mm-cartlayout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.mm-cartlayout__items { display: grid; gap: 12px; }
.mm-cartlayout__actions { justify-content: space-between; }
.mm-carttable { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-top: -10px; }
.mm-carttable th { font: 600 13px var(--font-body); color: var(--ink-soft); text-align: start; padding: 4px 14px; }
.mm-cartrow td { background: var(--surface); padding: 14px; vertical-align: middle; transition: opacity .3s; }
.mm-cartrow td:first-child { border-start-start-radius: var(--r-lg); border-end-start-radius: var(--r-lg); }
.mm-cartrow td:last-child { border-start-end-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }
.mm-cartrow { filter: drop-shadow(0 1px 2px rgb(38 52 74 / .06)) drop-shadow(0 6px 16px rgb(38 52 74 / .06)); transition: opacity .3s, transform .35s cubic-bezier(.5, -.4, .7, 1); }
.mm-cartrow.is-leaving { opacity: 0; transform: scale(.9) translateY(-6px); }
.mm-cartrow.is-oos td { background: var(--paper); }
.mm-cartrow.is-oos .mm-line__img { opacity: .5; }
.mm-cartrow.is-oos .mm-cartrow__price, .mm-cartrow.is-oos .mm-cartrow__total .mm-price { color: var(--ink-soft); text-decoration: line-through; } /* dim text, not the cell: opacity would fade its background */
.mm-cartrow__prod { display: flex; gap: 14px; align-items: center; min-width: 260px; } /* flex on a wrapper: a flex <td> loses its cell background */
.mm-cartrow__prod .mm-line__img { width: 84px; flex: none; }
.mm-cartrow__total .mm-price { font-size: 18px; }
.mm-cartrow__rm { width: 1%; }
.mm-summary { position: sticky; top: 100px; display: grid; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.mm-summary h2 { font-size: 22px; }
.mm-sum.is-muted { color: var(--ink-soft); font-weight: 400; font-size: 14px; }
.mm-sum.is-good, .mm-sum.is-good .mm-price { color: var(--success); }
.mm-sum.is-total { font-size: 18px; }
.mm-sum.is-total .mm-price { font-size: 28px; }
.mm-bigempty { padding-block: 32px 16px; }
.mm-bigempty__art { position: relative; width: 170px; height: 150px; display: grid; place-items: center; margin-bottom: 8px; }
.mm-bigempty__art > .mm-icon { --icon: 150px; stroke-width: 1.2; color: var(--second); }
.mm-bigempty__art.is-blush > .mm-icon { color: var(--rb-1); }
.mm-bigempty__art .mm-milo { position: absolute; --size: 96px; bottom: 6px; left: 50%; translate: -50% 0; margin: 0; animation: mm-peek-bag 3s ease-in-out infinite; }
@keyframes mm-peek-bag { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(-14px) rotate(-6deg); } }

/* Checkout */
.mm-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.mm-checkout__form { display: grid; gap: 18px; }
.mm-cosec { position: relative; padding: 24px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--c) 16%, var(--paper)); display: grid; gap: 16px; }
.mm-cosec h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.mm-cosec__n { width: 38px; height: 38px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font: 800 18px var(--font-display); color: var(--ink); flex: none; rotate: -8deg; }
.mm-cosec__body { display: grid; gap: 16px; }
/* Milo sits on the step you're on; finished steps get a check sticker (classes set in ui.js) */
.mm-cosec::after { content: ""; position: absolute; top: -28px; inset-inline-end: 22px; width: 60px; aspect-ratio: 1; background: url(../img/milome-mark-512.png) center / contain no-repeat; rotate: 10deg; opacity: 0; scale: .4; transition: opacity .2s, scale .45s var(--ease-spring); pointer-events: none; }
.mm-cosec.is-current::after { opacity: 1; scale: 1; animation: mm-float 5s ease-in-out .5s infinite; }
.mm-cosec__n { position: relative; }
.mm-cosec.is-done .mm-cosec__n::after { content: "✓"; position: absolute; top: -8px; inset-inline-end: -10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); background: var(--success); color: #fff; font: 700 12px/18px var(--font-body); text-align: center; rotate: 8deg; animation: mm-in-stick .5s var(--ease-spring) backwards; }
.mm-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.mm-formgrid .is-wide { grid-column: 1 / -1; }
.mm-addrs, .mm-pay { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.mm-pay { grid-template-columns: minmax(0, 1fr); }
.mm-addr > .mm-icon, .mm-option > .mm-icon { margin-inline-start: auto; color: var(--second-strong); flex: none; }
.mm-addr.is-new { border-style: dashed; }
.mm-option .mm-stack { flex: 1; }
.mm-option > .mm-badge { margin-inline-start: auto; align-self: center; }
.mm-pay__ic { margin-inline-start: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; color: var(--warning); }
.mm-cosum__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mm-cosum__items li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mm-cosum__items .mm-line__img { position: relative; }
.mm-cosum__qty { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--second-strong); color: #fff; font: 700 12px/22px var(--font-body); text-align: center; }
.mm-cosum__items .mm-line__warn s { color: var(--ink-soft); }
.mm-promo { display: grid; gap: 8px; padding-block: 4px; }
.mm-promo__row { display: flex; gap: 8px; }
.mm-promo__row .mm-inputwrap { flex: 1; }
.mm-promo__row .mm-input { min-height: 48px; text-transform: uppercase; }
.mm-promo__applied { display: flex; justify-content: space-between; align-items: center; animation: mm-pop .35s cubic-bezier(.3, 1.4, .5, 1); }
.mm-promo__applied .mm-chip { background: var(--mint); box-shadow: none; color: var(--success); }
.mm-promo__applied .mm-chip .mm-icon { color: var(--success); }
.mm-cosum__secure { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-soft); text-align: center; }
.mm-cosum__secure .mm-icon { --icon: 16px; color: var(--success); }

/* Order success */
.mm-celebrate { position: relative; overflow: hidden; background: var(--sky); padding-block: 40px 64px; text-align: center; }
.mm-celebrate::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 22px; background: radial-gradient(circle at 22px 22px, var(--paper) 21px, transparent 22px) 0 0 / 44px 22px repeat-x; }
.mm-celebrate__in { position: relative; display: grid; justify-items: center; gap: 12px; }
.mm-celebrate__in > p { max-width: 52ch; }
.mm-celebrate__art { position: relative; width: 260px; margin-bottom: 4px; }
.mm-celebrate__art svg { width: 100%; }
.mm-celebrate__art .mm-milo { position: absolute; left: 50%; bottom: -8px; translate: -50% 0; --size: 110px; --tilt: 0deg; animation: mm-cheer 1.2s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
@keyframes mm-cheer { 0% { transform: translateY(40px) scale(.6); opacity: 0; } 60% { transform: translateY(-16px) rotate(-8deg); opacity: 1; } 80% { transform: translateY(0) rotate(6deg); } }
.mm-ordernum { display: inline-flex; gap: 10px; align-items: center; padding: 10px 18px; border: 2px dashed var(--second-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 500 14px var(--font-body); }
.mm-ordernum b { font: 800 20px var(--font-display); color: var(--second-strong); letter-spacing: .03em; }
.mm-ordernum .mm-icon { color: var(--second-strong); }
.mm-confetti { position: absolute; inset: 0; pointer-events: none; }
.mm-confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 16px; border-radius: 3px; background: var(--c); rotate: var(--r); animation: mm-fall 2.6s cubic-bezier(.3, .6, .5, 1) var(--d) both; }
.mm-confetti i:nth-child(3n) { width: 12px; height: 12px; border-radius: 50%; }
@keyframes mm-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(520px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mm-confetti { display: none; } }
.mm-success { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.mm-infogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mm-info h3 { display: flex; gap: 8px; align-items: center; font-size: 17px; }
.mm-info h3 .mm-icon { --icon: 20px; color: var(--second-strong); }
.mm-info p { color: var(--ink-soft); font-size: 15px; }
/* What happens next: a dotted path; Milo sits on the current step */
.mm-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mm-next li { position: relative; display: flex; gap: 14px; align-items: center; padding-block: 12px; }
.mm-next li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 25px; top: 62px; bottom: -10px; border-inline-start: 3px dotted var(--line); }
.mm-next__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; color: var(--ink-soft); flex: none; }
.mm-next .is-now .mm-next__ic { background: var(--c); box-shadow: none; color: var(--ink); }
.mm-next__milo { --size: 56px; margin-inline-start: auto; animation: mm-float 4s ease-in-out infinite; }

@media (max-width: 1100px) {
  .mm-cartlayout, .mm-checkout, .mm-success { grid-template-columns: minmax(0, 1fr); }
  .mm-summary { position: static; }
}
@media (max-width: 760px) {
  .mm-journey li { font-size: 12px; }
  .mm-journey__dot { width: 44px; height: 44px; }
  .mm-journey li::before { top: 18px; inset-inline-start: calc(-50% + 26px); inset-inline-end: calc(50% + 26px); }
  /* Cart table becomes stacked cards */
  .mm-carttable, .mm-carttable tbody { display: block; }
  .mm-carttable thead { display: none; }
  .mm-cartrow { display: grid; grid-template-columns: 1fr auto; margin-bottom: 12px; border-radius: var(--r-lg); background: var(--surface); }
  .mm-cartrow td { background: none !important; padding: 8px 12px; border-radius: 0 !important; }
  .mm-cartrow__product { grid-column: 1 / 2; min-width: 0; padding-top: 12px !important; }
  .mm-cartrow__prod { min-width: 0; }
  .mm-cartrow__prod .mm-line__img { width: 72px; }
  .mm-cartrow__rm { grid-column: 2; grid-row: 1; width: auto; align-self: start; }
  .mm-cartrow__price { display: none !important; }
  .mm-cartrow__qty { grid-column: 1; }
  .mm-cartrow__total { grid-column: 2; text-align: end; align-self: center; padding-bottom: 12px !important; }
  .mm-cartrow.is-oos { background: var(--paper); }
  .mm-cosec { padding: 18px; }
  .mm-formgrid { grid-template-columns: minmax(0, 1fr); }
  .mm-infogrid { grid-template-columns: minmax(0, 1fr); }
  .mm-celebrate__art { width: 200px; }
  .mm-celebrate__art .mm-milo { --size: 86px; }
}

/* =====================================================================
   Phase 4: sign-in pages, my account, order details
   ===================================================================== */

/* Sign-in layout: sky side with Milo on a cloud, form side */
.mm-authbody { background: var(--paper); }
.mm-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100dvh; }
.mm-auth__sky { position: relative; overflow: hidden; background: var(--sky); display: grid; place-content: center; justify-items: center; gap: 28px; padding: 40px; }
/* Scene: rainbow behind, Milo on top, his cloud in front */
.mm-auth__stage { position: relative; width: 360px; max-width: 100%; height: 330px; }
.mm-auth__rainbow { position: absolute; inset-inline: 0; top: 30px; width: 100%; }
.mm-auth__milo { position: absolute; left: 50%; top: 40px; translate: -50% 0; --size: 150px; --tilt: 0deg; transition: top .5s cubic-bezier(.3, 1.4, .5, 1), rotate .5s; animation: mm-float 6s ease-in-out infinite; }
.mm-auth__cloud { position: absolute; left: 50%; bottom: 0; width: 300px; height: 173px; translate: -50% 0; }
/* Two small puffs make a cloud bed: one drifting behind, one in front */
.mm-auth__puff { position: absolute; width: 130px; height: 75px; }
.mm-auth__puff.is-back { inset-inline-start: -6px; bottom: 74px; animation: mm-drift 9s ease-in-out infinite; }
.mm-auth__puff.is-front { inset-inline-end: -10px; bottom: -8px; width: 112px; height: 65px; animation: mm-drift 7s ease-in-out infinite reverse; }
@keyframes mm-drift { 50% { translate: 10px -4px; } }
.mm-auth__shy { position: absolute; z-index: 1; left: 50%; bottom: 44px; translate: -50% 0; white-space: nowrap; font: 700 15px var(--font-display); color: var(--second-strong); opacity: 0; transition: opacity .3s; }
/* Typing a password: Milo sinks behind his cloud so he can't peek */
.mm-auth:has(input[type="password"]:focus) .mm-auth__milo { top: 128px; --tilt: -8deg; }
.mm-auth:has(input[type="password"]:focus) .mm-auth__shy { opacity: 1; }
.mm-auth__tag { position: relative; font: 800 26px/1.3 var(--font-display); color: var(--accent-strong); text-align: center; }
.mm-auth__main { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: 28px clamp(20px, 5vw, 64px); }
.mm-auth__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mm-auth__top .mm-lockup { visibility: hidden; }
.mm-auth__card { align-self: center; justify-self: center; width: min(440px, 100%); display: grid; gap: 18px; }
.mm-auth__card h1 { font-size: 32px; }
.mm-auth__back { justify-self: center; display: inline-flex; gap: 6px; align-items: center; font-weight: 500; font-size: 14px; }
.mm-auth__back .mm-icon { --icon: 18px; }
.mm-authform { display: grid; gap: 16px; }
.mm-authform .mm-formgrid { gap: 16px; }
.mm-authform__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.mm-authswitch { text-align: center; color: var(--ink-soft); font-size: 15px; }
.mm-authswitch a { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.mm-authswitch .mm-icon { --icon: 18px; }
.mm-or { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 13px; }
.mm-or::before, .mm-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mm-google { --btn-border: var(--line); --btn-fg: var(--ink); }
.mm-google svg { flex: none; }
.mm-authdone { position: relative; display: grid; gap: 16px; justify-items: center; text-align: center; }
.mm-authdone .mm-btn { justify-self: stretch; }
.mm-authdone__ic { width: 76px; height: 76px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; rotate: -8deg; animation: mm-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.mm-authdone__ic .mm-icon { --icon: 36px; }
.mm-auth__card > .mm-authdone__ic { justify-self: start; }
.mm-authdone__ic--fly .mm-icon { animation: mm-fly-off 2.4s ease-in-out infinite; }
@keyframes mm-fly-off { 50% { transform: translate(4px, -5px) rotate(-6deg); } }
.mm-authdone .mm-confetti { inset: -80px -40px auto; height: 420px; }

/* Show/hide password */
[data-reveal] .is-hide, [data-reveal][aria-pressed="true"] .is-show { display: none; }
[data-reveal][aria-pressed="true"] .is-hide { display: block; }
/* Strength meter: the rainbow fills band by band */
.mm-strength { display: grid; gap: 6px; }
.mm-strength .mm-rainbow i { height: 7px; }
.mm-match { display: flex; gap: 6px; align-items: center; font: 500 13px var(--font-body); color: var(--success); animation: mm-pop .3s ease; }
.mm-match .mm-icon { --icon: 16px; }

/* Code boxes */
.mm-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mm-otp input {
  width: 100%; aspect-ratio: .85; min-width: 0; border: 2px solid var(--second-soft); border-radius: var(--r-md); background: var(--surface);
  text-align: center; font: 800 26px var(--font-display); color: var(--ink); transition: background-color .2s, border-color .2s, transform .2s;
}
.mm-otp input:focus { outline: none; border-color: var(--second-strong); box-shadow: 0 0 0 4px var(--second-soft); }
.mm-otp input.is-filled { background: var(--c); border-color: transparent; transform: translateY(-3px) rotate(-2deg); }
.mm-otp input.is-filled:nth-child(even) { transform: translateY(-3px) rotate(2deg); }
.mm-otp.is-wrong input { border-color: var(--danger); background: var(--surface); transform: none; }
.mm-otp.is-shake { animation: mm-shake .45s ease; }
@keyframes mm-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.mm-otp__msg { justify-content: center; }
.mm-otp__timer { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mm-countdown { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.mm-countdown svg { position: absolute; inset: 0; rotate: -90deg; }
.mm-countdown circle { fill: none; stroke: var(--line); stroke-width: 4; }
.mm-countdown circle.is-left { stroke: var(--rb-4); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--gone, 0); transition: stroke-dashoffset 1s linear, stroke .3s; }
.mm-countdown.is-low circle.is-left { stroke: var(--rb-1); }
.mm-countdown span { font: 700 13px var(--font-body); }
.mm-countdown.is-over span { color: var(--danger); }

/* My account */
.mm-account { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 32px; }
.mm-accside { position: sticky; top: 100px; display: grid; gap: 14px; }
.mm-profile { display: flex; gap: 12px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.mm-profile > .mm-stack { min-width: 0; }
.mm-profile .mm-small { overflow: hidden; text-overflow: ellipsis; }
.mm-profile__avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--blush); display: grid; place-items: center; font: 800 22px var(--font-display); color: var(--action-strong); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--rb-1); }
.mm-accnav { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-lg); background: var(--well); }
.mm-accnav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; font-weight: 500; }
.mm-accnav a:hover { background: var(--paper); }
.mm-accnav a[aria-current] { background: var(--second-soft); color: var(--second-strong); font-weight: 600; }
.mm-accnav .mm-icon { --icon: 20px; }
.mm-accnav .mm-badge { margin-inline-start: auto; }
.mm-accnav .is-logout { color: var(--ink-soft); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); margin-top: 4px; }
.mm-accmain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.mm-hello { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; border-radius: var(--r-lg); background: var(--sky); }
.mm-hello h1 { font-size: 34px; }
.mm-hello__milo { --size: 110px; flex: none; animation: mm-wave 3.5s ease-in-out infinite; }
@keyframes mm-wave { 0%, 70%, 100% { rotate: -4deg; } 78% { rotate: 8deg; } 86% { rotate: -8deg; } 94% { rotate: 4deg; } }
.mm-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mm-counter { min-height: 0; padding: 20px; gap: 2px; }
.mm-counter__ic { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; margin-bottom: 8px; }
.mm-counter b { font: 800 40px/1 var(--font-display); color: var(--ink); }
.mm-counter span:last-child { color: var(--ink-soft); font-weight: 500; }
.mm-grow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-lg); background: var(--mint); }
.mm-grow > .mm-stack { flex: 1; min-width: 200px; }
.mm-grow > .mm-icon { color: var(--warning); fill: var(--panel-deep); stroke: var(--warning); }
.mm-grow > span { flex: 1; }
.mm-tablewrap { overflow-x: auto; margin-inline: -8px; min-width: 0; } /* grid items grow to fit a wide table unless allowed to shrink */
.mm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mm-table th { text-align: start; font: 600 13px var(--font-body); color: var(--ink-soft); padding: 8px; border-bottom: 1px solid var(--line); }
.mm-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mm-table tr:last-child td { border-bottom: 0; }
.mm-table .mm-price { font-size: 16px; }
.mm-bigempty__art.is-butter > .mm-icon { color: var(--rb-2); }

/* Orders: expandable rows */
.mm-orders { display: grid; gap: 12px; }
.mm-order { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.mm-order summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; }
.mm-order summary::-webkit-details-marker { display: none; }
.mm-order__thumbs { display: flex; }
.mm-order__thumbs span { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.mm-order__thumbs span + span { margin-inline-start: -14px; }
.mm-order__thumbs .mm-art { width: 72%; }
.mm-order__total { font-size: 18px; }
.mm-order__chev { width: 34px; height: 34px; border-radius: 50%; background: var(--second-soft); color: var(--second-strong); display: grid; place-items: center; transition: rotate .25s; }
.mm-order__chev .mm-icon { --icon: 18px; }
.mm-order[open] .mm-order__chev { rotate: 180deg; }
.mm-order__body { display: grid; gap: 16px; padding: 4px 18px 18px; border-top: 1px dashed var(--line); padding-top: 16px; margin-inline: 18px; padding-inline: 0; }
.mm-order__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Addresses */
.mm-addrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.mm-addrcard { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.mm-addrcard.is-default { box-shadow: inset 0 0 0 2px var(--second), var(--shadow); }
.mm-addrcard__head { display: flex; gap: 10px; align-items: center; }
.mm-addrcard__head .ic { width: 38px; height: 38px; color: var(--second-strong); }
.mm-addrcard__head .mm-badge { margin-inline-start: auto; }
.mm-addrcard__head .mm-badge .mm-icon { fill: currentColor; }
.mm-addrcard__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; margin-inline-start: -8px; }
.mm-addrcard--add { border: 2px dashed var(--second); background: transparent; box-shadow: none; justify-items: center; align-content: center; text-align: center; min-height: 200px; color: var(--ink); cursor: pointer; transition: background-color .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.mm-addrcard--add:hover { background: var(--second-soft); transform: translateY(-3px) rotate(-1deg); }
.mm-addrcard--add > span:first-child { width: 52px; height: 52px; border-radius: 50%; background: var(--second-strong); color: #fff; display: grid; place-items: center; }
.mm-dialog--wide { width: min(640px, calc(100% - 32px)); }
.mm-dialog__form { display: grid; gap: 16px; padding: 28px; max-height: 85dvh; overflow-y: auto; }
.mm-dialog__form h3 { display: flex; gap: 10px; align-items: center; font-size: 22px; }
.mm-dialog__form h3 .ic { color: var(--warning); }
.mm-dialog__body > .mm-input { text-align: start; }

/* Settings */
.mm-cosec__n .mm-icon { --icon: 20px; }
.mm-danger { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--r-lg); border: 2px dashed rgb(179 38 30 / .35); }
.mm-danger h2 { font-size: 19px; color: var(--danger); }

/* Order details */
.mm-orderhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.mm-orderhead h1 { font-size: 30px; }
/* Status timeline: a rainbow track, Milo rides on the current step */
ol.mm-timeline { list-style: none; margin: 0; padding: 72px 0 4px; display: grid; grid-template-columns: repeat(4, 1fr); }
.mm-timeline li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.mm-timeline li::before { content: ""; position: absolute; top: 24px; inset-inline-start: -50%; width: 100%; height: 10px; margin-top: -5px; border-radius: var(--r-pill); background: var(--line); }
.mm-timeline li:first-child::before { display: none; }
.mm-timeline li.is-done::before, .mm-timeline li.is-now::before { background: var(--c); }
.mm-timeline__dot { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--line); display: grid; place-items: center; color: var(--ink-faint); margin-bottom: 6px; }
.mm-timeline .is-done .mm-timeline__dot, .mm-timeline .is-now .mm-timeline__dot { background: var(--c); box-shadow: none; color: var(--ink); }
.mm-timeline .is-now .mm-timeline__dot { box-shadow: 0 0 0 5px var(--surface), 0 0 0 8px var(--c); }
.mm-timeline__milo { position: absolute; top: -66px; --size: 58px; animation: mm-ride 1.6s ease-in-out infinite; }
@keyframes mm-ride { 50% { translate: 0 -6px; rotate: 3deg; } }
.mm-timeline.is-cancelled li::before { background: var(--line) !important; }
.mm-timeline.is-cancelled .mm-timeline__dot { background: var(--surface) !important; box-shadow: inset 0 0 0 3px var(--line) !important; color: var(--ink-faint) !important; }
ol.mm-timeline.is-cancelled { padding-top: 16px; margin-bottom: 16px; opacity: .8; }

@media (max-width: 1100px) {
  .mm-account { grid-template-columns: minmax(0, 1fr); }
  .mm-accside { position: static; grid-template-columns: minmax(0, 1fr); }
  .mm-accnav { display: flex; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-pill); }
  .mm-accnav a { flex: none; border-radius: var(--r-pill); padding: 9px 14px; }
  .mm-accnav .is-logout { border-top: 0; margin: 0; border-radius: var(--r-pill); }
  .mm-accnav .mm-badge { margin-inline-start: 0; }
}
@media (max-width: 900px) {
  .mm-auth { grid-template-columns: minmax(0, 1fr); }
  .mm-auth__sky { gap: 0; padding: 24px 24px 12px; min-height: 0; }
  .mm-auth__sky::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 22px; background: radial-gradient(circle at 22px 22px, var(--paper) 21px, transparent 22px) 0 0 / 44px 22px repeat-x; }
  .mm-auth__stage { width: 200px; height: 170px; }
  .mm-auth__rainbow { top: 14px; }
  .mm-auth__milo { --size: 84px; top: 18px; }
  .mm-auth__cloud { width: 170px; height: 98px; }
  .mm-auth__puff { width: 70px; height: 40px; }
  .mm-auth__puff.is-back { bottom: 40px; }
  .mm-auth__puff.is-front { width: 60px; height: 35px; }
  .mm-auth__shy { bottom: 22px; font-size: 12px; }
  .mm-auth:has(input[type="password"]:focus) .mm-auth__milo { top: 70px; }
  .mm-auth__tag { display: none; }
  .mm-auth__top .mm-lockup { display: none; }
  .mm-auth__top { justify-content: flex-end; }
  .mm-auth__main { padding-top: 12px; }
}
@media (max-width: 760px) {
  .mm-auth__card h1 { font-size: 26px; }
  .mm-otp { gap: 6px; }
  .mm-otp input { font-size: 22px; }
  .mm-hello { padding: 20px; }
  .mm-hello h1 { font-size: 26px; }
  .mm-hello__milo { --size: 76px; }
  .mm-counters { gap: 8px; }
  .mm-counter { padding: 14px; }
  .mm-counter b { font-size: 30px; }
  .mm-counter__ic { width: 36px; height: 36px; }
  .mm-counter span:last-child { font-size: 13px; }
  .mm-order summary { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; padding: 14px; }
  .mm-order .mm-status { grid-column: 2; grid-row: 2; justify-self: start; }
  .mm-order__total { grid-column: 3; grid-row: 2; }
  .mm-order__chev { grid-column: 3; grid-row: 1; justify-self: end; }
  .mm-order__body { margin-inline: 14px; }
  ol.mm-timeline { padding-top: 64px; }
  .mm-timeline b { font-size: 13px; }
  .mm-timeline__dot { width: 40px; height: 40px; }
  .mm-timeline li::before { top: 20px; }
  .mm-timeline__milo { --size: 48px; top: -58px; }
  .mm-orderhead h1 { font-size: 24px; }
}

/* Components page: the sign-in layout shown inside a box (tpl-*) */
.tpl-authdemo { min-height: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.tpl-authdemo .mm-auth__main { grid-template-rows: auto; padding-block: 32px; }

/* =====================================================================
   Phase 5: about, stores, contact, FAQs, policies, error page
   ===================================================================== */
.mm-lead { font-size: 18px; color: var(--ink-soft); max-width: 60ch; }

/* About hero: "Hi! I'm Milo" — Milo lifted by balloons out of his cloud */
.mm-meet { position: relative; overflow: hidden; background: var(--sky); padding-block: 28px 70px; }
.mm-meet::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 22px; background: radial-gradient(circle at 22px 22px, var(--paper) 21px, transparent 22px) 0 0 / 44px 22px repeat-x; }
.mm-meet__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.mm-meet__text { display: grid; gap: 16px; justify-items: start; }
.mm-meet__text p { font-size: 18px; color: var(--ink-soft); max-width: 46ch; }
.mm-meet__bubble { position: relative; margin-top: 18px; padding: 10px 20px; border-radius: 22px; background: var(--surface); font: 800 20px var(--font-display); color: var(--second-strong); box-shadow: var(--shadow); rotate: -3deg; animation: mm-pop .6s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.mm-meet__bubble::after { content: ""; position: absolute; bottom: -9px; inset-inline-end: 26px; width: 20px; height: 14px; background: var(--surface); clip-path: polygon(0 0, 100% 0, 100% 100%); }
[dir="rtl"] .mm-meet__bubble::after { clip-path: polygon(0 0, 100% 0, 0 100%); }
.mm-meet__art { position: relative; height: 400px; }
.mm-meet__float { position: absolute; left: 50%; top: -20px; translate: -50% 0; display: grid; justify-items: center; animation: mm-lift 6s ease-in-out infinite; }
@keyframes mm-lift { 50% { transform: translateY(-16px) rotate(2deg); } }
.mm-meet__balloons { position: relative; width: 170px; height: 170px; }
.mm-meet__balloons .mm-balloon__b { position: absolute; width: 70px; height: 82px; left: calc(50% - 35px + var(--x)); top: calc(34px + var(--y)); animation: mm-sway 4s ease-in-out infinite; }
.mm-meet__balloons .mm-balloon__b:nth-child(2) { animation-delay: -1.3s; } .mm-meet__balloons .mm-balloon__b:nth-child(3) { animation-delay: -2.6s; }
@keyframes mm-sway { 50% { rotate: 6deg; } }
.mm-meet__strings { position: absolute; left: 50%; top: 80px; width: 120px; height: 90px; translate: -50% 0; }
.mm-meet__float .mm-milo { --size: 140px; --tilt: 0deg; margin-top: -8px; }
.mm-meet__cloud { position: absolute; left: 50%; bottom: -40px; width: 320px; height: 185px; translate: -50% 0; }

/* Story: three chapter cards along a dotted path */
.mm-chapters { position: relative; padding-block: 64px 24px; }
.mm-chapters__path { position: absolute; inset-inline: 0; top: 190px; width: 100%; height: 120px; }
.mm-chapters__list { position: relative; list-style: none; margin: 0; padding: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mm-chapter { position: relative; display: grid; gap: 10px; align-content: start; padding: 40px 26px 30px; border-radius: var(--r-lg); background: var(--bg); box-shadow: 0 6px 0 rgb(38 52 74 / .07);
  rotate: calc((var(--i) - 1) * 1.5deg); translate: 0 calc(var(--i) * (2 - var(--i)) * 34px); transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1), translate .5s cubic-bezier(.3, 1.6, .5, 1); }
.mm-chapter:hover { rotate: 0deg; translate: 0 calc(var(--i) * (2 - var(--i)) * 34px - 6px); }
.mm-chapter__n { position: absolute; top: -20px; inset-inline-start: 22px; display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 16px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); }
.mm-chapter__n .mm-num { font: 800 24px/1 var(--font-display); color: var(--second-strong); }
.mm-chapter__n small { font: 600 12px var(--font-body); color: var(--ink-soft); order: -1; }
.mm-chapter__ic { position: absolute; top: 20px; inset-inline-end: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--second-strong); }
.mm-chapter h3 { font-size: 22px; margin-top: 16px; padding-inline-end: 52px; }
.mm-chapter p { color: var(--ink-soft); }
.mm-chapter__milo { position: absolute; bottom: -26px; inset-inline-end: -14px; --size: 78px; animation: mm-wave 3.5s ease-in-out infinite; }

/* Milo in numbers: stats float in balloons */
.mm-about__stats { padding-block: 64px 72px; }
.mm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; justify-items: center; }
.mm-stat { display: grid; justify-items: center; text-align: center; animation: mm-float 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.mm-stat__b { position: relative; width: 150px; height: 172px; border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%; background: var(--bg); display: grid; place-items: center; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.mm-stat__b::before { content: ""; position: absolute; top: 24px; inset-inline-start: 30px; width: 20px; height: 32px; border-radius: 50%; background: #fff; opacity: .6; rotate: 25deg; }
.mm-stat__b::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 16px; height: 11px; margin-left: -8px; background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mm-stat:hover .mm-stat__b { transform: scale(1.06) rotate(-4deg); }
.mm-stat__b b { font: 800 38px/1 var(--font-display); color: var(--ink); }
.mm-stat__string { width: 20px; height: 56px; margin-top: 6px; }
.mm-stat__label { font: 700 17px/1.3 var(--font-display); color: var(--ink); max-width: 16ch; }

/* What Milo loves: die-cut stickers that peel up */
.mm-about__values { padding-block: 24px 72px; }
.mm-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 12px; }
.mm-value { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 28px 20px 26px; border-radius: 28px; background: var(--bg);
  box-shadow: 0 0 0 7px var(--surface), 0 10px 24px rgb(38 52 74 / .12); rotate: calc((var(--i) - 1.5) * 2deg); transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1), translate .4s cubic-bezier(.3, 1.6, .5, 1); }
.mm-value::after { content: ""; position: absolute; top: -7px; inset-inline-end: -7px; width: 0; height: 0; border-radius: 0 28px 0 0; background: linear-gradient(225deg, var(--paper) 50%, var(--surface) 50%); box-shadow: -3px 3px 6px rgb(38 52 74 / .12); transition: width .3s, height .3s; } /* the peeling corner */
[dir="rtl"] .mm-value::after { border-radius: 28px 0 0 0; background: linear-gradient(135deg, var(--paper) 50%, var(--surface) 50%); box-shadow: 3px 3px 6px rgb(38 52 74 / .12); }
.mm-value:hover { rotate: 0deg; translate: 0 -6px; }
.mm-value:hover::after { width: 34px; height: 34px; }
.mm-value__shape { width: 68px; height: 68px; margin-bottom: 6px; animation: mm-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
.mm-value h3 { font-size: 21px; }
.mm-value p { font-size: 15px; color: var(--ink-soft); }

/* Clothesline of photos */
.mm-about__photos { padding-block: 32px 72px; }
.mm-line-photos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 30px 24px 0; }
.mm-line-photos__rope { position: absolute; inset-inline: 0; top: 0; width: 100%; height: 60px; }
.mm-polaroid { position: relative; margin: 0; padding: 14px 14px 18px; background: var(--surface); border-radius: 6px; box-shadow: 0 10px 24px rgb(38 52 74 / .12); display: grid; gap: 12px;
  transform-origin: 50% -20px; rotate: calc((var(--i) - 1) * 3deg); translate: 0 calc(var(--i) * (2 - var(--i)) * 18px); transition: rotate .6s cubic-bezier(.3, 1.6, .5, 1); }
.mm-polaroid:hover { rotate: calc((1 - var(--i)) * 2deg); }
.mm-polaroid__peg { position: absolute; top: -18px; left: 50%; width: 14px; height: 34px; margin-left: -7px; border-radius: 4px; background: var(--panel-deep); box-shadow: inset 0 -4px 0 rgb(138 90 0 / .2); }
.mm-polaroid__img { aspect-ratio: 1; border-radius: 3px; background: var(--bg); display: grid; place-items: center; overflow: hidden; }
.mm-polaroid__img .mm-art { width: 55%; }
.mm-polaroid__img img { width: 70%; border-radius: 50%; }
.mm-polaroid figcaption { text-align: center; font: 700 18px var(--font-display); color: var(--ink); }

/* Vision & mission: the two pages of an open storybook, with a stack of pastel page edges */
.mm-about__vm { padding-block: 72px 88px; }
.mm-book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.mm-book__page { position: relative; display: grid; gap: 12px; align-content: start; min-height: 280px; padding: 44px 40px 56px; background: var(--surface);
  box-shadow: 0 6px 0 -2px var(--sky), 0 12px 0 -4px var(--lilac), 0 18px 0 -6px var(--butter), var(--shadow); transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1); }
.mm-book__page.is-start { border-start-start-radius: var(--r-lg); border-end-start-radius: var(--r-lg); border-inline-end: 2px solid var(--line); transform-origin: 100% 50%; rotate: -1.5deg; }
.mm-book__page.is-end { border-start-end-radius: var(--r-lg); border-end-end-radius: var(--r-lg); transform-origin: 0 50%; rotate: 1.5deg; }
[dir="rtl"] .mm-book__page.is-start { transform-origin: 0 50%; rotate: 1.5deg; }
[dir="rtl"] .mm-book__page.is-end { transform-origin: 100% 50%; rotate: -1.5deg; }
.mm-book:hover .mm-book__page { rotate: 0deg; }
.mm-book__page h3 { font-size: 23px; line-height: 1.5; max-width: 24ch; }
.mm-book__shape { position: absolute; top: 26px; inset-inline-end: 28px; width: 62px; height: 62px; rotate: -12deg; animation: mm-bob 5s ease-in-out infinite; }
.mm-book__folio { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; font: 700 14px var(--font-display); color: var(--ink-faint); }

/* About closing: Milo waves goodbye */
.mm-hello-cta__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.mm-hello-cta h2 { font-size: 30px; }

/* Stores: little house cards */
.mm-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; padding-top: 12px; }
.mm-store { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; display: grid; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.mm-store:hover { transform: translateY(-4px) rotate(-.6deg); }
.mm-store__banner { position: relative; display: grid; place-items: end center; height: 170px; padding-top: 16px; background: linear-gradient(var(--sky) 0 72%, var(--mint) 72%); } /* sky and grass as flat bands */
.mm-storefront { width: 210px; }
.mm-store__banner .mm-open { position: absolute; top: 14px; inset-inline-start: 14px; }
.mm-store__body { display: grid; gap: 10px; padding: 20px 22px 22px; justify-items: start; }
.mm-store__body h3 { font-size: 21px; }
.mm-store__row { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 15px; }
.mm-store__row .mm-icon { --icon: 19px; color: var(--c, var(--second-strong)); filter: brightness(.7); margin-top: 3px; }
.mm-store__row a { color: var(--ink); text-decoration: none; font-weight: 500; }
.mm-open { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); font: 600 13px var(--font-body); color: var(--ink-soft); }
.mm-open i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.mm-open.is-open { color: var(--success); }
.mm-open.is-open i { background: var(--success); animation: mm-blink 2s ease-in-out infinite; }
@keyframes mm-blink { 50% { box-shadow: 0 0 0 5px rgb(47 125 79 / .15); } }

/* Illustrated map */
.mm-map { position: relative; height: 300px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.mm-map svg { width: 100%; height: 100%; }
.mm-map__pin { position: absolute; left: 50%; top: 42%; translate: -50% -100%; width: 52px; height: 52px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--second-strong); display: grid; place-items: center; box-shadow: 0 6px 12px rgb(38 52 74 / .25); animation: mm-pin 2.2s ease-in-out infinite; }
.mm-map__pin .mm-icon { rotate: 45deg; color: #fff; }
@keyframes mm-pin { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px); } 45% { transform: translateY(0); } 55% { transform: translateY(-5px); } }
.mm-map__label { position: absolute; left: 50%; top: calc(42% + 14px); translate: -50% 0; display: grid; text-align: center; padding: 8px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); white-space: nowrap; }
.mm-map__label small { color: var(--ink-soft); }
.mm-map__open { position: absolute; bottom: 16px; inset-inline-end: 16px; box-shadow: var(--shadow); }

/* Contact: the letter */
.mm-contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mm-letter { position: relative; padding-top: 46px; }
.mm-letter__flap { position: absolute; inset-inline: 0; top: 0; height: 70px; background: var(--blush); clip-path: polygon(0 100%, 50% 0, 100% 100%); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.mm-letter__paper, .mm-letter__sent { position: relative; display: grid; gap: 18px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow);  border-top: 6px dashed transparent; border-image: repeating-linear-gradient(90deg, var(--rb-1) 0 18px, transparent 18px 26px, var(--rb-4) 26px 44px, transparent 44px 52px) 6; }
.mm-letter__head { display: flex; gap: 14px; align-items: center; }
.mm-letter__head h2 { font-size: 24px; }
.mm-letter__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.mm-letter__foot small { max-width: 40ch; }
.mm-letter.is-sending .mm-letter__paper { animation: mm-fold .6s ease-in forwards; }
@keyframes mm-fold { to { transform: scaleY(.1) translateY(-40px); opacity: 0; } }
.mm-letter__sent { justify-items: center; text-align: center; padding-block: 44px; }
.mm-letter__plane { position: absolute; top: 30px; inset-inline-start: 30px; width: 48px; height: 48px; border-radius: 50%; background: var(--butter); color: var(--warning); display: grid; place-items: center; animation: mm-plane 1.6s cubic-bezier(.3, .6, .4, 1) both; }
[dir="rtl"] .mm-letter__plane { --dx: -1; }
@keyframes mm-plane { 0% { transform: translate(0, 60px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(calc(var(--dx, 1) * 220px), -40px) rotate(12deg) scale(.8); opacity: 0; } }
.mm-letter__sent .mm-milo { animation: mm-cheer 1s cubic-bezier(.3, 1.6, .5, 1) .4s both; }
/* Reach us */
.mm-reach { display: grid; gap: 12px; }
.mm-reach h2 { font-size: 21px; margin-bottom: 4px; }
.mm-reach__item { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.mm-reach__item:hover { transform: translateX(calc(var(--dir, 1) * 4px)); }
[dir="rtl"] .mm-reach__item { --dir: -1; }
.mm-reach__item .ic { width: 48px; height: 48px; border-radius: 50%; color: var(--fg); }
.mm-reach__item small { display: block; color: var(--ink-soft); font-size: 13px; }
.mm-hours { padding: 18px; border-radius: var(--r-lg); background: var(--panel); display: grid; gap: 12px; }
.mm-hours__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mm-hours__head h3 { display: flex; gap: 8px; align-items: center; font-size: 17px; }
.mm-hours__head .mm-icon { --icon: 20px; color: var(--warning); }
.mm-hours__week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mm-hours__week li { display: grid; gap: 2px; justify-items: center; padding: 8px 2px; border-radius: var(--r-md); background: var(--surface); font-size: 11px; color: var(--ink-soft); }
.mm-hours__week b { font: 700 13px var(--font-display); color: var(--ink); }
.mm-hours__week .is-today { background: var(--second-strong); color: #fff; transform: translateY(-4px); box-shadow: 0 4px 0 var(--second); }
.mm-hours__week .is-today b { color: #fff; }

/* FAQs */
.mm-faq { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.mm-faq__side { position: sticky; top: 100px; display: grid; gap: 14px; }
.mm-faq__cats { display: grid; gap: 6px; }
.mm-faq__cats button { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); font: 500 15px var(--font-body); text-align: start; transition: background-color .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
[dir="rtl"] .mm-faq__cats button { padding: 8px 8px 8px 12px; }
.mm-faq__cats button .ic { width: 38px; height: 38px; color: var(--ink); }
.mm-faq__cats button:hover { background: var(--surface); }
.mm-faq__cats button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; transform: translateX(calc(var(--dir, 1) * 6px)); }
[dir="rtl"] .mm-faq__cats button { --dir: -1; }
.mm-faq__main { display: grid; gap: 20px; }
.mm-faq .mm-acc details { transition: box-shadow .2s; }
.mm-faq .mm-acc details[open] { box-shadow: inset 4px 0 0 var(--rb-4), var(--shadow); }
[dir="rtl"] .mm-faq .mm-acc details[open] { box-shadow: inset -4px 0 0 var(--rb-4), var(--shadow); }
.mm-faq mark { background: var(--butter); color: inherit; border-radius: 4px; padding-inline: 2px; }
.mm-askmilo { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 20px; border-radius: var(--r-lg); background: var(--sky); }
.mm-askmilo > .mm-stack { flex: 1; min-width: 200px; }

/* Policies */
.mm-policytabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-policytabs a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 18px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.mm-policytabs a[aria-current] { background: var(--second-soft); box-shadow: none; color: var(--second-strong); font-weight: 600; }
.mm-policytabs .mm-icon { --icon: 18px; }
.mm-policy { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.mm-toc { position: sticky; top: 100px; display: grid; gap: 12px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.mm-toc__progress { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
/* Five flat rainbow bands, revealed from the reading start as you scroll */
.mm-toc__progress i { display: block; height: 100%; clip-path: inset(0 calc(100% - var(--read, 0%)) 0 0 round 99px); transition: clip-path .15s;
  background: linear-gradient(90deg, var(--rb-1) 0 20%, var(--rb-2) 20% 40%, var(--rb-3) 40% 60%, var(--rb-4) 60% 80%, var(--rb-5) 80%); }
[dir="rtl"] .mm-toc__progress i { clip-path: inset(0 0 0 calc(100% - var(--read, 0%)) round 99px); background: linear-gradient(270deg, var(--rb-1) 0 20%, var(--rb-2) 20% 40%, var(--rb-3) 40% 60%, var(--rb-4) 60% 80%, var(--rb-5) 80%); }
.mm-toc ol { margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-toc a { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.mm-toc a::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background-color .2s, transform .3s; }
.mm-toc a:hover { color: var(--ink); background: var(--paper); }
.mm-toc a.is-active { color: var(--ink); font-weight: 600; }
.mm-toc a.is-active::before { background: var(--c); transform: scale(1.3); }
.mm-prose--policy { max-width: 70ch; gap: 14px; font-size: 16.5px; }
.mm-prose--policy h2 { font-size: 24px; margin-top: 20px; scroll-margin-top: 110px; display: flex; gap: 10px; align-items: center; }
.mm-prose--policy h2::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--rb-4); flex: none; }
.mm-prose--policy h3 { font-size: 19px; margin-top: 8px; }
.mm-prose--policy p, .mm-prose--policy li { color: var(--ink); }
.mm-prose--policy a { font-weight: 500; }
.mm-prose--policy ol { padding-inline-start: 22px; display: grid; gap: 6px; }
.mm-prose--policy ol li::marker { color: var(--second-strong); font-weight: 700; }
.mm-prose--policy blockquote { margin: 4px 0; padding: 16px 20px; border-radius: var(--r-md); background: var(--mint); border-inline-start: 5px solid var(--rb-3); font: 700 18px var(--font-display); }
.mm-prose__lead { font-size: 19px; color: var(--ink-soft) !important; }
.mm-policy__meta { display: flex; flex-wrap: wrap; gap: 8px; }

/* Error page */
.mm-errbody { background: var(--sky); min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.mm-errtop .mm-wrap { padding-block: 20px; }
.mm-err { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; text-align: center; padding: 24px 16px 80px; overflow: hidden; }
.mm-err h1 { font-size: 36px; }
.mm-err > p { max-width: 48ch; font-size: 17px; }
.mm-err .mm-row { margin-top: 10px; }
.mm-err__art { position: relative; margin-bottom: 8px; }
.mm-errcode { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mm-errcode span { font: 800 clamp(110px, 20vw, 190px)/1 var(--font-display); color: var(--c); -webkit-text-stroke: 4px #fff; paint-order: stroke; text-shadow: 0 10px 0 rgb(38 52 74 / .08); animation: mm-bob 3s ease-in-out infinite; }
.mm-errcode span:nth-child(2) { animation-delay: .3s; } .mm-errcode span:nth-child(3) { animation-delay: .6s; }
@keyframes mm-bob { 50% { transform: translateY(-10px) rotate(-3deg); } }
.mm-errcode__milo { --size: clamp(110px, 18vw, 170px); --tilt: 0deg; margin-inline: 6px; animation: mm-float 5s ease-in-out infinite; }
.mm-err__search { width: min(420px, 100%); margin-top: 8px; }
.mm-errscene { position: absolute; pointer-events: none; }
.mm-errscene--balloon { top: 40px; inset-inline-end: -40px; display: grid; justify-items: center; animation: mm-away 7s ease-in infinite; }
.mm-errscene--balloon .mm-balloon__b { width: 54px; height: 62px; }
.mm-errscene--balloon svg { width: 16px; height: 50px; }
@keyframes mm-away { 0% { transform: translate(0, 20px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(50px, -90px) rotate(10deg); opacity: 0; } }
.mm-errscene--nap { top: -10px; inset-inline-end: 22%; font: 800 28px var(--font-display); color: var(--accent-strong); }
.mm-errscene--nap b { display: inline-block; animation: mm-zzz 2.4s ease-in-out infinite; }
.mm-errscene--nap b:nth-child(2) { font-size: 22px; animation-delay: .4s; } .mm-errscene--nap b:nth-child(3) { font-size: 16px; animation-delay: .8s; }
@keyframes mm-zzz { 0% { transform: translateY(10px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(10px, -26px); opacity: 0; } }
.mm-errscene--lock { top: -24px; inset-inline-end: -10px; width: 64px; height: 64px; border-radius: 50%; background: var(--butter); color: var(--warning); display: grid; place-items: center; rotate: 12deg; animation: mm-wobble 2s ease-in-out infinite; }
.mm-errscene--lock .mm-icon { --icon: 30px; }
.mm-errscene--dizzy { top: -20px; left: 50%; translate: -50% 0; width: 120px; height: 40px; animation: mm-spin 3s linear infinite; }
.mm-errscene--dizzy .mm-sticker { position: static; display: inline-block; margin: 0 4px; }
.mm-errscene--blocks { bottom: -6px; inset-inline-end: -60px; display: flex; align-items: end; gap: 4px; }
.mm-errscene--blocks i { width: 30px; height: 30px; border-radius: 8px; background: var(--c); box-shadow: inset 0 -5px 0 rgb(38 52 74 / .1); }
.mm-errscene--blocks i:nth-child(2) { rotate: 25deg; translate: 0 -6px; } .mm-errscene--blocks i:nth-child(3) { rotate: -15deg; }

@media (max-width: 960px) {
  .mm-meet__in, .mm-contact, .mm-faq, .mm-policy { grid-template-columns: minmax(0, 1fr); }
  .mm-meet__art { height: 340px; }
  .mm-chapters__path { display: none; }
  .mm-chapters__list { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 560px; margin-inline: auto; }
  .mm-chapter, .mm-chapter:hover { translate: none; }
  .mm-stats, .mm-values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .mm-book { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mm-book__page, [dir="rtl"] .mm-book__page { border-radius: var(--r-lg) !important; border-inline-end: 0 !important; rotate: 0deg !important; }
  .mm-hello-cta__in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .mm-faq__side, .mm-toc { position: static; }
  .mm-faq__cats { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 8px; }
  .mm-faq__cats button { flex: none; border-radius: var(--r-pill); background: var(--surface); }
  .mm-faq__cats button[aria-pressed="true"] { transform: none; background: var(--second-soft); color: var(--second-strong); box-shadow: none; }
  .mm-faq__cats button .ic { width: 30px; height: 30px; }
  .mm-toc ol { display: none; }
}
@media (max-width: 760px) {
  .mm-line-photos { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-inline: 32px; }
  .mm-line-photos__rope { display: none; }
  .mm-polaroid { translate: none; }
  .mm-meet__art { height: 300px; }
  .mm-meet__float { transform-origin: 50% 100%; scale: .82; top: -34px; }
  .mm-meet__cloud { width: 260px; height: 150px; }
  .mm-meet__bubble { font-size: 17px; }
  .mm-stat__b { width: 120px; height: 138px; }
  .mm-stat__b b { font-size: 30px; }
  .mm-stat__label { font-size: 15px; }
  .mm-values { gap: 20px; }
  .mm-value { padding: 22px 14px 20px; }
  .mm-value__shape { width: 52px; height: 52px; }
  .mm-book__page { padding: 32px 24px 48px; min-height: 0; }
  .mm-hello-cta h2 { font-size: 24px; }
  .mm-letter__paper, .mm-letter__sent { padding: 20px; }
  .mm-hours__week { gap: 3px; }
  .mm-hours__week li { font-size: 10px; padding: 6px 0; }
  .mm-map { height: 240px; }
  .mm-err h1 { font-size: 28px; }
  .mm-errcode span { -webkit-text-stroke-width: 3px; }
  .mm-errscene--blocks { inset-inline-end: 0; bottom: -30px; }
  .mm-errscene--balloon { inset-inline-end: 0; }
}

/* Components page: error heroes shown as small cards (tpl-*) */
.tpl-errs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.tpl-err { background: var(--sky); border-radius: var(--r-lg); overflow: hidden; }
.tpl-err .mm-err { padding-block: 32px 40px; }
.tpl-err .mm-errcode span { font-size: 96px; }
.tpl-err .mm-errcode__milo { --size: 88px; }

/* Email previews (tpl-*): desktop and phone frames side by side */
.tpl-mails { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.tpl-mails figure { margin: 0; display: grid; gap: 8px; max-width: 100%; }
.tpl-mails figcaption { font: 600 13px var(--font-body); color: var(--ink-soft); }
.tpl-mails iframe { max-width: 100%; border: 0; border-radius: var(--r-lg); background: #EEF4FA; box-shadow: var(--shadow); }

/* ---------- Fixes found while building the Laravel store (2026-10) ---------- */
/* The drifting band cloud and the About story Milo must not widen the page on phones */
.mm-band, .mm-chapters { overflow-x: clip; } /* the About story Milo also peeks 2px past a phone screen */
/* The middle clothesline photo's hover tilt works out to 0deg, so it swings on its peg instead */
@media (prefers-reduced-motion: no-preference) {
  html:not(.mm-calm) .mm-line-photos .mm-polaroid:nth-of-type(2):hover { animation: mm-peg-swing .9s ease-out; }
}
@keyframes mm-peg-swing { 20% { rotate: 4deg; } 45% { rotate: -3deg; } 70% { rotate: 1.5deg; } 100% { rotate: 0deg; } }
/* FAQ: the open answer is a stitched patch in its topic's pastel (instead of a coloured edge) */
.mm-faq .mm-acc details { transition: background-color .25s, box-shadow .2s; }
[dir] .mm-faq .mm-acc details[open] { background: var(--tint, var(--sky)); box-shadow: var(--shadow); outline: 2px dashed rgb(255 255 255 / .95); outline-offset: -8px; }
.mm-faq .mm-acc details[open] summary::after { background-color: var(--surface); }
.mm-faq .mm-acc details[open] > div { color: var(--ink); }
/* Age bars: one column per size when the page sets --bars (5 by default) */
.mm-agechart__bars[style*="--bars"], .mm-agepick[style*="--bars"] { grid-template-columns: repeat(var(--bars), minmax(0, 1fr)); }
.mm-agebar__label b, .mm-agepick__bar b { white-space: nowrap; } /* "12–18" on narrow six-bar charts */
/* ".mm-tile--hero > *" makes the hero stickers relative, so they fall outside the tile and widen the page */
.mm-tile--hero > .mm-sticker { display: none; }
/* Cards swinging in rotated must not widen the page (clip, not hidden, keeps sticky sidebars working) */
body > main { overflow-x: clip; }
/* Product tabs and reviews: calm paper tabs and pastel stitched patches, no coloured edges */
.mm-pdp__tabs .mm-tab[aria-selected="true"], .mm-pdp__tabs .mm-tab + .mm-tab[aria-selected="true"] { position: relative; z-index: 1; box-shadow: 0 -4px 10px -3px rgb(38 52 74 / .1); }
.mm-pdp__tabs .mm-pdp__panel { box-shadow: var(--shadow); }
.mm-rsum__mood { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: var(--r-pill); background: var(--surface); font: 700 13px var(--font-display); color: var(--ink); }
.mm-pdp__panel .mm-stars .is-off { color: rgb(38 52 74 / .2); }
.mm-rsum__mood .mm-milo { flex: none; }
.mm-pdp__panel .mm-review { background: var(--bg, var(--sky)); outline: 2px dashed rgb(255 255 255 / .95); outline-offset: -8px; padding: 24px 24px 22px; rotate: -.5deg; transition: rotate .4s var(--ease-spring), translate .3s var(--ease-spring); }
.mm-pdp__panel .mm-review:nth-child(even) { rotate: .6deg; }
.mm-pdp__panel .mm-review:hover { rotate: 0deg; translate: 0 -3px; }
.mm-pdp__panel .mm-review.is-mine { --bg: var(--lilac); box-shadow: none; }
.mm-pdp__panel .mm-review__avatar { background: var(--surface); }
.mm-pdp__panel .mm-review .mm-badge { background: var(--surface); }
.mm-pdp__panel .mm-rform { background: var(--blush); outline: 2px dashed rgb(255 255 255 / .95); outline-offset: -8px; padding: 28px 26px; }
.mm-pdp__panel .mm-rguest { background: var(--mint); outline: 2px dashed rgb(255 255 255 / .95); outline-offset: -8px; padding: 26px 22px; }
.mm-pdp__panel .mm-rform .mm-textarea { background: var(--surface); }
.mm-starpick__word { margin: -6px 0 0; min-height: 22px; font: 700 15px var(--font-display); color: var(--ink); }
@keyframes mm-starpop { 0% { scale: .5; } 55% { scale: 1.35; rotate: -12deg; } 100% { scale: 1; } }
html:not(.mm-calm) .mm-starpick input:checked ~ label .mm-icon { animation: mm-starpop .45s var(--ease-spring); }
@media (prefers-reduced-motion: reduce) { .mm-pdp__panel .mm-review, .mm-pdp__panel .mm-review:nth-child(even) { rotate: 0deg; } }
/* Tablet: a single-column gallery would be a huge square above the buy box */
@media (min-width: 761px) and (max-width: 960px) { .mm-gallery { max-width: 520px; width: 100%; margin-inline: auto; } }
/* Cart drawer footer: the stacked grid inherits space-between, which shrank its one column to the button width */
.mm-drawer__foot--stack { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
/* Tables: the screen-reader-only header cell is absolute and escaped the scroll box, widening the page on phones */
.mm-tablewrap { position: relative; }