/* Milo Me base: reset, type scale (brand guide §3), layout, bands and motifs (§4). All values come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.65 var(--font-body); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
:lang(ar) body, body:lang(ar) { line-height: 1.8; } /* Arabic dots and descenders need the taller line */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--second-strong); text-underline-offset: 3px; }
p, h1, h2, h3, h4, figure, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--second-strong); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--second-soft); }
[hidden] { display: none !important; }

/* ---------- Type scale ---------- */
h1, h2, h3, h4, .mm-display, .mm-h1, .mm-h2, .mm-h3, .mm-price {
  font-family: var(--font-display); color: var(--ink); text-wrap: balance;
}
.mm-display { font-size: 40px; line-height: 1.25; font-weight: 800; color: var(--second-strong); }
h1, .mm-h1 { font-size: 32px; line-height: 1.3; font-weight: 700; color: var(--second-strong); }
h2, .mm-h2 { font-size: 24px; line-height: 1.3; font-weight: 700; }
h3, .mm-h3 { font-size: 20px; line-height: 1.35; font-weight: 600; }
.mm-price { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.mm-ui { font-size: 15px; line-height: 1.4; font-weight: 500; }
.mm-small { font-size: 13px; line-height: 1.4; }
.mm-muted { color: var(--ink-soft); }
.mm-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.mm-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--second-strong); }
:lang(en) .mm-eyebrow { text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 760px) {
  .mm-display { font-size: 32px; }
  h1, .mm-h1 { font-size: 26px; }
}

/* ---------- Layout ---------- */
.mm-wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 760px) { .mm-wrap { padding-inline: var(--s-5); } }
.mm-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap, var(--s-4)); align-content: start; } /* one column that never outgrows its parent */
.mm-row { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s-3)); align-items: center; }
.mm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Icons ---------- */
.mm-icon {
  width: var(--icon, 22px); height: var(--icon, 22px); flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.mm-icon.is-filled { fill: currentColor; }
[dir="rtl"] .mm-flip { transform: scaleX(-1); }
.mm-back { transform: scaleX(-1); } [dir="rtl"] .mm-back { transform: none; } /* points to the reading start */

/* ---------- Colour bands with a cloud seam (motif: cloud edge) ---------- */
.mm-band { background: var(--band, var(--paper)); position: relative; padding-block: var(--s-8); }
.mm-band.has-cloud::before {
  content: ""; position: absolute; inset-inline: 0; top: -21px; height: 22px; pointer-events: none;
  background: radial-gradient(circle at 22px 22px, var(--band) 21px, transparent 22px) 0 0 / 44px 22px repeat-x;
}
.mm-band--sky { --band: var(--sky); } .mm-band--blush { --band: var(--blush); }
.mm-band--lilac { --band: var(--lilac); } .mm-band--mint { --band: var(--mint); }
.mm-band--butter { --band: var(--butter); } .mm-band--paper { --band: var(--paper); }
.mm-band--surface { --band: var(--surface); }
@media (max-width: 760px) { .mm-band { padding-block: var(--s-7); } }

/* ---------- Stickers (motif: star, heart, leaf, cloud) ---------- */
.mm-sticker { position: absolute; pointer-events: none; width: var(--size, 28px); height: auto; }
.mm-float { animation: mm-float 6s ease-in-out infinite; }
.mm-float.is-slow { animation-duration: 9s; }
@keyframes mm-float { 50% { transform: translateY(-8px); } }

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

/* ---------- Template review bar (tpl-*): not part of the site ---------- */
.tpl-bar {
  position: fixed; z-index: 90; bottom: 12px; left: 12px; display: flex; gap: 4px; padding: 4px;
  background: var(--ink); border-radius: var(--r-pill); box-shadow: var(--shadow); font: 600 12px/1 var(--font-body);
}
.tpl-bar a { color: #fff; text-decoration: none; padding: 8px 12px; border-radius: var(--r-pill); }
.tpl-bar a:hover { background: rgb(255 255 255 / .15); }
.tpl-bar a.is-state { background: rgb(255 255 255 / .12); font-weight: 500; }
[dir="rtl"] .tpl-bar { left: auto; right: 12px; } /* opposite the WhatsApp button */
@media (max-width: 760px) { .tpl-bar { bottom: auto; top: 8px; left: 8px; right: auto; opacity: .85; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; } .tpl-bar a { flex: none; } }