/* ============================================================================
   AZ PERFUMES — MAISON
   Core design system: tokens, base, layout, controls, header, footer, cards.

   Art direction — two rooms.
     A white gallery room (product photography under even light) alternating
     with a lacquer-black room (the seal, the offer). Achromatic neutrals at
     chroma 0 so nothing drifts warm, plus one chromatic voice: seal red, the
     colour of wax on a sealed box. Gold was the obvious pull; wax carries the
     authenticity story the shop actually makes.

   Type — Bodoni Moda (didone display, perfume-label lineage) against Jost
   (geometric sans). Contrast axis, not two cousins. Arabic swaps to Noto
   Naskh / Noto Sans Arabic and drops the negative tracking.

   `!important` appears exactly twice by design: on `[hidden]`, which has to beat
   component `display` rules, and in the reduced-motion block, which has to beat
   everything. Anywhere else, fix the specificity instead.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
  color-scheme: light;

  /* Ink and surface. Achromatic on purpose — no warm near-white. */
  --ink:              oklch(0.155 0 0);
  --ink-2:            oklch(0.34 0 0);   /* 8.7:1 on white */
  --ink-3:            oklch(0.46 0 0);   /* 5.1:1 on white — body muted floor */
  --ink-4:            oklch(0.62 0 0);   /* rules and decoration only */
  --sheet:          oklch(1 0 0);
  --sheet-2:        oklch(0.972 0 0);
  --sheet-3:        oklch(0.941 0 0);
  --rule:             oklch(0.885 0 0);
  --rule-2:           oklch(0.80 0 0);

  /* The lacquer room. */
  --lacquer:          oklch(0.155 0 0);
  --lacquer-2:        oklch(0.215 0 0);
  --lacquer-3:        oklch(0.275 0 0);
  --on-lacquer:       oklch(0.985 0 0);
  --on-lacquer-2:     oklch(0.755 0 0); /* 8.1:1 on lacquer */
  --rule-lacquer:     oklch(1 0 0 / 0.17);
  --rule-lacquer-2:   oklch(1 0 0 / 0.30);

  /* Seal — the single chromatic voice, ≤8% of any screen. */
  --seal:             oklch(0.505 0.185 27);  /* 6.2:1 on white */
  --seal-lift:        oklch(0.665 0.17 30);   /* 5.4:1 on lacquer */
  --seal-wash:        oklch(0.505 0.185 27 / 0.08);

  /* WhatsApp. The brand green, used only for WhatsApp actions so the colour
     keeps meaning one thing. Labels on it are inked, not white: white on
     #25D366 is 2.0:1 and fails. The icon-only float keeps the white glyph,
     which is the logotype and exempt (WCAG 1.4.11). */
  --wa:               #25d366;
  --wa-press:         #1eb757;
  --on-wa:            var(--ink);             /* 8.6:1 on the green */

  /* ---- Glass ------------------------------------------------------------
     Three weights. `-thin` is chrome you look through (header, tab bar);
     `-panel` carries body text and is opaque enough to hold 4.5:1 over any
     ground; `-dark` is the same idea on the lacquer rooms. Every one has a
     solid fallback further down for browsers without backdrop-filter and for
     visitors who ask for reduced transparency. */
  --glass-thin:       oklch(1 0 0 / 0.62);
  --glass-panel:      oklch(1 0 0 / 0.82);
  --glass-dark:       oklch(0.20 0 0 / 0.58);
  --glass-dark-panel: oklch(0.17 0 0 / 0.80);
  --glass-blur:       blur(20px) saturate(1.7);
  --glass-blur-soft:  blur(12px) saturate(1.4);
  /* A glass edge is two things: a hairline that separates the panel from the
     ground, and a lit highlight along its top. White-on-white gives only the
     second, which is why light-page glass reads flat without both. */
  --glass-edge:       oklch(0.155 0 0 / 0.09);
  --glass-edge-dark:  oklch(1 0 0 / 0.16);
  --glass-sheen:      inset 0 1px 0 oklch(1 0 0 / 0.9);
  --glass-lift:       var(--glass-sheen), 0 22px 48px -24px oklch(0.155 0 0 / 0.30);

  /* Feedback */
  --positive:         oklch(0.46 0.11 155);
  --positive-wash:    oklch(0.46 0.11 155 / 0.10);
  --critical:         oklch(0.50 0.19 27);
  --critical-wash:    oklch(0.50 0.19 27 / 0.09);
  --notice:           oklch(0.52 0.12 75);

  /* Type */
  --font-display: "Bodoni Moda", "Bodoni MT", "Didot", "Times New Roman", serif;
  --font-text: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-arabic-display: "Noto Naskh Arabic", "Amiri", serif;
  --font-arabic-text: "Noto Sans Arabic", "Jost", Arial, sans-serif;

  --t-2xs: 0.6875rem;
  --t-xs:  0.75rem;
  --t-sm:  0.8125rem;
  --t-md:  0.9375rem;
  --t-base: 1rem;
  --t-lg:  clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
  --t-xl:  clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem);

  --d-xs: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --d-sm: clamp(1.75rem, 1.9vw + 1.25rem, 2.625rem);
  --d-md: clamp(2.125rem, 3.2vw + 1.15rem, 3.75rem);
  --d-lg: clamp(2.625rem, 5.4vw + 0.9rem, 5.25rem);   /* 84px ceiling */

  /* Space — 4pt rhythm */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --gutter: clamp(20px, 4.2vw, 60px);
  --band: clamp(56px, 7vw, 112px);
  --shell: 1400px;
  --reading: 68ch;

  /* Shape — a maison signs with hairlines, not radii. */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;
  --r-arch: 50% 50% var(--r-2) var(--r-2) / 40% 40% 3% 3%;

  /* Elevation */
  --lift-1: 0 1px 2px oklch(0.155 0 0 / 0.05);
  --lift-2: 0 8px 24px -12px oklch(0.155 0 0 / 0.20);
  --lift-3: 0 24px 60px -24px oklch(0.155 0 0 / 0.28);
  --lift-drawer: 0 0 80px oklch(0.155 0 0 / 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 340ms;
  --dur-4: 520ms;

  /* Stacking — semantic, never arbitrary */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay-ui: 40;
  --z-sticky: 100;
  --z-mobile-bar: 200;
  --z-scrim: 900;
  --z-drawer: 1000;
  --z-toast: 1200;
}

/* ---------------------------------------------------- 2. RESET AND BASE */

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

/* The one justified !important in this file. `hidden` is a UA-stylesheet
   `display: none`, so any component rule that sets `display: grid/flex` beats
   it and the "hidden" element stays on screen. Everything below relies on
   `hidden` actually hiding. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  /* The ground lives here, not on <body>: an opaque body background would
     paint straight over the sillage layer below and hide it entirely. */
  background: var(--sheet);
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

html[dir="rtl"] body { font-family: var(--font-arabic-text); }

/* ---- The sillage --------------------------------------------------------
   Glass only reads as glass when something behind it varies. A flat white page
   under a frosted panel just looks like a grey box, so the page gets a ground:
   slow, enormous, very soft blooms drifting behind everything. They stay
   achromatic apart from one faint seal-red pass, so the monochrome identity
   survives and the glass still has something to refract.
   Fixed and behind every stacking context, so it never intercepts a click. */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36rem 28rem at 14% 10%, oklch(0.505 0.185 27 / 0.11), transparent 60%),
    radial-gradient(44rem 32rem at 86% 24%, oklch(0.60 0 0 / 0.46), transparent 62%),
    radial-gradient(40rem 30rem at 74% 86%, oklch(0.52 0 0 / 0.38), transparent 60%),
    radial-gradient(32rem 26rem at 22% 74%, oklch(0.505 0.185 27 / 0.08), transparent 58%),
    radial-gradient(30rem 24rem at 50% 46%, oklch(0.72 0 0 / 0.30), transparent 62%);
  animation: sillage 38s var(--ease-in-out) infinite alternate;
}

@keyframes sillage {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2.5%, 0) scale(1.12); }
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h4 { line-height: 1.25; }

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  font-family: var(--font-arabic-display);
  letter-spacing: 0;
  line-height: 1.35;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.m-on-lacquer :focus-visible,
.m-lacquer :focus-visible { outline-color: var(--seal-lift); }

::selection { background: var(--ink); color: var(--sheet); }

.m-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.m-skip {
  position: fixed; inset-inline-start: var(--s-4); top: var(--s-4);
  z-index: var(--z-toast);
  padding: var(--s-3) var(--s-4);
  background: var(--ink); color: var(--sheet);
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
}
.m-skip:focus-visible { transform: translateY(0); }

/* ------------------------------------------------ 3. TYPE PRIMITIVES */

/* The maison mark. Used exactly where the brand signs its name — the header,
   the hero, the seal. Not as an eyebrow above every section. */
.m-mark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-text);
  font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-3);
}
.m-mark::before {
  content: ""; inline-size: 28px; block-size: 1px;
  background: var(--ink-4); flex: 0 0 auto;
}
.m-on-lacquer .m-mark { color: var(--on-lacquer-2); }
.m-on-lacquer .m-mark::before { background: var(--rule-lacquer-2); }
html[dir="rtl"] .m-mark { letter-spacing: 0; }

.m-display-lg { font-size: var(--d-lg); }
.m-display-md { font-size: var(--d-md); }
.m-display-sm { font-size: var(--d-sm); }
.m-display-xs { font-size: var(--d-xs); }

.m-italic { font-style: italic; font-weight: 400; }

.m-lede {
  max-width: 54ch;
  font-size: var(--t-lg);
  line-height: 1.7;
  color: var(--ink-2);
}
.m-on-lacquer .m-lede { color: var(--on-lacquer-2); }

.m-body { max-width: var(--reading); color: var(--ink-2); }
.m-quiet { color: var(--ink-3); font-size: var(--t-md); }
.m-on-lacquer .m-quiet { color: var(--on-lacquer-2); }

.m-label {
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
html[dir="rtl"] .m-label { letter-spacing: 0; text-transform: none; }

.m-num { font-variant-numeric: tabular-nums lining-nums; }

.m-rule { block-size: 1px; border: 0; margin: 0; background: var(--rule); }
.m-on-lacquer .m-rule { background: var(--rule-lacquer); }

/* --------------------------------------------------------- 4. LAYOUT */

.m-shell {
  inline-size: min(var(--shell), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.m-shell-narrow { --shell: 1020px; }

.m-band { padding-block: var(--band); }
.m-band-tight { padding-block: clamp(36px, 4.5vw, 68px); }

.m-lacquer {
  background: var(--lacquer);
  color: var(--on-lacquer);
}
.m-tint { background: var(--sheet-2); }

.m-stack { display: grid; gap: var(--s-4); }
.m-stack-lg { display: grid; gap: var(--s-6); }
.m-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* Section head: heading on the left, one action on the right, hairline under.
   No kicker by default — the heading carries it. */
.m-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5) var(--s-6); flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
/* Sized in rem, not ch: `ch` here resolves against the inherited body font, not
   the display heading inside, which caps the column at a fraction of the
   intended width and shatters the headline into four lines. */
.m-head > :first-child { flex: 1 1 420px; max-inline-size: 46rem; }
.m-head > :first-child + * { flex: 0 1 auto; }
.m-on-lacquer .m-head { border-bottom-color: var(--rule-lacquer); }

/* Arch aperture — the maison's crop. */
.m-arch {
  overflow: hidden;
  border-radius: var(--r-arch);
  background: var(--sheet-2);
}
.m-oval { overflow: hidden; border-radius: 50%; background: var(--sheet-2); }

/* ------------------------------------------------------- 5. CONTROLS */

.m-btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--sheet);
  --btn-edge: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-block-size: 48px;
  padding-inline: var(--s-5);
  border: 1px solid var(--btn-edge);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center;
  position: relative;
  transition:
    background var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    opacity var(--dur-1) linear;
}
html[dir="rtl"] .m-btn { letter-spacing: 0; text-transform: none; font-weight: 600; }

.m-btn:hover { --btn-bg: var(--lacquer-2); --btn-edge: var(--lacquer-2); }
.m-btn:active { --btn-bg: var(--lacquer-3); }

.m-btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-edge: var(--rule-2);
}
.m-btn-ghost:hover { --btn-bg: transparent; --btn-fg: var(--ink); --btn-edge: var(--ink); }
.m-btn-ghost:active { --btn-bg: var(--sheet-2); }

.m-btn-invert {
  --btn-bg: var(--sheet); --btn-fg: var(--ink); --btn-edge: var(--sheet);
}
.m-btn-invert:hover { --btn-bg: oklch(0.90 0 0); --btn-edge: oklch(0.90 0 0); }

.m-btn-quiet {
  --btn-bg: transparent; --btn-fg: var(--on-lacquer); --btn-edge: var(--rule-lacquer-2);
}
.m-btn-quiet:hover { --btn-bg: oklch(1 0 0 / 0.08); --btn-edge: var(--on-lacquer); }

/* WhatsApp. Inked label on the brand green — white on #25D366 is 2.0:1 and
   would fail; the ink pairing is 8.6:1 and still reads unmistakably WhatsApp. */
.m-btn-wa {
  --btn-bg: var(--wa); --btn-fg: var(--on-wa); --btn-edge: var(--wa);
}
.m-btn-wa:hover { --btn-bg: var(--wa-press); --btn-edge: var(--wa-press); }
.m-btn-wa:active { --btn-bg: var(--wa-press); }
.m-btn-wa .m-i { stroke-width: 1.6; }

/* Outlined variant: the green is the border and the glyph, the label inherits
   the room's own text colour. Green *text* would be 2.0:1 on white and 8.6:1 on
   lacquer — inheriting keeps it right in both without a second rule. */
.m-btn-wa-ghost {
  --btn-bg: transparent; --btn-fg: inherit; --btn-edge: var(--wa);
}
.m-btn-wa-ghost .m-i { color: var(--wa); }
.m-btn-wa-ghost:hover { --btn-bg: oklch(0.78 0.19 149 / 0.12); --btn-edge: var(--wa); }
.m-btn-wa-ghost:active { --btn-bg: oklch(0.78 0.19 149 / 0.2); }

.m-btn-wide { inline-size: 100%; }
.m-btn-sm { min-block-size: 40px; padding-inline: var(--s-4); font-size: var(--t-xs); }

.m-btn[disabled], .m-btn[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed; pointer-events: none;
}

.m-btn .m-i { transition: transform var(--dur-2) var(--ease-out); }
.m-btn:hover .m-i-arrow { transform: translateX(3px); }
html[dir="rtl"] .m-btn:hover .m-i-arrow { transform: translateX(-3px); }

/* Text link with a rule that draws in from the leading edge. */
.m-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: 44px;
  padding-block: var(--s-1);
  font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  position: relative;
}
html[dir="rtl"] .m-link { letter-spacing: 0; text-transform: none; font-weight: 600; }
.m-link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  block-size: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.m-link:hover::after { transform: scaleX(1); }
.m-link .m-i-arrow { transition: transform var(--dur-2) var(--ease-out); }
.m-link:hover .m-i-arrow { transform: translateX(3px); }
html[dir="rtl"] .m-link:hover .m-i-arrow { transform: translateX(-3px); }
.m-on-lacquer .m-link { color: var(--on-lacquer); }

/* Icon button — 44px minimum, hit area larger than the glyph. */
.m-iconbtn {
  inline-size: 44px; block-size: 44px;
  display: inline-grid; place-items: center;
  color: var(--ink);
  border: 1px solid transparent;
  position: relative;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.m-iconbtn:hover { background: var(--sheet-2); border-color: var(--rule); }
.m-iconbtn:active { background: var(--sheet-3); }

.m-i { inline-size: 20px; block-size: 20px; flex: 0 0 auto; stroke-width: 1.35; }
.m-i-sm { inline-size: 16px; block-size: 16px; }
.m-i-lg { inline-size: 26px; block-size: 26px; }
html[dir="rtl"] .m-i-arrow, html[dir="rtl"] .m-i-chevron-end { transform: scaleX(-1); }

/* Count bubble on cart / drawer triggers. */
.m-count {
  position: absolute; top: 4px; inset-inline-end: 2px;
  min-inline-size: 18px; block-size: 18px; padding-inline: 4px;
  display: grid; place-items: center;
  background: var(--seal); color: var(--sheet);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Fields */
.m-field { display: grid; gap: var(--s-2); }
.m-field-full { grid-column: 1 / -1; }

.m-field > label,
.m-field-label {
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}
html[dir="rtl"] .m-field > label,
html[dir="rtl"] .m-field-label { letter-spacing: 0; text-transform: none; }
.m-req { color: var(--seal); }

.m-input, .m-select, .m-textarea {
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-2);
  border-radius: 13px;
  corner-shape: squircle;
  background: var(--sheet);
  color: var(--ink);
  font-size: var(--t-base);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.m-textarea { min-block-size: 108px; resize: vertical; line-height: 1.6; }
.m-input::placeholder, .m-textarea::placeholder { color: var(--ink-3); opacity: 1; }

.m-input:hover, .m-select:hover, .m-textarea:hover { border-color: var(--ink-4); }
.m-input:focus, .m-select:focus, .m-textarea:focus {
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.m-input:focus-visible, .m-select:focus-visible, .m-textarea:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}
.m-input[aria-invalid="true"], .m-textarea[aria-invalid="true"], .m-select[aria-invalid="true"] {
  border-color: var(--critical);
  box-shadow: inset 0 -2px 0 var(--critical);
}
.m-input[readonly] { background: var(--sheet-2); border-style: dashed; }
.m-input:disabled, .m-select:disabled, .m-textarea:disabled {
  opacity: 0.45; cursor: not-allowed; background: var(--sheet-2);
}

.m-select {
  appearance: none;
  padding-inline-end: var(--s-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right calc(var(--s-5) + 4px) center, right var(--s-5) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[dir="rtl"] .m-select {
  background-position: left var(--s-5) center, left calc(var(--s-5) + 4px) center;
}

.m-help { font-size: var(--t-sm); color: var(--ink-3); }
.m-error {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--critical);
}
.m-error .m-i { margin-block-start: 2px; }

.m-checkline {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--rule);
  font-size: var(--t-md); color: var(--ink-2);
  cursor: pointer;
}
.m-checkline input { inline-size: 18px; block-size: 18px; margin-block-start: 3px; accent-color: var(--ink); flex: 0 0 auto; }

.m-notice {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-3);
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-lift);
  font-size: var(--t-md);
}
.m-notice-critical { border-color: var(--critical); background: var(--critical-wash); color: var(--critical); }
.m-notice-positive { border-color: var(--positive); background: var(--positive-wash); color: var(--positive); }
.m-notice .m-i { margin-block-start: 3px; color: currentColor; }

/* Breadcrumb */
.m-crumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-sm); color: var(--ink-3);
}
/* Breadcrumb links are navigation, so they get a real target rather than the
   height of their own 13px type. */
.m-crumbs a, .m-crumbs [aria-current] {
  display: inline-flex; align-items: center;
  min-block-size: 40px;
}
.m-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.m-crumbs [aria-current] { color: var(--ink); }
.m-crumbs .m-i { color: var(--ink-4); }

/* Pill filters */
.m-pills { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.m-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: 40px; padding-inline: var(--s-4);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 500;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.m-pill:hover { border-color: var(--ink-4); color: var(--ink); }
.m-pill[aria-pressed="true"], .m-pill.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--sheet);
}
.m-pill span:last-child:not(:first-child) { color: inherit; opacity: 0.62; font-variant-numeric: tabular-nums; }

/* Empty state — teaches what to do next, never "nothing here". */
.m-empty {
  display: grid; justify-items: center; gap: var(--s-4);
  padding: clamp(40px, 7vw, 88px) var(--gutter);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-3);
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-lift);
  text-align: center;
}
.m-empty .m-i { inline-size: 34px; block-size: 34px; color: var(--ink-4); stroke-width: 1; }
.m-empty p { max-width: 46ch; color: var(--ink-3); }

/* ---------------------------------------------------- 6. HEADER + NAV */

.m-announce {
  background: var(--lacquer);
  color: var(--on-lacquer-2);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[dir="rtl"] .m-announce { letter-spacing: 0; text-transform: none; }
.m-announce .m-shell {
  min-block-size: 38px;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5);
  overflow: hidden;
}
.m-announce b { color: var(--on-lacquer); font-weight: 500; }
.m-announce-sep { color: var(--rule-lacquer-2); }
@media (max-width: 700px) {
  .m-announce-extra { display: none; }
}

.m-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--glass-thin);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

.m-header-bar {
  min-block-size: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
}

/* The wordmark is a fixed lockup, not running text — it stays left-to-right in
   Arabic so it never reads "Perfumes AZ". */
.m-brand {
  display: inline-flex; align-items: baseline; gap: 0.42em;
  justify-self: center; direction: ltr;
  min-block-size: 44px;                       /* the wordmark is a link too */
  align-content: center; flex-wrap: wrap;
  padding-block: var(--s-2);
}
.m-brand-monogram {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}
.m-brand-word {
  font-family: var(--font-text);
  font-size: var(--t-2xs);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-inline-start: 0.1em;
}
@media (max-width: 520px) {
  .m-brand-word { letter-spacing: 0.26em; font-size: 10px; }
}

/* Drawn monogram lockup. Sized by height so the artwork keeps its proportions,
   and inverted wherever it sits on a lacquer surface. */
.m-brand-logo {
  block-size: clamp(38px, 4vw, 52px);
  inline-size: auto;
  object-fit: contain;
}
.m-on-lacquer .m-brand-logo,
.m-footer .m-brand-logo { filter: invert(1); }
@media (max-width: 520px) {
  .m-brand-logo { block-size: 34px; }
}

.m-header-start, .m-header-end { display: flex; align-items: center; gap: var(--s-1); }
.m-header-end { justify-content: flex-end; }

.m-nav-desk { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.m-nav-desk a {
  position: relative;
  display: inline-flex; align-items: center;
  min-block-size: 44px;
  white-space: nowrap;
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur-1) var(--ease-out);
}
html[dir="rtl"] .m-nav-desk a { letter-spacing: 0; text-transform: none; font-size: var(--t-md); }
.m-nav-desk a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 14px;
  block-size: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.m-nav-desk a:hover { color: var(--ink); }
.m-nav-desk a:hover::after { transform: scaleX(1); }
.m-nav-desk a[aria-current="page"] { color: var(--ink); }
.m-nav-desk a[aria-current="page"]::after { transform: scaleX(1); background: var(--seal); }

/* Language switch — a row of three, current one inked. */
.m-lang { display: inline-flex; border: 1px solid var(--rule); }
.m-lang button {
  min-inline-size: 44px; min-block-size: 44px;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink-3);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.m-lang button + button { border-inline-start: 1px solid var(--rule); }
.m-lang button:hover { color: var(--ink); background: var(--sheet-2); }
.m-lang button[aria-pressed="true"] { color: var(--sheet); background: var(--ink); }

/* Search, opened from the header as a full-width sheet under the bar. */
.m-search {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--dur-3) var(--ease-out), border-color var(--dur-3) linear;
}
.m-search[data-open="true"] { grid-template-rows: 1fr; border-top-color: var(--rule); }

/* Collapsing a grid row to 0fr hides the panel but leaves its field in the tab
   order, so a keyboard lands in an invisible search box. `visibility` takes it
   out; the delay lets the collapse finish animating before it disappears. */
.m-search-inner {
  overflow: hidden;
  min-block-size: 0;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-3);
}
.m-search[data-open="true"] .m-search-inner {
  visibility: visible;
  transition-delay: 0s;
}
.m-search-form {
  display: flex; align-items: center; gap: var(--s-3);
  padding-block: var(--s-4);
}
.m-search-form input {
  flex: 1; min-inline-size: 0;
  border: 0; background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
html[dir="rtl"] .m-search-form input { font-family: var(--font-arabic-display); }
.m-search-form input:focus { border-bottom-color: var(--ink); }

.m-suggest {
  border-top: 1px solid var(--rule);
  max-block-size: min(58vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.m-suggest:empty { display: none; }
.m-suggest a {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.m-suggest a:last-child { border-bottom: 0; }
.m-suggest a:hover, .m-suggest a.is-active { background: var(--sheet-2); }
.m-suggest-thumb {
  inline-size: 52px; block-size: 52px; flex: 0 0 auto;
  background: var(--sheet-2); overflow: hidden;
}
.m-suggest-thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.m-suggest-body { min-inline-size: 0; flex: 1; }
.m-suggest-name {
  font-size: var(--t-md); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-suggest-cat { font-size: var(--t-xs); color: var(--ink-3); }
.m-suggest-price { font-size: var(--t-md); color: var(--ink); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.m-suggest-none { padding: var(--s-5) 0; color: var(--ink-3); font-size: var(--t-md); }

/* Category names come from the shop, so their length is unknown. The desktop
   row hands over to the drawer early rather than wrapping into two lines. */
@media (max-width: 1240px) {
  .m-nav-desk { display: none; }
  .m-header-bar { grid-template-columns: auto 1fr auto; min-block-size: 64px; }
  .m-brand { justify-self: start; }
}
@media (max-width: 860px) {
  /* Three language chips plus search plus cart do not fit beside the wordmark
     on a 375px screen. The switcher leads the drawer instead, one tap away. */
  .m-header-end .m-lang { display: none; }
}
@media (min-width: 1241px) {
  .m-menu-btn { display: none; }
}

/* ------------------------------------------------------- 7. DRAWER */

/* Blurring the scrim is the one place the effect is doing real work: it tells
   you the page behind is dismissible, rather than decorating. */
.m-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: oklch(0.155 0 0 / 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.m-scrim[data-open="true"] { opacity: 1; visibility: visible; }

.m-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  z-index: var(--z-drawer);
  inline-size: min(400px, 90vw);
  display: flex; flex-direction: column;
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-inline-end: 1px solid var(--glass-edge);
  box-shadow: var(--lift-drawer);
  transform: translateX(-101%);
  visibility: hidden;
  transition: transform var(--dur-4) var(--ease-out), visibility var(--dur-4);
  padding-block-start: env(safe-area-inset-top);
}
html[dir="rtl"] .m-drawer { transform: translateX(101%); }
.m-drawer[data-open="true"],
html[dir="rtl"] .m-drawer[data-open="true"] { transform: translateX(0); visibility: visible; }

.m-drawer-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.m-drawer-body {
  flex: 1 1 auto; min-block-size: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5) var(--s-5) var(--s-8);
}
.m-drawer-foot {
  flex: 0 0 auto;
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  display: grid; gap: var(--s-3);
}
.m-drawer-group + .m-drawer-group { margin-block-start: var(--s-6); }
.m-drawer-group > .m-label { display: block; margin-bottom: var(--s-3); }
.m-drawer-links a {
  display: flex; align-items: center; gap: var(--s-3);
  min-block-size: 52px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-lg);
  transition: padding-inline-start var(--dur-2) var(--ease-out);
}
.m-drawer-links a:hover { padding-inline-start: var(--s-2); }
.m-drawer-links a .m-i-chevron-end { margin-inline-start: auto; color: var(--ink-4); }

/* ------------------------------------------------- 8. MOBILE TAB BAR */

.m-tabbar { display: none; }
@media (max-width: 860px) {
  .m-tabbar {
    position: fixed; inset-inline: 0; bottom: 0;
    z-index: var(--z-mobile-bar);
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--rule);
    box-shadow: inset 0 1px 0 var(--glass-edge);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tabbar a, .m-tabbar button {
    position: relative;
    min-block-size: 56px;
    display: grid; justify-items: center; align-content: center; gap: 3px;
    color: var(--ink-3);
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    transition: color var(--dur-1) var(--ease-out);
  }
  html[dir="rtl"] .m-tabbar a, html[dir="rtl"] .m-tabbar button { letter-spacing: 0; text-transform: none; font-size: 11px; }
  .m-tabbar a[aria-current="page"] { color: var(--ink); }
  .m-tabbar a[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; inset-inline: 30%;
    block-size: 2px; background: var(--seal);
  }
  .m-tabbar .m-count { top: 6px; inset-inline-end: calc(50% - 22px); }
  body { padding-bottom: 56px; }
}

/* --------------------------------------------------- 9. PRODUCT CARD */

.m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-6) var(--s-5);
}
.m-grid-wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 560px) {
  .m-grid, .m-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
}

.m-card { position: relative; display: flex; flex-direction: column; }

.m-card-media {
  position: relative;
  z-index: 2;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-lift);
  transition: box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.m-card:hover .m-card-media {
  border-color: oklch(0.155 0 0 / 0.16);
  box-shadow: var(--glass-sheen), 0 30px 60px -24px oklch(0.155 0 0 / 0.38);
}
.m-card-media img {
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  padding: 12%;
  transition: transform var(--dur-4) var(--ease-out);
}
.m-card-media-hit {
  position: absolute;
  inset: 0;
  z-index: 20;
  cursor: pointer;
}
.m-card-media-hit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -4px;
}
.m-card:hover .m-card-media img { transform: scale(1.05); }

/* A shop can list a reference before its photography lands. Say so with the
   monogram rather than leaving a grey hole. */
.m-nophoto {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--s-2);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.m-nophoto small {
  font-family: var(--font-text);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.m-on-lacquer .m-nophoto { color: var(--rule-lacquer-2); }

.m-card-badge {
  position: absolute; top: var(--s-3); inset-inline-start: var(--s-3);
  z-index: var(--z-raised);
  padding: 5px var(--s-2);
  background: var(--glass-panel);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-edge);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
html[dir="rtl"] .m-card-badge { letter-spacing: 0; text-transform: none; font-size: var(--t-xs); }
.m-card-badge-seal { background: var(--seal); border-color: var(--seal); color: var(--sheet); }

/* Quick-add: a bar that rises out of the image edge on hover, and is simply
   always visible on touch — hover is not an affordance on a phone. */
/* Sits above the card's stretched title link, which is what makes the rest of
   the card clickable. */
.m-card-quick {
  position: absolute; inset-inline: 0; bottom: 0;
  z-index: var(--z-overlay-ui);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 48px;
  /* Dark glass over the product photograph — the one place on a card where
     there is genuinely something behind to refract. */
  background: var(--glass-dark-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-edge-dark);
  color: var(--on-lacquer);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-out), background var(--dur-1) var(--ease-out);
}
html[dir="rtl"] .m-card-quick { letter-spacing: 0; text-transform: none; }
.m-card:hover .m-card-quick,
.m-card-quick:focus-visible { transform: translateY(0); }
.m-card-quick:hover { background: oklch(0.14 0 0 / 0.9); }
.m-card-quick[disabled] { opacity: 1; }
@media (hover: none) {
  .m-card-quick { transform: translateY(0); }
}

.m-card-body { display: grid; gap: var(--s-1); padding-block-start: var(--s-4); }
.m-card-house {
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[dir="rtl"] .m-card-house { letter-spacing: 0; text-transform: none; }
.m-card-name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
html[dir="rtl"] .m-card-name { font-family: var(--font-arabic-display); letter-spacing: 0; }
.m-card-name a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.m-card-price {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-block-start: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.m-card-price strong { font-weight: 500; font-size: var(--t-md); }
.m-card-price s { color: var(--ink-3); font-size: var(--t-sm); text-decoration-thickness: 1px; }
.m-card-off { color: var(--seal); font-size: var(--t-xs); font-weight: 500; }

.m-card-stock {
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: var(--s-2);
  font-size: var(--t-xs); color: var(--ink-3);
}
.m-card-stock::before {
  content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--positive); flex: 0 0 auto;
}
.m-card-stock-out::before { background: var(--ink-4); }

/* -------------------------------------------------------- 10. RAIL */

.m-rail { position: relative; }
.m-rail-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.m-rail-track::-webkit-scrollbar { display: none; }
.m-rail-track > * { scroll-snap-align: start; }
.m-rail-nav { display: flex; gap: var(--s-2); }
.m-rail-nav button {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.m-rail-nav button:hover:not([disabled]) { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.m-rail-nav button[disabled] { opacity: 0.3; cursor: default; }

/* ------------------------------------------------------- 11. FOOTER */

.m-footer {
  background: var(--lacquer);
  color: var(--on-lacquer);
  margin-block-start: var(--band);
}
.m-footer-promise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-bottom: 1px solid var(--rule-lacquer);
}
.m-footer-promise > div {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
}
.m-footer-promise > div + div { border-inline-start: 1px solid var(--rule-lacquer); }
.m-footer-promise .m-i { color: var(--on-lacquer); stroke-width: 1.2; }
.m-footer-promise b { display: block; font-weight: 500; font-size: var(--t-md); }
.m-footer-promise span { display: block; font-size: var(--t-sm); color: var(--on-lacquer-2); }
@media (max-width: 720px) {
  .m-footer-promise > div + div { border-inline-start: 0; border-top: 1px solid var(--rule-lacquer); }
}

.m-footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 0.85fr));
  gap: var(--s-7) var(--s-6);
  padding-block: clamp(40px, 5vw, 72px);
}
.m-footer-seal { display: grid; gap: var(--s-4); justify-items: start; }
.m-footer-seal img {
  inline-size: 132px;
  filter: invert(1);
  opacity: 0.92;
}
.m-footer-seal p { color: var(--on-lacquer-2); font-size: var(--t-md); max-width: 40ch; }

.m-footer-col h4 {
  font-family: var(--font-text);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-lacquer-2);
  margin-bottom: var(--s-4);
}
html[dir="rtl"] .m-footer-col h4 { letter-spacing: 0; text-transform: none; }
.m-footer-col li { display: flex; flex-direction: column; justify-content: center; min-block-size: 40px; }
.m-footer-col a, .m-footer-col span { color: var(--on-lacquer); font-size: var(--t-md); }
.m-footer-col a {
  display: inline-flex; align-items: center;
  min-block-size: 44px;                        /* comfortable on a phone */
  transition: color var(--dur-1) var(--ease-out);
}
/* A link that also carries a caption still needs a comfortable target; only the
   caption sits outside it. */
.m-footer-col li:has(small) a { min-block-size: 40px; }
.m-footer-col li:has(small) { min-block-size: 60px; }
.m-footer-col a:hover { color: var(--seal-lift); }
.m-footer-col small { display: block; color: var(--on-lacquer-2); font-size: var(--t-xs); }

.m-socials { display: flex; gap: var(--s-2); }
.m-socials a {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-lacquer);
  color: var(--on-lacquer);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.m-socials a:hover { background: oklch(1 0 0 / 0.1); border-color: var(--on-lacquer); }

.m-footer-base {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
  padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule-lacquer);
  color: var(--on-lacquer-2);
  font-size: var(--t-sm);
}
.m-footer-base a { display: inline-flex; align-items: center; min-block-size: 44px; }
.m-footer-base a:hover { color: var(--on-lacquer); }
.m-footer-base nav { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
  .m-footer-grid { grid-template-columns: 1fr 1fr; }
  .m-footer-seal { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .m-footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 860px) {
  .m-footer { margin-block-end: 56px; }
}

/* -------------------------------------------------------- 12. TOASTS */

.m-toasts {
  position: fixed; z-index: var(--z-toast);
  inset-inline-end: var(--s-5); bottom: var(--s-5);
  display: grid; gap: var(--s-2);
  inline-size: min(360px, calc(100vw - var(--s-5) * 2));
  pointer-events: none;
}
@media (max-width: 860px) { .m-toasts { bottom: calc(56px + var(--s-3)); } }

/* Dark glass over whatever the page is showing, a hairline lit edge, a status
   rule down the leading side, and a timer bar that drains so the auto-dismiss
   is visible rather than a surprise. */
.m-toast {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + 2px);
  background: var(--glass-dark-panel);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge-dark);
  border-radius: var(--r-3);
  box-shadow: 0 24px 48px -20px oklch(0 0 0 / 0.6);
  color: var(--on-lacquer);
  font-size: var(--t-md);
  line-height: 1.45;
  animation: m-toast-in var(--dur-3) var(--ease-out) both;
}

/* The status mark: an outlined glyph in a tinted well, not a filled blob that
   swallows its own icon. */
.m-toast > .m-i {
  inline-size: 34px; block-size: 34px;
  padding: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.m-toast > .m-i { stroke-width: 1.7; }
.m-toast-positive > .m-i {
  color: oklch(0.86 0.17 152);
  background: oklch(0.86 0.17 152 / 0.20);
  box-shadow: inset 0 0 0 1px oklch(0.86 0.17 152 / 0.55);
}
.m-toast-critical > .m-i {
  color: oklch(0.76 0.18 30);
  background: oklch(0.76 0.18 30 / 0.20);
  box-shadow: inset 0 0 0 1px oklch(0.76 0.18 30 / 0.55);
}
.m-toast-info > .m-i {
  color: var(--on-lacquer);
  background: oklch(1 0 0 / 0.14);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.34);
}

.m-toast button {
  inline-size: 34px; block-size: 34px;
  display: grid; place-items: center;
  color: var(--on-lacquer-2);
  border-radius: 50%;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.m-toast button:hover { color: var(--on-lacquer); background: oklch(1 0 0 / 0.1); }

/* Timer. Transform-only, so it never touches layout. */
.m-toast::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0;
  block-size: 2px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: left;
  animation: m-toast-timer 4.5s linear forwards;
}
.m-toast-positive::after { background: oklch(0.84 0.16 152); }
.m-toast-critical::after { background: oklch(0.74 0.17 30); }

.m-toast[data-out] { animation: m-toast-out var(--dur-2) var(--ease-in-out) both; }

@keyframes m-toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes m-toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes m-toast-timer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ----------------------------------------------- 13. REVEAL ON SCROLL */

/* Content is visible by default. The start state is only armed once JS has an
   IntersectionObserver wired and a failsafe timer running, so a headless render,
   a background tab or a print job never ships a blank section. */
html.reveal-armed .m-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
html.reveal-armed .m-reveal.is-in { opacity: 1; transform: none; }

/* Grids stagger their own children rather than arriving as one slab. */
html.reveal-armed [data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-4) var(--ease-out) calc(var(--i, 0) * 45ms),
    transform var(--dur-4) var(--ease-out) calc(var(--i, 0) * 45ms);
}
html.reveal-armed [data-stagger].is-in > * { opacity: 1; transform: none; }

/* ----------------------------------------------------- 14. UTILITIES */

/* Icon only, so the white glyph on brand green is the logotype and exempt from
   the text contrast rule. A soft green halo lifts it off any background. */
.m-float-wa {
  position: fixed; z-index: var(--z-overlay-ui);
  inset-inline-end: var(--s-5); bottom: var(--s-5);
  inline-size: 56px; block-size: 56px;
  display: grid; place-items: center;
  background: var(--wa); color: #fff;
  border: 1px solid oklch(0.86 0.16 149 / 0.6);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px oklch(0.78 0.19 149 / 0.14),
    0 18px 34px -12px oklch(0.55 0.16 149 / 0.55);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.m-float-wa .m-i { inline-size: 26px; block-size: 26px; stroke-width: 1.7; }
.m-float-wa:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 12px oklch(0.78 0.19 149 / 0.16),
    0 22px 40px -12px oklch(0.55 0.16 149 / 0.6);
}
.m-float-wa:active { transform: scale(0.96); }

/* The WhatsApp tile in the footer social row carries the green too. */
.m-socials a[data-wa] {
  background: var(--wa); border-color: var(--wa); color: #fff;
}
.m-socials a[data-wa]:hover { background: var(--wa-press); border-color: var(--wa-press); }
@media (max-width: 860px) { .m-float-wa { bottom: calc(56px + var(--s-3)); } }

.m-spin { animation: m-spin 900ms linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* Skeleton for anything that arrives after paint. */
.m-skeleton {
  background: linear-gradient(90deg, var(--sheet-2) 25%, var(--sheet-3) 37%, var(--sheet-2) 63%);
  background-size: 400% 100%;
  animation: m-shimmer 1.4s linear infinite;
}
@keyframes m-shimmer { to { background-position: -135% 0; } }

/* --------------------------------------- 15. LEGACY ds-* COMPATIBILITY */

/* Pages not in this redesign (order detail, account, landing builder, error
   pages) still ship the previous `ds-` class API. Re-skinned here so they
   inherit the maison rather than breaking. New work uses `m-`. */

.ds-page { background: var(--sheet); }
.ds-shell { inline-size: min(var(--shell), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.ds-section { padding-block: var(--band); }
.ds-section-soft { background: var(--sheet); }
.ds-panel { border: 1px solid var(--rule); background: var(--sheet); }
.ds-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.ds-title { font-family: var(--font-display); font-weight: 400; font-size: var(--d-sm); line-height: 1.06; margin: var(--s-2) 0 var(--s-3); }
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.ds-muted { color: var(--ink-2); }
.ds-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 48px; padding-inline: var(--s-5);
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink);
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.ds-btn:hover { border-color: var(--ink); }
.ds-btn-red, .ds-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.ds-btn-red:hover, .ds-btn-primary:hover { background: var(--lacquer-2); border-color: var(--lacquer-2); }
.ds-btn-light { background: transparent; }

.ds-input, .ds-select, .ds-textarea {
  inline-size: 100%; min-block-size: 48px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-2); border-radius: 13px; corner-shape: squircle; background: var(--sheet); color: var(--ink);
}
.ds-textarea { min-block-size: 108px; resize: vertical; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink);
}
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible {
  outline: 2px solid var(--seal); outline-offset: 2px;
}
.ds-form-field { display: grid; gap: var(--s-2); }
.ds-form-field label { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }

.ds-breadcrumb { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-3); }
.ds-breadcrumb a:hover { color: var(--ink); }

.ds-empty {
  display: grid; justify-items: center; gap: var(--s-4);
  padding: clamp(40px, 7vw, 88px) var(--gutter); text-align: center;
}
.ds-empty i { font-size: 30px; color: var(--ink-4); }
.ds-empty h1, .ds-empty h2 { font-family: var(--font-display); font-weight: 400; }

.ds-placeholder {
  display: grid; place-items: center; gap: var(--s-2);
  inline-size: 100%; block-size: 100%;
  background: var(--sheet-2); color: var(--ink-4);
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
}
.ds-filter-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--rule);
  font-size: var(--t-sm); color: var(--ink-2);
}
.ds-summary-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-block: var(--s-3); border-bottom: 1px solid var(--rule);
  color: var(--ink-2); font-size: var(--t-md);
}
.ds-summary-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ds-summary-row.total { border-bottom: 0; padding-block-start: var(--s-4); font-size: var(--t-lg); }
.ds-summary-row.total strong { font-size: var(--t-xl); }
.ds-benefits { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); }
.ds-benefit { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-2); font-size: var(--t-md); }
.ds-benefit i { color: var(--ink-3); inline-size: 18px; text-align: center; }
.ds-cart-item { display: grid; align-items: center; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.ds-item-img { overflow: hidden; background: var(--sheet-2); }
.ds-item-img img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.ds-item-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); }
.ds-item-meta { color: var(--ink-3); font-size: var(--t-sm); }
.trust-grid { display: grid; gap: var(--s-3); }
.trust-box { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--rule); }
.trust-box i { color: var(--ink-3); }
.trust-box strong { display: block; font-weight: 500; font-size: var(--t-md); }
.trust-box span { display: block; color: var(--ink-3); font-size: var(--t-sm); }
.ds-summary { padding: var(--s-5); }

/* ------------------------------------------------ 16. GLASS FALLBACKS

   Two ways glass has to stop being glass, and both have to leave text readable:
   a browser without backdrop-filter (the panel would otherwise be a
   see-through wash over live content), and a visitor who has asked the OS to
   reduce transparency. Both get the same answer: opaque surfaces. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-thin: oklch(1 0 0 / 0.97);
    --glass-panel: oklch(1 0 0);
    --glass-dark: oklch(0.18 0 0);
    --glass-dark-panel: oklch(0.155 0 0);
    --glass-edge: var(--rule);
  }
  .m-scrim { background: oklch(0.155 0 0 / 0.6); }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-thin: oklch(1 0 0);
    --glass-panel: oklch(1 0 0);
    --glass-dark: oklch(0.18 0 0);
    --glass-dark-panel: oklch(0.155 0 0);
    --glass-blur: none;
    --glass-blur-soft: none;
    --glass-edge: var(--rule);
  }
  body::before { display: none; }
  .m-scrim { background: oklch(0.155 0 0 / 0.72); backdrop-filter: none; }
  .m-header, .m-drawer, .m-tabbar, .m-toast, .m-card-media,
  .m-card-badge, .m-card-quick, .m-notice, .m-empty {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------------------------------------------- 17. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html.reveal-armed .m-reveal,
  html.reveal-armed [data-stagger] > * { opacity: 1; transform: none; }
  .m-card-quick { transform: translateY(0); }
  body::before { animation: none; }
  /* The toast timer is information, not decoration — keep it, just instant. */
  .m-toast::after { animation-duration: 4.5s !important; }
}

/* -------------------------------------------------------- 17. PRINT */

@media print {
  .m-header, .m-footer, .m-tabbar, .m-toasts, .m-float-wa, .m-drawer, .m-scrim, .m-announce { display: none; }
  body { color: #000; background: #fff; }
}

/* AZ7 shared surface language: continuous corners are progressively enhanced
   where the browser supports CSS corner-shape, with a clean radius fallback. */
:root {
  --az-g2: clamp(22px, 2.35vw, 36px);
  --az-g2-small: 18px;
  --az-glass-control: rgba(246, 246, 248, .78);
  --az-glass-edge: rgba(255, 255, 255, .88);
  --az-spring: cubic-bezier(.2, .85, .2, 1);
}

.az-squircle,
.page-head,
.m-card-media,
.m-empty,
.concierge {
  border-radius: var(--az-g2);
  corner-shape: squircle;
}

/* Compact language menu: the trigger shows state, the popover owns the choice. */
.az-lang { position: relative; z-index: 30; }
.az-lang > summary {
  min-width: 92px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 13px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  corner-shape: squircle;
  background: var(--az-glass-control);
  box-shadow: inset 0 1px 0 var(--az-glass-edge), 0 8px 24px rgba(0, 0, 0, .06);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--ink-3);
}
.az-lang > summary::-webkit-details-marker { display: none; }
.az-lang > summary b { margin-left: auto; color: var(--ink); font-size: 12px; }
.az-lang > summary .m-i { width: 14px; transition: transform 180ms var(--az-spring); }
.az-lang[open] > summary .m-i { transform: rotate(180deg); }
.az-lang__menu {
  position: absolute;
  top: calc(100% + 9px);
  inset-inline-end: 0;
  width: 224px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  corner-shape: squircle;
  background: rgba(28, 28, 30, .94);
  color: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  transform-origin: top right;
  animation: az-lang-in 180ms var(--az-spring) both;
}
.az-lang__menu p {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px 10px;
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.az-lang__menu button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .74);
  text-align: start;
  transition: color 150ms ease, background 150ms ease;
}
.az-lang__menu button:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.az-lang__menu button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.az-lang__menu button[aria-pressed="true"]::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline-end: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
}
.az-lang__menu button span { flex: 1; }
.az-lang__menu button small { color: rgba(255, 255, 255, .42); }
@keyframes az-lang-in { from { opacity: 0; transform: translateY(-5px) scale(.96); } }

@media (max-width: 860px) { .m-header-end .az-lang { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .az-lang__menu { animation: none; }
}

/* AZ8 corner audit: every interactive control and contained surface now uses
   the same continuous-corner language. Full-bleed bands and hairline dividers
   intentionally stay structural rather than pretending to be cards. */
.m-btn,
.ds-btn,
.m-checkline,
.m-suggest-thumb,
.ds-item-img,
.trust-box,
.ds-filter-pill {
  border-radius: 13px;
  corner-shape: squircle;
}

.m-card-badge {
  border-radius: 11px;
  corner-shape: squircle;
}

.m-iconbtn { border-radius: 50%; }

.m-rail-nav button { border-radius: 50%; }

.m-lang {
  padding: 3px;
  gap: 2px;
  border-radius: 15px;
  corner-shape: squircle;
  overflow: hidden;
  background: rgba(246, 246, 248, .86);
}
.m-lang button {
  border-radius: 11px;
  corner-shape: squircle;
}
.m-lang button + button { border-inline-start: 0; }

.ds-panel,
.ds-summary {
  border-radius: var(--az-g2-small);
  corner-shape: squircle;
  overflow: hidden;
}

/* Quick add is an independent tactile control instead of a hard-edged strip. */
.m-card-quick {
  inset-inline: 9px;
  bottom: 9px;
  border: 1px solid var(--glass-edge-dark);
  border-radius: 13px;
  corner-shape: squircle;
  opacity: 0;
  transform: translateY(calc(100% + 14px));
}
.m-card:hover .m-card-quick,
.m-card-quick:focus-visible { opacity: 1; }

/* Floating iOS-style sheets keep all four corners visible. */
.m-drawer {
  inset-block: 8px;
  inset-inline-start: 8px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--az-g2);
  corner-shape: squircle;
  overflow: hidden;
}

@media (max-width: 860px) {
  .m-tabbar {
    inset-inline: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    border: 1px solid var(--glass-edge);
    border-radius: 20px;
    corner-shape: squircle;
    overflow: hidden;
    padding-bottom: 0;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255,255,255,.9);
  }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .m-toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .m-float-wa { bottom: calc(94px + env(safe-area-inset-bottom)); }
  .m-card-quick { opacity: 1; }
}

/* ------------------------------------- 18. RTL TRANSFORM ORIGINS

   `transform-origin` has no logical keywords — `inline-start` is invalid and
   silently resolves to `center`, which makes every scaleX reveal grow from the
   middle outwards. These are the physical values, mirrored for RTL. */

html[dir="rtl"] .m-link::after,
html[dir="rtl"] .m-nav-desk a::after,
html[dir="rtl"] .m-toast::after,
html[dir="rtl"] .seal-step.is-on div::after {
  transform-origin: right;
}

/* The language menu is a dark panel, so its keyboard ring is light rather than
   the seal red used on the light rooms. */
.az-lang__menu button:focus-visible {
  outline: 2px solid oklch(1 0 0 / 0.9);
  outline-offset: -2px;
}
.m-search-form input:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}