/* ==========================================================================
   Heavens Sweets Perfume — site styles, "Grand Tour"
   Onyx black, brass and marble: bottles stand on lit Calacatta in gilded frames; Parisian ironwork,
   fluted columns, Italian marble and galleria glass set the scene.
   Every colour, font, size and timing comes from assets/tokens.css (loaded first). Change it there.
   ========================================================================== */

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
:root {
  color-scheme: dark;
  --gutter: var(--space-4);
  --sec: var(--space-16);
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}
@media (min-width: 760px) { :root { --gutter: var(--space-8); --sec: var(--space-24); } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7; font-weight: 300;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, fieldset, legend, blockquote { margin: 0; padding: 0; border: 0; }
ul, ol { list-style: none; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--brass-300); color: var(--on-gold); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -80px; z-index: 100; background: var(--action); color: var(--on-action); padding: 12px 16px; border-radius: var(--radius-full); }
.skip:focus { top: 12px; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* page-to-page cross-fade where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease); }

/* ---- layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: var(--sec); background: var(--ground); color: var(--ink); }
.sec--alt, .sec--paper { background: var(--ground-alt); }
.sec--sand { background: var(--ground-sunken); }
.sec--line { border-block-start: var(--hairline) solid var(--line); }
.sec--tight { padding-block: var(--space-12); }
.sechead { display: grid; gap: var(--space-4); max-width: 820px; margin-block-end: var(--space-10); }
.sechead--center { text-align: center; margin-inline: auto; justify-items: center; }
.sechead--center .lede { margin-inline: auto; }
.sechead--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.sechead__main { display: grid; gap: var(--space-4); max-width: 720px; min-width: 0; }
.sechead__side { display: flex; align-items: center; gap: var(--space-3); }
/* a quiet texture behind a section: the fluting of a classical column */
.texture-bg::before, .promise-band::before, .phead::before, .finder-cta::before, .colhero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--fluting); opacity: .05;
}

/* ---- type ---------------------------------------------------------------- */
.display, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 400; color: var(--ink); text-wrap: balance; letter-spacing: .005em; }
.display { font-size: clamp(46px, 5.5vw, 84px); line-height: .98; letter-spacing: -.01em; }
.h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -.005em; }
.h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.005em; }
.h3 { font-size: clamp(22px, 2.3vw, 27px); line-height: 1.3; }
.h4 { font-size: 19px; line-height: 1.4; }
:is(.display, .h1, .h2, .h3) em { font-style: normal; color: var(--gold-text); }
.lede { font-size: var(--text-lg); line-height: 1.75; color: var(--ink-muted); max-width: var(--measure); font-weight: 300; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); }
.label { font-size: var(--text-xs); line-height: 16px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xs); line-height: 16px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
.price { font-size: 17px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tlink { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-text); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.tlink svg { width: 18px; height: 18px; }
.tlink:hover { color: var(--ink); }
.alink { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding-block: 6px; border-block-end: var(--hairline) solid var(--gold-500); }
.alink svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-base) var(--ease); }
.alink:hover { color: var(--gold-text); }
.alink:hover svg { transform: translateX(4px); }
[dir="rtl"] .flip { transform: scaleX(-1); }
[dir="rtl"] .alink:hover svg { transform: scaleX(-1) translateX(4px); }

/* Arabic: Reem Kufi headlines, rosewater accent, no uppercase or tracking, more leading */
:lang(ar) :is(.display, .h1, .h2, .h3, .h4) { font-family: var(--font-ar-display); font-weight: 600; letter-spacing: 0; }
:lang(ar) :is(.display, .h1, .h2) { line-height: 1.4; }
:lang(ar) :is(.h3, .h4) { line-height: 1.6; }
:lang(ar) :is(.display, .h1, .h2, .h3) em { color: var(--rose); }
:lang(ar) :is(.label, .eyebrow) { letter-spacing: 0; text-transform: none; font-size: 14px; line-height: 22px; }
:lang(ar) .alink { letter-spacing: 0; text-transform: none; font-size: 15px; line-height: 22px; }
:lang(ar) .lede { line-height: 1.9; }
:lang(ar) body, body:lang(ar) { line-height: 1.85; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 30px; border: var(--hairline) solid transparent; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-quick) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action-hover); }
.btn--ghost { border-color: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--gold-400); color: var(--gold-text); }
.btn--wa { background: var(--whatsapp); color: var(--on-whatsapp); border-color: var(--whatsapp); }
.btn--wa:hover { filter: brightness(1.07); }
.btn--sm { min-height: 44px; padding: 9px 20px; font-size: 12px; }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
:lang(ar) .btn { letter-spacing: 0; text-transform: none; font-size: 15px; }
.iconbtn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-full);
  border: var(--hairline) solid var(--line-strong); background: transparent; color: var(--ink);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn:hover { border-color: var(--gold-400); color: var(--gold-text); }
.linkbtn { font-size: 14px; line-height: 22px; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 4px; }
.linkbtn:hover { color: var(--ink); }

/* ---- announcement bar and header ---------------------------------------- */
.preview { background: var(--brass-300); color: var(--on-gold); font-size: 12px; line-height: 18px; font-weight: 500; text-align: center; padding: 5px var(--gutter); }
.offers { background: var(--onyx-950); border-block-end: var(--hairline) solid var(--line); overflow: hidden; }
.offers__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.offers__track ul { display: flex; flex: none; }
.offers__track li { display: flex; align-items: center; gap: var(--space-6); padding-inline: var(--space-8); min-height: 36px; font-size: 12px; line-height: 18px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; white-space: nowrap; color: var(--ink-muted); }
.offers__track li::after { content: ""; width: 6px; height: 6px; transform: rotate(45deg); border: var(--hairline) solid var(--gold-500); }
:lang(ar) .offers__track li { letter-spacing: 0; text-transform: none; font-size: 13px; }
[dir="rtl"] .offers__track { animation-name: marquee-rtl; }
.offers:hover .offers__track, .offers:focus-within .offers__track { animation-play-state: paused; }

.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--ground); border-block-end: var(--hairline) solid var(--line); transition: box-shadow var(--dur-base) var(--ease); }
@supports (backdrop-filter: blur(1px)) { .hdr { background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: blur(14px); } }
.hdr.is-stuck { box-shadow: var(--shadow-float); }
.hdr .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.brand img { width: 46px; height: 46px; border-radius: var(--radius-full); }
.brand__txt { display: flex; flex-direction: column; }
.brand__name { font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 20px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.brand__sub { font-size: 9px; line-height: 10px; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-text); margin-block-start: 4px; }
.nav { display: none; margin-inline: auto; }
.nav > ul { display: flex; gap: var(--space-8); }
.nav a { position: relative; display: block; padding-block: 10px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.nav > ul > li > a { white-space: nowrap; }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 4px; height: 1px; background: var(--gold-500); transform: scaleX(0); transform-origin: center; transition: transform var(--dur-base) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
/* the Scent Finder stands out in the main nav as a brass pill */
.nav a.nav__finder { padding: 8px 14px; margin-block: 2px; border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-full); color: var(--gold-text); }
.nav a.nav__finder::after { display: none; }
.nav a.nav__finder:hover, .nav a.nav__finder[aria-current="page"] { border-color: var(--gold-400); background: color-mix(in srgb, var(--gold-400) 10%, transparent); }
:lang(ar) .nav a { letter-spacing: 0; text-transform: none; font-size: 15px; line-height: 22px; }
.nav__has-sub { position: relative; }
.nav ul.nav__sub { position: absolute; inset-inline-start: -14px; top: calc(100% + 6px); display: block; min-width: 230px; padding: var(--space-2); background: var(--ground-raised); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease), visibility 0s var(--dur-quick); }
.nav__has-sub:hover ul.nav__sub, .nav__has-sub:focus-within ul.nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav ul.nav__sub li { display: block; }
.nav ul.nav__sub a { padding: 9px 14px; text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 20px; font-weight: 300; border-radius: var(--radius-sm); }
.nav ul.nav__sub a::after { display: none; }
.nav ul.nav__sub a:hover { background: var(--onyx-700); color: var(--gold-text); }
.nav__sublabel { padding: 12px 14px 4px; margin-block-start: 6px; border-block-start: var(--hairline) solid var(--line); font-size: 11px; line-height: 16px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
:lang(ar) .nav__sublabel { letter-spacing: 0; font-size: 13px; }
.nav__sub-arrow { display: inline-block; width: 7px; height: 7px; margin-inline-start: 7px; border-inline-end: 1px solid currentColor; border-block-end: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.hdr__tools { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.langbtn { min-height: 44px; padding-inline: 14px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 8px; transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.langbtn svg { width: 16px; height: 16px; }
.langbtn:hover { border-color: var(--gold-400); color: var(--gold-text); }
.bagbtn { position: relative; }
.bagbtn__n { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--radius-full); background: var(--gold-400); color: var(--on-gold); font-size: 11px; line-height: 20px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 1060px) { .nav { display: block; } .hdr__tools { margin-inline-start: 0; } }
.menubtn { margin-inline-start: calc(var(--space-2) * -1); }
.hdr .iconbtn { border-color: transparent; }
.hdr .iconbtn:hover { border-color: transparent; background: var(--onyx-700); }
/* 1060-1199px: the nav, the brand and the tools share a narrow row (with a desktop scrollbar too), so tighten the nav */
@media (min-width: 1060px) and (max-width: 1199px) { .nav > ul { gap: 14px; } .nav a { letter-spacing: .1em; } .nav a.nav__finder { padding-inline: 11px; } .hdr .wrap { gap: var(--space-3); } }
@media (max-width: 1059px) { .hdr .langbtn { display: none; } }
/* phones: brand + three 44px tools (bag, search, menu) must fit inside the gutters, so tighten spacing and the wordmark */
@media (max-width: 479px) {
  .hdr .wrap { gap: var(--space-3); }
  .hdr__tools { gap: var(--space-1); }
  .hdr .brand { gap: 10px; }
  .hdr .brand img { width: 40px; height: 40px; }
  .hdr .brand__name { font-size: 14px; letter-spacing: .1em; }
}
@media (max-width: 400px) {
  .hdr .wrap { gap: var(--space-2); }
  .hdr .brand { gap: var(--space-2); }
  .hdr .brand img { width: 36px; height: 36px; }
  .hdr .brand__name { font-size: 12.5px; letter-spacing: .07em; }
}

/* ---- hero: an editorial split - the headline on onyx, the bottle edge to edge on lit sand ---- */
.hero { position: relative; overflow: clip; background: var(--ground); }
.hero__grid { display: grid; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-8) var(--gutter) var(--space-12); }
.hero .display em { display: block; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__wa { font-size: 15px; }
.hero__film { position: relative; min-width: 0; }
/* phones: picture, headline, then the buttons straight away - the story can wait a line */
@media (max-width: 979px) { .hero__film { order: -1; } .hero__cta { order: 3; } .hero__copy > .lede { order: 4; } .hero__wa { order: 5; } }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(100svh - var(--header-h) - 36px), 860px); }
  .hero__copy { justify-content: center; gap: var(--space-6); padding-block: var(--space-16); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)) var(--space-16); }
}
.film { --film-dur: 4.4s; position: relative; height: 100%; }
.film__stage { position: relative; height: 100%; container: film / inline-size; }
.film__frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--vitrine); isolation: isolate; }
@media (min-width: 980px) { .film__frame { aspect-ratio: auto; height: 100%; min-height: 560px; } }
/* each shot carries its own lit panel: a shot is its own layer, so the photo's multiply blend needs a backdrop inside it */
.film__shot { position: absolute; inset: 0; display: block; z-index: 1; opacity: 0; background: var(--vitrine); transition: opacity 1.1s ease; }
.film__shot.is-prev { z-index: 2; opacity: 1; transition: none; }
.film__shot.is-on { z-index: 3; opacity: 1; }
.film__shot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: multiply; transform: scale(1.02); }
.film__shot:is(.is-on, .is-prev) img { animation: film-in calc(var(--film-dur) + 1.6s) linear both; will-change: transform; }
.film__shot[data-move="out"]:is(.is-on, .is-prev) img { animation-name: film-out; }
.film__shot[data-move="left"]:is(.is-on, .is-prev) img { animation-name: film-left; }
.film__shot[data-move="right"]:is(.is-on, .is-prev) img { animation-name: film-right; }
/* the caption is printed on the sand, like a campaign line */
.film__cap { position: absolute; z-index: 2; inset-inline-start: var(--space-6); inset-block-end: 64px; display: grid; gap: 2px; justify-items: start; text-align: start; max-width: calc(100% - 2 * var(--space-6)); opacity: 0; transform: translateY(10px); transition: opacity var(--dur-base) ease, transform .6s var(--ease); }
.film__shot.is-on .film__cap { opacity: 1; transform: none; transition-delay: .45s; }
.film__house { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-700); }
.film__name { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.08; color: var(--on-vitrine); text-wrap: balance; }
.film__notes { font-size: 12px; line-height: 18px; color: color-mix(in srgb, var(--on-vitrine) 70%, transparent); }
@media (max-width: 979px) { .film__notes { display: none; } .film__cap { inset-block-end: 58px; } .film__name { font-size: 22px; } }
:lang(ar) .film__name { font-family: var(--font-display); }
.film__shot:focus-visible { outline: 0; }
.film__shot:focus-visible .film__name { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.film__frame:has(.film__shot:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }
.film__bar { position: absolute; z-index: 4; inset-inline: var(--space-6); inset-block-end: var(--space-3); display: flex; align-items: center; gap: var(--space-3); }
.film__bar .iconbtn { width: 40px; height: 40px; color: var(--on-vitrine); border-color: color-mix(in srgb, var(--on-vitrine) 30%, transparent); background: color-mix(in srgb, var(--sand-50) 50%, transparent); }
.film__bar .iconbtn:hover { color: var(--brass-700); border-color: var(--brass-700); }
.film__segs { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.film__seg { position: relative; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.film__seg::before, .film__seg i { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; height: 2px; margin-block-start: -1px; }
.film__seg::before { background: var(--on-vitrine); opacity: .22; }
.film__seg:hover::before { opacity: 1; }
.film__seg i { background: var(--on-vitrine); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .film__seg i { transform-origin: 100% 50%; }
.film__seg.is-done i { transform: scaleX(1); }
.film__seg[aria-current="true"] i { animation: film-fill var(--film-dur) linear both; }
.film__toggle { flex: none; }
.film__toggle .film__ic-play, .film.is-paused .film__toggle .film__ic-hold { display: none; }
.film.is-paused .film__toggle .film__ic-play { display: block; }
.film:is(.is-paused, .is-held, .is-away) :is(.film__seg i, .film__shot img) { animation-play-state: paused; }
@keyframes film-in { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes film-out { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes film-left { from { transform: scale(1.1) translate3d(2.4%, 0, 0); } to { transform: scale(1.1) translate3d(-2.4%, 0, 0); } }
@keyframes film-right { from { transform: scale(1.1) translate3d(-2.4%, 0, 0); } to { transform: scale(1.1) translate3d(2.4%, 0, 0); } }
@keyframes film-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- rings, badges, steps, tips, panels ---------------------------------- */
.ringicon { width: 52px; height: 52px; flex: none; border-radius: var(--radius-full); border: var(--hairline) solid var(--gold-500); display: grid; place-items: center; position: relative; color: var(--gold-text); }
.ringicon::after { content: ""; position: absolute; inset: 5px; border-radius: inherit; border: var(--hairline) solid var(--rule-brass); }
.ringicon svg { width: 20px; height: 20px; }
.ringicon b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; }
.badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); }
@media (min-width: 760px) { .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .badges { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.badge { display: grid; gap: var(--space-2); align-content: start; min-width: 0; padding-block-start: var(--space-4); border-block-start: var(--hairline) solid var(--rule-brass); }
.badge .ringicon { margin-block-end: var(--space-2); }
.badge h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.25; font-weight: 400; }
:lang(ar) .badge h3 { font-family: var(--font-ar-display); font-weight: 600; }
.badge p { font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.promise-band .sechead { margin-block-end: var(--space-12); }

.tips { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tip { display: grid; gap: var(--space-3); align-content: start; padding-block-start: var(--space-6); border-block-start: var(--hairline) solid var(--rule-brass); }
.tip p { color: var(--ink-muted); }
.steps { display: grid; gap: var(--space-8); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: start; align-content: start; }
.step .ringicon { grid-row: span 2; width: auto; height: auto; border: 0; border-radius: 0; justify-content: start; }
.step .ringicon::after { display: none; }
.step .ringicon b { font-size: clamp(48px, 5vw, 72px); line-height: .9; color: var(--gold-text); }
.step p { color: var(--ink-muted); }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); position: relative; }
  .step .ringicon { grid-row: auto; margin-block-end: var(--space-3); }
  .step { padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--rule-brass); }
}
.sec__foot { margin-block-start: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sec__foot--center { justify-content: center; }
.duo { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panel { position: relative; display: grid; gap: var(--space-4); align-content: start; justify-items: start; padding: var(--space-8) var(--space-6); background: var(--ground-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); min-width: 0; overflow: hidden; }
.panel--sand, .panel--marble { background: var(--marble-onyx) center / cover, var(--onyx-800); }
.panel > * { position: relative; }
.panel p { color: var(--ink-muted); max-width: 46ch; }
.panel .btn, .panel .alink { margin-block-start: var(--space-2); }
.panel__handle { font-weight: 500; color: var(--ink); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
@media (min-width: 760px) { .panel { padding: var(--space-12); } }
.closing { text-align: center; overflow: clip; }
.closing .wrap { display: grid; gap: var(--space-6); justify-items: center; position: relative; padding-block: var(--space-12); }
.closing .h1 { font-size: clamp(44px, 7vw, 104px); line-height: .98; }
.closing .lede { text-align: center; }
.closing__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---- collections, occasions and seasons: editorial tiles - the picture is the tile ---- */
/* the three shelves run edge to edge with hairline gaps; on phones they swipe */
.shelf .sechead { margin-block-end: var(--space-10); }
.frames { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 3px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.frames::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .frames { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 0; } }
.frame-tile { position: relative; display: block; overflow: hidden; scroll-snap-align: start; isolation: isolate; color: var(--ink); }
.frame-tile__art { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--onyx-800); }
.frame-tile__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.frame-tile__art--vitrine { background: var(--vitrine); }
.frame-tile__art--vitrine img { position: absolute; inset: 10% 12% 22%; width: 76%; height: 68%; object-fit: contain; mix-blend-mode: multiply; }
/* a dark fall-off at the foot of the picture so the words always read */
.frame-tile__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(8, 8, 7, .3) 62%, rgba(8, 8, 7, .82) 100%); pointer-events: none; }
.frame-tile:hover .frame-tile__art img { transform: scale(1.05); }
.frame-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.frame-tile__body { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; display: grid; gap: 6px; justify-items: start; padding: var(--space-6); }
.frame-tile__n { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-300); }
.frame-tile__name { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; color: #fff; text-wrap: balance; }
:lang(ar) .frame-tile__name { font-family: var(--font-ar-display); font-weight: 600; line-height: 1.3; }
.frame-tile__cta { margin-block-start: var(--space-2); padding-block-end: 4px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; border-block-end: var(--hairline) solid var(--gold-400); transition: color var(--dur-base) var(--ease), padding var(--dur-base) var(--ease); }
.frame-tile:hover .frame-tile__cta { color: var(--gold-300); padding-inline-end: var(--space-4); }
:lang(ar) :is(.frame-tile__n, .frame-tile__cta) { letter-spacing: 0; text-transform: none; font-size: 14px; }
/* seasons: two wide banners under the shelves */
.seasons { margin-block-start: var(--space-16); display: grid; gap: var(--space-6); }
.seasons__head { display: grid; gap: var(--space-2); max-width: 640px; }
.seasons__row { display: grid; gap: 3px; }
@media (min-width: 760px) { .seasons__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seasons .frame-tile__art { aspect-ratio: 16 / 10; }
@media (max-width: 759px) { .seasons .frame-tile__art { aspect-ratio: 4 / 3; } }
/* occasions: four portrait tiles; two by two on phones */
.occasions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
@media (min-width: 900px) { .occasions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.occasions .frame-tile__name { font-size: clamp(22px, 2.4vw, 32px); }
@media (max-width: 559px) { .occasions .frame-tile__body { padding: var(--space-4); } .occasions .frame-tile__cta { display: none; } }

/* ---- product cards: a bottle on lit marble, in a gilded frame -------------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) 3px; }
@media (min-width: 760px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-4); } }
@media (max-width: 759px) { .card__body { padding-inline: var(--space-2); } }
@media (min-width: 1100px) { .pgrid--4, .pgrid--shop { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pgrid .card.is-in { animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--d, 0) * 50ms); }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; background: var(--vitrine); }
.card .shot { position: absolute; inset: 13% 8% 5%; width: 84%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur-slow) var(--ease); }
.card:hover .shot { transform: translateY(-6px) scale(1.03); }
.card:focus-within .card__art { outline: 2px solid var(--focus); outline-offset: 3px; }
.card__quick { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2; width: 38px; height: 38px; background: color-mix(in srgb, var(--onyx-900) 80%, transparent); border-color: var(--rule-brass); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.card__quick svg { width: 18px; height: 18px; }
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; }
@media (hover: none) { .card__quick { opacity: 1; } }
/* the note pyramid: three tiers rise over the bottle on hover or keyboard focus */
.card__tiers { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; display: grid; transform: translateY(101%); transition: transform .5s var(--ease); }
.card__tier { display: grid; gap: 1px; padding: 8px 14px; background: var(--onyx-800); border-block-start: var(--hairline) solid var(--rule-brass); text-align: start; }
.card__tier:nth-child(2) { background-color: var(--onyx-700); }
.card__tier:nth-child(3) { background-color: var(--sand-200); }
.card__tier b { font-size: 10px; line-height: 14px; letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500; color: var(--gold-text); }
:lang(ar) .card__tier b { letter-spacing: 0; font-size: 12px; }
.card__tier span { font-size: 12.5px; line-height: 1.35; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .card:hover .card__tiers { transform: none; } .card:hover .shot { transform: translateY(-16%) scale(.9); } }
.card:focus-within .card__tiers { transform: none; }
.card__body { display: flex; flex-direction: column; gap: 4px; flex: 1 0 auto; padding-block-start: var(--space-4); }
.card__fam { font-size: 11px; letter-spacing: .18em; }
.card__name { font-size: 20px; line-height: 1.25; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__name a:hover { color: var(--gold-text); }
:lang(ar) .card__name { font-family: var(--font-display); font-weight: 400; }
.card__when { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.card__when i { font-style: normal; }
.card__price { margin-block-start: auto; padding-block-start: var(--space-2); }
.card__ask { font-size: 12px; line-height: 18px; color: var(--gold-text); }
/* price and stock from the shop's stock sheet (site.js fills them in) */
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.card__amount { font-size: 15px; line-height: 22px; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.stock { font-size: 12px; line-height: 18px; letter-spacing: .02em; }
.stock--in { color: var(--ink-muted); }
.stock--low { color: var(--rose); }
.stock--out { color: var(--ink-faint); }
:lang(ar) .stock { letter-spacing: 0; font-size: 13px; }
/* a sold-out card: Buy Now becomes a quiet "Ask about restock" (no shake) */
.card__restock { min-height: 46px; margin-block-start: var(--space-3); padding: 10px 16px; font-size: 14px; }
/* Buy Now: the attention-catching button from the earlier site, restyled in brass.
   Every few seconds site.js adds .is-shake; it stays still for reduced motion, on hover and while focused. */
.btn--buy { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-block-start: var(--space-3); padding: 10px 16px; border: 0; border-radius: var(--radius-sm); background-color: var(--brass-500); background-image: linear-gradient(180deg, var(--brass-400), var(--brass-500)); color: var(--on-action); font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 500; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px rgba(0, 0, 0, .3); }
.btn--buy:hover, .btn--buy:focus-visible { background-image: linear-gradient(180deg, var(--brass-500), var(--brass-600)); color: var(--on-action); }
.btn--buy .btn__ico { width: 18px; height: 18px; flex: none; }
:lang(ar) .btn--buy { font-size: 16px; letter-spacing: 0; }
@keyframes buyShake {
  10%, 90% { transform: translate3d(-1px, -1px, 0); }
  20%, 80% { transform: translate3d(2px, 2px, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, -4px, 0); }
  40%, 60% { transform: translate3d(4px, 4px, 0); }
}
.btn--buy.is-shake { animation: buyShake .82s cubic-bezier(.36, .07, .19, .97) both; transform: translateZ(0); backface-visibility: hidden; }
.btn--buy:hover, .btn--buy:focus-visible, .btn--buy:active { animation: none; }
@media (max-width: 559px) { .card__name { font-size: 16px; } .btn--buy { min-height: 44px; font-size: 14px; padding-inline: 10px; } }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* bottle drawing, the stand-in when a product has no photo */
.bottle { display: block; overflow: visible; }
.b-halo circle { fill: none; stroke: var(--gold-500); stroke-width: 1; opacity: .8; }
.b-shadow { fill: var(--on-vitrine); opacity: .13; }
.b-glass * { fill: var(--sand-50); fill-opacity: .66; stroke: none; }
.b-liquid * { fill: var(--liq, var(--liquid-amber)); }
.b-top { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 3; }
.b-line * { fill: none; stroke: var(--on-vitrine); stroke-width: 1.6; stroke-linejoin: round; }
.b-shine { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: 3; stroke-linecap: round; }
.b-neck * { fill: var(--sand-50); stroke: var(--on-vitrine); stroke-width: 1.6; stroke-linejoin: round; }
.b-collar * { fill: var(--gold-600); stroke: var(--on-vitrine); stroke-width: 1.6; stroke-linejoin: round; }
.b-cap * { stroke: var(--on-vitrine); stroke-width: 1.6; stroke-linejoin: round; }
.b-capshine { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 3; stroke-linecap: round; }
.b-plate rect { fill: var(--sand-50); stroke: var(--on-vitrine); stroke-width: 1.2; }
.b-plate text { font: 600 10.5px/1 var(--font-sans); letter-spacing: .1em; fill: var(--on-vitrine); }
.grid-empty { margin: 0; padding: var(--space-10) var(--space-6); border: var(--hairline) dashed var(--line-strong); border-radius: var(--radius-md); background: var(--ground-raised); text-align: center; color: var(--ink-muted); display: grid; gap: var(--space-4); justify-items: center; }
.pgrid--empty { display: block; }
@media (max-width: 759px) { .pgrid--feat > :nth-child(9) { display: none; } }
@media (min-width: 760px) and (max-width: 1099px) { .pgrid--rel > :nth-child(4) { display: none; } }

/* ---- shop by house: wordmarks in gilded marble frames --------------------- */
.houses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
@media (min-width: 760px) { .houses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .houses { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.house { position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-2); min-height: 156px; padding: var(--space-6) var(--space-4); text-align: center; background: var(--marble-onyx) center / cover, var(--onyx-800); border: var(--hairline) solid var(--rule-brass); border-radius: var(--frame); transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); }
.house::after { content: ""; position: absolute; inset: 6px; border: var(--hairline) solid var(--rule-brass); border-radius: inherit; opacity: .55; pointer-events: none; transition: opacity var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.house:hover { border-color: var(--gold-400); }
.house:hover::after { opacity: 1; border-color: var(--gold-500); }
.house__name { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.house__n { font-size: 12px; line-height: 18px; color: var(--gold-text); letter-spacing: .04em; }
.house--all { background: var(--ground-raised); border: 0; border-radius: 0; }
.house--all::after { display: none; }
.house--all .house__name { font-family: var(--font-sans); font-size: 14px; letter-spacing: .12em; color: var(--gold-text); display: inline-flex; align-items: center; gap: 8px; }
.house--all svg { width: 18px; height: 18px; }
:lang(ar) .house--all .house__name { letter-spacing: 0; font-size: 15px; }
/* house photo tiles: a framed photo with the wordmark beneath, the same shape as the
   collection tiles, so the photo is never covered by text */
.house__body { display: grid; gap: var(--space-2); justify-items: center; }
.house--photo { display: block; min-height: 0; padding: 0; background: transparent; border: 0; }
.house--photo::after { display: none; }
.house__art { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--marble-onyx) center / cover, var(--onyx-800); border: var(--hairline) solid var(--rule-brass); border-radius: var(--frame); transition: border-color var(--dur-base) var(--ease); }
.house__art::after { content: ""; position: absolute; inset: 6px; border: var(--hairline) solid var(--rule-brass); border-radius: inherit; opacity: .55; pointer-events: none; transition: opacity var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.house--photo:hover .house__art { border-color: var(--gold-400); }
.house--photo:hover .house__art::after { opacity: 1; border-color: var(--gold-500); }
.house__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.house--photo:hover .house__img { transform: scale(1.05); }
.house--photo { overflow: hidden; }
.house--photo .house__art { border: 0; border-radius: 0; }
.house--photo .house__art::after { inset: 0; border: 0; opacity: 1; background: linear-gradient(180deg, transparent 50%, rgba(8, 8, 7, .78)); }
.house--photo:hover .house__art::after { opacity: 1; }
.house--photo .house__body { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; padding: var(--space-4); justify-items: start; text-align: start; gap: 2px; }
.house--photo .house__name { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.3; letter-spacing: .16em; color: #fff; }
.house--photo .house__n { font-size: 11px; line-height: 15px; color: var(--gold-300); }
/* the all-houses page: an A to Z directory */
.hlist { display: grid; gap: var(--space-8); }
.hlist__group { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-4); padding-block-start: var(--space-5); border-block-start: var(--hairline) solid var(--rule-brass); }
.hlist__letter { font-family: var(--font-display); font-size: 32px; line-height: 1.1; color: var(--gold-text); }
.hlist__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 var(--space-8); }
.hlist__items a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--line); }
.hlist__name { font-family: var(--font-display); font-size: 18px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; transition: color var(--dur-base) var(--ease); }
.hlist__n { font-size: 13px; color: var(--gold-text); white-space: nowrap; }
.hlist__items a:hover .hlist__name { color: var(--gold-text); }

/* ---- Scent Finder invitation --------------------------------------------- */
.finder-cta { background: var(--ground-alt); overflow: clip; }
.finder-cta::before { opacity: .05; }
.finder-cta__inner { position: relative; display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .finder-cta__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-16); } }
.finder-cta__copy { display: grid; gap: var(--space-5); justify-items: start; }
.finder-cta__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
.finder-cta__art { position: relative; min-height: 340px; display: grid; place-items: center; }
.finder-cta__frame { position: relative; width: min(260px, 70%); aspect-ratio: 4 / 5; display: grid; place-items: center; border-radius: var(--frame); background: var(--vitrine); box-shadow: 0 0 0 var(--hairline) var(--gold-500), 0 0 0 10px var(--ground-alt), 0 0 0 11px var(--rule-brass), var(--shadow-vitrine); }
.finder-cta__emb { width: 58%; border-radius: 50%; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.finder-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: .92; }
.finder-cta__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 7, .35)); pointer-events: none; }
.finder-cta__note { position: absolute; z-index: 1; padding: 6px 14px; border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-full); background: color-mix(in srgb, var(--onyx-900) 88%, transparent); font-size: 13px; color: var(--ink); white-space: nowrap; animation: drift 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.8s); }
.finder-cta__note:nth-of-type(1) { inset-block-start: 6%; inset-inline-start: -30%; }
.finder-cta__note:nth-of-type(2) { inset-block-start: 18%; inset-inline-end: -34%; }
.finder-cta__note:nth-of-type(3) { inset-block-start: 38%; inset-inline-start: -42%; color: var(--rose); }
.finder-cta__note:nth-of-type(4) { inset-block-start: 50%; inset-inline-end: -40%; }
.finder-cta__note:nth-of-type(5) { inset-block-start: 68%; inset-inline-start: -26%; color: var(--gold-text); }
.finder-cta__note:nth-of-type(6) { inset-block-start: 80%; inset-inline-end: -24%; }
.finder-cta__note:nth-of-type(7) { inset-block-start: -7%; inset-inline-end: -12%; color: var(--gold-text); }
.finder-cta__note:nth-of-type(8) { inset-block-start: 95%; inset-inline-start: 2%; }
@keyframes drift { from { transform: translateY(5px); } to { transform: translateY(-6px); } }
.finder-cta--compact .finder-cta__art { min-height: 260px; }
@media (max-width: 899px) { .finder-cta__art { min-height: 300px; } .finder-cta__frame { width: min(200px, 54%); } }

/* reviews: kept hidden in the HTML until real reviews are added */
.reviews { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8) var(--space-6); background: var(--ground-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); }
.review blockquote { font-size: 17px; line-height: 1.6; }
.review figcaption { display: grid; gap: 2px; font-size: 14px; color: var(--ink-muted); }
.review cite { font-style: normal; color: var(--ink); }

/* ---- page heads, breadcrumbs, collection pages ---------------------------- */
.phead { position: relative; background: var(--ground); border-block-end: var(--hairline) solid var(--line); overflow: clip; }
.phead::before { opacity: .06; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000); }
.phead .wrap { position: relative; display: grid; gap: var(--space-4); padding-block: var(--space-12); }
@media (min-width: 760px) { .phead .wrap { padding-block: var(--space-16) var(--space-12); } }
.phead .h1 { max-width: 20ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; line-height: 20px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.crumbs li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-end: 10px; transform: rotate(45deg) translateY(-2px); border: var(--hairline) solid var(--gold-600); }
.crumbs li { display: flex; align-items: center; }
.colnav__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.colnav { border-block-end: var(--hairline) solid var(--line); background: var(--ground); }
.colnav .wrap { padding-block: var(--space-4); }
@media (max-width: 759px) { .colnav__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .colnav__list::-webkit-scrollbar { display: none; } .colnav__list li { flex: none; } }
/* collection, occasion and house pages open like the home page: words on onyx, the picture edge to edge */
.colhero { position: relative; background: var(--ground); overflow: clip; border-block-end: var(--hairline) solid var(--line); }
.colhero__wrap { position: relative; display: grid; }
.colhero__copy { display: grid; gap: var(--space-4); align-content: center; padding: var(--space-8) var(--gutter) var(--space-10); }
.colhero__n { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
:lang(ar) .colhero__n { letter-spacing: 0; text-transform: none; font-size: 14px; }
.colhero__art { position: relative; order: -1; aspect-ratio: 16 / 10; overflow: hidden; background: var(--onyx-800); }
.colhero__art img { width: 100%; height: 100%; object-fit: cover; }
.colhero__art--vitrine { aspect-ratio: 4 / 3; background: var(--vitrine); }
.colhero__art--vitrine img { position: absolute; inset: 8% 15% 4%; width: 70%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 860px) {
  .colhero__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 480px; }
  .colhero__copy { padding-block: var(--space-12); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)) var(--space-16); }
  .colhero__art, .colhero__art--vitrine { order: 0; aspect-ratio: auto; height: 100%; }
  .colhero__art img { position: absolute; inset: 0; }
}

/* ---- shop toolbar -------------------------------------------------------- */
.shop-sec { padding-block-start: var(--space-10); }
.toolbar { display: grid; gap: var(--space-4); padding-block-end: var(--space-6); margin-block-end: var(--space-6); border-block-end: var(--hairline) solid var(--line); }
.toolbar__top { display: flex; gap: var(--space-3); align-items: center; }
.toolbar__toggle { flex: none; }
.toolbar__more { display: grid; gap: var(--space-4); }
.toolbar__selects { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
@media (min-width: 760px) {
  .toolbar__toggle { display: none; }
  .toolbar__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
  .toolbar__selects { justify-content: flex-end; margin-inline-start: auto; }
  .toolbar .field select { min-width: 176px; }
}
@media (max-width: 759px) {
  .toolbar:not(.is-open) .toolbar__more { display: none; }
  .toolbar.is-open .toolbar__toggle { border-color: var(--gold-400); color: var(--gold-text); }
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips--houses { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
[dir="rtl"] .chips--houses { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
.chips--houses::-webkit-scrollbar { display: none; }
.chips--houses .chip { flex: none; }
.chip { min-height: 40px; padding: 8px 16px; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-full); font-size: 14px; line-height: 22px; font-weight: 300; color: var(--ink); background: transparent; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.chip:hover { border-color: var(--gold-400); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--action); color: var(--on-action); border-color: var(--action); font-weight: 400; }
.chip--sm { min-height: 34px; padding: 5px 13px; font-size: 13px; }
.chip--static:hover { border-color: var(--line-strong); }
.chip--dot::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--liq); border: var(--hairline) solid currentColor; }
.count { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin-block-end: var(--space-6); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, .field > label { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--ink); }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; background: var(--ground-raised); color: var(--ink);
  border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm); font-size: 16px; line-height: 26px;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--gold-400); }
.toolbar .field { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.toolbar .field select { min-height: 44px; border-radius: var(--radius-full); padding-inline: 16px; }
.searchbox { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 0; max-width: 460px; }
.searchbox__ico { position: absolute; inset-inline-start: 16px; width: 16px; height: 16px; color: var(--ink-muted); pointer-events: none; }
.searchbox input { width: 100%; height: 46px; padding-inline: 44px 46px; background: var(--ground); color: var(--ink); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-full); font-size: 16px; line-height: 24px; }
.searchbox input::placeholder { color: var(--ink-faint); opacity: 1; }
.searchbox input:focus-visible { outline: none; border-color: var(--gold-400); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox__clear { position: absolute; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; color: var(--ink); display: grid; place-items: center; }
.searchbox__clear:hover { background: var(--onyx-700); }
.searchbox__clear svg { width: 12px; height: 12px; }
.empty { display: grid; gap: var(--space-4); justify-items: center; text-align: center; padding-block: var(--space-16); color: var(--ink-muted); }

/* ---- product page -------------------------------------------------------- */
.pdp-sec { background: radial-gradient(ellipse 50% 60% at 24% 40%, rgba(40, 72, 168, .01), transparent 70%), var(--ground); padding-block: var(--space-8) var(--space-16); }
.pdp-wrap { display: grid; gap: var(--space-6); }
.pdp { display: grid; gap: var(--space-8); }
@media (min-width: 920px) { .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; } }
.pdp__art { position: relative; min-width: 0; }
@media (min-width: 920px) { .pdp__art { position: sticky; top: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px)); } }
.pdp__gallery { display: grid; gap: var(--space-4); justify-items: center; }
.pdp__stage { position: relative; width: min(100%, 520px); aspect-ratio: 4 / 5; border-radius: var(--frame); background: var(--vitrine); overflow: hidden; box-shadow: var(--shadow-vitrine); }
.pdp__stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--hairline) rgba(116, 89, 44, .3); pointer-events: none; }
.pdp__photo { position: absolute; inset: 12% 6% 4%; width: 88%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.pdp__thumb { width: 64px; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); background: var(--vitrine); overflow: hidden; border: var(--hairline) solid transparent; opacity: .7; transition: opacity var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8px 4px 2px; }
.pdp__thumb:hover { opacity: 1; }
.pdp__thumb[aria-current="true"] { opacity: 1; border-color: var(--gold-400); }
.pdp__buy { display: grid; gap: var(--space-6); min-width: 0; align-content: start; }
.pdp__title { display: grid; gap: var(--space-3); }
.pdp__title .eyebrow a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pdp__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pdp__price { font-size: 24px; line-height: 32px; font-weight: 400; font-variant-numeric: tabular-nums; }
.pdp__price--ask { font-family: var(--font-display); font-size: 22px; color: var(--gold-text); }
/* the line under the price: stock, then the bottle size; it sits close to the price */
.pdp__stock { margin-block-start: calc(var(--space-4) * -1); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.quick .pdp__stock { margin-block-start: calc(var(--space-2) * -1); }
.pdp__stock .stock { font-size: inherit; line-height: inherit; }
.btn:disabled, .qty button:disabled { opacity: .45; cursor: not-allowed; }
:lang(ar) .pdp__price--ask { font-family: var(--font-ar-display); }
.pdp__group { display: grid; gap: var(--space-3); }
.pdp__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }
.pdp__row .btn--primary { flex: 1 1 220px; }
.pdp__spec { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.sizes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sizes label { position: relative; cursor: pointer; }
.sizes input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sizes span { display: grid; place-items: center; min-width: 92px; min-height: 48px; padding: 8px 16px; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-full); font-size: 15px; line-height: 22px; background: var(--ground-raised); }
.sizes input:checked + span { background: var(--action); color: var(--on-action); border-color: var(--action); }
.sizes input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.qty { display: inline-flex; align-items: stretch; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-full); background: var(--ground-raised); overflow: hidden; }
.qty button { width: 46px; min-height: 50px; display: grid; place-items: center; color: var(--ink); }
.qty button:hover { background: var(--onyx-700); }
.qty button svg { width: 16px; height: 16px; }
.qty output { min-width: 36px; display: grid; place-items: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.qty--sm button { width: 36px; min-height: 36px; }
.qty--sm output { min-width: 28px; font-size: 14px; }
.assure { display: grid; gap: var(--space-3); padding-block-start: var(--space-6); border-block-start: var(--hairline) solid var(--line); }
.assure li { display: flex; gap: var(--space-3); align-items: center; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.assure svg { width: 20px; height: 20px; flex: none; color: var(--gold-text); }
.dl { display: grid; border-block-start: var(--hairline) solid var(--rule-brass); }
.dl > div { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-block-end: var(--hairline) solid var(--line); align-items: center; }
.dl dt { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.dl dd { font-weight: 400; }
.split { display: grid; gap: var(--space-12); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: start; } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the scent diagram, restored from the earlier site: notes with a dot in their colour,
   main accords as bars in each accord's colour, and when to wear it as brass bars.
   Only the note names moved to the display face, to sit with the new type. */
.notes3 { display: grid; border-block-start: var(--hairline) solid var(--ink); }
.notes3 > div { display: grid; gap: var(--space-3); padding-block: var(--space-6); border-block-end: var(--hairline) solid var(--line); align-content: start; }
.notes3 ul { display: grid; gap: 2px; }
.notes3 li { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 21px; line-height: 32px; font-weight: 400; }
.notes3 .small { margin-block-start: -6px; }
.notes3 .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
@media (min-width: 760px) {
  .notes3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes3 > div { padding: var(--space-8) var(--space-8) var(--space-8) 0; border-block-end: 0; border-inline-start: var(--hairline) solid var(--line); padding-inline: var(--space-8); }
  .notes3 > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
}
.scent__panels { display: grid; gap: var(--space-8); padding-block-start: var(--space-8); border-block-start: var(--hairline) solid var(--line); margin-block-start: var(--space-8); }
@media (min-width: 800px) { .scent__panels { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
.scent__panels .h4 { margin-block-end: var(--space-2); }
.accords__list, .whenwear__grid { display: grid; gap: 10px; margin-block-start: var(--space-4); }
.accords__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; }
.accords__name { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.accords__bar { height: 6px; background: var(--line); border-radius: var(--radius-full); overflow: hidden; }
.accords__bar i { display: block; height: 100%; border-radius: var(--radius-full); }
.whenwear__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.whenwear__row { display: grid; gap: 5px; }
.whenwear__name { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
:lang(ar) .whenwear__name { letter-spacing: 0; text-transform: none; font-size: 14px; }
.whenwear__for { display: grid; gap: var(--space-3); margin-block-start: var(--space-8); }
.whenwear__for .label { color: var(--gold-text); }
.whenwear__for .wchips { margin: 0; }
.whenwear__bar { height: 6px; background: var(--line); border-radius: var(--radius-full); overflow: hidden; }
.whenwear__bar i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--gold-400); }
/* wear badges (seasons / time of day / occasions) */
.wchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-6); }
.wchip { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 13px; border: var(--hairline) solid var(--line-strong); border-radius: 999px; background: var(--ground-raised); color: var(--ink-muted); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wchip--season { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold-300) 45%, var(--line-strong)); }
.wchip--time { color: var(--ink); }
.wchip--occ { text-transform: none; letter-spacing: 0; font-weight: 500; }
:lang(ar) .wchip { text-transform: none; letter-spacing: 0; }
:lang(ar) .accords__name { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ---- guide, about, delivery, contact ------------------------------------- */
.famlist { display: grid; border-block-start: var(--hairline) solid var(--rule-brass); }
.famlist a, .famlist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-6); align-items: center; padding-block: var(--space-6); border-block-end: var(--hairline) solid var(--line); }
.famlist .swatch { width: 44px; height: 44px; border-radius: 50%; background: var(--liq); border: var(--hairline) solid var(--gold-500); box-shadow: inset 0 0 0 4px var(--ground-alt); grid-row: span 2; }
.famlist p { color: var(--ink-muted); grid-column: 2; }
.famlist .h3 { grid-column: 2; }
.pyr { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .pyr { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-16); } }
.pyr__fig { display: grid; gap: 8px; justify-items: center; }
.pyr__fig div { display: grid; place-items: center; text-align: center; min-height: 92px; padding: var(--space-3) var(--space-4); border: var(--hairline) solid var(--gold-500); border-radius: var(--frame); background: var(--onyx-800); }
.pyr__fig div:nth-child(1) { width: 46%; background: var(--marble-onyx) center / cover, var(--onyx-800); }
.pyr__fig div:nth-child(2) { width: 72%; background-color: var(--onyx-700); }
.pyr__fig div:nth-child(3) { width: 100%; background: var(--action); color: var(--on-action); }
.pyr__fig small { display: block; font-size: 13px; line-height: 20px; opacity: .8; }
.pyr__list { display: grid; gap: var(--space-6); }
.pyr__list > div { display: grid; gap: 6px; }
.pyr__list p { color: var(--ink-muted); }
.promise { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .promise { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); } }
.promise__mark { position: relative; aspect-ratio: 4 / 5; max-width: 380px; width: 100%; margin-inline: auto; background: radial-gradient(ellipse at 50% 35%, rgba(40, 72, 168, .018), transparent 70%), var(--marble-onyx) center / cover, var(--onyx-800); border-radius: var(--frame); display: grid; place-items: center; box-shadow: inset 0 0 0 var(--hairline) var(--rule-brass); }
.promise__mark img { width: 64%; }
.promise__mark::after { content: ""; position: absolute; inset: -12px; border: var(--hairline) solid var(--gold-500); border-radius: var(--frame); pointer-events: none; }
.promise blockquote { display: grid; gap: var(--space-4); }
.promise__q { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; text-wrap: balance; }
.promise__q em { font-style: normal; color: var(--gold-text); }
:lang(ar) .promise__q { font-family: var(--font-ar-display); font-weight: 600; line-height: 1.5; }
:lang(ar) .promise__q em { color: var(--rose); }
.acc { border-block-start: var(--hairline) solid var(--rule-brass); }
.acc details { border-block-end: var(--hairline) solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); font-family: var(--font-display); font-size: 19px; }
:lang(ar) .acc summary { font-family: var(--font-ar-display); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary svg { width: 20px; height: 20px; flex: none; color: var(--gold-text); transition: transform var(--dur-base) var(--ease); }
.acc details[open] summary svg { transform: rotate(45deg); }
.acc details > p { padding-block-end: var(--space-6); color: var(--ink-muted); max-width: var(--measure); }
.copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.copyrow .num { font-family: var(--font-display); font-size: 26px; line-height: 32px; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; user-select: all; }
.form { display: grid; gap: var(--space-4); }
.meter { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-inline-end: 10px; }
.meter i { width: 22px; height: 8px; border: var(--hairline) solid var(--ink); }
.meter i.on { background: var(--gold-400); }
.finder { display: grid; gap: var(--space-8); padding: var(--space-8) var(--space-6); background: var(--ground-raised); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md); }
@media (min-width: 760px) { .finder { padding: var(--space-12); } }
.finder__head { display: grid; gap: var(--space-3); }
.finder__bar { display: flex; gap: 6px; }
.finder__bar i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.finder__bar i.on { background: var(--gold-400); }
.finder__q { display: grid; gap: var(--space-6); }
.finder__nav { display: flex; gap: var(--space-4); align-items: center; }

/* ---- 404 ---------------------------------------------------------------- */
.nf { position: relative; background: radial-gradient(ellipse 40% 60% at 30% 45%, rgba(40, 72, 168, .012), transparent 70%), var(--ground); }
.nf__wrap { display: grid; gap: var(--space-12); align-items: center; padding-block: var(--space-16) var(--space-24); }
@media (min-width: 860px) { .nf__wrap { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-16); } }
.nf__frame { position: relative; justify-self: center; width: min(100%, 300px); aspect-ratio: 4 / 5; border-radius: var(--frame); display: grid; place-items: center; background: radial-gradient(ellipse at 50% 35%, rgba(40, 72, 168, .016), transparent 70%), var(--marble-onyx) center / cover, var(--onyx-800); box-shadow: 0 0 0 var(--hairline) var(--gold-500), 0 0 0 9px var(--ground), 0 0 0 10px var(--rule-brass), var(--shadow-vitrine); }
.nf__frame img { width: 62%; }
.nf__copy { display: grid; gap: var(--space-5); justify-items: start; }
.nf__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
/* ---- right-to-left: Latin-only content (house names, notes, English-only descriptions) sits on the Arabic side ---- */
[dir="rtl"] .card__fam, [dir="rtl"] p.eyebrow[dir="ltr"] { text-align: right; justify-content: flex-end; }
[data-i18n$=".desc"] { unicode-bidi: plaintext; }
[dir="rtl"] [data-i18n$=".desc"] { text-align: right; }
.nf__copy > * { max-width: 100%; }
.nf .colnav__list { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 859px) { .nf__wrap { padding-block-start: var(--space-10); } .nf__frame { width: min(62%, 240px); } }

/* ---- footer -------------------------------------------------------------- */
.foot { position: relative; background: var(--ground-sunken); color: var(--ink); }
.foot::before { content: ""; display: block; height: 30px; background: var(--ironwork) repeat-x left center / auto 28px; opacity: .5; border-block: var(--hairline) solid var(--rule-brass); }
.foot__top { display: grid; gap: var(--space-12) var(--space-8); padding-block: var(--space-16) var(--space-12); }
@media (max-width: 639px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-5); } .foot__brand { grid-column: 1 / -1; } }
@media (min-width: 640px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot__top { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); } }
.foot__brand { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.foot__brand img { width: 88px; height: 88px; border-radius: 50%; }
.foot__line { font-family: var(--font-display); font-size: 20px; line-height: 1.45; max-width: 22ch; }
:lang(ar) .foot__line { font-family: var(--font-ar-display); }
.foot__col { display: grid; gap: var(--space-4); align-content: start; }
.foot__col h2 { color: var(--gold-text); }
.foot__col ul { display: grid; gap: 10px; }
.foot__col a { color: var(--ink-muted); font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }
.foot__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot__col .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.foot__base { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; padding-block: var(--space-6); border-block-start: var(--hairline) solid var(--line); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---- layers: scrim, bag drawer, menu, quick view, toast, search ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
.scrim.is-open { opacity: 1; }
.drawer, .sheet { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 70; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--ground-raised); color: var(--ink); box-shadow: var(--shadow-overlay); border-inline-start: var(--hairline) solid var(--rule-brass); transform: translateX(104%); transition: transform .45s var(--ease); padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); }
[dir="rtl"] .drawer, [dir="rtl"] .sheet { transform: translateX(-104%); }
.drawer.is-open, .sheet.is-open, [dir="rtl"] .drawer.is-open, [dir="rtl"] .sheet.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-block-end: var(--hairline) solid var(--line); }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6); display: grid; gap: var(--space-8); align-content: start; }
.drawer__foot { display: grid; gap: var(--space-3); padding: var(--space-6); border-block-start: var(--hairline) solid var(--line); background: var(--ground); }
.bag-empty { display: grid; gap: var(--space-6); justify-items: center; text-align: center; padding-block: var(--space-12); color: var(--ink-muted); }
.bag-items { display: grid; }
.bag-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-block-end: var(--hairline) solid var(--line); }
.bag-item:first-child { padding-block-start: 0; }
.bag-item__art { position: relative; aspect-ratio: 4 / 5; background: var(--vitrine); border-radius: var(--radius-sm); overflow: hidden; }
.bag-item__art .shot { inset: 12% 6% 4%; width: 88%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.bag-item__art .bottle { position: absolute; inset: 6% 10%; width: 80%; height: 88%; }
.bag-item__art .b-halo { display: none; }
.bag-item__main { display: grid; gap: 4px; min-width: 0; }
.bag-item__top { display: flex; justify-content: space-between; gap: var(--space-3); }
.bag-item__name { font-family: var(--font-display); font-size: 17px; line-height: 24px; }
.bag-item__name:hover { color: var(--gold-text); }
.bag-item__meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.bag-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: 6px; }
.bag-item__price { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bag-form { display: grid; gap: var(--space-4); }
.bag-form__head { display: grid; gap: 2px; }
.bag-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.bag-total strong { font-family: var(--font-display); font-size: 18px; line-height: 26px; text-align: end; font-weight: 400; font-variant-numeric: tabular-nums; }
.drawer__foot .linkbtn { justify-self: center; }
.sheet__tag { margin-inline-start: auto; margin-inline-end: var(--space-3); padding: 2px 10px; border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: 12px; line-height: 20px; color: var(--gold-text); }
.sheet__foot { display: grid; gap: var(--space-3); }
/* the side menu: slides in from the start edge (left, or right in Arabic) */
.menu { inset-inline-start: 0; inset-inline-end: auto; width: min(400px, 88vw); border-inline-start: 0; border-inline-end: var(--hairline) solid var(--rule-brass); transform: translateX(-104%); }
[dir="rtl"] .menu { transform: translateX(104%); }
.menu__body { gap: var(--space-8); padding-block-start: var(--space-2); }
.menu__nav { display: grid; align-content: start; }
.menu__label { margin-block: var(--space-8) var(--space-2); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-text); }
.menu__label:first-child { margin-block-start: var(--space-4); }
:lang(ar) .menu__label { letter-spacing: 0; font-size: 13px; }
.menu__big a { display: block; padding-block: 4px; font-family: var(--font-display); font-size: clamp(32px, 8.5vw, 40px); line-height: 1.12; color: var(--ink); transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
:lang(ar) .menu__big a { font-family: var(--font-ar-display); font-weight: 500; line-height: 1.35; }
.menu__big a:hover, .menu__big a[aria-current="page"] { color: var(--gold-text); transform: translateX(6px); }
[dir="rtl"] .menu__big a:hover, [dir="rtl"] .menu__big a[aria-current="page"] { transform: translateX(-6px); }
.menu__big a.menu__all { margin-block-start: var(--space-3); font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--rule-brass); }
:lang(ar) .menu__big a.menu__all { letter-spacing: 0; font-size: 15px; }
.menu__list a, .menu__acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 12px; border-block-end: var(--hairline) solid var(--line); font-size: 17px; line-height: 24px; color: var(--ink); transition: color var(--dur-quick) var(--ease); }
.menu__list a:hover, .menu__list a[aria-current="page"], .menu__acc summary:hover { color: var(--gold-text); }
.menu__acc summary { cursor: pointer; list-style: none; }
.menu__acc summary::-webkit-details-marker { display: none; }
.menu__acc summary::after { content: ""; flex: none; width: 8px; height: 8px; border-inline-end: 1px solid currentColor; border-block-end: 1px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-base) var(--ease); }
.menu__acc[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.menu__acc .menu__list a { padding-inline-start: var(--space-4); font-size: 15px; color: var(--ink-muted); }
.menu__houses { columns: 2; column-gap: var(--space-6); padding-block: var(--space-3); }
.menu__houses li { break-inside: avoid; }
.menu__houses a { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: 7px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.menu__houses a:hover { color: var(--gold-text); }
.menu__n { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.menu__acc summary > span:first-child { flex: 1; }
.menu__seeall { margin-block: var(--space-2) var(--space-4); }
.menu__small a { display: flex; align-items: center; gap: var(--space-3); padding-block: 8px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.menu__small a:hover, .menu__small a[aria-current="page"] { color: var(--gold-text); }
.menu__small a.menu__finder { color: var(--gold-text); }
.menu__small .sheet__tag { margin: 0; }
.menu.is-open .menu__big li { animation: menu-in .55s var(--ease) both; }
.menu.is-open .menu__big li:nth-child(2) { animation-delay: .05s; }
.menu.is-open .menu__big li:nth-child(3) { animation-delay: .1s; }
.menu.is-open .menu__big li:nth-child(4) { animation-delay: .15s; }
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .menu.is-open .menu__big li { animation: none; } }
.sheet .langbtn { justify-self: start; }
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--space-4); pointer-events: none; }
.modal__panel { pointer-events: auto; position: relative; width: min(880px, 100%); max-height: min(92vh, 760px); overflow-y: auto; background: var(--ground-raised); color: var(--ink); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); opacity: 0; transform: translateY(14px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; background: var(--ground-raised); }
.quick { display: grid; }
@media (min-width: 720px) { .quick { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.quick__art { position: relative; aspect-ratio: 4 / 5; background: var(--vitrine); overflow: hidden; }
.quick__art .shot { inset: 10% 8% 4%; width: 84%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.quick__art .bottle { position: absolute; inset: 7% 14%; width: 72%; height: 86%; }
@media (max-width: 719px) { .quick__art { aspect-ratio: 16 / 10; } .quick__art .bottle { inset: 6% 30%; width: 40%; height: 88%; } }
.quick__body { display: grid; gap: var(--space-4); padding: var(--space-8) var(--space-6); align-content: center; }
@media (min-width: 720px) { .quick__body { padding: var(--space-12) var(--space-8); } }
.quick .pdp__spec { margin-block-start: -6px; }
.toast { position: fixed; inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; z-index: 80; display: flex; justify-content: center; padding-inline: var(--space-4); pointer-events: none; }
/* on phones the toast sits at the top, clear of the bag's Send on WhatsApp button */
@media (max-width: 759px) { .toast { inset-block-start: calc(12px + env(safe-area-inset-top, 0px)); inset-block-end: auto; } .is-locked .toast { inset-block-start: auto; inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px)); } }
.toast > div { pointer-events: auto; display: flex; align-items: center; gap: var(--space-4); background: var(--sand-100); color: var(--oud); padding: 12px 20px; border-radius: var(--radius-full); box-shadow: var(--shadow-float); font-size: 15px; line-height: 22px; animation: rise var(--dur-base) var(--ease) both; }
.toast button { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; color: var(--brass-700); }
.srch { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 66; }
.srch[hidden] { display: none; }
.srch__panel { background: var(--ground-raised); border-block-end: var(--hairline) solid var(--rule-brass); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); transform: translateY(-14px); opacity: 0; transition: transform .28s var(--ease), opacity .28s var(--ease); }
.srch.is-open .srch__panel { transform: none; opacity: 1; }
.srch__row { display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: 1080px; margin-inline: auto; padding: var(--space-3) var(--space-4); }
.srch__back { flex: none; }
.srch__form { position: relative; flex: 1; min-width: 0; }
.srch__mark { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-muted); pointer-events: none; }
.srch__input { width: 100%; height: 52px; padding-inline: 52px 110px; -webkit-appearance: none; appearance: none; border: var(--hairline) solid var(--line-strong); background: var(--ground); color: var(--ink); border-radius: var(--radius-full); font-size: 16px; line-height: 26px; }
.srch__input::placeholder { color: var(--ink-faint); opacity: 1; }
.srch__input:focus-visible { outline: none; border-color: var(--gold-400); }
.srch__input::-webkit-search-cancel-button { display: none; }
.srch__spin { position: absolute; inset-inline-end: 64px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid var(--line-strong); border-block-start-color: var(--gold-400); border-radius: 50%; animation: searchSpin .6s linear infinite; }
@keyframes searchSpin { to { transform: translateY(-50%) rotate(360deg); } }
.srch__x { position: absolute; inset-inline-end: 62px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; color: var(--ink-muted); display: grid; place-items: center; }
.srch__x svg { width: 11px; height: 11px; }
.srch__x:hover { background: var(--onyx-700); color: var(--ink); }
.srch__go { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--action); color: var(--on-action); display: grid; place-items: center; }
.srch__go svg { width: 18px; height: 18px; }
.srch__go:hover { background: var(--action-hover); }
.srch__body { max-height: min(58vh, 540px); overflow-y: auto; overscroll-behavior: contain; padding-block: var(--space-2) var(--space-6); }
.srch__body .wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--space-4); }
.srch__hint { display: grid; gap: 8px; padding-block: var(--space-2); }
.srch__hintlabel { font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500; color: var(--gold-text); }
.srch__hintrow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.srch__chip { min-height: 38px; padding: 7px 16px; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-full); font-size: 14px; line-height: 22px; color: var(--ink); }
.srch__chip:hover { border-color: var(--gold-400); color: var(--gold-text); }
.srch__list { display: grid; gap: 2px; padding-block: var(--space-2); }
.srch__item { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: var(--hairline) solid transparent; border-radius: var(--radius-md); }
.srch__item:hover, .srch__item.is-cur { background: var(--ground); border-color: var(--line); }
.srch__thumb { position: relative; flex: none; width: 52px; height: 64px; overflow: hidden; border-radius: var(--radius-sm); background: var(--vitrine); }
.srch__thumb .shot { inset: 10% 6% 4%; width: 88%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.srch__info { display: grid; gap: 1px; min-width: 0; }
.srch__house { font-size: 11px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--gold-text); }
.srch__name { font-family: var(--font-display); font-size: 17px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.srch__meta { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.srch__none { color: var(--ink-muted); padding-block: var(--space-4); }
.srch__all { justify-self: center; margin-block-start: var(--space-3); }
@media (min-width: 1024px) { .srch__row { padding-block: var(--space-4); } }
@media (max-width: 639px) { .srch__input { font-size: 16px; } .srch__hintrow { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 6px; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); scrollbar-width: none; } .srch__hintrow::-webkit-scrollbar { display: none; } .srch__chip { flex: none; } }
.fab { position: fixed; inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 20px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: var(--on-whatsapp); display: grid; place-items: center; box-shadow: var(--shadow-float); transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), visibility 0s; }
.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: scale(1.06); }
.fab.is-aside { opacity: 0; visibility: hidden; transform: scale(.85); transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), visibility 0s var(--dur-base); }
@media (max-width: 759px) { .fab { width: 48px; height: 48px; inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 16px; } .fab svg { width: 22px; height: 22px; } }
html.is-locked { overflow: hidden; }
/* first visit only: a small, dismissible pointer to the Scent Finder (home page) */
.nudge { position: fixed; z-index: 35; inset-inline-end: 20px; inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 24px)); display: flex; align-items: center; gap: var(--space-3); padding: 12px 10px 12px 18px; background: var(--ground-raised); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md); box-shadow: var(--shadow-float); animation: rise .5s var(--ease) both; }
.nudge[hidden] { display: none; }
.nudge__t { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.nudge__t a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.nudge__t a:hover { color: var(--ink); }
.nudge__x { width: 40px; height: 40px; border-color: transparent; }
.nudge__x svg { width: 16px; height: 16px; }
@media (max-width: 759px) { .nudge { inset-inline: 12px; width: auto; inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* house names stay left-to-right text, but sit on the page's own side in Arabic */
[dir="rtl"] :is(p, h1, h2, h3, h4)[dir="ltr"] { text-align: right; }

/* ---- motion -------------------------------------------------------------- */
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rv-go { animation: rise var(--dur-slow) var(--ease) both; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .offers__track { animation: none; }
  .film__shot img, .film__ring { animation: none !important; }
  .film__puff, .hero__sweep { display: none; }
  .film__toggle { display: none; }
  .finder-cta__note { animation: none; }
  .btn--buy.is-shake { animation: none !important; }
  .nudge { animation: none; }
}

/* ---- Scent Finder (finder.html + guide banner) ------------------------------ */
.sf { scroll-margin-top: calc(var(--header-h) + var(--space-4)); min-height: 320px; }
.sf-loading { color: var(--ink-muted); font-size: 16px; line-height: 26px; }
.sf-title { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.sf-title:focus:not(:focus-visible) { outline: none; }
.sf .h2 em, .sf-cta .h3 em { font-style: normal; color: var(--gold-text); }

/* intro: two ways in */
.sf-intro { display: grid; gap: var(--space-6); }
.sf-paths { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .sf-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.sf-path { position: relative; display: grid; gap: var(--space-2); align-content: start; text-align: start; padding: var(--space-6); padding-inline-end: var(--space-16); min-height: 168px; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-md); background: var(--ground); color: var(--ink); transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.sf-path:hover { border-color: var(--gold-500); background: color-mix(in srgb, var(--gold-400) 6%, var(--ground)); }
.sf-path__t { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 25px); line-height: 1.3; font-weight: 400; }
.sf-path__d { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.sf-path__go { position: absolute; inset-inline-end: var(--space-6); inset-block-start: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-full); color: var(--gold-text); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.sf-path__go svg { width: 18px; height: 18px; }
.sf-path:hover .sf-path__go { background: var(--action); color: var(--on-action); border-color: var(--action); }
.sf-last { margin: 0; }

/* one question */
.sf-step { display: grid; gap: var(--space-8); }
.sf-q { display: grid; gap: var(--space-4); min-width: 0; }
.sf-hint { margin-block-start: calc(var(--space-2) * -1); font-size: 16px; line-height: 26px; }
.sf-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-3); }
.sf-set + .sf-set { margin-block-start: var(--space-4); }
.sf-legend { padding: 0; margin-block-end: var(--space-3); color: var(--ink-muted); }
:lang(ar) .sf-legend { letter-spacing: 0; text-transform: none; font-size: 14px; }
.sf-limit { margin: 0; }

/* answer cards */
.sf-opts { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 900px) { .sf-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-opt { position: relative; display: flex; align-items: center; gap: var(--space-4); min-height: 76px; padding: 14px 18px; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-md); background: var(--ground); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.sf-opt:hover { border-color: var(--ink); }
.sf-opt.is-on { border-color: var(--gold-400); background: color-mix(in srgb, var(--gold-400) 12%, var(--ground)); }
.sf-opt.is-off { opacity: .45; cursor: not-allowed; }
.sf-opt.is-off:hover { border-color: var(--line-strong); }
.sf-opt__in, .sf-chip__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sf-opt__box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 3px; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.sf-opt__in[type="radio"] + .sf-opt__box { border-radius: 50%; }
.sf-opt.is-on .sf-opt__box { background: var(--gold-400); border-color: var(--gold-400); }
.sf-opt.is-on .sf-opt__in[type="checkbox"] + .sf-opt__box::after { content: ""; width: 5px; height: 10px; margin-block-start: -2px; border: solid var(--on-gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sf-opt.is-on .sf-opt__in[type="radio"] + .sf-opt__box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-gold); }
.sf-opt__txt { display: grid; gap: 2px; min-width: 0; }
.sf-opt__t { font-size: 17px; line-height: 24px; font-weight: 500; }
.sf-opt__h { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sf-opt__dot { flex: none; margin-inline-start: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--liq); border: var(--hairline) solid color-mix(in srgb, var(--ink) 30%, transparent); }

/* note chips */
.sf-chip { position: relative; cursor: pointer; }
.sf-chip.is-on { background: var(--action); color: var(--on-action); border-color: var(--action); }
.sf-chip.is-off { opacity: .4; cursor: not-allowed; }
.sf-chip.is-off:hover { border-color: var(--line-strong); }

/* keyboard focus ring on the visible card/chip, not the hidden input */
.sf-opt:has(.sf-opt__in:focus-visible), .sf-chip:has(.sf-chip__in:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
@supports not selector(:has(a)) { .sf-opt:focus-within, .sf-chip:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } }

.sf-nav { flex-wrap: wrap; padding-block-start: var(--space-6); border-block-start: var(--hairline) solid var(--line); }
.sf-skip { margin-inline-start: auto; }
@media (max-width: 559px) {
  .sf-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
  .sf-nav .btn { padding-inline: 18px; }
  .sf-skip { grid-column: 1 / -1; justify-self: center; margin: 0; min-height: 44px; }
}

/* results */
.sf-results { display: grid; gap: var(--space-6); }
.sf-reshead { margin: 0; display: grid; gap: var(--space-3); }
.sf-based { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sf-based .wchip { margin: 0; }
.sf-notice { margin: 0; padding: 14px 18px; border-inline-start: 2px solid var(--gold-500); background: var(--ground-sunken); color: var(--ink); font-size: 15px; line-height: 24px; }
.sf-grid { margin-block: var(--space-2) var(--space-4); }
.sf-grid .card { animation: cardIn .55s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--d, 0) * 70ms); }
.sf-card__match { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-start: 10px; margin: 0; padding: 4px 11px; border: var(--hairline) solid color-mix(in srgb, var(--gold-400) 55%, transparent); border-radius: var(--radius-full); background: color-mix(in srgb, var(--ground) 88%, transparent); color: var(--gold-text); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.sf-card__match strong { font-weight: 700; }
.sf-card__cat { margin: 0; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
:lang(ar) .sf-card__cat { letter-spacing: 0; text-transform: none; font-size: 13px; }
.sf-card__why { margin-block: 6px 12px; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.sf-card__warn { margin-block: -6px 12px; font-size: 13px; line-height: 20px; color: var(--danger); }
.sf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.sf-refine { display: grid; gap: var(--space-4); padding: var(--space-6); border: var(--hairline) solid var(--line); background: var(--ground); }
.sf-refine[hidden] { display: none; }
.sf-sum { display: grid; margin: 0; }
.sf-sum__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-4); align-items: center; padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--line); }
.sf-sum__row:last-child { border-block-end: 0; }
.sf-sum dt { grid-column: 1; font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
:lang(ar) .sf-sum dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.sf-sum dd { margin: 0; grid-column: 1; font-size: 15px; line-height: 24px; }
.sf-sum dd:last-child { grid-column: 2; grid-row: 1 / span 2; }
.sf-sum dd:last-child .linkbtn { min-height: 44px; }
@media (min-width: 760px) {
  .sf-sum__row { grid-template-columns: 180px minmax(0, 1fr) auto; }
  .sf-sum dd { grid-column: 2; }
  .sf-sum dd:last-child { grid-column: 3; grid-row: 1; }
}
.sf-sum__none { color: var(--ink-faint); }

/* help strip under the finder */
.sf-help .wrap { display: grid; gap: var(--space-6); align-items: center; }
.sf-help .lede { margin-block-start: var(--space-2); }
@media (min-width: 900px) { .sf-help .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); } }
.sf-help .closing__cta { justify-content: flex-start; }

/* Scent Finder banner on the Scent Guide */
.sf-cta { position: relative; display: grid; gap: var(--space-6); align-items: center; padding: var(--space-8) var(--space-6); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md); background: var(--marble-onyx) center / cover, var(--onyx-800); }
.sf-cta__copy { display: grid; gap: var(--space-2); }
@media (min-width: 860px) { .sf-cta { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-8) var(--space-12); gap: var(--space-12); } }
.sec.sf-cta-band { padding-block: var(--space-12); }

/* ---- prices -------------------------------------------------------------------------
   The owner's two groups and two box options, shown the same way everywhere it appears:
   the original price greyed out with a single diagonal line drawn from its bottom left to
   its top right, and the current price directly underneath, larger, bold and in the brand
   gold. The saving sits with it as a small brass chip. Every figure comes from the pricing
   table in tools/build-catalog.mjs - none of it is worked out in the stylesheet. */
.price { display: inline-grid; justify-items: start; gap: 2px; line-height: 1.1; }
.price__was {
  display: inline-block; font-size: 13px; color: var(--ink-faint); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  /* `to top right` always runs corner to corner, so one line crosses the whole figure
     whatever width the number happens to be */
  background-image: linear-gradient(to top right, transparent 46.5%, currentColor 47%, currentColor 53%, transparent 53.5%);
}
.price__now { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--gold-text); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
:lang(ar) .price__now { font-family: var(--font-ar-display); }
.price__save, .boxopt__save, .boxcard__save {
  justify-self: start; font-size: 11px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brass-600); background: rgba(40, 72, 168, .08);
  border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-full);
  padding: 4px 9px; margin-block-start: 3px; white-space: nowrap;
}
.price--sm .price__was { font-size: 12px; }
.price--sm .price__now { font-size: 18px; }
.price--big .price__was { font-size: 15px; }
.price--big .price__now { font-size: 30px; }
:lang(ar) .price { justify-items: start; }

/* the two ways to buy, side by side and of equal weight; one of them must be chosen
   before the customer can add to the bag */
.boxpick { display: grid; gap: var(--space-2); }
.boxpick__hint { color: var(--ink-muted); margin-block-end: var(--space-1); }
.boxpick__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.boxopt {
  position: relative; display: grid; justify-items: start; gap: 1px; text-align: start; color: inherit; font: inherit;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--onyx-800); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.boxopt:hover { border-color: var(--gold-500); background: var(--onyx-700); }
.boxopt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.boxopt.is-on { border-color: var(--gold-400); background: color-mix(in srgb, var(--gold-500) 13%, var(--onyx-800)); box-shadow: inset 0 0 0 1px var(--gold-500); }
.boxopt__tick { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); inline-size: 17px; block-size: 17px; border-radius: 50%; border: var(--hairline) solid var(--line-strong); transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); }
.boxopt.is-on .boxopt__tick { border-color: var(--gold-400); background: var(--gold-400); }
.boxopt.is-on .boxopt__tick::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--onyx-900); }
.boxopt__name { font-family: var(--font-display); font-size: 17px; line-height: 1.25; color: var(--ink); padding-inline-end: 26px; }
:lang(ar) .boxopt__name { font-family: var(--font-ar-display); }
.boxopt__hint { font-size: 12px; line-height: 17px; color: var(--ink-muted); margin-block-end: var(--space-2); }
.boxopt .price { margin-block-start: var(--space-1); }

/* the Buy Now step: asked before anything goes in the bag, because the two options are
   different prices */
.boxchoose { display: grid; gap: var(--space-2); }
.boxchoose > .lede { margin-block-start: var(--space-2); }
.boxchoose__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-block-start: var(--space-4); }
.boxcard {
  display: grid; justify-items: start; gap: var(--space-2); text-align: start; color: inherit; font: inherit; cursor: pointer;
  padding: var(--space-5); background: var(--onyx-800); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-quick) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.boxcard:hover { border-color: var(--gold-400); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.boxcard:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.boxcard__top { display: grid; gap: 2px; }
.boxcard__name { font-family: var(--font-display); font-size: 20px; line-height: 1.25; color: var(--ink); }
:lang(ar) .boxcard__name { font-family: var(--font-ar-display); }
.boxcard__hint { font-size: 13px; color: var(--ink-muted); }
@media (max-width: 620px) {
  .boxchoose__opts, .boxpick__opts { grid-template-columns: minmax(0, 1fr); }
}

/* the bag: the option, the original total struck, and what the whole bag saved */
.bag-saved { font-size: 12px; line-height: 18px; color: var(--gold-text); margin-block-start: 2px; }
.bag-item__box { color: var(--ink-muted); }
.bag-item__was { font-size: 12px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.bag-item__was s { text-decoration: none; background-image: linear-gradient(to top right, transparent 46.5%, currentColor 47%, currentColor 53%, transparent 53.5%); }
.bag-item__save { color: var(--gold-text); }

/* ---- checkout ------------------------------------------------------------------------
   A page of its own rather than the bag drawer: the bag is for choosing, this is for
   paying. Two columns on a wide screen - details and payment on the left, the running
   order and the exact total on the right - so the figure stays in view while it is filled
   in. Delivery is priced from the build's DELIVERY_FEES, never from the browser. */
.co { display: grid; gap: var(--space-8); align-items: start; }
.co__main { display: grid; gap: var(--space-6); }
.co__block { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--onyx-800); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); }
.co__grid { display: grid; gap: var(--space-4); }
.co__field { display: grid; gap: 6px; }
@media (min-width: 760px) {
  .co__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co__wide { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .co { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: var(--space-10); }
  .co__side { position: sticky; inset-block-start: calc(var(--space-8) + 72px); }
}
.co__summary { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--marble-onyx) center / cover, var(--onyx-800); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md); }
.co__items { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.co-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding-block-end: var(--space-3); border-block-end: var(--hairline) solid var(--line); }
.co-item:last-child { border-block-end: 0; padding-block-end: 0; }
.co-item__n { color: var(--gold-text); font-variant-numeric: tabular-nums; }
.co-item__main { display: grid; gap: 1px; min-width: 0; }
.co-item__name { color: var(--ink); }
.co-item__meta { font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.co-item__price { font-family: var(--font-display); font-size: 16px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.co__totals { display: grid; gap: 6px; margin: 0; padding-block-start: var(--space-2); border-block-start: var(--hairline) solid var(--line); }
.co__totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.co__totals dt { color: var(--ink-muted); }
.co__totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.co__saverow dd { color: var(--gold-text); }
.co__grand { padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--rule-brass); }
.co__grand dt { font-size: 16px; color: var(--ink); }
.co__grand dd { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--gold-text); }
:lang(ar) .co__grand dd, :lang(ar) .co-item__price { font-family: var(--font-ar-display); }
.co__terms { color: var(--ink-muted); }
.co__cardnote { color: var(--gold-text); margin-block-start: var(--space-2); }
.co-empty { display: grid; gap: var(--space-4); justify-items: start; padding-block: var(--space-8); }
.co-done { display: grid; gap: var(--space-4); justify-items: start; width: min(620px, 100%); margin-inline: auto; padding: var(--space-10) var(--space-6); background: var(--onyx-800); border: var(--hairline) solid var(--rule-brass); border-radius: var(--radius-md); }
.co-done .co__items { width: 100%; }
.co-done__ref { display: flex; gap: var(--space-2); align-items: baseline; color: var(--ink-muted); }
.co-done__ref strong { font-family: var(--font-display); font-size: 20px; color: var(--gold-text); letter-spacing: .04em; }
.co-done__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* the WhatsApp route stays available under the checkout button, as a quieter option */
.bag-wa { margin-block-start: var(--space-2); }

/* Return & replacement policy page (returns.html): Arabic, right to left */
.policy > * + * { margin-top: 18px; }
.policy > h2 { margin-top: 40px; }
.policy__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ===================================================================================================
   Home page, after the Maison Wue reference (Oct 2026): dark and cream panels that alternate, a large
   serif with an italic accent (Cormorant Garamond), tall photographs, small tracked labels, lots of air.
   Everything is lux-*; nothing here touches other pages.
   =================================================================================================== */
.lux { padding-block: clamp(72px, 9vw, 136px); }
.lux--dark { background: var(--plum-900); color: var(--on-plum); }
.lux--light { background: var(--ground); color: var(--oud); }
.lux--cream { background: var(--cream); color: var(--oud); }
.lux-wrap { width: 100%; max-width: calc(1320px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.lux-eyebrow { margin: 0 0 22px; font: 500 11px/1.4 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--brass-400); }
.lux--dark .lux-eyebrow { color: var(--brass-300); }
.lux-display, .lux-h2 { margin: 0; font-family: var(--font-lux); font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.lux-display { font-size: clamp(46px, 6.2vw, 100px); line-height: .98; }
.lux-h2 { font-size: clamp(38px, 4.3vw, 66px); line-height: 1.02; }
.lux-h2--sm { font-size: clamp(32px, 3.2vw, 46px); }
.lux-display em, .lux-h2 em { font-style: italic; font-weight: 500; color: var(--brass-500); }
.lux--dark .lux-h2 em { color: var(--brass-300); }
.lux-p { margin: 24px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.75; color: var(--muted-100); }
.lux--dark .lux-p { color: var(--on-plum-muted); }
.lux-head { margin-block-end: 34px; }
.lux-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-block-end: 44px; }
.lux-row .lux-head { margin: 0; }
.lux-split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .lux-split { grid-template-columns: minmax(0, .82fr) minmax(0, 2fr); gap: clamp(48px, 6vw, 96px); } .lux-split--narrow { grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr); } }

/* the round-arrow link from the reference */
.lux-link { display: inline-flex; align-items: center; gap: 16px; font: 500 11px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: inherit; text-decoration: none; }
.lux-link__ring { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; opacity: .85; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.lux-link__ring svg { width: 16px; height: 16px; }
.lux-link:hover .lux-link__ring, .lux-link:focus-visible .lux-link__ring { background: var(--brass-500); border-color: var(--brass-500); color: #fff; opacity: 1; }
.lux-link--quiet .lux-link__ring { border-color: transparent; opacity: .7; }
.lux-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; background: var(--oud); border: 1px solid var(--oud); color: var(--sand-50); font: 500 11px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.lux-btn svg { width: 18px; height: 18px; }
.lux-btn:hover { background: var(--brass-500); border-color: var(--brass-500); color: #fff; }
.lux-btn--line { background: transparent; color: var(--oud); border-color: rgba(36, 26, 18, .45); }

/* 1 · hero */
.lux-hero { position: relative; display: grid; padding: 0; overflow: hidden; }
.lux-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 40px var(--gutter) 64px; }
.lux-hero__copy .lux-display { max-width: 13ch; }
.lux-hero__cta { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: 40px; }
.lux-hero__art { position: relative; min-height: 62svh; }
.lux-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.lux-slide.is-on { opacity: 1; z-index: 1; }
.lux-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.lux-slide.is-on img { transform: scale(1); }
.lux-slide__cap { position: absolute; inset-block-start: 22px; inset-inline-end: 18px; display: flex; gap: 10px; writing-mode: vertical-rl; font: 500 10px/1 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: rgba(237, 224, 201, .82); }
.lux-slide__cap b { font-weight: 600; color: var(--sand-50); }
.lux-dots { position: absolute; z-index: 3; inset-block-end: 22px; inset-inline-end: var(--gutter); display: flex; gap: 8px; }
.lux-dot { width: 26px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
.lux-dot::before { content: ""; display: block; height: 1px; background: rgba(237, 224, 201, .4); transition: background var(--dur-base); }
.lux-dot[aria-current="true"]::before { background: var(--brass-400); height: 2px; }
.lux-count { display: flex; align-items: center; gap: 14px; margin-top: 52px; font: 500 11px/1 var(--font-sans); letter-spacing: .2em; color: var(--muted-200); }
.lux-count b { font-weight: 500; color: var(--oud); }
.lux-count__bar { position: relative; width: 72px; height: 1px; background: rgba(43, 33, 29, .18); overflow: hidden; }
.lux-count__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--brass-400); }
.lux-hero.is-playing .lux-count__bar i { animation: luxBar var(--lux-dwell, 6s) linear forwards; }
@keyframes luxBar { to { width: 100%; } }
.lux-scroll { display: none; }
@media (max-width: 899px) {
  .lux-hero__art { order: -1; height: 60svh; }
  .lux-hero__copy { margin-top: -48px; padding-top: 0; }
  .lux-slide__cap, .lux-dots { display: none; }
}
@media (min-width: 900px) {
  .lux-hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); min-height: min(calc(100svh - 110px), 900px); }
  .lux-hero__copy { padding: 64px 40px 64px max(var(--gutter), calc((100vw - 1320px) / 2)); }
  .lux-hero__art { min-height: 0; }
  .lux-slide img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%); mask-image: linear-gradient(to right, transparent 0, #000 26%); }
  [dir="rtl"] .lux-slide img { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26%); mask-image: linear-gradient(to left, transparent 0, #000 26%); }
  .lux-scroll { position: absolute; z-index: 3; inset-block-end: 26px; inset-inline-start: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 10px/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted-200); }
  .lux-scroll i { width: 1px; height: 38px; background: linear-gradient(var(--brass-400), transparent); }
}

/* 2 · collections and 6 · occasions: tall photographs with the name beneath */
.lux-tall { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(62%, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.lux-tall::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .lux-tall { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } }
.lux-tile { display: block; scroll-snap-align: start; scroll-margin-inline: var(--gutter); color: inherit; text-decoration: none; }
.lux-tile__img { display: block; aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: 2px; background: #d9cfbf; }
.lux-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lux-tile:hover .lux-tile__img img { transform: scale(1.045); }
.lux-tile__name { display: block; margin-top: 18px; font: 600 20px/1.1 var(--font-lux); letter-spacing: .14em; text-transform: uppercase; }
.lux-tile__n { display: block; margin-top: 6px; font-size: 12px; color: var(--cream-ink-muted); }
.lux-occ__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
@media (min-width: 900px) { .lux-occ__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lux-tile--occ .lux-tile__img { aspect-ratio: 3 / 4; }

/* 3 · best sellers keep the shop's own cards */
.lux-best .card { background: transparent; }

/* 4 · notes in layers */
.lux-notes { display: grid; gap: 14px; }
@media (min-width: 640px) { .lux-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lux-note { position: relative; display: block; aspect-ratio: 3 / 4.4; overflow: hidden; border-radius: 2px; color: var(--sand-50); text-decoration: none; }
@media (max-width: 639px) { .lux-note { aspect-ratio: 16 / 10; } }
.lux-note__img, .lux-note__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lux-note:hover .lux-note__img img { transform: scale(1.045); }
.lux-note::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 9, .78) 0%, rgba(10, 10, 9, .1) 55%, transparent 100%); }
.lux-note__txt { position: absolute; z-index: 1; inset-inline: 20px; inset-block-end: 20px; display: grid; gap: 8px; }
.lux-note__txt b { font: 500 10px/1 var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-300); }
.lux-note__txt span { font: 600 21px/1.2 var(--font-lux); }
.lux-line { grid-column: 1 / -1; margin: 18px 0 0; text-align: center; font: 500 10px/1.6 var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--cream-ink-muted); }

/* 5 · the promise and the details */
.lux-story { padding-block-end: clamp(48px, 6vw, 88px); }
.lux-story__img { aspect-ratio: 16 / 11; overflow: hidden; border-radius: 2px; }
.lux-story__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .lux-story .lux-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); } }
.lux-details { padding-block-start: 0; }
.lux-details__grid { display: grid; gap: 40px; padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(237, 224, 201, .12); }
@media (min-width: 900px) { .lux-details__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); align-items: center; } }
.lux-det { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .lux-det { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lux-det li { display: grid; justify-items: center; align-content: start; gap: 12px; padding-inline: 18px; text-align: center; border-inline-start: 1px solid rgba(237, 224, 201, .12); }
.lux-det li:first-child, .lux-det li:nth-child(3) { border-inline-start: 0; }
@media (min-width: 900px) { .lux-det li:nth-child(3) { border-inline-start: 1px solid rgba(237, 224, 201, .12); } }
.lux-det svg { width: 28px; height: 28px; color: var(--brass-300); stroke-width: 1.1; }
.lux-det b { font: 500 11px/1.3 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; }
.lux-det span { max-width: 22ch; font-size: 13px; line-height: 1.6; color: var(--on-plum-muted); }

/* 7 · houses as wordmarks */
.lux-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(237, 224, 201, .14); }
@media (min-width: 900px) { .lux-marks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lux-marks li { border-bottom: 1px solid rgba(237, 224, 201, .14); }
@media (min-width: 900px) { .lux-marks li + li { border-inline-start: 1px solid rgba(237, 224, 201, .14); } }
.lux-marks a { display: grid; justify-items: center; gap: 10px; padding: 40px 12px; color: inherit; text-decoration: none; text-align: center; transition: background var(--dur-base) var(--ease); }
.lux-marks a:hover { background: rgba(237, 224, 201, .04); }
.lux-marks b { font: 600 clamp(19px, 1.9vw, 26px)/1.1 var(--font-lux); letter-spacing: .16em; text-transform: uppercase; transition: color var(--dur-base); }
.lux-marks a:hover b { color: var(--brass-300); }
.lux-marks span { font-size: 12px; color: var(--on-plum-muted); }

/* 8 · join */
.lux-join { padding: 0; }
.lux-join__grid { display: grid; }
@media (min-width: 900px) { .lux-join__grid { grid-template-columns: 1fr 1fr; min-height: 560px; } }
.lux-join__img { min-height: 360px; overflow: hidden; }
.lux-join__img img { width: 100%; height: 100%; object-fit: cover; }
.lux-join__copy { align-self: center; padding: clamp(56px, 7vw, 110px) var(--gutter); max-width: 640px; }
.lux-join__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* Arabic: the Arabic display face, never a slanted fake italic */
:lang(ar) :is(.lux-display, .lux-h2, .lux-tile__name, .lux-note__txt span) { font-family: var(--font-ar-display); letter-spacing: 0; }
:lang(ar) :is(.lux-display, .lux-h2) { line-height: 1.3; }
:lang(ar) :is(.lux-display, .lux-h2) em { font-style: normal; color: var(--rose); }
:lang(ar) .lux--dark .lux-h2 em { color: var(--brass-300); }
:lang(ar) .lux--cream .lux-h2 em { color: var(--brass-500); }
:lang(ar) :is(.lux-eyebrow, .lux-link, .lux-btn, .lux-line, .lux-det b, .lux-note__txt b, .lux-slide__cap) { letter-spacing: 0; }
:lang(ar) .lux-tile__name { text-transform: none; font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .lux-slide, .lux-slide img, .lux-tile__img img, .lux-note__img img { transition: none; }
  .lux-slide img { transform: none; }
  .lux-hero.is-playing .lux-count__bar i { animation: none; width: 100%; }
}

/* ===== Buy Now chooser (Oct 2026): a proper sheet with room to breathe, the bottle beside its
   name, two clear options that each say what tapping does. On phones it rises from the bottom. ===== */
.modal--box .modal__panel { width: min(640px, 100%); padding: 30px; border-radius: 18px; border-color: var(--line); }
.modal--box .modal__close { inset-block-start: 18px; inset-inline-end: 18px; }
.boxchoose { display: grid; gap: 0; }
.boxchoose__head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; padding-inline-end: 48px; }
.boxchoose__img { display: block; width: 76px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--vitrine); }
.boxchoose__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.boxchoose__house { margin: 0 0 4px; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
.boxchoose__name { margin: 0; font-family: var(--font-lux); font-weight: 600; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.1; color: var(--ink); }
:lang(ar) .boxchoose__name { font-family: var(--font-ar-display); }
.boxchoose__q { margin: 24px 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.boxchoose__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.boxchoose__note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.boxcard { display: grid; justify-items: stretch; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px; background: var(--ground); border: 1px solid var(--line); border-radius: 14px; text-align: start; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-quick) var(--ease); }
.boxcard:hover { border-color: var(--gold-500); transform: translateY(-2px); box-shadow: var(--shadow-float); background: var(--ground-raised); }
.boxcard__name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.3; }
.boxcard__hint { font-size: 12.5px; line-height: 1.45; }
.boxcard .price { display: grid; gap: 2px; }
.boxcard .price__now { font-size: 24px; }
.boxcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.boxcard__save { margin: 0; }
.boxcard__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-500); white-space: nowrap; }
.boxcard__cta svg { width: 15px; height: 15px; }
@media (max-width: 620px) {
  .modal.modal--box { align-items: end; padding: 0; }
  .modal--box .modal__panel { width: 100%; max-height: 90vh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; border-inline: 0; border-bottom: 0; transform: translateY(40px); }
  .modal--box.is-open .modal__panel { transform: none; }
  .modal--box .modal__panel::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 16px; border-radius: 4px; background: var(--line-strong); opacity: .5; }
  .modal--box .modal__close { inset-block-start: 14px; inset-inline-end: 12px; }
  .boxchoose__head { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .boxchoose__img { width: 60px; }
  .boxchoose__opts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .boxcard { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 8px 12px; padding: 14px 16px; }
  .boxcard__top { grid-column: 1; }
  .boxcard .price { grid-column: 2; grid-row: 1; justify-items: end; }
  .boxcard .price__now { font-size: 20px; }
  .boxcard__foot { grid-column: 1 / -1; padding-top: 10px; }
}

/* ===== free delivery progress: in the bag and in the order summary ===== */
.freebar { display: grid; gap: 8px; margin: 2px 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.freebar__track { position: relative; height: 5px; border-radius: 5px; background: var(--onyx-700); overflow: hidden; }
.freebar__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brass-300), var(--brass-500)); transition: width .5s var(--ease); }
.freebar strong { color: var(--gold-500); font-weight: 600; }
.freebar.is-free { color: var(--gold-500); font-weight: 500; }

/* ===== checkout polish ===== */
.co-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.co-steps li { display: inline-flex; align-items: center; gap: 8px; }
.co-steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--line-strong); opacity: .6; margin-inline-end: 6px; }
.co-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.co-steps .is-done b { background: var(--gold-500); border-color: var(--gold-500); color: #fff; }
.co-steps .is-on { color: var(--ink); font-weight: 600; }
.co-steps .is-on b { border-color: var(--gold-500); color: var(--gold-500); }
.co__block { gap: 22px; padding: 28px; background: var(--ground-raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(46, 40, 35, .04); }
.co__head { display: flex; align-items: center; gap: 12px; margin: 0; }
.co__num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sand-200); color: var(--ink); font-size: 13px; font-weight: 600; }
.co__head .h3 { margin: 0; }
.co__grid { gap: 18px 16px; }
@media (min-width: 640px) { .co__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .co__wide { grid-column: 1 / -1; } }
.co__field > span { font-size: 13px; font-weight: 500; color: var(--ink); }
.co__field > span i { font-style: normal; color: var(--gold-500); }
.co__field input, .co__field select { min-height: 52px; padding-inline: 16px; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.co__field input:hover, .co__field select:hover { border-color: var(--line-strong); }
.co__field input:focus-visible, .co__field select:focus-visible { outline: none; background: var(--ground-raised); border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(40, 72, 168, .14); }
.co .boxopt { padding: 18px; border-radius: 14px; background: var(--ground); border-color: var(--line); }
.co .boxopt.is-on { background: color-mix(in srgb, var(--gold-500) 7%, var(--ground-raised)); border-color: var(--gold-500); box-shadow: inset 0 0 0 1px var(--gold-500); }
.co__summary { gap: 18px; padding: 28px; background: var(--ground-raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-float); }
@media (min-width: 960px) { .co__side { position: sticky; top: 110px; } }
.co-item { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.co-item__img { position: relative; display: block; width: 56px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--vitrine); }
.co-item__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.co-item__img b { position: absolute; inset-block-start: -1px; inset-inline-end: -1px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 0 0 0 10px; background: var(--ink); color: var(--ground); font-size: 11px; font-weight: 600; }
.co-item__name { font-weight: 500; }
.co__grand dd { font-family: var(--font-lux); font-size: 30px; font-weight: 600; color: var(--ink); }
.co__free { color: var(--gold-500); font-weight: 600; }
.co__trust { display: grid; gap: 10px; margin: 4px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }
.co__trust li { display: flex; align-items: center; gap: 10px; }
.co__trust svg { flex: none; width: 18px; height: 18px; color: var(--gold-500); }
.co .btn--primary[data-co-place] { min-height: 56px; border-radius: 12px; font-size: 14px; letter-spacing: .14em; }

/* Glacier · Aurora: the home panels and tiles */
.lux-tile__img { background: var(--onyx-850); }
.lux--cream .lux-h2 em, .lux--cream .lux-eyebrow { color: var(--brass-400); }
.lux-tile__n { color: var(--muted-100); }
.lux--cream .lux-tile__n, .lux--cream .lux-p, .lux--cream .lux-line { color: var(--cream-ink-muted); }

/* Glacier · Aurora: the glow. The drama sections are a night sky with a violet and a peach
   light; the hero and the light sections drift from ice to lilac to peach. */
.lux--dark { background: radial-gradient(ellipse 70% 110% at 88% 0%, rgba(124, 112, 235, .38), transparent 62%), radial-gradient(ellipse 60% 90% at 6% 100%, rgba(240, 160, 130, .24), transparent 60%), var(--plum-900); }
.lux-hero { background: linear-gradient(115deg, #dbe3ea 0%, #e0dcef 62%, #eee0d8 100%); }
.lux--light.lux-best, .lux--light.lux-occ { background: linear-gradient(180deg, #dbe3ea, #d7def0); }