/* CONCEPT 05 — MAISON
   Cream and ivory carry the page; burgundy carries type, buttons and a few deep moments.
   Typeface: Thmanyah — Serif Display for headlines, Serif Text for reading, Sans for UI. */
.concept-maison {
  --m-cream: #f4efe9;
  --m-ivory: #fbf8f3;
  --m-sand: #ecdfcb;
  --m-blush: #f0e3dd;
  --m-gold: #c19a6b;
  --m-gold-ink: #8a6a43; /* gold for text on light grounds (4.3:1) */
  --m-focus: var(--m-wine-2);
  --m-wine: #3d0c11;
  --m-wine-2: #5a1520;
  --m-deep: #270709;
  --m-muted: #6c4f4f;
  --m-line: rgba(61, 12, 17, .16);
  --m-display: "Thmanyah Serif Display", "Thmanyah Serif Text", Georgia, "Times New Roman", serif;
  --m-text: "Thmanyah Serif Text", "Thmanyah Serif Display", Georgia, serif;
  --m-ui: "Thmanyah Sans", "Thmanyah Serif Text", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --m-gut: max(20px, env(safe-area-inset-left, 0px));
  --m-gut-e: max(20px, env(safe-area-inset-right, 0px));
  --m-pad: clamp(20px, 4.5vw, 72px);
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --y-bg: var(--m-cream); --y-fg: var(--m-wine); --y-accent: var(--m-wine-2); --y-line: var(--m-line);
  --ys-bg: var(--m-ivory); --ys-fg: var(--m-wine); --ys-line: var(--m-line); --ys-accent: var(--m-wine); --ys-accent-fg: var(--m-ivory);
  --ys-muted: var(--m-muted); --ys-field: #fff; --ys-font: var(--m-ui); --ys-display: var(--m-display); --ys-display-weight: 500;
  --ys-radius: 999px; --ys-box-radius: 14px; --ys-error: #a1182b;
  background: var(--m-cream); color: var(--m-wine);
  font-family: var(--m-text); font-size: 17px; line-height: 1.7;
  min-height: 100vh; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html[data-concept="maison"], html[data-concept="maison"] body { background: var(--m-cream); }
html[data-concept="maison"].lenis, html[data-concept="maison"].lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.concept-maison ::selection { background: var(--m-wine); color: var(--m-ivory); }
/* paper grain, very quiet */
.concept-maison::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .05 0 0 0 0 .07 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.concept-maison :where(h1, h2, h3, p, figure, ol, ul) { margin: 0; }
.concept-maison :where(ol, ul) { list-style: none; padding: 0; }
.concept-maison a { text-decoration: none; }
.concept-maison img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- type & controls ---------- */
.m-kicker { font: 500 12px/1.4 var(--m-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--m-wine-2); display: flex; gap: .9em; align-items: center; flex-wrap: wrap; }
[lang="ar"] .m-kicker { letter-spacing: 0; font-size: 14px; }
.m-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.m-h2 { font: 500 clamp(34px, 5vw, 76px)/1.12 var(--m-display); letter-spacing: -.01em; text-wrap: balance; }
[lang="ar"] .m-h2 { line-height: 1.3; letter-spacing: 0; }
.m-h2.is-huge { font-size: clamp(44px, 7.6vw, 128px); }
.m-h2.is-small { font-size: clamp(26px, 3vw, 40px); }
.m-h2.is-light { color: var(--m-ivory); }
.m-w, .m-rw { display: inline-block; will-change: transform; }

.m-btn {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 30px; border-radius: 999px; background: var(--m-wine); color: var(--m-ivory);
  font: 500 15px/1 var(--m-ui); letter-spacing: .02em; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
  transition: background .4s var(--m-ease), color .4s var(--m-ease), box-shadow .4s var(--m-ease);
  box-shadow: 0 10px 30px -12px rgba(61, 12, 17, .55);
}
[lang="ar"] .m-btn { font-size: 16px; letter-spacing: 0; }
.m-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m-wine-2); opacity: 0; border-radius: inherit; transition: opacity .3s ease; }
.m-btn:hover::before { opacity: 1; }
.m-btn.is-light { background: var(--m-ivory); color: var(--m-wine); box-shadow: none; }
.m-btn.is-light::before { background: var(--m-sand); }
.m-btn.is-wide { width: 100%; }
.m-btn:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 3px; }
.m-link {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; gap: .4em;
  font: 500 15px/1.2 var(--m-ui); color: inherit; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
  transition: background-size .5s var(--m-ease);
}
[dir="rtl"] .m-link { background-position: 100% calc(100% - 10px); }
.m-link:hover { background-size: 0 1px; }
.m-link:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.m-link.is-light { color: var(--m-ivory); }
.m-link.is-plain { min-height: 32px; background-position: 0 calc(100% - 4px); }
.m-mark { display: inline-block; width: 30px; height: 30px; background: currentColor; -webkit-mask: var(--m-mark) center / contain no-repeat; mask: var(--m-mark) center / contain no-repeat; }
.m-mark.is-big { width: 64px; height: 64px; }
.m-size {
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 46px; min-height: 44px; padding: 0 12px; display: inline-grid; place-items: center;
  border: 1px solid var(--m-line); border-radius: 999px; font: 500 13px/1 var(--m-ui); letter-spacing: .04em; transition: all .3s var(--m-ease);
}
.m-size:hover { border-color: currentColor; }
.m-size[aria-pressed="true"] { background: var(--m-wine); color: var(--m-ivory); border-color: var(--m-wine); }
.m-size:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }
.concept-maison .y-now { font: 500 1em/1 var(--m-ui); }
.concept-maison .is-big { font-size: 22px; }

/* ---------- preloader ---------- */
.m-pre { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--m-ivory); color: var(--m-wine); }
.m-pre-mark { width: 72px; height: 72px; background: currentColor; -webkit-mask: var(--m-mark) center / contain no-repeat; mask: var(--m-mark) center / contain no-repeat; }
.m-pre-word { font: 500 32px/1.3 var(--m-display); letter-spacing: .08em; }
.m-pre-curtain { position: fixed; inset: 0; background: var(--m-wine); transform: translateY(100%); }

/* ---------- header ---------- */
.m-head {
  position: fixed; z-index: 100; top: 0; inset-inline: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px var(--m-gut-e) 14px var(--m-gut); padding-top: calc(14px + env(safe-area-inset-top, 0px));
  transition: transform .6s var(--m-ease), background .4s, box-shadow .4s; color: var(--m-wine);
}
[dir="rtl"] .m-head { padding-inline: var(--m-gut) var(--m-gut-e); }
.m-head.is-solid { background: rgba(251, 248, 243, .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--m-line); }
.m-head.is-hidden { transform: translateY(-105%); }
.m-nav { display: flex; gap: 26px; font: 500 14px/1 var(--m-ui); }
.m-nav a { padding: 14px 0; position: relative; }
.m-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .5s var(--m-ease); }
.m-nav a:hover::after { transform: none; }
.m-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.m-word { font: 500 22px/1 var(--m-display); letter-spacing: .32em; margin-inline-end: -.32em; }
.m-tools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.m-lang { all: unset; cursor: pointer; min-width: 44px; min-height: 44px; display: grid; place-items: center; font: 500 14px/1 var(--m-ui); border-radius: 999px; }
.m-lang:hover { background: rgba(61, 12, 17, .06); }
.m-lang:focus-visible { outline: 2px solid var(--m-focus); }
.m-pill {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--m-wine); color: var(--m-ivory);
  font: 500 14px/1 var(--m-ui); opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none; transition: opacity .5s var(--m-ease), transform .5s var(--m-ease);
}
.m-head.is-pill .m-pill, .m-main.is-pdp ~ * .m-pill { opacity: 1; transform: none; pointer-events: auto; }
.m-pill:focus-visible { opacity: 1; transform: none; pointer-events: auto; outline: 2px solid var(--m-focus); outline-offset: 2px; }

/* ---------- hero (pinned arch → full bleed) ---------- */
.m-hero { position: relative; }
.m-hero-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--m-cream); }
.m-frame { position: absolute; inset: 0; z-index: 1; clip-path: inset(15% 35.5% 11% 35.5% round 360px 360px 0 0); will-change: clip-path; }
.m-frame-media { position: absolute; inset: 0; transform-origin: 50% 40%; }
.m-frame-img { object-position: 50% 24%; }
.m-frame-scrim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, rgba(39, 7, 9, .82) 0%, rgba(39, 7, 9, .25) 45%, rgba(39, 7, 9, 0) 70%); }
.m-hero-over {
  position: absolute; z-index: 2; inset-inline-start: var(--m-pad); bottom: clamp(32px, 9vh, 96px); max-width: 520px; color: var(--m-ivory); opacity: 0;
}
.m-over-k { font: 500 12px/1.4 var(--m-ui); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
[lang="ar"] .m-over-k { letter-spacing: 0; font-size: 14px; }
.m-over-name { font: 500 clamp(56px, 8vw, 120px)/1 var(--m-display); margin-top: 8px; }
.m-over-line { font: 400 clamp(17px, 1.5vw, 21px)/1.6 var(--m-text); margin-top: 14px; max-width: 40ch; opacity: .92; }
.m-over-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.m-kicker.m-rotator { position: absolute; z-index: 3; top: calc(96px + env(safe-area-inset-top, 0px)); inset-inline-start: var(--m-pad); }
.m-rot { position: relative; display: inline-grid; color: var(--m-wine); }
.m-rot b { grid-area: 1 / 1; font-weight: 500; opacity: 0; transform: translateY(60%); transition: opacity .6s var(--m-ease), transform .6s var(--m-ease); white-space: nowrap; }
.m-rot b.is-on { opacity: 1; transform: none; }
.m-h1 { position: absolute; inset: 0; z-index: 0; pointer-events: none; font: 500 clamp(52px, 8.6vw, 156px)/1.05 var(--m-display); letter-spacing: -.015em; color: var(--m-wine); }
[lang="ar"] .m-h1 { line-height: 1.32; letter-spacing: 0; font-size: clamp(54px, 8.2vw, 148px); }
.m-hl { position: absolute; white-space: nowrap; }
.m-h1.is-inv { z-index: 1; color: var(--m-ivory); margin: 0; }
.m-hl-1 { top: 23%; inset-inline-start: var(--m-pad); }
.m-hl-2 { bottom: 25%; inset-inline-end: var(--m-pad); }
.m-hero-sub { position: absolute; z-index: 3; inset-inline-start: var(--m-pad); bottom: calc(9% + 70px); max-width: 30ch; font: 400 17px/1.65 var(--m-text); color: var(--m-wine); }
.m-hero-cta { position: absolute; z-index: 3; inset-inline-start: var(--m-pad); bottom: 7%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.m-badge { position: absolute; z-index: 3; top: 20%; inset-inline-end: calc(var(--m-pad) + 2vw); width: 132px; height: 132px; display: grid; place-items: center; color: var(--m-wine); border-radius: 50%; }
.m-badge-ring { position: absolute; inset: 0; animation: m-spin 22s linear infinite; font: 500 10.5px/1 var(--m-ui); letter-spacing: 0; }
.m-badge-ring span { position: absolute; left: 50%; top: 0; height: 66px; transform-origin: 0 66px; }
.m-badge-mark { width: 44px; height: 44px; background: var(--m-wine); -webkit-mask: var(--m-mark) center / contain no-repeat; mask: var(--m-mark) center / contain no-repeat; transition: transform .6s var(--m-ease); }
.m-badge:hover .m-badge-mark { transform: scale(1.15) rotate(-8deg); }
.m-badge:hover .m-badge-ring { animation-duration: 8s; }
@keyframes m-spin { to { rotate: 360deg; } }
.m-scroll { position: absolute; z-index: 3; bottom: 3.2%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--m-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--m-wine); }
[lang="ar"] .m-scroll { letter-spacing: 0; font-size: 13px; }
.m-scroll i { width: 1px; height: 34px; background: currentColor; transform-origin: top; animation: m-drip 2.2s var(--m-ease) infinite; }
@keyframes m-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 899px) {
  /* phone hero: kicker → headline → arch (with badge) → second line over the arch → promise → two actions */
  .m-frame { clip-path: inset(19% 13% 33% 13% round 170px 170px 0 0); }
  .m-frame-img { object-position: 50% 8%; }
  .m-h1, [lang="ar"] .m-h1 { font-size: clamp(38px, 11.4vw, 64px); }
  .m-hl { left: 0; right: 0; text-align: center; inset-inline: 0; }
  .m-hl-1 { top: calc(98px + env(safe-area-inset-top, 0px)); }
  .m-hl-2 { bottom: calc(33% - 0.62em); }
  .m-kicker.m-rotator { top: calc(66px + env(safe-area-inset-top, 0px)); inset-inline: 0; justify-content: center; font-size: 13px; }
  .m-kicker.m-rotator::before { display: none; }
  .m-badge { display: grid; zoom: .6; top: calc(19% / .6); inset-inline-end: calc(4% / .6); }
  .m-hero-sub { display: block; inset-inline: var(--m-gut); bottom: calc(126px + env(safe-area-inset-bottom, 0px)); max-width: 34ch; margin-inline: auto; text-align: center; font-size: 15.5px; line-height: 1.6; }
  .m-hero-cta { inset-inline: 0; justify-content: center; gap: 10px 22px; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .m-hero-cta .m-btn { min-height: 48px; padding: 0 24px; }
  .m-scroll { display: none; }
  .m-hero-over { inset-inline: var(--m-gut); bottom: 88px; }
  .m-over-name { font-size: 64px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .m-hero-sub { display: none; }
  .m-frame { clip-path: inset(20% 15% 30% 15% round 150px 150px 0 0); }
  .m-hl-2 { bottom: calc(30% - 0.62em); }
}
/* static / reduced motion: the arch stays an arch, the reveal card is not needed */
.is-static .m-hero-over, .is-static .m-frame-scrim { display: none; }
.is-static .m-badge-ring, .is-static .m-scroll i { animation: none; }

/* ---------- velocity marquee ---------- */
.m-marquee { position: relative; z-index: 2; padding: clamp(40px, 7vw, 100px) 0; overflow: hidden; background: var(--m-cream); }
.m-mq-row { overflow: hidden; white-space: nowrap; }
.m-mq-track { display: inline-flex; will-change: transform; }
.m-mq-item { display: inline-flex; align-items: center; gap: .5em; padding-inline-end: .5em; }
.m-mq-item i { display: inline-block; width: .55em; height: .55em; background: currentColor; -webkit-mask: var(--m-mark) center / contain no-repeat; mask: var(--m-mark) center / contain no-repeat; opacity: .8; }
.m-mq-row.is-a { font: italic 500 clamp(56px, 10vw, 170px)/1.15 var(--m-display); color: var(--m-wine); }
.m-mq-row.is-b {
  font: 500 clamp(18px, 2.2vw, 30px)/1 var(--m-ui); color: var(--m-ivory); background: var(--m-wine); padding: 20px 0;
  transform: rotate(-2.2deg); margin: 18px -2vw 0; box-shadow: 0 20px 50px -24px rgba(39, 7, 9, .7);
}
[dir="rtl"] .m-mq-row.is-b { transform: rotate(2.2deg); }
.m-mq-row.is-b .m-mq-item i { color: var(--m-gold); }

/* ---------- collection: stacked sticky cards ---------- */
.m-collection { position: relative; padding: clamp(60px, 9vw, 140px) var(--m-gut-e) clamp(60px, 8vw, 120px) var(--m-gut); }
[dir="rtl"] .m-collection { padding-inline: var(--m-gut) var(--m-gut-e); }
.m-sec-head { display: grid; gap: 18px; max-width: 1100px; margin: 0 auto clamp(40px, 6vw, 80px); padding-inline: var(--m-pad); }
.m-sec-head.is-center { text-align: center; justify-items: center; }
.m-sec-head.is-center .m-kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.m-sec-lede, .m-promise { font: 400 clamp(17px, 1.4vw, 20px)/1.7 var(--m-text); color: var(--m-muted); max-width: 52ch; }
.m-stack { display: grid; gap: 7vh; max-width: 1320px; margin: 0 auto; }
.m-card { position: sticky; top: calc(90px + var(--i) * 16px); }
.m-card-in {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: clamp(20px, 3vw, 56px);
  min-height: min(78vh, 760px); padding: clamp(16px, 1.6vw, 24px); border-radius: 34px; transform-origin: 50% 0;
  background: var(--tone); color: var(--ink); box-shadow: 0 30px 80px -40px rgba(39, 7, 9, .45), 0 0 0 1px rgba(61, 12, 17, .06);
  position: relative; overflow: hidden;
}
.m-card-in::before { /* spotlight that follows the pointer (21st.dev spotlight card) */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 60%);
}
.m-card-in:hover::before { opacity: 1; }
.m-card.is-ivory { --tone: var(--m-ivory); --ink: var(--m-wine); }
.m-card.is-sand { --tone: var(--m-sand); --ink: var(--m-wine); }
.m-card.is-wine { --tone: var(--m-wine); --ink: var(--m-ivory); }
.m-card.is-cream { --tone: #f7f1ea; --ink: var(--m-wine); }
.m-card.is-blush { --tone: var(--m-blush); --ink: var(--m-wine); }
.m-card.is-wine .m-btn { background: var(--m-ivory); color: var(--m-wine); box-shadow: none; }
.m-card.is-wine .m-btn::before { background: var(--m-sand); }
.m-card.is-wine .m-size { border-color: rgba(251, 248, 243, .3); }
.m-card.is-wine .m-size[aria-pressed="true"] { background: var(--m-ivory); color: var(--m-wine); }
.m-card.is-wine .m-card-detail, .m-card.is-wine .m-reassure, .m-card.is-wine .m-stock { color: rgba(251, 248, 243, .78); }
.m-card.is-wine .m-card-in::before { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(193, 154, 107, .2), transparent 60%); }
.m-card-media { position: relative; display: block; border-radius: 999px 999px 22px 22px; overflow: hidden; min-height: 420px; background: rgba(61, 12, 17, .08); }
.m-card-img { position: absolute; inset: 0; transition: opacity .9s var(--m-ease), transform 1.4s var(--m-ease); object-position: 50% 20%; }
.m-card-img.is-b { opacity: 0; }
.m-card-in:hover .m-card-img { transform: scale(1.04); }
.m-card-in:hover .m-card-img.is-b { opacity: 1; }
.m-card-info { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(8px, 2vw, 40px) clamp(4px, 2vw, 36px); }
.m-card-no { display: flex; gap: 16px; font: 500 12px/1 var(--m-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
[lang="ar"] .m-card-no { letter-spacing: .04em; font-size: 13px; }
.m-card-name { font: 500 clamp(54px, 7vw, 112px)/1 var(--m-display); letter-spacing: -.01em; }
.m-card-name a:hover { font-style: italic; }
.m-card-line { font: 400 clamp(19px, 1.7vw, 24px)/1.55 var(--m-text); max-width: 34ch; }
.m-card-detail { font: 400 15px/1.6 var(--m-ui); color: var(--m-muted); }
.m-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 6px; }
.m-stock { font: 500 13px/1.4 var(--m-ui); color: var(--m-muted); }
.m-stock.is-low { color: #a1182b; display: inline-flex; align-items: center; gap: 8px; }
.m-stock.is-low::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: m-pulse 1.8s infinite; }
.m-card.is-wine .m-stock.is-low { color: #f2b8b0; }
@keyframes m-pulse { 50% { opacity: .25; } }
.m-card-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.m-card-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 4px; }
.m-reassure { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12.5px/1.5 var(--m-ui); color: var(--m-muted); padding-top: 14px; border-top: 1px solid currentColor; border-color: rgba(61, 12, 17, .14); }
[lang="ar"] .m-reassure { font-size: 13.5px; }
.m-reassure li { display: inline-flex; align-items: center; gap: 7px; }
.m-reassure li::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.m-reassure.is-col { flex-direction: column; border: 0; padding: 0; }
@media (max-width: 899px) {
  .m-stack { gap: 22px; }
  .m-card { position: relative; top: 0; }
  .m-card-in { grid-template-columns: 1fr; min-height: 0; border-radius: 26px; padding: 12px; }
  .m-card-media { min-height: 0; aspect-ratio: 4 / 4.6; border-radius: 999px 999px 18px 18px; }
  .m-card-info { padding: 8px 8px 12px; gap: 12px; }
  .m-card-name { font-size: 56px; }
}

/* ---------- lookbook: pinned horizontal ---------- */
.m-look { position: relative; background: var(--m-ivory); }
.m-look-pin { height: 100vh; height: 100svh; min-height: 620px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding-top: clamp(96px, 12vh, 140px); }
.m-look-head { padding-inline: var(--m-pad); display: grid; gap: 12px; }
.m-look-track { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); width: max-content; padding: 24px var(--m-pad) 60px; will-change: transform; }
.m-look-item { flex: none; }
.m-look-item.is-tall { width: clamp(240px, 24vw, 400px); height: 62vh; align-self: flex-start; }
.m-look-item.is-wide { width: clamp(300px, 34vw, 560px); height: 46vh; align-self: flex-end; }
.m-look-item.is-small { width: clamp(180px, 18vw, 280px); height: 36vh; }
.m-look-link { display: grid; grid-template-rows: 1fr auto; gap: 12px; height: 100%; }
.m-look-media { display: block; overflow: hidden; border-radius: 18px; min-height: 0; background: var(--m-sand); }
.m-look-item.is-tall .m-look-media { border-radius: 999px 999px 18px 18px; }
.m-look-media img { transition: transform 1.2s var(--m-ease); }
.m-look-link:hover .m-look-media img { scale: 1.06; }
.m-look-cap { font: 400 13px/1.3 var(--m-ui); color: var(--m-muted); }
.m-look-cap b { font: 500 18px/1 var(--m-display); color: var(--m-wine); margin-inline-end: 8px; }
.m-look-item.is-word { width: clamp(280px, 30vw, 460px); font: italic 500 clamp(34px, 3.6vw, 58px)/1.2 var(--m-display); color: var(--m-wine); align-self: center; }
@media (max-width: 899px) {
  .m-look-pin { height: auto; min-height: 0; padding-top: 72px; overflow: visible; }
  .m-look-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 56px; -webkit-overflow-scrolling: touch; }
  .m-look-track::-webkit-scrollbar { display: none; }
  .m-look-item { scroll-snap-align: center; }
  .m-look-item.is-tall, .m-look-item.is-wide, .m-look-item.is-small { width: 72vw; height: 62vh; max-height: 520px; align-self: center; }
  .m-look-item.is-word { width: 72vw; font-size: 34px; }
}

/* ---------- atmosphere scene ---------- */
.m-scene { position: relative; height: min(92vh, 900px); min-height: 520px; overflow: hidden; background: var(--m-sand); }
.m-scene-media { position: absolute; inset: 0; }
.m-scene-media img { will-change: transform; object-position: 70% 50%; }
.m-scene-copy { position: absolute; left: var(--m-pad); top: 50%; transform: translateY(-50%); max-width: min(42vw, 560px); display: grid; gap: 16px; color: var(--m-wine); }
.m-scene-line { font: 500 clamp(40px, 5.4vw, 92px)/1.2 var(--m-display); text-wrap: balance; }
[lang="ar"] .m-scene-line { line-height: 1.35; }
@media (max-width: 899px) {
  .m-scene { height: 78svh; }
  .m-scene-media img { object-position: 78% 50%; }
  .m-scene-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(244, 239, 233, .82), rgba(244, 239, 233, 0) 55%); }
  .m-scene-copy { inset-inline: var(--m-gut); left: auto; top: 9%; transform: none; max-width: none; z-index: 1; }
}

/* ---------- story ---------- */
.m-story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.m-story-copy { display: grid; gap: clamp(24px, 3vw, 44px); }
.m-story-fig { position: sticky; top: 110px; aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; overflow: hidden; background: var(--m-sand); }
@media (max-width: 899px) { .m-story-grid { grid-template-columns: 1fr; } .m-story-fig { position: relative; top: 0; max-height: 70svh; } }
.m-story { background: var(--m-cream); padding: clamp(90px, 13vw, 200px) var(--m-pad); }
.m-story-in { max-width: 1320px; margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); }
.m-reveal { font: 400 clamp(24px, 3.1vw, 48px)/1.5 var(--m-text); max-width: 30ch; text-wrap: pretty; }
[lang="ar"] .m-reveal { line-height: 1.75; max-width: 34ch; }
.m-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(30px, 6vw, 90px); }
.m-pillars li { display: grid; gap: 14px; align-content: start; }
.m-pillars li:nth-child(2) { margin-top: clamp(0px, 8vw, 120px); }
.m-arch { aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--m-sand); }
.m-pillars h3 { font: 500 clamp(24px, 2.2vw, 32px)/1.3 var(--m-display); margin-top: 10px; }
.m-pillars p { font: 400 16px/1.7 var(--m-ui); color: var(--m-muted); max-width: 34ch; }
@media (max-width: 760px) {
  .m-pillars { grid-template-columns: 1fr; }
  .m-pillars li:nth-child(2) { margin-top: 0; }
  .m-arch { aspect-ratio: 4 / 4.4; }
}

/* ---------- ordering ---------- */
.m-order { background: var(--m-ivory); padding: clamp(80px, 11vw, 170px) 0; }
.m-foot-about { max-width: 760px; margin: 40px auto 0; text-align: center; font: 400 14px/1.8 var(--m-ui); opacity: .72; }
.m-faq { background: var(--m-cream); padding: clamp(72px, 9vw, 140px) 20px; }
.m-faq .m-acc { max-width: 820px; margin: clamp(28px, 4vw, 48px) auto 0; }
.m-faq .m-acc summary { gap: 16px; text-align: start; }
.m-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1320px; margin: 0 auto; padding-inline: var(--m-pad); counter-reset: s; }
.m-steps li { position: relative; padding: 28px 24px 30px; border-radius: 26px; background: var(--m-cream); display: grid; gap: 10px; align-content: start; transition: transform .6s var(--m-ease), background .4s; }
.m-steps li:hover { transform: translateY(-6px); background: var(--m-sand); }
.m-step-n { font: italic 500 46px/1 var(--m-display); color: var(--m-gold); }
.m-steps h3 { font: 500 23px/1.3 var(--m-display); }
.m-steps p { font: 400 15px/1.65 var(--m-ui); color: var(--m-muted); }
.m-journey { max-width: 1320px; margin: clamp(40px, 5vw, 70px) auto 0; padding-inline: var(--m-pad); font-family: var(--m-ui); }
.m-journey .y-journey-step { border-top-color: var(--m-line); }
.m-journey .y-journey-n { font-family: var(--m-ui); color: var(--m-wine-2); opacity: 1; }
.m-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); max-width: 1320px; margin: clamp(48px, 6vw, 90px) auto 0; padding-inline: var(--m-pad); }
.m-info > div { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--m-line); }
.m-info h3 { font: 500 22px/1.3 var(--m-display); }
.m-info p { font: 400 15.5px/1.7 var(--m-ui); color: var(--m-muted); }
.concept-maison .y-needed { font-family: var(--m-ui); color: var(--m-wine-2); border-radius: 14px; opacity: 1; background: rgba(193, 154, 107, .1); border-color: rgba(90, 21, 32, .35); }
@media (max-width: 899px) {
  .m-steps { grid-template-columns: 1fr 1fr; }
  .m-info { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .m-steps { grid-template-columns: 1fr; } }

/* ---------- archive: flowing rows ---------- */
.m-archive { background: var(--m-cream); padding: clamp(80px, 10vw, 160px) 0; }
.m-flow { max-width: 1320px; margin: 0 auto; padding-inline: var(--m-pad); border-bottom: 1px solid var(--m-line); }
.m-flow-row { position: relative; overflow: hidden; border-top: 1px solid var(--m-line); }
.m-flow-link { position: relative; z-index: 1; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 22px; min-height: 104px; padding: 14px 4px; }
.m-flow-thumb { width: 64px; height: 76px; border-radius: 999px 999px 8px 8px; overflow: hidden; }
.m-flow-name { font: 500 clamp(32px, 4.4vw, 64px)/1.1 var(--m-display); }
.m-flow-meta { font: 500 13px/1.3 var(--m-ui); color: var(--m-muted); text-align: end; }
.m-flow-name { transition: opacity .3s ease; }
@media (hover: hover) { .m-flow-link:hover .m-flow-name { opacity: .6; } }
.m-flow-mq { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; background: var(--m-wine); color: var(--m-ivory); transform: translateY(101%); }
.m-flow-mq-in { height: 100%; display: flex; align-items: center; width: max-content; animation: m-flow 14s linear infinite; }
[dir="rtl"] .m-flow-mq-in { animation-direction: reverse; }
.m-flow-mq-in span { font: italic 500 clamp(32px, 4.4vw, 64px)/1 var(--m-display); padding-inline: 28px; white-space: nowrap; }
.m-flow-mq-in img { width: 150px; height: 74px; border-radius: 999px; flex: none; }
@keyframes m-flow { to { transform: translateX(-50%); } }
@media (hover: none) { .m-flow-mq { display: none; } }

/* ---------- finale + footer (the one deep band) ---------- */
.m-finale { position: relative; background: var(--m-deep); color: var(--m-ivory); text-align: center; padding: clamp(110px, 16vw, 240px) var(--m-pad) clamp(90px, 12vw, 180px); display: grid; justify-items: center; gap: 26px; overflow: hidden; }
.m-finale-mark { position: absolute; width: min(70vw, 760px); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--m-wine-2); opacity: .55; -webkit-mask: var(--m-mark) center / contain no-repeat; mask: var(--m-mark) center / contain no-repeat; }
.m-finale > :not(.m-finale-mark):not(.m-finale-media) { position: relative; z-index: 1; }
.m-finale-media { position: absolute; inset: 0; }
.m-finale-media img { will-change: transform; }
.m-finale-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(39, 7, 9, .9), rgba(39, 7, 9, .72) 45%, rgba(39, 7, 9, .94)); }
.m-finale-mark { z-index: 1; opacity: .35 !important; }
.m-finale p { font: 400 clamp(17px, 1.5vw, 21px)/1.7 var(--m-text); max-width: 46ch; color: rgba(251, 248, 243, .82); }
.m-finale-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 8px; }
.m-foot { background: var(--m-deep); color: rgba(251, 248, 243, .78); padding: 0 var(--m-pad) calc(90px + env(safe-area-inset-bottom, 0px)); font: 400 14.5px/1.7 var(--m-ui); }
.m-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; max-width: 1320px; margin: 0 auto; padding-top: 56px; border-top: 1px solid rgba(251, 248, 243, .14); }
.m-foot h3 { font: 500 13px/1.4 var(--m-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--m-gold); margin-bottom: 12px; }
[lang="ar"] .m-foot h3 { letter-spacing: 0; font-size: 14px; }
.m-foot a:hover { color: var(--m-ivory); }
.m-foot p + p { margin-top: 4px; }
.m-foot-brand { color: var(--m-ivory); display: grid; gap: 10px; justify-items: start; }
.m-foot-word { font: 500 30px/1 var(--m-display); letter-spacing: .3em; }
.m-foot .y-needed { color: rgba(251, 248, 243, .82); background: transparent; border-color: rgba(251, 248, 243, .3); margin-top: 10px; }
.m-legal { max-width: 1320px; margin: 40px auto 0; font-size: 12.5px; opacity: .7; }
@media (max-width: 899px) { .m-foot-grid { grid-template-columns: 1fr 1fr; } .m-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 899px) {
  .m-nav { display: none; }
  .m-head { grid-template-columns: auto 1fr; }
  .m-logo { order: -1; }
  .m-pill { padding: 0 16px; }
}

/* ---------- product page ---------- */
.m-main.is-pdp { padding-top: calc(84px + env(safe-area-inset-top, 0px)); background: var(--m-cream); }
.m-pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 90px); max-width: 1400px; margin: 0 auto; padding: 24px var(--m-pad) 90px; align-items: start; }
.m-pdp-gal { position: sticky; top: 96px; display: grid; gap: 14px; }
.m-pdp-main { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - 200px); width: 100%; margin-inline: auto; border-radius: 999px 999px 26px 26px; overflow: hidden; background: var(--m-sand); }
.m-pdp-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--m-ease); }
.m-pdp-shot.is-on { opacity: 1; }
.m-pdp-shot img { object-position: 50% 22%; }
.m-pdp-thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.m-pdp-thumbs button { all: unset; cursor: pointer; width: 58px; height: 72px; border-radius: 999px 999px 10px 10px; overflow: hidden; opacity: .55; transition: opacity .3s, outline-color .3s; outline: 1.5px solid transparent; outline-offset: 2px; }
.m-pdp-thumbs button[aria-current="true"] { opacity: 1; outline-color: var(--m-wine); }
.m-pdp-thumbs button:focus-visible { outline-color: var(--m-gold); opacity: 1; }
.m-pdp-info { display: grid; gap: 18px; padding-top: clamp(0px, 4vw, 40px); }
.m-crumb { font: 500 13px/1.4 var(--m-ui); color: var(--m-muted); }
.m-crumb a { min-height: 44px; display: inline-flex; align-items: center; }
.m-crumb a:hover { color: var(--m-wine); }
.m-pdp-name { font: 500 clamp(64px, 8vw, 128px)/1 var(--m-display); letter-spacing: -.01em; }
.m-pdp-line { font: 400 clamp(19px, 1.7vw, 24px)/1.55 var(--m-text); max-width: 34ch; }
.m-pdp-price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.m-save { font: 500 12.5px/1 var(--m-ui); padding: 7px 12px; border-radius: 999px; background: var(--m-sand); color: var(--m-wine); }
.m-meter { display: grid; gap: 8px; font: 500 13.5px/1.4 var(--m-ui); color: var(--m-muted); max-width: 420px; }
.m-meter span { height: 3px; border-radius: 3px; background: var(--m-line); overflow: hidden; }
.m-meter i { display: block; height: 100%; background: var(--m-wine); border-radius: inherit; }
.m-meter.is-low { color: #a1182b; }
.m-meter.is-low i { background: #a1182b; }
.m-colour { display: flex; align-items: center; gap: 10px; font: 400 15px/1.4 var(--m-ui); }
.m-colour span { color: var(--m-muted); }
.m-colour i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--m-line); }
.m-pdp-sizes { border: 0; padding: 0; margin: 0; }
.m-pdp-sizes legend { font: 500 13.5px/1.4 var(--m-ui); color: var(--m-muted); margin-bottom: 10px; padding: 0; }
.m-pdp-sizes div { display: flex; flex-wrap: wrap; gap: 8px; }
.m-muted { color: var(--m-muted); font: 400 15.5px/1.7 var(--m-ui); }
.m-pdp-info > .m-btn + .m-link { justify-self: start; }
.m-note { font: 400 14px/1.7 var(--m-ui); color: var(--m-muted); }
.m-note a { color: var(--m-wine); text-decoration: underline; text-underline-offset: 3px; }
.m-acc { border-top: 1px solid var(--m-line); margin-top: 6px; }
.m-acc details { border-bottom: 1px solid var(--m-line); }
.m-acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 58px; font: 500 19px/1.3 var(--m-display); }
.m-acc summary::-webkit-details-marker { display: none; }
.m-acc summary::after { content: "+"; font: 300 24px/1 var(--m-ui); transition: transform .4s var(--m-ease); }
.m-acc details[open] summary::after { transform: rotate(45deg); }
.m-acc details > div, .m-acc details > p, .m-acc details > aside, .m-acc details > .y-journey { margin-bottom: 18px; font: 400 15.5px/1.75 var(--m-ui); color: var(--m-muted); }
.m-acc details > div p + p { margin-top: .8em; }
.m-buybar { display: none; }
@media (max-width: 899px) {
  .m-pdp { grid-template-columns: 1fr; padding-top: 8px; }
  .m-pdp-gal { position: relative; top: 0; }
  .m-pdp-main { max-height: 72svh; }
  .m-pdp-name { font-size: 68px; }
  .m-buybar {
    position: fixed; z-index: 90; inset-inline: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(251, 248, 243, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px -14px rgba(39, 7, 9, .45), 0 0 0 1px var(--m-line); font: 400 13.5px/1.3 var(--m-ui);
    transform: translateY(160%); transition: transform .6s var(--m-ease);
  }
  [dir="rtl"] .m-buybar { padding: 8px 20px 8px 8px; }
  .m-buybar.is-on { transform: none; }
  .m-buybar b { font: 500 18px/1 var(--m-display); margin-inline-end: 8px; }
  .m-buybar .m-btn { min-height: 46px; padding: 0 22px; }
}
.m-related { max-width: 1400px; margin: 0 auto; padding: 20px var(--m-pad) clamp(80px, 10vw, 140px); display: grid; gap: 28px; }
.m-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); }
.m-rel-grid a { display: grid; gap: 8px; }
.m-rel-media { display: block; aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; overflow: hidden; background: var(--m-sand); }
.m-rel-media img { transition: transform 1.2s var(--m-ease); }
.m-rel-grid a:hover img { transform: scale(1.05); }
.m-rel-grid b { font: 500 26px/1.1 var(--m-display); margin-top: 8px; }
.m-rel-grid span:last-child { font: 400 14px/1.4 var(--m-ui); color: var(--m-muted); }
@media (max-width: 760px) { .m-rel-grid { grid-template-columns: 1fr 1fr; } .m-rel-grid li:nth-child(3) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .concept-maison *, .concept-maison *::before, .concept-maison *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   PHONE PASS — touch-first layout, shorter page, nothing hidden behind motion
   ===================================================================== */
.concept-maison { -webkit-tap-highlight-color: transparent; }
html.m-lock, html.m-lock body { overflow: hidden; }
@media (hover: none) { .m-btn:active, .m-pill:active, .m-size:active { transform: scale(.97); } }
.m-burger { display: none; }
.m-menu { display: none; }
.m-reassure.is-strip { display: none; }
.m-pdp-dots { display: none; }
.m-swipe { display: none; }

@media (max-width: 899px) {
  /* header: logo · language · request · menu, always visible */
  .m-head { grid-template-columns: auto 1fr; padding-block: 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); gap: 8px; background: rgba(251, 248, 243, .0); }
  .m-head.is-solid, .concept-maison.is-menu .m-head { background: rgba(251, 248, 243, .92); }
  .concept-maison.is-menu .m-head { box-shadow: none; }
  .m-word { font-size: 18px; }
  .m-tools { gap: 4px; }
  .m-pill { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
  .m-burger { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border-radius: 50%; }
  .m-burger i { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .45s var(--m-ease); }
  .m-burger[aria-expanded="true"] i:first-of-type { transform: translateY(3.75px) rotate(45deg); }
  .m-burger[aria-expanded="true"] i:last-of-type { transform: translateY(-3.75px) rotate(-45deg); }
  .m-burger:focus-visible { outline: 2px solid var(--m-focus); }
  .m-menu {
    display: grid; position: fixed; inset: 0; z-index: 95; grid-template-rows: 1fr auto; gap: 24px;
    padding: calc(84px + env(safe-area-inset-top, 0px)) var(--m-gut) calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--m-ivory); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--m-ease); overflow-y: auto;
  }
  .m-menu[hidden] { display: none; }
  .m-menu.is-open { clip-path: inset(0 0 0 0); }
  .m-menu-nav { display: grid; align-content: start; }
  .m-menu-nav a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--m-line); font: 500 40px/1.25 var(--m-display);
    opacity: 0; transform: translateY(18px); transition: opacity .5s var(--m-ease), transform .5s var(--m-ease); }
  .m-menu-nav a span { font: 500 12px/1 var(--m-ui); color: var(--m-gold); }
  .m-menu.is-open .m-menu-nav a { opacity: 1; transform: none; }
  .m-menu.is-open .m-menu-nav a:nth-child(2) { transition-delay: .06s; }
  .m-menu.is-open .m-menu-nav a:nth-child(3) { transition-delay: .12s; }
  .m-menu-foot { display: grid; gap: 14px; }
  .m-menu-row { display: flex; justify-content: space-between; }

  /* hero: keep CTA clear of the bottom edge */
  .m-hero-over { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .m-over-name { font-size: 58px; }
  .m-over-line { font-size: 16px; }

  /* collection: sticky stacked cards sized to fit one screen */
  .m-collection { padding-top: 56px; }
  .m-sec-head { margin-bottom: 20px; padding-inline: 4px; }
  .m-reassure.is-strip { display: flex; justify-content: center; border: 0; padding: 0 0 22px; }
  .m-stack { gap: 26svh; }
  .m-card { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px) + var(--i) * 8px); }
  .m-card-in { padding: 10px; gap: 4px; border-radius: 24px; }
  .m-card-media { aspect-ratio: auto; height: clamp(190px, calc(100svh - 470px), 430px); border-radius: 999px 999px 16px 16px; }
  .m-card-info { padding: 10px 8px 8px; gap: 9px; }
  .m-card-name { font-size: 44px; }
  .m-card-line { font-size: 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m-card-detail, .m-card .m-reassure { display: none; }
  .m-card-price { margin-top: 0; }
  .concept-maison .m-card .is-big { font-size: 19px; }
  .m-card-sizes { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
  .m-card-sizes::-webkit-scrollbar { display: none; }
  .m-card-sizes .m-size { flex: none; min-width: 44px; }
  .m-card-cta .m-btn { flex: 1; }
  .m-card-in::before { display: none; }

  /* lookbook: pinned, the track travels sideways as you scroll down (no sideways swiping) */
  .m-look-pin { height: 100vh; height: 100svh; min-height: 560px; padding-top: calc(72px + env(safe-area-inset-top, 0px)); overflow: hidden; }
  .m-look-head { gap: 10px; }
  .m-swipe { display: flex; align-items: center; gap: 12px; font: 500 13px/1 var(--m-ui); color: var(--m-muted); }
  .m-swipe i { position: relative; flex: 1; max-width: 160px; height: 2px; background: var(--m-line); border-radius: 2px; overflow: hidden; }
  .m-swipe b { position: absolute; inset: 0; background: var(--m-wine); transform-origin: right; transform: scaleX(0); }
  [dir="ltr"] .m-swipe b { transform-origin: left; }
  .m-look-track { width: max-content; overflow: visible; scroll-snap-type: none; padding-top: 18px; padding-bottom: 28px; gap: 14px; }
  .m-look-item.is-tall, .m-look-item.is-wide, .m-look-item.is-small { width: 64vw; height: min(54svh, 470px); align-self: center; }
  .m-look-item.is-small { height: min(42svh, 360px); }
  .m-look-item.is-word { width: 60vw; font-size: 30px; }

  /* scene + story: shorter */
  .m-scene { height: 64svh; min-height: 440px; }
  .m-story { padding-block: 72px; }
  .m-story-fig { aspect-ratio: 4 / 4.2; max-height: 56svh; }
  .m-reveal { font-size: 22px; }

  /* pillars: compact rows (small arch + text); steps: a short vertical list */
  .m-pillars { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; }
  .m-pillars li { grid-template-columns: 36% 1fr; align-items: center; gap: 4px 18px; }
  .m-pillars li:nth-child(2) { margin-top: 0; }
  .m-pillars .m-arch { grid-row: span 2; aspect-ratio: 3 / 4; }
  .m-pillars h3 { margin-top: 0; font-size: 23px; align-self: end; }
  .m-pillars p { align-self: start; font-size: 15px; }
  .m-steps { grid-template-columns: 1fr; gap: 10px; }
  .m-steps li { grid-template-columns: 52px 1fr; gap: 2px 14px; padding: 18px 18px; border-radius: 20px; }
  .m-steps li:hover { transform: none; }
  .m-step-n { grid-row: span 2; font-size: 36px; }
  .m-steps h3 { font-size: 20px; }
  .m-order { padding-block: 72px; }
  .m-archive { padding-block: 72px; }
  .m-flow-link { min-height: 88px; grid-template-columns: 52px 1fr auto; gap: 14px; }
  .m-flow-thumb { width: 52px; height: 62px; }
  .m-finale { padding-block: 110px 90px; }

  /* product page: swipe gallery first, then name and price within the first screen */
  .m-main.is-pdp { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
  .m-pdp { padding-inline: 0; gap: 18px; }
  .m-pdp-gal { gap: 10px; }
  .m-pdp-main { display: flex; aspect-ratio: auto; height: min(54svh, 520px); max-height: none; border-radius: 0 0 28px 28px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .m-pdp-main::-webkit-scrollbar { display: none; }
  .m-pdp-shot { position: relative; flex: 0 0 100%; opacity: 1; scroll-snap-align: center; scroll-snap-stop: always; }
  .m-pdp-thumbs { display: none; }
  .m-pdp-dots { display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 12px/1 var(--m-ui); color: var(--m-muted); }
  .m-pdp-dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--m-line); transition: width .4s var(--m-ease), background .4s; }
  .m-pdp-dots i.is-on { width: 20px; background: var(--m-wine); }
  .m-pdp-dots span { margin-inline-start: 8px; font-variant-numeric: tabular-nums; }
  .m-pdp-info { padding: 0 var(--m-gut); gap: 14px; }
  .m-crumb { display: none; }
  .m-pdp-info { padding-bottom: 8px; }
  .m-pdp-name { font-size: 46px; }
  .m-pdp-line { font-size: 17px; }
  .m-buybar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateY(calc(100% + 40px)); }
  .m-buybar.is-on { transform: none; }
  .m-related { padding-inline: var(--m-gut); }

  /* request sheet: swipe-down handle */
  .ys-panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--_line); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .m-card-line { -webkit-line-clamp: 1; }
  .m-card-name { font-size: 38px; }
}

/* reduced motion / no JS: the lookbook can't be driven by scroll, so it becomes a normal swipe row */
.is-static .m-look-pin { height: auto; min-height: 0; overflow: visible; }
.is-static .m-look-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.is-static .m-look-item { scroll-snap-align: start; }
.is-static .m-swipe b { transform: scaleX(1); }

/* =====================================================================
   PHOTO FRAMES — every product frame follows the photo's own 3:4 shape so the
   model's face and the full garment stay in view; the arch is a soft curve that
   never reaches the head.
   ===================================================================== */
.concept-maison { --m-arch: 50% 50% 18px 18px / 24% 24% 18px 18px; --m-arch-sm: 50% 50% 12px 12px / 24% 24% 12px 12px; }
.m-card-media, .m-rel-media, .m-pdp-main, .m-look-item.is-tall .m-look-media { border-radius: var(--m-arch); }
.m-card-media img, .m-rel-media img, .m-pdp-shot img, .m-look-media img { object-position: 50% 30%; }

/* desktop cards: a true 3:4 frame beside the info */
.m-card-media { min-height: 0; aspect-ratio: 3 / 4; height: min(72vh, 700px); width: auto; max-width: 100%; justify-self: center; align-self: center; }
.m-card-in { align-items: center; }

/* product page: 3:4 */
.m-pdp-main { aspect-ratio: 3 / 4; max-height: calc(100vh - 190px); width: auto; height: calc(100vh - 190px); max-width: 100%; }

/* lookbook: width comes from each photo's ratio, so nothing is cropped */
.m-look-item.is-tall, .m-look-item.is-wide, .m-look-item.is-small { --h: 60vh; width: auto; height: auto; }
.m-look-item.is-wide { --h: 46vh; }
.m-look-item.is-small { --h: 38vh; }
.m-look-item:not(.is-word) .m-look-media { display: block; height: var(--h); aspect-ratio: var(--ar, .75); }
.m-look-link { display: grid; grid-template-rows: auto auto; height: auto; }

@media (max-width: 899px) {
  /* stacked cards: full 3:4 photo; on short phones the photo narrows instead of cropping */
  .m-card-media { aspect-ratio: 3 / 4; height: auto; width: min(100%, calc((100svh - 64px - 300px) * .75)); max-width: 100%; justify-self: center; margin-inline: auto; border-radius: var(--m-arch-sm); }
  .m-card-info { padding-top: 12px; }
  .m-card-name { font-size: 40px; }
  .m-card-line { -webkit-line-clamp: 1; }
  .m-card-no { display: none; }

  /* product page gallery: full-width 3:4 slides (no head or hem cut off) */
  .m-pdp-main { aspect-ratio: 3 / 4; height: auto; max-height: none; width: min(100%, calc((100svh - 150px) * .75)); margin-inline: auto; border-radius: 0 0 24px 24px; }
  .m-pdp-shot { aspect-ratio: 3 / 4; }

  .m-look-item.is-tall, .m-look-item.is-wide, .m-look-item.is-small { --h: min(52svh, 460px); }
  .m-look-item.is-small { --h: min(40svh, 340px); }
}

/* hero photo: wide version on laptops, tall version on phones (both Lovable outpaints of the original Fawn photo) */
.m-frame-media picture { display: block; width: 100%; height: 100%; }
.m-frame-img { object-position: 58% 40%; }
@media (max-width: 899px) { .m-frame-img { object-position: 46% 42%; } }
@media (min-width: 900px) {
  /* the model stands right of centre in the wide photo, so the reveal card sits on the open wall to the left */
  .m-hero-over { left: var(--m-pad); right: auto; }
}

/* =====================================================================
   UI/UX REVIEW PASS (ui-ux-pro-max: contrast, spacing scale, content priority, readable sizes)
   ===================================================================== */
.m-finale, .m-foot, .m-card.is-wine, .m-frame { --m-focus: var(--m-gold); }
.m-step-n, .m-menu-nav a span { color: var(--m-gold-ink); }
.concept-maison { --m-sec: clamp(72px, 9vw, 150px); }
.m-marquee { padding: clamp(28px, 4vw, 64px) 0; }
.m-collection { padding-top: var(--m-sec); }
.m-story, .m-order, .m-archive { padding-block: var(--m-sec); }
.m-steps p, .m-info p, .m-pillars p, .m-muted { font-size: 16px; }
.m-note { font-size: 15px; }
.m-reassure { font-size: 13.5px; }
[lang="ar"] .m-reassure { font-size: 14px; }
.m-sec-lede, .m-promise { text-wrap: pretty; }

/* order journey: open on laptops, folded on phones (secondary detail) */
.m-journey { border-top: 1px solid var(--m-line); padding-top: 4px; }
.m-journey > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font: 500 15px/1.3 var(--m-ui); color: var(--m-wine); }
.m-journey > summary::-webkit-details-marker { display: none; }
.m-journey > summary::after { content: "+"; font: 300 22px/1 var(--m-ui); transition: transform .4s var(--m-ease); }
.m-journey[open] > summary::after { transform: rotate(45deg); }
.m-journey > summary:focus-visible { outline: 2px solid var(--m-focus); outline-offset: 2px; }

.m-foot .m-nowrap { white-space: nowrap; }
@media (max-width: 899px) {
  .m-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 44px; }
  .m-foot-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .m-foot-brand { grid-column: 1 / -1; justify-items: center; text-align: center; }
  .m-legal { text-align: center; }
  .m-journey { margin-top: 28px; }
}

/* ---------- bag button + product page secondary actions ---------- */
.m-bag { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--m-wine); }
.m-bag:hover { background: rgba(61, 12, 17, .06); }
.m-bag:focus-visible { outline: 2px solid var(--m-focus); }
.m-bag b, .yb-menu-bag b { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--m-wine); color: var(--m-ivory); font: 600 11px/1 var(--m-ui); box-shadow: 0 0 0 2px var(--m-cream); }
.yb-menu-bag { position: relative; }
.yb-menu-bag b { position: static; box-shadow: none; margin-inline-start: 8px; }
.m-pdp-alt { display: flex; flex-wrap: wrap; gap: 4px 22px; }
@media (max-width: 899px) {
  .m-head .m-lang { display: none; } /* language lives in the menu on phones */
}

/* store information written in the dashboard (size chart, shipping & returns) */
.concept-maison .y-info p { margin: 0 0 .7em; font: 400 15.5px/1.75 var(--m-ui); color: var(--m-muted); white-space: pre-line; }