/* ==========================================================================
   Roshious Footwear — Concept 04 "Contemporary Minimal"
   White / light grey, charcoal type. Teal = interactive states only.
   Orange = Sale badge only. 8px spacing system, 12-column grid.
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --tile: #F3F3F1;
  --tile-2: #ECECE9;
  --line: #E4E4E0;
  --ink: #222C32;
  --muted: #5F676C;
  --teal: #1FABAC;
  --teal-ink: #0E7C7D;
  --teal-dark: #0B2F30;
  --orange: #F26A21;

  --font: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --radius: 8px;
  --pad: clamp(16px, 3.4vw, 40px);
  --fast: 0.18s cubic-bezier(0.2, 0, 0, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }

:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; border-radius: 4px; }

.mn-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

.mn-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mn-h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.mn-small { font-size: 13px; color: var(--muted); }

.mn-show-sm { display: none !important; }

/* ---------- Controls ---------- */
.mn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--fast), color var(--fast);
}
.mn-icon:hover { background: var(--tile); color: var(--teal-ink); }
.mn-icon--line { border: 1px solid var(--line); }
.mn-icon--line:disabled { opacity: 0.35; cursor: default; background: none; color: var(--ink); }
.mn-badge-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  transition: background var(--fast);
}
.mn-badge-count.is-hot { background: var(--teal); color: var(--teal-dark); }

.mn-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--fast), color var(--fast);
}
.mn-textlink:hover { color: var(--teal-ink); text-decoration-color: var(--teal); }
.mn-textlink--light { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.mn-textlink--light:hover { color: #fff; text-decoration-color: var(--teal); }
.mn-textbtn { min-height: 44px; padding: 0 var(--s2); border: 0; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--muted); }
.mn-textbtn:hover { color: var(--teal-ink); }

.mn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.mn-btn:hover { background: var(--teal); color: var(--teal-dark); }

/* ---------- Utility bar ---------- */
.mn-bar { background: var(--tile); font-size: 13px; color: var(--muted); }
.mn-bar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); min-height: 36px; }
.mn-bar p:first-child { color: var(--ink); font-weight: 600; }

/* ---------- Header ---------- */
.mn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
}
.mn-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  gap: var(--s2);
}
.mn-logo { display: inline-flex; justify-self: start; border-radius: 50%; }
.mn-nav ul { display: flex; gap: var(--s1); }
.mn-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 var(--s2);
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
  cursor: pointer;
  border-radius: 22px;
  transition: background var(--fast), color var(--fast);
}
.mn-nav__link:hover,
.mn-nav__link[aria-expanded="true"] { background: var(--tile); color: var(--teal-ink); }
.mn-nav__link svg { transition: transform var(--fast); }
.mn-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.mn-nav__link--sale { color: var(--ink); }
.mn-nav__link--sale::before { content: ""; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--orange); }
.mn-actions { display: flex; justify-content: flex-end; gap: 0; }

/* Mega */
.mn-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(34, 44, 50, 0.18);
}
.mn-mega:not([hidden]) { animation: mn-in 0.18s ease-out; }
@keyframes mn-in { from { opacity: 0; transform: translateY(-4px); } }
.mn-mega__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); padding-block: var(--s5) var(--s6); }
.mn-mega__col { grid-column: span 2; }
.mn-mega__col:first-child { grid-column: span 3; }
.mn-mega__col ul { margin-top: var(--s2); display: grid; }
.mn-mega__col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; font-weight: 500; text-decoration: none; transition: color var(--fast); }
.mn-mega__col a:hover { color: var(--teal-ink); }
.mn-mega__feature { grid-column: 8 / 13; display: grid; gap: var(--s2); text-decoration: none; }
.mn-mega__img { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--tile); }
.mn-mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mn-mega__feature:hover .mn-mega__img img { transform: scale(1.03); }
.mn-mega__cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.mn-mega__cap strong { font-size: 18px; letter-spacing: -0.02em; }
.mn-mega__cap span { font-size: 13px; color: var(--muted); }

/* Search panel */
.mn-search { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(34, 44, 50, 0.18); padding-block: var(--s3) var(--s4); }
.mn-search:not([hidden]) { animation: mn-in 0.18s ease-out; }
.mn-search__form { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 2px solid var(--ink); }
.mn-search__form:focus-within { border-bottom-color: var(--teal); }
.mn-search__form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  -webkit-appearance: none;
  appearance: none;
}
.mn-search__form input:focus { outline: none; }
.mn-search__form input::placeholder { color: #8A9196; }
.mn-search__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
.mn-search__list button {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 64px;
  padding: var(--s1);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  text-align: left;
  cursor: pointer;
}
.mn-search__list button:hover,
.mn-search__list button[aria-selected="true"] { background: var(--tile); border-color: var(--teal); }
.mn-search__list img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--tile); }
.mn-search__list strong { display: block; font-size: 14px; }
.mn-search__list small { display: block; font-size: 12px; color: var(--muted); }
.mn-search__hint { margin-top: var(--s2); font-size: 13px; color: var(--muted); }

/* Drawer */
.mn-drawer { position: fixed; inset: 0; z-index: 400; }
.mn-drawer[hidden] { display: none; }
.mn-drawer__scrim { position: absolute; inset: 0; background: rgba(34, 44, 50, 0.4); animation: mn-fade 0.2s ease-out; }
@keyframes mn-fade { from { opacity: 0; } }
.mn-drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(86%, 360px);
  overflow-y: auto;
  padding: var(--s2) var(--s3) var(--s12);
  background: #fff;
  animation: mn-slide 0.22s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes mn-slide { from { transform: translateX(-100%); } }
.mn-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.mn-drawer__title { font-weight: 700; font-size: 18px; }
.mn-drawer__list a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; }
.mn-drawer__sub { margin: var(--s4) 0 var(--s1); }
.mn-drawer__chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.mn-drawer__chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); border-radius: 22px; background: var(--tile); font-size: 14px; font-weight: 600; text-decoration: none; }
.mn-drawer__util { margin-top: var(--s4); }
.mn-drawer__util a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--muted); text-decoration: none; }

/* ---------- Hero ---------- */
.mn-hero { padding-block: var(--s6) var(--s8); }
.mn-hero__head { text-align: center; display: grid; justify-items: center; gap: var(--s2); margin-bottom: var(--s5); }
.mn-hero__title { font-size: clamp(44px, 7.4vw, 104px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; }
.mn-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); }
.mn-hero__tile { background: var(--tile); border-radius: var(--radius); padding: clamp(8px, 1.6vw, 24px); }
.mn-hero__frame { position: relative; aspect-ratio: 9 / 5; border-radius: 4px; overflow: hidden; background: var(--tile-2); }
.mn-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity 0.22s ease, transform 0.6s ease; }
.mn-hero__frame img.is-out { opacity: 0; transform: scale(1.01); }
.mn-hero__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s1) var(--s1); }
.mn-hero__meta { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.mn-hero__name { font-weight: 700; letter-spacing: -0.02em; }
.mn-hero__price { font-size: 15px; color: var(--muted); }
.mn-hero__price s { margin-left: 6px; }
.mn-hero__swatches { display: flex; align-items: center; gap: var(--s1); }
.mn-sw {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.mn-sw::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(34, 44, 50, 0.18);
  transition: box-shadow var(--fast), transform var(--fast);
}
.mn-sw:hover::before { transform: scale(1.08); }
.mn-sw[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--tile), 0 0 0 4px var(--teal); }
.mn-hero__scene { min-width: 72px; font-size: 14px; font-weight: 600; }
.mn-hero__note { margin-top: var(--s2); font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Sections ---------- */
.mn-section { padding-block: clamp(48px, 7vw, 96px); }
.mn-section--tight { padding-top: 0; }
.mn-sechead { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.mn-sechead__aside { color: var(--muted); max-width: 40ch; }

/* Wearers */
.mn-wearers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.mn-wearer { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--tile); text-decoration: none; aspect-ratio: 4 / 5; }
.mn-wearer img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.mn-wearer:hover img { transform: scale(1.03); }
.mn-wearer__label {
  position: absolute;
  left: var(--s2);
  right: var(--s2);
  bottom: var(--s2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
}
.mn-wearer__label strong { font-size: 20px; letter-spacing: -0.03em; }
.mn-wearer__label span { font-size: 13px; color: var(--muted); }
.mn-wearer__arrow { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; flex: none; transition: background var(--fast), color var(--fast); }
.mn-wearer:hover .mn-wearer__arrow,
.mn-wearer:focus-visible .mn-wearer__arrow { background: var(--teal); color: var(--teal-dark); }

/* Chips */
.mn-chips-wrap { overflow-x: clip; margin-bottom: var(--s2); }
.mn-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.mn-chip {
  min-height: 44px;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.mn-chip:hover { border-color: var(--teal); color: var(--teal-ink); }
.mn-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--teal-dark); }
.mn-chip__n { margin-left: 6px; font-weight: 500; opacity: 0.75; }
.mn-count { margin-bottom: var(--s3); font-size: 14px; color: var(--muted); }
.mn-sort { display: flex; align-items: center; gap: var(--s1); font-size: 14px; color: var(--muted); }
.mn-sort select {
  min-height: 44px;
  padding: 0 36px 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23222C32' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.mn-sort select:hover { border-color: var(--teal); }

/* ---------- Grid & cards ---------- */
.mn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5) var(--s2); }
.mn-grid > .mn-card { grid-column: span 3; }
.mn-grid.is-updating { opacity: 0.4; transition: opacity 0.12s; }
.mn-empty { grid-column: 1 / -1; padding: var(--s6); border-radius: var(--radius); background: var(--tile); text-align: center; color: var(--muted); }

.mn-card { position: relative; min-width: 0; }
.mn-card__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--tile); }
.mn-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s ease, transform 0.5s ease; }
.mn-card__media .mn-card__alt { opacity: 0; }
.mn-card:hover .mn-card__alt,
.mn-card:focus-within .mn-card__alt { opacity: 1; }
.mn-card:hover .has-alt .mn-card__main,
.mn-card:focus-within .has-alt .mn-card__main { opacity: 0; }
.mn-card__badge {
  position: absolute;
  z-index: 2;
  top: var(--s1);
  left: var(--s1);
  padding: 4px 10px;
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mn-card__badge--sale { background: var(--orange); color: var(--ink); }
.mn-card__wish { position: absolute; z-index: 2; top: 4px; right: 4px; background: rgba(255, 255, 255, 0.9); }
.mn-card__wish[aria-pressed="true"] { color: var(--teal-ink); }
.mn-card__wish[aria-pressed="true"] path { fill: currentColor; }
.mn-card__sizes {
  position: absolute;
  z-index: 2;
  left: var(--s1);
  right: var(--s1);
  bottom: var(--s1);
  padding: var(--s1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--fast), transform var(--fast);
}
.mn-card:hover .mn-card__sizes,
.mn-card:focus-within .mn-card__sizes { opacity: 1; transform: none; }
.mn-card__sizes p { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mn-card__sizes ul { display: flex; flex-wrap: wrap; gap: 4px; }
.mn-size {
  min-width: 36px;
  min-height: 32px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.mn-size:hover { border-color: var(--teal); background: var(--tile); }
.mn-card__quick {
  position: absolute;
  z-index: 2;
  right: var(--s1);
  bottom: var(--s1);
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: #fff;
  display: none;
}
.mn-card__quick:hover { background: var(--teal); color: var(--teal-dark); }
@media (hover: none) {
  .mn-card__sizes { display: none; }
  .mn-card__quick { display: inline-flex; }
}
.mn-card__body { padding-top: var(--s2); display: grid; gap: 4px; }
.mn-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.mn-card__name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.mn-card__namelink { text-decoration: none; }
.mn-card__namelink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mn-card__namelink:focus-visible { outline: none; }
.mn-card__namelink:focus-visible::after { outline: 2px solid var(--teal-ink); outline-offset: 4px; border-radius: var(--radius); }
.mn-card:hover .mn-card__namelink { color: var(--teal-ink); }
.mn-card__price { font-size: 15px; font-weight: 700; white-space: nowrap; text-align: right; }
.mn-card__price s { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.mn-card__cat { font-size: 13px; color: var(--muted); }
.mn-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); margin-top: 4px; font-size: 12px; color: var(--muted); }
.mn-dots { display: flex; gap: 4px; }
.mn-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 44, 50, 0.2); }
.mn-rate { display: inline-flex; align-items: center; gap: 4px; }

/* Collections */
.mn-collections { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s2); }
.mn-col { grid-column: span 3; display: grid; gap: var(--s2); text-decoration: none; }
.mn-col__img { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--tile); }
.mn-col__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.mn-col:hover .mn-col__img img { transform: scale(1.03); }
.mn-col__meta { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s2); }
.mn-col__n { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 3px; }
.mn-col__t { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.mn-col__c { grid-column: 2; font-size: 14px; color: var(--muted); }
.mn-col:hover .mn-col__t { color: var(--teal-ink); }

/* Promos */
.mn-promos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s2); }
.mn-promo { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 400px; }
.mn-promo--photo { grid-column: span 7; background: var(--ink); }
.mn-promo--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mn-promo--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34, 44, 50, 0.85) 0%, rgba(34, 44, 50, 0.4) 40%, rgba(34, 44, 50, 0) 70%); }
.mn-promo__body { position: absolute; z-index: 1; left: var(--s4); right: var(--s4); bottom: var(--s3); color: #fff; }
.mn-promo__body .mn-eyebrow { color: rgba(255, 255, 255, 0.85); }
.mn-promo__title { margin: var(--s1) 0 var(--s1); font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.mn-promo--plain { grid-column: span 5; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--s1); padding: var(--s4); background: var(--tile); }
.mn-promo--plain p:not(.mn-eyebrow) { color: var(--muted); max-width: 36ch; }

/* Rail */
.mn-rail-clip { overflow-x: clip; }
.mn-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--s2)) / 4);
  gap: var(--s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.mn-rail > * { scroll-snap-align: start; }
.mn-rail-ctrl { display: flex; gap: var(--s1); }

/* Viewer */
.mn-viewer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); align-items: center; }
.mn-viewer__stage {
  grid-column: 1 / 8;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.8;
  border-radius: var(--radius);
  background: var(--tile);
  perspective: 1000px;
  overflow: hidden;
}
.mn-viewer__card { width: 62%; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--tile-2); box-shadow: 0 30px 40px -28px rgba(34, 44, 50, 0.45); will-change: transform; }
.mn-viewer__card img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.18s ease; }
.mn-viewer__card img.is-out { opacity: 0.3; }
.mn-viewer__tag { position: absolute; top: var(--s2); left: var(--s2); padding: 4px 10px; border-radius: 12px; background: #fff; font-size: 12px; font-weight: 700; }
.mn-viewer__text { grid-column: 9 / 13; display: grid; gap: var(--s2); }
.mn-viewer__text > p:not(.mn-eyebrow) { color: var(--muted); }
.mn-viewer__control { display: grid; gap: var(--s1); padding: var(--s2); border-radius: var(--radius); background: var(--tile); }
.mn-viewer__control label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.mn-viewer__control output { font-variant-numeric: tabular-nums; color: var(--teal-ink); }
.mn-viewer__control input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.mn-viewer__note { font-size: 13px; }

/* Trust & reviews */
.mn-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: var(--s4) 0 var(--s2); }
.mn-trust li { display: grid; gap: var(--s1); align-content: start; padding: var(--s3); border-radius: var(--radius); background: var(--tile); }
.mn-trust svg { color: var(--ink); }
.mn-trust strong { font-size: 16px; letter-spacing: -0.02em; }
.mn-trust span { font-size: 14px; color: var(--muted); }
.mn-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s2); }
.mn-review { display: grid; gap: var(--s2); align-content: start; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); }
.mn-review__stars { display: flex; gap: 2px; color: var(--ink); }
.mn-review blockquote { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.45; }
.mn-review figcaption { font-size: 13px; color: var(--muted); }

/* Newsletter */
.mn-news { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); align-items: end; padding: clamp(24px, 4vw, 64px); border-radius: var(--radius); background: var(--tile); }
.mn-news > div { grid-column: 1 / 7; display: grid; gap: var(--s1); }
.mn-news > div p { color: var(--muted); }
.mn-news__form { grid-column: 7 / 13; }
.mn-news__form label { display: block; margin-bottom: var(--s1); font-size: 14px; font-weight: 600; }
.mn-news__row { display: flex; gap: var(--s1); }
.mn-news__row input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 15px;
}
.mn-news__row input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 171, 172, 0.25); }
.mn-news__row input[aria-invalid="true"] { border-color: #B3261E; }
.mn-news__msg { min-height: 24px; margin-top: var(--s1); font-size: 14px; }
.mn-news__msg.is-error { color: #B3261E; }
.mn-news__msg.is-ok { color: var(--teal-ink); }

/* Footer */
.mn-footer { padding: var(--s10) 0 var(--s12); border-top: 1px solid var(--line); }
.mn-footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); }
.mn-footer__brand { grid-column: span 6; display: grid; gap: var(--s2); align-content: start; }
.mn-footer__brand p { max-width: 40ch; color: var(--muted); }
.mn-footer__grid > nav { grid-column: span 2; }
.mn-footer__h { margin-bottom: var(--s1); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.mn-footer nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--muted); text-decoration: none; transition: color var(--fast); }
.mn-footer nav a:hover { color: var(--teal-ink); }
.mn-footer__social { display: flex; gap: 4px; margin-top: var(--s2); }
.mn-footer__social a { width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: var(--tile); color: var(--ink) !important; }
.mn-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin-top: var(--s8); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* Help & toast */
.mn-help {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 0 20px 0 16px;
  border-radius: 24px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(34, 44, 50, 0.45);
  transition: background var(--fast), color var(--fast);
}
.mn-help:hover { background: var(--teal); color: var(--teal-dark); }
.mn-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 76px;
  z-index: 950;
  max-width: 420px;
  margin-inline: auto;
  padding: 14px var(--s2);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 32px -12px rgba(34, 44, 50, 0.5);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--fast), transform var(--fast);
}
.mn-toast.is-on { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .mn-grid > .mn-card { grid-column: span 4; }
  .mn-rail { grid-auto-columns: calc((100% - 2 * var(--s2)) / 3); }
}

@media (max-width: 1023px) {
  .mn-show-sm { display: inline-flex !important; }
  .mn-hide-sm { display: none !important; }
  .mn-header__inner { min-height: 64px; }
  .mn-header__inner .mn-logo { justify-self: center; }
  .mn-mega { display: none; }
  .mn-search__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-col { grid-column: span 6; }
  .mn-promo--photo,
  .mn-promo--plain { grid-column: 1 / -1; }
  .mn-promo--plain { min-height: 0; }
  .mn-viewer__stage,
  .mn-viewer__text { grid-column: 1 / -1; }
  .mn-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-reviews { grid-template-columns: 1fr; }
  .mn-news > div,
  .mn-news__form { grid-column: 1 / -1; }
  .mn-footer__brand { grid-column: 1 / -1; }
  .mn-footer__grid > nav { grid-column: span 4; }
}

@media (max-width: 760px) {
  .mn-bar__aside { display: none; }
  .mn-bar__inner { justify-content: center; }
  .mn-hero { padding-top: var(--s4); }
  .mn-hero__frame { aspect-ratio: 4 / 4.2; }
  .mn-hero__bar { flex-direction: column; align-items: flex-start; }
  .mn-wearers { grid-template-columns: 1fr; }
  .mn-wearer { aspect-ratio: 16 / 10; }
  .mn-grid > .mn-card { grid-column: span 6; }
  .mn-grid { gap: var(--s4) 12px; }
  .mn-rail { grid-auto-columns: 68%; }
  .mn-chips-wrap { overflow-x: auto; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scrollbar-width: none; }
  .mn-chips { flex-wrap: nowrap; width: max-content; padding-bottom: 4px; }
  .mn-search__list { grid-template-columns: 1fr; }
  .mn-promo { min-height: 340px; }
  .mn-promo__body { left: var(--s3); right: var(--s3); }
  .mn-trust { grid-template-columns: 1fr; }
  .mn-news__row { flex-direction: column; }
  .mn-footer__grid > nav { grid-column: span 6; }
  .mn-card__name { font-size: 14px; }
  .mn-card__row { flex-direction: column; gap: 2px; }
  .mn-card__price { text-align: left; }
  .mn-card__price s { display: inline; margin-left: 6px; }
}

@media (max-width: 400px) {
  .mn-col { grid-column: 1 / -1; }
  .mn-footer__grid > nav { grid-column: 1 / -1; }
  .mn-sechead { align-items: flex-start; }
  .mn-card__foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mn-wearer:hover img,
  .mn-col:hover .mn-col__img img,
  .mn-mega__feature:hover .mn-mega__img img { transform: none; }
}