/* Milo Me components. Rose (--action) is used only by .mm-btn--action and .mm-count: rose means "buy". */

/* ---------- Preloader: rainbow draws itself, Milo hops on his cloud, then the sky lifts away ---------- */
html.mm-loading { overflow: hidden; }
.mm-preloader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--sky);
  transition: transform .8s cubic-bezier(.7, 0, .3, 1); animation: mm-bail 0s 8s forwards; /* safety net if the script never runs */
}
.mm-preloader::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 22px; background: radial-gradient(circle at 22px 0, var(--sky) 21px, transparent 22px) 0 0 / 44px 22px repeat-x; } /* cloud edge that trails as it lifts */
.mm-preloader.is-leaving { transform: translateY(calc(-100% - 24px)); }
.mm-preloader.is-gone { display: none; }
.mm-preloader.is-replay { animation: none; }
@keyframes mm-bail { to { visibility: hidden; } }
.mm-preloader__stage { position: relative; width: 240px; height: 220px; }
.mm-preloader__rainbow { position: absolute; inset-inline: 0; top: 0; width: 240px; }
.mm-preloader__rainbow path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mm-draw 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
.mm-preloader__rainbow path:nth-child(2) { animation-delay: .12s; } .mm-preloader__rainbow path:nth-child(3) { animation-delay: .24s; }
.mm-preloader__rainbow path:nth-child(4) { animation-delay: .36s; } .mm-preloader__rainbow path:nth-child(5) { animation-delay: .48s; }
@keyframes mm-draw { 0% { stroke-dashoffset: 100; } 40%, 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.mm-preloader .mm-sticker { animation: mm-twinkle 1.6s ease-in-out infinite; }
.mm-preloader .mm-sticker + .mm-sticker { animation-delay: .8s; }
@keyframes mm-twinkle { 50% { transform: scale(.6) rotate(20deg); opacity: .5; } }
.mm-preloader__milo { position: absolute; left: 50%; top: 14px; margin-left: -55px; --size: 110px; --tilt: 0deg; transform-origin: 50% 100%; animation: mm-milo-hop 1.1s cubic-bezier(.3, 0, .4, 1) infinite; }
/* Hop with a squash on landing, stretch on the way up */
@keyframes mm-milo-hop { 0%, 100% { transform: translateY(0) scale(1.08, .92); } 15% { transform: translateY(0) scale(1); } 50% { transform: translateY(-40px) scale(.96, 1.05) rotate(-4deg); } 85% { transform: translateY(0) scale(1); } }
.mm-preloader__cloud { position: absolute; left: 50%; bottom: 0; width: 220px; height: 127px; margin-left: -110px; transform-origin: 50% 100%; animation: mm-squish 1.1s cubic-bezier(.3, 0, .4, 1) infinite; }
@keyframes mm-squish { 0%, 100% { transform: scale(1.03, .95); } 20%, 85% { transform: scale(1); } } /* the cloud gives a little when Milo lands */
.mm-preloader__text { display: flex; gap: 12px; align-items: center; font: 700 18px var(--font-display); color: var(--second-strong); }
@media (prefers-reduced-motion: reduce) {
  .mm-preloader__rainbow path { stroke-dashoffset: 0; animation: none; }
  .mm-preloader__milo, .mm-preloader__cloud { animation: none; }
}

/* ---------- Buttons: chunky pills that press down like a toy ---------- */
.mm-btn {
  --btn-bg: var(--surface); --btn-fg: var(--second-strong); --btn-edge: transparent; --btn-depth: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill);
  border: 2px solid var(--btn-border, transparent); background: var(--btn-bg); color: var(--btn-fg);
  font: 600 15px/1.2 var(--font-body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 var(--btn-depth) 0 var(--btn-edge);
  transition: transform .12s, box-shadow .12s, background-color .15s;
}
.mm-btn:active:not(:disabled) { transform: translateY(calc(var(--btn-depth) / 2)); box-shadow: 0 calc(var(--btn-depth) / 2) 0 var(--btn-edge); }
.mm-btn--action { --btn-bg: var(--action); --btn-fg: #fff; --btn-edge: var(--action-strong); --btn-depth: 4px; }
.mm-btn--action:hover { --btn-bg: var(--action-strong); }
.mm-btn--action-outline { --btn-fg: var(--action-strong); --btn-border: var(--action); } /* secondary buy action (Buy now) */
.mm-btn--action-outline:hover { --btn-bg: var(--action-soft); }
.mm-btn--primary { --btn-bg: var(--second-strong); --btn-fg: #fff; --btn-edge: var(--second-ink); --btn-depth: 4px; }
.mm-btn--primary:hover { transform: translateY(-1px); --btn-depth: 5px; }
.mm-btn--outline { --btn-border: var(--second-strong); }
.mm-btn--outline:hover, .mm-btn--soft:hover { --btn-bg: var(--second-soft); }
.mm-btn--soft { --btn-bg: var(--second-soft); }
.mm-btn--soft:hover { --btn-bg: var(--sky); }
.mm-btn--ghost { --btn-bg: transparent; padding-inline: var(--s-2); text-decoration: underline; min-height: 40px; }
.mm-btn--danger { --btn-fg: var(--danger); --btn-border: var(--danger); }
.mm-btn--danger-solid { --btn-bg: var(--danger); --btn-fg: #fff; }
.mm-btn--sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.mm-btn--lg { min-height: 56px; padding: 14px 32px; font-size: 16px; }
.mm-btn--block { width: 100%; }
.mm-btn:disabled, .mm-btn[aria-disabled="true"] { --btn-bg: var(--line); --btn-fg: var(--ink-soft); --btn-edge: transparent; --btn-border: transparent; cursor: not-allowed; }
.mm-btn .mm-icon { --icon: 20px; }
.mm-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.mm-btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--btn-fg); border-inline-end-color: transparent; animation: mm-spin .7s linear infinite; }
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* Round icon buttons (header, card actions) */
.mm-iconbtn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 0; background: var(--second-soft); color: var(--second-strong); text-decoration: none;
  transition: background-color .15s, transform .15s;
}
.mm-iconbtn:hover { background: var(--sky); }
.mm-iconbtn--plain { background: transparent; }
.mm-iconbtn--plain:hover { background: var(--second-soft); }
.mm-iconbtn--surface { background: var(--surface); box-shadow: var(--shadow); }
.mm-iconbtn--sm { width: 36px; height: 36px; }
.mm-iconbtn--sm .mm-icon { --icon: 18px; }
.mm-iconbtn[aria-pressed="true"] { color: var(--action); } /* saved to wishlist */
.mm-iconbtn[aria-pressed="true"] .mm-icon { fill: currentColor; }
/* Count dot: the one place rose appears outside a button (brand guide §5) */
.mm-count {
  position: absolute; top: -3px; inset-inline-end: -3px; min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: var(--r-pill); background: var(--action); color: #fff; box-shadow: 0 0 0 2px var(--surface);
  font: 700 11px/20px var(--font-body); text-align: center; font-variant-numeric: tabular-nums;
}
.mm-count.is-bump { animation: mm-bump .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes mm-bump { 40% { transform: scale(1.35); } }

/* ---------- Badges ---------- */
.mm-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill);
  font: 600 12px/1.5 var(--font-body); white-space: nowrap; background: var(--surface); color: var(--ink-soft);
}
.mm-badge .mm-icon { --icon: 14px; }
.mm-badge--age { background: var(--accent-soft); color: var(--accent-strong); }
.mm-badge--new { background: var(--action-soft); color: var(--action-strong); }
.mm-badge--info { background: var(--second-soft); color: var(--second-strong); }
.mm-badge--sale { background: var(--panel-deep); color: var(--ink); }
.mm-badge--featured { background: var(--second-strong); color: #fff; }
.mm-badge--soldout { background: var(--ink); color: #fff; }
/* Order statuses: status colours, never brand rose */
.mm-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: var(--r-pill); font: 600 13px/1.4 var(--font-body); }
.mm-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mm-status--pending { background: var(--panel); color: var(--warning); }
.mm-status--processing, .mm-status--shipped { background: var(--accent-soft); color: var(--accent-strong); }
.mm-status--delivered { background: var(--mint); color: var(--success); }
.mm-status--cancelled { background: var(--surface); color: var(--danger); box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- Form fields ---------- */
.mm-field { display: grid; gap: 6px; align-content: start; }
.mm-label { font: 500 14px/1.4 var(--font-body); color: var(--ink); }
.mm-label .is-req { color: var(--danger); }
.mm-input, .mm-select, .mm-textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px;
  border: 2px solid var(--second-soft); background: var(--surface); color: var(--ink); font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.mm-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.mm-input::placeholder, .mm-textarea::placeholder { color: var(--ink-soft); opacity: .75; }
.mm-input:hover, .mm-select:hover, .mm-textarea:hover { border-color: var(--sky); }
.mm-input:focus, .mm-select:focus, .mm-textarea:focus { outline: none; border-color: var(--second-strong); box-shadow: 0 0 0 4px var(--second-soft); }
.mm-select {
  appearance: none; padding-inline-end: 44px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6BA3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10l6 6 6-6'/%3E%3C/svg%3E") no-repeat;
  background-size: 20px; background-position: right 16px center;
}
[dir="rtl"] .mm-select { background-position: left 16px center; }
.mm-help { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.mm-error { display: flex; gap: 6px; align-items: center; font: 500 13px/1.4 var(--font-body); color: var(--danger); }
.mm-error .mm-icon { --icon: 16px; }
.mm-field.is-invalid .mm-input, .mm-field.is-invalid .mm-select, .mm-field.is-invalid .mm-textarea { border-color: var(--danger); }
.mm-field.is-invalid .mm-input:focus { box-shadow: 0 0 0 4px var(--action-soft); }
.mm-input[type="tel"], .mm-input[type="email"], .mm-input.is-ltr { direction: ltr; }
[dir="rtl"] .mm-input[type="tel"], [dir="rtl"] .mm-input[type="email"], [dir="rtl"] .mm-input.is-ltr { text-align: right; }
/* Input with a leading icon or trailing button */
.mm-inputwrap { position: relative; }
.mm-inputwrap > .mm-icon { position: absolute; inset-inline-start: 16px; top: 50%; translate: 0 -50%; color: var(--ink-soft); pointer-events: none; }
.mm-inputwrap > .mm-icon ~ .mm-input { padding-inline-start: 48px; }
.mm-inputwrap > .mm-iconbtn { position: absolute; inset-inline-end: 6px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; }
.mm-inputwrap > .mm-iconbtn ~ .mm-input, .mm-inputwrap:has(> .mm-iconbtn) .mm-input { padding-inline-end: 52px; }

/* Checkbox & radio: round, soft, with a tick */
.mm-check { display: inline-flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 15px; line-height: 1.5; }
.mm-check input {
  appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px;
  border: 2px solid var(--ink-faint); background: var(--surface) no-repeat center / 14px; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.mm-check input[type="radio"] { border-radius: 50%; }
.mm-check input:checked { background-color: var(--second-strong); border-color: var(--second-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mm-check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--surface); }
.mm-check input:disabled { opacity: .5; cursor: not-allowed; }

/* Option cards (payment method, saved address) */
.mm-option {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-md);
  background: var(--surface); border: 2px solid var(--line); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.mm-option:hover { border-color: var(--sky); }
.mm-option:has(input:checked) { border-color: var(--second-strong); background: var(--second-soft); }
.mm-option.is-disabled { cursor: not-allowed; opacity: .6; }
.mm-option input { appearance: none; flex: none; width: 22px; height: 22px; margin: 2px 0 0; border-radius: 50%; border: 2px solid var(--ink-faint); background: var(--surface); }
.mm-option input:checked { border-color: var(--second-strong); background: var(--second-strong); box-shadow: inset 0 0 0 4px var(--surface); }

/* ---------- Quantity stepper ---------- */
.mm-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--second-soft); }
.mm-stepper button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface); color: var(--second-strong); display: grid; place-items: center; }
.mm-stepper button:hover:not(:disabled) { background: var(--sky); }
.mm-stepper button:disabled { color: var(--ink-faint); cursor: not-allowed; }
.mm-stepper button .mm-icon { --icon: 18px; }
.mm-stepper output, .mm-stepper input { width: 40px; border: 0; background: none; text-align: center; font: 700 16px var(--font-body); font-variant-numeric: tabular-nums; }
.mm-stepper--sm button { width: 30px; height: 30px; }
.mm-stepper--sm output { width: 30px; font-size: 14px; }

/* ---------- Variant pickers ---------- */
.mm-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-swatch {
  width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(38 52 74 / .12), 0 0 0 3px var(--surface), 0 0 0 5px transparent;
  transition: box-shadow .15s, transform .15s;
}
.mm-swatch:hover { transform: scale(1.08); }
.mm-swatch[aria-checked="true"], .mm-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgb(38 52 74 / .12), 0 0 0 3px var(--surface), 0 0 0 5px var(--second-strong); }
.mm-swatch--sm { width: 18px; height: 18px; box-shadow: inset 0 0 0 1px rgb(38 52 74 / .15), 0 0 0 2px var(--surface), 0 0 0 3px transparent; }
.mm-swatch--sm[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgb(38 52 74 / .15), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--second-strong); }
.mm-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-size {
  min-width: 56px; min-height: 42px; padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); font: 500 14px/1.2 var(--font-body); font-variant-numeric: tabular-nums;
  transition: border-color .15s, background-color .15s;
}
.mm-size:hover { border-color: var(--second); }
.mm-size[aria-checked="true"] { border-color: var(--second-strong); background: var(--second-soft); color: var(--second-strong); font-weight: 600; }
.mm-size:disabled { color: var(--ink-soft); background: var(--paper); border-style: dashed; text-decoration: line-through; cursor: not-allowed; }

/* ---------- Chips (active filters, keywords) ---------- */
.mm-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 8px 6px 14px; border-radius: var(--r-pill);
  border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 500 14px/1.2 var(--font-body); text-decoration: none;
}
[dir="rtl"] .mm-chip { padding: 6px 14px 6px 8px; }
.mm-chip .mm-icon { --icon: 16px; color: var(--ink-soft); }
.mm-chip:hover { box-shadow: inset 0 0 0 1.5px var(--second); }
.mm-chip--plain, [dir="rtl"] .mm-chip--plain { padding-inline: 14px; }

/* ---------- Tabs: soft blue pill behind the active one ---------- */
.mm-tabs { display: flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mm-tab { flex: none; border: 0; background: none; padding: 10px 18px; border-radius: var(--r-pill); color: var(--ink-soft); font: 500 15px/1.2 var(--font-body); white-space: nowrap; text-decoration: none; }
.mm-tab:hover { color: var(--second-strong); }
.mm-tab[aria-selected="true"], .mm-tab.is-active { background: var(--second-soft); color: var(--second-strong); font-weight: 600; }
.mm-tab .mm-count { position: static; margin-inline-start: 6px; background: var(--second-strong); box-shadow: none; }
[role="tabpanel"][hidden] { display: none; }

/* ---------- Accordion ---------- */
.mm-acc { display: grid; gap: 10px; }
.mm-acc details { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); }
.mm-acc summary { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; list-style: none; font: 600 16px/1.5 var(--font-body); color: var(--ink); }
.mm-acc summary::-webkit-details-marker { display: none; }
.mm-acc summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--second-soft) no-repeat center / 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6BA3' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .25s;
}
.mm-acc details[open] summary::after { transform: rotate(45deg); }
.mm-acc details > div { padding: 0 20px 20px; color: var(--ink-soft); }

/* ---------- Alerts (inline, after a form) ---------- */
.mm-alert { display: flex; gap: var(--s-3); align-items: flex-start; padding: 14px 18px; border-radius: var(--r-md); font-size: 15px; line-height: 1.55; background: var(--second-soft); color: var(--ink); }
.mm-alert > .mm-icon { color: var(--second-strong); margin-top: 1px; }
.mm-alert b { display: block; }
.mm-alert--success { background: var(--mint); } .mm-alert--success > .mm-icon { color: var(--success); }
.mm-alert--warning { background: var(--panel); } .mm-alert--warning > .mm-icon { color: var(--warning); }
.mm-alert--error { background: var(--surface); box-shadow: inset 0 0 0 2px var(--danger); } .mm-alert--error > .mm-icon { color: var(--danger); }

/* ---------- Toasts: bottom-centre ---------- */
.mm-toasts { position: fixed; z-index: 80; inset-inline: 0; bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-inline: var(--s-4); }
.mm-toast {
  display: flex; gap: 10px; align-items: center; max-width: 440px; padding: 12px 18px 12px 14px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: 500 14px/1.4 var(--font-body); box-shadow: 0 10px 30px rgb(38 52 74 / .18), inset 0 0 0 1.5px var(--line);
  pointer-events: auto; animation: mm-toast-in .35s cubic-bezier(.3, 1.4, .5, 1);
}
.mm-toast .mm-icon { color: var(--success); }
.mm-toast--error .mm-icon { color: var(--danger); }
.mm-toast a { color: var(--second-strong); font-weight: 600; }
.mm-toast.is-leaving { animation: mm-toast-out .25s ease forwards; }
@keyframes mm-toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes mm-toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---------- Dialogs (confirm, quick view) ---------- */
.mm-dialog { border: 0; padding: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); width: min(440px, calc(100% - 32px)); box-shadow: var(--shadow-float); }
.mm-dialog::backdrop { background: rgb(30 58 92 / .45); }
.mm-dialog[open] { animation: mm-pop .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mm-pop { from { opacity: 0; transform: scale(.94); } }
.mm-dialog__body { padding: var(--s-6) var(--s-5) var(--s-5); display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.mm-dialog__body p { color: var(--ink-soft); }
.mm-dialog__actions { display: flex; gap: var(--s-2); padding: 0 var(--s-5) var(--s-5); }
.mm-dialog__actions > * { flex: 1; }
.mm-dialog__close { position: absolute; top: 12px; inset-inline-end: 12px; }

/* ---------- Milo: the elephant as a character (round sticker from the mark) ---------- */
.mm-milo {
  width: var(--size, 120px); aspect-ratio: 1; border-radius: 50%; flex: none;
  border: 5px solid var(--surface); box-shadow: 0 8px 20px rgb(30 58 92 / .14); background: var(--sky);
  rotate: calc(var(--tilt, -4deg) + var(--lean, 0deg)); /* --lean: he turns toward the cursor (ui.js) */
  transition: rotate .4s cubic-bezier(.2, 1, .3, 1), scale .3s cubic-bezier(.3, 1.6, .5, 1);
}
.mm-milo--wobble:hover { animation: mm-wobble .6s ease-in-out; }
@keyframes mm-wobble { 30% { rotate: 4deg; } 60% { rotate: -6deg; } }

/* ---------- Empty states ---------- */
.mm-empty { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: var(--s-7) var(--s-4); max-width: 460px; margin-inline: auto; }
.mm-empty .mm-milo { margin-bottom: var(--s-3); }
.mm-empty p { color: var(--ink-soft); }
.mm-empty .mm-btn { margin-top: var(--s-2); }

/* ---------- Loading ---------- */
/* Rainbow dots: the logo's colours taking turns to hop */
.mm-dots { display: inline-flex; gap: 6px; }
.mm-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rb-1); animation: mm-hop 1s ease-in-out infinite; }
.mm-dots i:nth-child(2) { background: var(--rb-2); animation-delay: .12s; }
.mm-dots i:nth-child(3) { background: var(--rb-3); animation-delay: .24s; }
.mm-dots i:nth-child(4) { background: var(--rb-4); animation-delay: .36s; }
.mm-dots i:nth-child(5) { background: var(--rb-5); animation-delay: .48s; }
@keyframes mm-hop { 30% { transform: translateY(-8px); } 60% { transform: none; } }
.mm-skel { background: var(--line); border-radius: var(--r-sm); animation: mm-pulse 1.4s ease-in-out infinite; }
@keyframes mm-pulse { 50% { opacity: .55; } }

/* ---------- Rainbow progress: fills band by band (checkout steps, delivery timeline) ---------- */
.mm-rainbow { display: grid; grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 6px; }
.mm-rainbow i { height: 10px; border-radius: var(--r-pill); background: var(--line); transition: background-color .3s; }
.mm-rainbow i.is-on:nth-child(5n+1) { background: var(--rb-1); }
.mm-rainbow i.is-on:nth-child(5n+2) { background: var(--rb-2); }
.mm-rainbow i.is-on:nth-child(5n+3) { background: var(--rb-3); }
.mm-rainbow i.is-on:nth-child(5n+4) { background: var(--rb-4); }
.mm-rainbow i.is-on:nth-child(5n+5) { background: var(--rb-5); }

/* ---------- Stock meter ---------- */
.mm-stock { display: grid; gap: 6px; font: 500 14px/1.4 var(--font-body); color: var(--warning); }
.mm-stock__bar { height: 8px; border-radius: var(--r-pill); background: var(--panel); overflow: hidden; }
.mm-stock__bar i { display: block; height: 100%; width: var(--left, 20%); background: var(--panel-deep); border-radius: inherit; }

/* ---------- Rating ---------- */
.mm-stars { display: inline-flex; gap: 2px; color: var(--panel-deep); }
.mm-stars .mm-icon { --icon: 16px; fill: currentColor; stroke-width: 1.5; }
.mm-stars .is-off { color: var(--line); }
.mm-rating { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-soft); }

/* ---------- Price ---------- */
.mm-pricebox { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mm-pricebox s { color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.mm-pricebox .mm-save { font: 600 13px/1 var(--font-body); color: var(--success); }

/* ---------- Pagination ---------- */
.mm-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mm-pager a, .mm-pager span { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 8px; border-radius: 50%; text-decoration: none; font: 600 15px var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.mm-pager a:hover { background: var(--second-soft); }
.mm-pager [aria-current="page"] { background: var(--second-strong); color: #fff; }
.mm-pager .is-arrow { background: var(--surface); box-shadow: var(--shadow); color: var(--second-strong); }

/* ---------- Breadcrumb ---------- */
.mm-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-soft); list-style: none; padding: 0; margin: 0; }
.mm-crumbs a { color: var(--second-strong); text-decoration: none; }
.mm-crumbs a:hover { text-decoration: underline; }
.mm-crumbs li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; background: var(--rb-4); vertical-align: middle; }

/* ---------- Cards ---------- */
.mm-card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow); }
.mm-card--flat { box-shadow: none; }
.mm-panel { background: var(--panel); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); } /* offers & delivery info */
.mm-divider { border: 0; height: 1px; background: var(--line); margin: 0; }

/* ---------- Section heading row ---------- */
.mm-sechead { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: end; justify-content: space-between; margin-bottom: var(--s-5); }
/* Hand-drawn rainbow squiggle under page and section titles (the logo's rainbow as a pen stroke) */
.mm-sechead h2::after, .mm-banner h1::after {
  content: ""; display: block; width: 72px; height: 10px; margin-top: 6px; background: linear-gradient(90deg, var(--rb-1), var(--rb-2), var(--rb-3), var(--rb-4), var(--rb-5));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 12'%3E%3Cpath d='M3 7q5.5-6 11 0t11 0 11 0 11 0 11 0 11 0' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mm-sechead[style*="center"] h2 { text-align: center; }
.mm-sechead[style*="center"] h2::after { margin-inline: auto; }
.mm-link { font-weight: 600; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.mm-link .mm-icon { --icon: 18px; }

/* ---------- Product art placeholder (real photos replace it) ---------- */
.mm-art { width: 62%; height: auto; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }

/* ---------- Product card: a clothes tag hanging on a string ---------- */
.mm-grid { display: grid; gap: 40px 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 24px; }
.mm-tag {
  position: relative; background: var(--surface); border-radius: 20px 20px 26px 26px; padding: 32px 10px 14px; box-shadow: var(--shadow);
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; transform-origin: 50% -24px; rotate: -1.2deg;
  transition: rotate .45s cubic-bezier(.3, 1.6, .5, 1), translate .3s;
}
.mm-tag:nth-child(even) { rotate: 1.2deg; }
/* Skeleton card (loading): pastel shimmer, and the tag sways slowly on its string */
.mm-skel { display: block; height: 14px; border-radius: 8px; --sk: var(--line); background: linear-gradient(100deg, var(--sk) 35%, var(--surface) 50%, var(--sk) 65%) 100% 0 / 300% 100%; animation: mm-shimmer 1.4s linear infinite; }
.mm-tag--skel { animation: mm-sway 3s ease-in-out infinite; }
.mm-tag--skel:nth-child(even) { animation-delay: -1.5s; }
.mm-tag--skel .mm-tag__img.mm-skel { height: auto; border-radius: 16px; --sk: var(--sky); background: linear-gradient(100deg, var(--sk) 35%, var(--surface) 50%, var(--sk) 65%) 100% 0 / 300% 100%; }
.mm-tag--skel:nth-child(3n+2) .mm-tag__img { --sk: var(--blush); }
.mm-tag--skel:nth-child(3n) .mm-tag__img { --sk: var(--mint); }
.mm-tag--skel .mm-tag__body { gap: 8px; padding-top: 4px; }
.mm-tag--skel .mm-tag__foot { align-items: center; }
@keyframes mm-shimmer { to { background-position: 0 0; } }
@keyframes mm-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
.mm-tag:hover, .mm-tag:focus-within { rotate: 0deg; translate: 0 -4px; }
.mm-tag::before { content: ""; position: absolute; top: 11px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--line); }
.mm-tag::after { content: ""; position: absolute; bottom: calc(100% - 18px); left: 50%; width: 2px; height: 34px; margin-left: -1px; background: var(--second); border-radius: 2px; }
.mm-tag__age { position: absolute; top: 6px; inset-inline-start: 12px; }
.mm-tag__fav { position: absolute; top: 4px; inset-inline-end: 6px; }
.mm-tag__img { aspect-ratio: 1.05; border-radius: 16px; background: var(--bg); display: grid; place-items: center; position: relative; }
.mm-tag:hover .mm-art { transform: scale(1.07) rotate(-3deg); }
.mm-tag__badges { position: absolute; bottom: 8px; inset-inline-start: 8px; display: flex; gap: 4px; }
.mm-tag__quick { position: absolute; top: calc(32px + 26%); left: 50%; translate: -50% -50%; opacity: 0; transition: opacity .2s; }
.mm-tag:hover .mm-tag__quick, .mm-tag__quick:focus-visible { opacity: 1; }
.mm-tag__body { display: grid; gap: 6px; align-content: start; padding-inline: 6px; }
.mm-tag__name { font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--ink); text-decoration: none; }
.mm-tag__name:hover { color: var(--second-strong); }
.mm-tag__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.mm-tag__foot { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding-inline: 6px; }
.mm-tag__foot .mm-pricebox { display: grid; gap: 0; }
@media (max-width: 960px) { .mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; }
  .mm-tag { padding: 30px 8px 10px; }
  .mm-tag__name { font-size: 14px; }
  .mm-tag .mm-price { font-size: 18px; }
  .mm-tag__foot { flex-direction: column; align-items: stretch; }
}