/* ==========================================================================
   Muscat Perfumes — عطورات مسقط
   Tokens → base → layout → components → pages → motion
   ========================================================================== */

:root {
  /* palette */
  --onyx: #0c0b09;        /* page */
  --kohl: #16130f;        /* raised surfaces */
  --smoke: #221d17;       /* hairline fills */
  --gold: #c8a35a;        /* frankincense gold, from the monogram */
  --gold-pale: #e9d3a0;   /* highlight gold */
  --ivory: #efe7d6;       /* primary text */
  --ash: #a39a89;         /* secondary text */
  --line: rgba(200, 163, 90, 0.22);
  --line-soft: rgba(239, 231, 214, 0.1);

  /* house tints (one per house panel; spares for houses added later) */
  --t-domes: #2a1b0f;
  --t-elit: #0e1828;
  --t-vintage: #1d2114;
  --t-victor-raymond: #1b1a1e;
  --t-intence: #0c1d1e;
  --t-more: #270e11;
  --t-men: #0f1a27;
  --t-women: #29121a;
  --t-unisex: #1c1b12;
  --t-all-houses: #231a10;
  --t-spare-1: #1f1a14;
  --t-spare-2: #141c24;
  --t-spare-3: #1d1512;
  --t-spare-4: #171d17;

  /* type */
  --f-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-italic: "Cormorant Garamond", Georgia, serif;
  --f-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-giant: clamp(3.4rem, 14vw, 15rem);
  --fs-h1: clamp(2.6rem, 7.4vw, 7.4rem);
  --fs-h2: clamp(2rem, 4.6vw, 4.2rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-lead: clamp(1.08rem, 1.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.8125rem;
  --fs-eyebrow: 0.72rem;

  /* space */
  --gutter: clamp(1rem, 3.2vw, 2.5rem);
  --section: clamp(3.75rem, 9vw, 9rem);
  --radius: 6px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--onyx); }
/* phones scroll natively (no Lenis); in-page links such as "Contact" still glide there */
@media (hover: none) and (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--onyx);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--gold); color: var(--onyx); }

:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--gold); color: var(--onyx); padding: .6rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ---------- type helpers ---------- */
.display { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.01em; line-height: 0.9; text-transform: uppercase; overflow-wrap: break-word; }
.eyebrow {
  font-family: var(--f-body); font-weight: 600; font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.notes { font-family: var(--f-italic); font-style: italic; font-weight: 500; color: var(--gold-pale); letter-spacing: 0.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ivory); max-width: 40ch; }
.muted { color: var(--ash); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .75rem 1.35rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--gold { background: var(--gold); color: var(--onyx); }
.btn--gold:hover { background: var(--gold-pale); }
.btn--line { border: 1px solid var(--line); color: var(--ivory); }
.btn--line:hover { border-color: var(--gold); color: var(--gold-pale); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .75rem;
  border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: .72rem; letter-spacing: .08em; color: var(--ivory); white-space: nowrap;
}
.tag--gold { border-color: var(--line); color: var(--gold-pale); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: var(--gutter) var(--gutter) auto; z-index: 90;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.nav-pill {
  display: flex; align-items: center; gap: .9rem;
  padding: .45rem .5rem .45rem .7rem;
  background: rgba(22, 19, 15, 0.92);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  transition: background-color .4s;
}
.brand { display: flex; align-items: center; gap: .7rem; }
/* the diamond sits above the letters: lift the mark so the MP letters line up with the wordmark */
.brand__mark { width: 30px; height: 39px; color: var(--gold); flex: none; transform: translateY(-3.5px); }
.brand__words { display: flex; align-items: center; gap: .75rem; }
.brand__word { font-family: var(--f-display); font-weight: 700; font-size: .92rem; letter-spacing: .08em; line-height: 1; color: var(--ivory); white-space: nowrap; }
.brand__sep { width: 1px; height: 16px; background: var(--line); }
/* one-line Arabic wordmark (عطورات مسقط), its letter bodies centred on the English capitals */
.brand__ar { display: block; width: 122px; height: 24px; flex: none; color: var(--gold); transform: translateY(-2px); }
@media (max-width: 900px) {
  /* smaller screens: Arabic sits centred under the English */
  .brand__words { flex-direction: column; gap: 5px; }
  .brand__sep { display: none; }
  .brand__ar { width: 76px; height: 15px; transform: none; }
}
.menu-toggle {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  border-left: 1px solid var(--line-soft); border-radius: 0 999px 999px 0; margin-left: .15rem;
}
.menu-toggle span { display: block; width: 18px; height: 1px; background: var(--ivory); position: relative; transition: transform .4s var(--ease-out), background .3s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: var(--ivory); transition: transform .4s var(--ease-out); }
.menu-toggle span::before { transform: translateY(-5px); }
.menu-toggle span::after { transform: translateY(5px); }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: rotate(45deg); }
.menu-open .menu-toggle span::after { transform: rotate(-45deg); }

.header-order { background: rgba(22, 19, 15, 0.92); border: 1px solid var(--line); white-space: nowrap; }
.header-order:hover { background: var(--gold); color: var(--onyx); border-color: var(--gold); }
/* narrower screens: WhatsApp becomes a round icon, the same size as the wishlist and cart buttons */
@media (max-width: 720px) {
  .header-order { width: 48px; min-height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .header-order svg { width: 20px; height: 20px; } /* same size as the heart and bag icons */
  .header-order .label-long { display: none; }
}
@media (max-width: 560px) {
  .brand { gap: .5rem; }
  .brand__mark { width: 26px; height: 34px; transform: translateY(-3px); }
  .brand__word { font-size: .72rem; letter-spacing: .06em; }
  .brand__ar { width: 70px; height: 14px; }
  .nav-pill { gap: .55rem; padding: .4rem .35rem .4rem .6rem; }
  .menu-toggle { width: 36px; }
}
@media (max-width: 400px) {
  .nav-pill { gap: .4rem; padding-left: .5rem; }
  .brand { gap: .42rem; }
  .brand__mark { width: 24px; height: 31px; }
  .brand__word { font-size: .68rem; letter-spacing: .05em; }
  .brand__ar { width: 66px; height: 13px; }
  .menu-toggle { width: 32px; }
}

/* full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--onyx);
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--gutter) + 5rem) var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease-inout), visibility 0s .8s;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease-inout), visibility 0s; }
.menu__links { list-style: none; margin: 0; padding: 0; align-self: center; }
.menu__big {
  display: inline-block; font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 8.4vw, 6.5rem); line-height: 1.04; color: var(--ivory);
  transition: color .3s;
}
.menu__big:hover { color: var(--gold); }
.menu__houses .tag:hover { border-color: var(--gold); }
.menu__links li { overflow: hidden; }
.menu__links li > * { transform: translateY(105%); transition: transform .9s var(--ease-out); }
.menu-open .menu__links li > * { transform: none; }
.menu-open .menu__links li:nth-child(2) > * { transition-delay: .06s; }
.menu-open .menu__links li:nth-child(3) > * { transition-delay: .12s; }
.menu-open .menu__links li:nth-child(4) > * { transition-delay: .18s; }
.menu__houses { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1.4rem; }
.menu__sep { width: 1px; align-self: stretch; margin: .25rem .3rem; background: var(--line); }
.tag--solid { background: rgba(200, 163, 90, .12); border-color: var(--gold); color: var(--gold-pale); }
.menu__foot { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: end; border-top: 1px solid var(--line-soft); padding-top: 1.2rem; font-size: var(--fs-small); color: var(--ash); }
.menu__foot a:hover { color: var(--gold-pale); }
.menu__ar { width: 140px; color: var(--gold); }
.menu__actions { display: flex; flex-wrap: wrap; gap: .6rem; flex-basis: 100%; }
.menu__actions .btn { flex: 1 1 200px; justify-content: center; }
@media (min-width: 640px) { .menu__actions { flex-basis: auto; } .menu__actions .btn { flex: none; } }

/* ---------- sections ---------- */
.wrap { padding-inline: var(--gutter); }
.section { padding-block: var(--section); }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--gutter) + 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
}
.hero__title { font-size: var(--fs-h1); padding-inline: var(--gutter); max-width: 14ch; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { font-family: var(--f-italic); font-style: italic; font-weight: 500; text-transform: none; color: var(--gold); letter-spacing: 0; }
.hero__rail { margin-top: clamp(1.8rem, 4vw, 3.2rem); }
.hero__foot {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  padding-inline: var(--gutter); margin-top: clamp(2.2rem, 5vw, 4rem);
}
.hero__foot .lead { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* Men | Women: one outlined pill split in two */
.split { display: inline-flex; align-items: stretch; min-height: 48px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.split[hidden] { display: none; }
.split a {
  display: inline-flex; align-items: center; padding: .75rem 1.5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.split a:focus-visible { outline-offset: -4px; border-radius: 999px; }
.split span { width: 1px; margin-block: .75rem; background: var(--line); }
@media (hover: hover) { .split a:hover { background: var(--gold); color: var(--onyx); } }
@media (max-width: 560px) {
  /* phones: the two stack at full width, Men and Women sharing the pill evenly */
  .hero__actions > * { width: 100%; }
  .split a { flex: 1; justify-content: center; }
}
@media (min-width: 900px) {
  .hero__foot { grid-template-columns: 1.1fr 1fr; align-items: end; }
  .hero__actions { justify-content: flex-end; }
}

/* marquee */
.marquee { overflow: hidden; padding-top: 2.75rem; margin-top: -2.75rem; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.marquee.is-dragging { cursor: grabbing; }
.marquee img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.marquee__track { display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; padding-inline: var(--gutter); will-change: transform; }
.marquee .vitrine { flex: none; width: clamp(180px, 19vw, 290px); }

/* ---------- vitrine (signature arch display) ---------- */
.vitrine { display: flex; flex-direction: column; position: relative; isolation: isolate; --mx: 0; --my: 0; --py: 0; --hv: 0; --glow: 200, 163, 90; }
.vitrine__link { position: absolute; inset: 0; z-index: 4; border-radius: 8px; }
.vitrine__link:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 5px; }
.vitrine__frame { position: relative; aspect-ratio: 3 / 4.1; }
.vitrine__stage {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius);
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(var(--glow), .28), transparent 60%),
    linear-gradient(180deg, var(--kohl), #0f0d0a);
  isolation: isolate;
}
.vitrine__halo {
  position: absolute; left: 50%; top: 38%; width: 95%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow), .55) 0%, rgba(var(--glow), .14) 42%, transparent 70%);
  transform: translate(-50%, -50%) translate(calc(var(--mx) * -14px), calc(var(--py) * 30px + var(--my) * -10px));
  opacity: calc(.78 + var(--hv) * .22);
}
.vitrine__arch {
  position: absolute; inset: 9px; border: 1px solid var(--line); border-radius: 999px 999px 2px 2px;
  transform: translate(calc(var(--mx) * -5px), calc(var(--py) * 10px));
  transition: border-color .5s;
}
.vitrine__plinth {
  position: absolute; left: 12%; right: 12%; bottom: 5.5%; height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent);
  transform: translate(calc(var(--mx) * 6px), 0);
}
.vitrine__subject {
  position: absolute; left: 11%; right: 11%; bottom: 7.5%; top: 4%;
  transform: translate(calc(var(--mx) * 10px), calc(var(--py) * -26px + var(--my) * 6px - var(--hv) * 7px)) scale(calc(1 + var(--hv) * .025));
  transform-origin: 50% 100%;
}
/* Only bottles that are moving get their own graphics layer: those near the screen in the house
   panels and grids (scroll parallax), and the one the mouse is tilting. 2D transforms everywhere else,
   so idle pieces never become layers of their own (hundreds of them made phones stutter). */
.vitrine.is-live .vitrine__subject { will-change: transform; }
.marquee .vitrine.is-live .vitrine__subject { will-change: auto; } /* the whole hero track is one layer */
.vitrine.is-tilt .vitrine__subject {
  will-change: transform;
  transform: translate(calc(var(--mx) * 10px), calc(var(--py) * -26px + var(--my) * 6px - var(--hv) * 7px)) rotateY(calc(var(--mx) * 7deg)) scale(calc(1 + var(--hv) * .025));
}
.vitrine__subject img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55));
}
.vitrine__shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--cut) 50% 100% / contain no-repeat;
          mask: var(--cut) 50% 100% / contain no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 240, 212, .32) 49%, rgba(255, 240, 212, 0) 58%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  transition: background-position 1.3s var(--ease-out);
}
.vitrine:hover .vitrine__shine, .vitrine:focus-within .vitrine__shine, .vitrine.is-lit .vitrine__shine { background-position: -30% 0; }
/* the light sweep only plays on hover; phones never show it, so they skip its masked copy of every bottle */
@media (hover: none) { .vitrine__shine { display: none; } }
.vitrine:hover .vitrine__arch { border-color: rgba(200,163,90,.55); }

/* No cut-out (or a "cut-out" without a transparent background): the arch frames the photo, so it
   never shows as a hard rectangle. app.js (framePhoto) looks at the photo first and picks one of two
   frames; until then the photo waits hidden. */
.vitrine__subject-clip { position: absolute; inset: 0; }
.vitrine--photo .vitrine__subject-clip { overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); }
.vitrine--photo .vitrine__halo, .vitrine--photo .vitrine__plinth { display: none; }
.vitrine--photo .vitrine__arch { z-index: 2; border-color: rgba(239,231,214,.35); }
.vitrine--photo:not(.is-framed) .vitrine__subject { opacity: 0; }
/* depth for both frames: a soft inner shadow round the arch, a darker floor, a faint gold warmth */
.vitrine--photo .vitrine__subject-clip::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(12, 11, 9, .34)), linear-gradient(rgba(150, 118, 62, .15), rgba(150, 118, 62, .15));
  box-shadow: inset 0 0 38px rgba(0, 0, 0, .32);
}
/* a busy scene: fills the arch like a window */
.vitrine--photo .vitrine__subject,
.vitrine--photo.is-tilt .vitrine__subject { inset: 0; transform: translate(calc(var(--mx) * 8px), calc(var(--py) * -18px)) scale(1.14); transition: opacity .5s var(--ease-out); }
.vitrine--photo .vitrine__subject img { object-fit: cover; object-position: 50% 50%; filter: none; }
/* a plain studio background: the arch takes that colour and the whole photo shows, never cropped */
.vitrine--plate .vitrine__subject-clip { background: rgb(var(--plate, 239, 231, 214)); }
.vitrine--plate .vitrine__subject,
.vitrine--plate.is-tilt .vitrine__subject { inset: 11% 6% 5%; transform: translate(calc(var(--mx) * 6px), calc(var(--py) * -10px)); }
.vitrine--plate .vitrine__subject img { object-fit: contain; object-position: 50% 100%; }
.vitrine--plate .vitrine__arch { border-color: rgba(200, 163, 90, .6); }
/* sold out: grey the whole frame, background included */
.vitrine--photo.is-out .vitrine__subject img { filter: none; }
.vitrine--photo.is-out .vitrine__subject-clip { filter: grayscale(.85) brightness(.7); }

.vitrine__badge {
  position: absolute; top: 16%; right: -2%; z-index: 3;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  background: var(--gold); color: var(--onyx); padding: .35rem .6rem; border-radius: 999px;
}
.vitrine__badge--out { background: var(--ivory); }
.vitrine.is-out .vitrine__subject img { filter: grayscale(.85) brightness(.7) drop-shadow(0 18px 22px rgba(0,0,0,.55)); }

.vitrine__meta { padding-top: 1rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.vitrine__house { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitrine__name {
  font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; line-height: 1.2; letter-spacing: .02em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* up to three notes, never more than two lines */
.vitrine__notes { font-size: 1.02rem; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.vitrine__mark { color: var(--ash); }
/* prices sit on one shared line across a row, whatever the name length */
.vitrine__price { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; line-height: 1.5; min-height: calc(1.35rem + .3rem); margin-top: auto; padding-top: .3rem; font-variant-numeric: tabular-nums; }
/* the hero rail keeps a compact caption so every card is the same height */
.marquee .vitrine__notes { display: none; }
.marquee .vitrine__name { -webkit-line-clamp: 1; line-clamp: 1; }
.vitrine__price s { color: var(--ash); font-size: .8rem; }
.vitrine__price .out { color: var(--ash); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }

/* wishlist heart: bottom-right of the arch, just the heart on the bottle cards (a circle on the
   fragrance page), gold when saved; the tap area stays a comfortable 48px either way */
.like {
  position: absolute; right: 6%; bottom: 3%; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ivory);
  transition: color .3s, border-color .3s, background-color .3s, transform .35s var(--ease-out);
}
.like svg { width: 19px; height: 19px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .75)); transition: transform .35s var(--ease-out); }
.like::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* a comfortable 48px tap area */
.like.is-on { color: var(--gold); }
.like.is-on svg { fill: currentColor; }
.like:active svg { transform: scale(.86); }
/* on an ivory photo frame the heart is drawn dark so it still shows */
.vitrine--plate .like:not(.is-on) { color: #3b3024; }
.vitrine--plate .like svg { filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .45)); }
.like__tip {
  position: absolute; bottom: calc(100% + 8px); right: 0; transform: translateY(4px);
  padding: .3rem .6rem; border-radius: 999px; background: var(--ivory); color: var(--onyx);
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease-out);
}
@media (hover: hover) {
  .like:hover { color: var(--gold-pale); }
  .vitrine--plate .like:not(.is-on):hover { color: #6b5329; }
  .like:hover svg { transform: scale(1.1); }
  .like:hover .like__tip { opacity: 1; transform: none; }
}
.like:focus-visible { border-radius: 50%; }
.like:focus-visible .like__tip { opacity: 1; transform: none; }
/* the fragrance page keeps the heart in a dark circle, larger */
.pdp__stage .like {
  width: 46px; height: 46px; right: 6%; bottom: 4%;
  background: rgba(12, 11, 9, .62); border: 1px solid var(--line-soft);
}
.pdp__stage .like svg { width: 21px; height: 21px; filter: none; }
.pdp__stage .like.is-on { border-color: var(--line); }
.pdp__stage .vitrine--plate .like:not(.is-on) { color: var(--ivory); }
@media (hover: hover) {
  .pdp__stage .like:hover, .pdp__stage .vitrine--plate .like:not(.is-on):hover { color: var(--gold-pale); border-color: var(--gold); background: rgba(12, 11, 9, .8); }
}

/* ---------- rails ---------- */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 2.75rem var(--gutter) .5rem; margin-top: -2.75rem;
  align-items: stretch;
  scrollbar-width: none; cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging a { pointer-events: none; }
.rail > * { flex: none; scroll-snap-align: start; width: clamp(210px, 23vw, 330px); }
.rail-controls { display: flex; gap: .5rem; }
.rail-controls[hidden] { display: none; }
.rail-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-soft);
  display: grid; place-items: center; transition: border-color .3s, background .3s, color .3s;
}
.rail-btn:hover { border-color: var(--gold); color: var(--gold-pale); }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn svg { width: 18px; height: 18px; }

/* ---------- houses (stacked sticky panels) ---------- */
.houses { position: relative; }
.house {
  position: sticky; top: 0;
  background: var(--house-bg, var(--kohl));
  display: flex; flex-direction: column;
  padding: clamp(5.75rem, 10vw, 8.5rem) 0 clamp(2.25rem, 5vw, 4rem);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  box-shadow: 0 -30px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.house:first-child { border-radius: 22px 22px 0 0; }
@media (min-width: 900px) { .house { min-height: 100svh; } }
.house__inner { display: flex; flex-direction: column; flex: 1; transform-origin: 50% 0; }
.house__veil { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 5; }
.house__name {
  font-size: min(var(--fs-giant), calc((100vw - 2 * var(--gutter)) / (var(--chars, 6) * 0.8)));
  padding-inline: var(--gutter);
  white-space: nowrap;
}
.house__head { display: grid; gap: 1.2rem; position: relative; z-index: 2; }
.house__meta { padding-inline: var(--gutter); display: grid; gap: 1rem; grid-template-columns: 1fr; }
.house__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.house__accords { font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.3; max-width: 34ch; }
.house__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.house__rail { margin-top: clamp(2.25rem, 5vw, 3rem); }
@media (min-width: 900px) { .house__rail { margin-top: auto; padding-top: 2rem; } }
@media (min-width: 900px) {
  .house__meta { grid-template-columns: 1fr auto; align-items: end; }
}

.after-houses { position: relative; z-index: 2; background: var(--onyx); }

/* ---------- testimonial ---------- */
.voice { display: grid; gap: 2rem; }
.voice__quote {
  font-family: var(--f-italic); font-style: italic; font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 4.2rem); line-height: 1.08; letter-spacing: -.005em;
  max-width: 22ch; color: var(--ivory);
}
.voice__quote::before { content: "“"; color: var(--gold); }
.voice__quote::after { content: "”"; color: var(--gold); }
.voice__by { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; }
.stars { color: var(--gold); letter-spacing: .25em; }
@media (min-width: 900px) {
  .voice { grid-template-columns: 1fr 3fr; align-items: start; }
}

/* ---------- story ---------- */
.story { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.story__mark { position: relative; max-width: 460px; width: min(52%, 280px); justify-self: center; color: var(--gold); }
.story__mark svg { width: 100%; height: auto; }
.story__mark::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("../brand/monogram.svg") center / contain no-repeat; mask: url("../brand/monogram.svg") center / contain no-repeat;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 214, .85) 50%, transparent 65%) no-repeat;
  background-size: 300% 100%;
  background-position: calc(140% - var(--sp, 0) * 180%) 0;
  mix-blend-mode: soft-light;
}
.story__body { display: grid; gap: 1.6rem; }
.story__title { font-size: var(--fs-h2); max-width: 14ch; line-height: 1; }
.facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-top: .5rem; }
.facts div { padding: 1.1rem 0 0; }
.facts div + div { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.facts dt { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; color: var(--gold-pale); line-height: 1.1; }
.facts dd { margin: .2rem 0 0; font-size: var(--fs-small); color: var(--ash); letter-spacing: .06em; }
@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 1.1fr; }
  .story__mark { width: 70%; }
}

/* ---------- visit / contact ---------- */
.visit { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.visit > * { min-width: 0; }
.visit__place { font-size: clamp(2.4rem, 6.8vw, 6.4rem); line-height: .95; }
.visit__place small { display: block; font-family: var(--f-italic); font-style: italic; text-transform: none; font-weight: 500; font-size: .42em; color: var(--gold); letter-spacing: 0; margin-top: .35em; }
.details { display: grid; gap: 0; margin: 2.2rem 0 0; }
.details > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line-soft); }
.details dt { font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-top: .2rem; }
.details dd { margin: 0; font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; }
.details a:hover { color: var(--gold-pale); }

.form { display: grid; gap: 1.1rem; }
.form h3 { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: .02em; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: .7rem 0; font-size: 1.05rem; border-radius: 0; min-height: 48px;
  transition: border-color .3s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 2px 0 var(--gold); }
.form__status { font-size: var(--fs-small); min-height: 1.4em; color: var(--gold-pale); }
.form__status.is-error { color: #e8a598; }
.subscribe { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.subscribe .field { flex: 1 1 220px; }
.hp { position: absolute; left: -9999px; }
@media (min-width: 900px) {
  .visit { grid-template-columns: 1.15fr 1fr; }
}

/* ---------- shop assurances (footer band on every page; compact row under the buy buttons) ---------- */
.assure { list-style: none; margin: 0; padding: 0; display: grid; border-block: 1px solid var(--line-soft); }
.assure li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; min-width: 0; }
.assure li + li { border-top: 1px solid var(--line-soft); }
.assure__icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold);
  background: radial-gradient(circle at 50% 30%, rgba(200, 163, 90, .14), transparent 70%);
}
.assure__icon svg { width: 24px; height: 24px; }
.assure__text { display: grid; gap: .2rem; min-width: 0; }
.assure__text strong { font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; color: var(--ivory); }
.assure__text span { font-size: .88rem; line-height: 1.45; color: var(--ash); }
@media (min-width: 760px) {
  .assure:not(.assure--compact) { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .assure:not(.assure--compact) li { padding: 1.7rem 1.5rem; }
  .assure:not(.assure--compact) li:first-child { padding-left: 0; }
  .assure:not(.assure--compact) li + li { border-top: 0; border-left: 1px solid var(--line-soft); }
}
@media (min-width: 760px) and (max-width: 1099px) {
  /* tablets: three narrower columns, so each icon sits above its words */
  .assure:not(.assure--compact) li { flex-direction: column; align-items: flex-start; gap: .9rem; }
}
.footer__assure { padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
/* compact: icon over a short label, side by side even on a phone */
.assure--compact { grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 0; }
.assure--compact li { flex-direction: column; justify-content: flex-start; gap: .55rem; padding: 1.1rem .4rem .2rem; text-align: center; }
.assure--compact li + li { border-top: 0; border-left: 1px solid var(--line-soft); }
.assure--compact .assure__icon { width: 40px; height: 40px; }
.assure--compact .assure__icon svg { width: 20px; height: 20px; }
.assure--compact .assure__text strong { font-family: var(--f-body); font-size: .68rem; letter-spacing: .14em; line-height: 1.35; }

/* ---------- footer ---------- */
.site-footer { padding: clamp(4rem, 8vw, 7rem) 0 var(--gutter); border-top: 1px solid var(--line-soft); position: relative; z-index: 2; background: var(--onyx); }
.footer__top { display: grid; gap: 2.5rem; padding-inline: var(--gutter); }
.footer__cta { font-size: var(--fs-lead); max-width: 30ch; }
.footer__intro { display: grid; gap: 1.6rem; align-content: start; }
.follow { display: grid; gap: .8rem; }
.follow__label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.follow__list { display: flex; flex-wrap: wrap; gap: .55rem; }
.details .follow__list { margin-top: -.35rem; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; font-size: .92rem; }
.footer__cols h4 { font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .8rem; }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer__cols a { color: var(--ash); transition: color .3s; overflow-wrap: anywhere; }
/* the smallest phones: Visit, Contact and Pages stack, so the email keeps a full line */
@media (max-width: 360px) { .footer__cols { grid-template-columns: 1fr; } }
.footer__cols a:hover { color: var(--gold-pale); }
.footer__mark { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(3rem, 7vw, 6rem) var(--gutter) 0; }
.footer__word { font-size: calc((100vw - 2 * var(--gutter)) / 5.9); color: var(--gold); line-height: .86; white-space: nowrap; }
.footer__word span { display: block; }
.footer__marks { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.footer__mono { width: clamp(52px, 7vw, 92px); height: clamp(68px, 9.1vw, 120px); color: var(--gold); flex: none; }
.footer__ar { width: clamp(110px, 22vw, 240px); color: var(--gold); flex: none; }
@media (min-width: 900px) {
  .footer__word { font-size: calc((100vw - 2 * var(--gutter)) / 11.2); }
  .footer__word span { display: inline; }
  .footer__word span + span::before { content: " "; }
}
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; padding: 2rem var(--gutter) 0; font-size: .75rem; color: var(--ash); letter-spacing: .06em; }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.2fr 2fr; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- collection page ---------- */
.page-head { padding: calc(var(--gutter) + clamp(5rem, 9vw, 7rem)) var(--gutter) clamp(1.5rem, 4vw, 3rem); display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.page-head h1 { font-size: min(var(--fs-h1), 10.4vw); }
/* sticks just under the floating header; once stuck, a backdrop fills the strip above it */
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--gutter); border-block: 1px solid var(--line-soft); position: sticky; top: calc(var(--gutter) + 4.25rem); z-index: 20; background: rgba(12, 11, 9, .96); }
.toolbar.is-stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: calc(var(--gutter) + 4.25rem + 1px); background: rgb(12, 11, 9); }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { min-height: 40px; padding: .35rem 1rem; border-radius: 999px; border: 1px solid var(--line-soft); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; transition: all .3s; }
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--onyx); }
.chip span { opacity: .6; margin-left: .35rem; }
.chip:disabled { opacity: .35; cursor: default; }
.chip:disabled:hover { border-color: var(--line-soft); }
/* Men / Women / Unisex, under the page title */
.gtabs { display: flex; gap: clamp(1.3rem, 3vw, 2.4rem); }
.gtabs[hidden] { display: none; }
.gtab {
  position: relative; flex: none; min-height: 44px; padding: .35rem 0 .5rem;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(.95rem, 1.5vw, 1.2rem); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ash); transition: color .3s;
}
.gtab span { margin-left: .35rem; font-family: var(--f-body); font-size: .62rem; letter-spacing: .06em; vertical-align: super; color: var(--gold); }
.gtab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.gtab:hover, .gtab[aria-pressed="true"] { color: var(--ivory); }
.gtab[aria-pressed="true"]::after { transform: none; }
@media (max-width: 560px) {
  .gtabs { gap: 1.05rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .gtabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 360px) {
  .gtabs { gap: .85rem; }
  .gtab { font-size: .84rem; letter-spacing: .08em; }
}
@media (max-width: 759px) {
  /* phones: one swipeable row of houses; the bar scrolls away instead of covering the grid */
  .toolbar { position: static; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .8rem; padding-block: .9rem; }
  .toolbar > * { min-width: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overscroll-behavior-x: contain; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .select { align-self: flex-start; }
}
.select { position: relative; display: flex; align-items: center; gap: .6rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.select select { appearance: none; background: transparent; border: 1px solid var(--line-soft); border-radius: 999px; min-height: 40px; padding: .35rem 2.2rem .35rem 1rem; letter-spacing: .06em; text-transform: none; color: var(--ivory); }
.select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 7px; height: 7px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select option { background: var(--kohl); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 4.5rem) clamp(1rem, 2.5vw, 2rem); padding: clamp(2.75rem, 6vw, 5rem) var(--gutter) var(--section); }
.grid > * { display: flex; flex-direction: column; min-width: 0; }
.grid .vitrine { flex: 1; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.empty { grid-column: 1 / -1; padding: 3rem 0; color: var(--ash); }

/* ---------- product page ---------- */
.pdp { display: grid; gap: clamp(2rem, 5vw, 5rem); padding: calc(var(--gutter) + clamp(5rem, 8vw, 6.5rem)) var(--gutter) var(--section); }
.crumbs { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); display: flex; gap: .6rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--gold-pale); }
.pdp__stage .vitrine { max-width: 560px; margin-inline: auto; }
.pdp__stage .vitrine__frame { aspect-ratio: 3 / 3.7; }
.thumbs { display: flex; gap: .6rem; margin-top: 1.4rem; justify-content: center; flex-wrap: wrap; }
.thumb { width: 72px; height: 88px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line-soft); transition: border-color .3s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover, .thumb[aria-current="true"] { border-color: var(--gold); }
.pdp__info { display: grid; gap: 1.5rem; align-content: start; }
.pdp__name { font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: .95; }
.pdp__notes { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; display: flex; flex-wrap: wrap; gap: .1rem .55rem; }
/* each note stays whole; a gold dot follows every note but the last, so a line never starts with one */
.pdp__notes > span { white-space: nowrap; }
.pdp__notes > span:not(:last-child)::after { content: "·"; content: "·" / ""; margin-left: .55rem; color: var(--gold); }
.pdp__meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.price { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.price strong { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--gold-pale); }
.price s { color: var(--ash); }
.price .save { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pdp__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.pdp__desc { color: #d8cfbe; max-width: 62ch; border-top: 1px solid var(--line-soft); padding-top: 1.5rem; }
.pdp__out { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--gold-pale); font-size: .95rem; }
@media (min-width: 960px) {
  .pdp { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .pdp__stage { position: sticky; top: 6rem; }
  .crumbs { grid-column: 1 / -1; }
}
/* share this scent */
.share { display: grid; gap: 1rem; }
.share__label { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.share__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.share__list { display: flex; flex-wrap: wrap; gap: .55rem; }
.share__btn {
  position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold-pale);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.share__btn svg { width: 19px; height: 19px; }
.share__tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  padding: .3rem .6rem; border-radius: 999px; background: var(--ivory); color: var(--onyx);
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease-out);
}
@media (hover: hover) {
  .share__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--onyx); transform: translateY(-2px); }
  .share__btn:hover .share__tip { opacity: 1; transform: translate(-50%, 0); }
}
.share__btn:focus-visible .share__tip { opacity: 1; transform: translate(-50%, 0); }
.share__status { font-size: var(--fs-small); color: var(--gold-pale); overflow-wrap: anywhere; }
.share__status:empty { display: none; }

.more { padding-bottom: var(--section); }
.more__block + .more__block { margin-top: clamp(3rem, 6vw, 5rem); }
.more__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-inline: var(--gutter); margin-bottom: 1rem; flex-wrap: wrap; position: relative; z-index: 2; }
.more__head h2 { font-size: var(--fs-h2); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(8, 7, 6, .96); display: none; place-items: center; padding: var(--gutter); }
.lightbox.is-open { display: grid; }
.lightbox img { max-height: 86vh; max-width: min(92vw, 900px); object-fit: contain; border-radius: 4px; }
.lightbox__close { position: absolute; top: var(--gutter); right: var(--gutter); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--gutter); }
.lightbox__nav--next { right: var(--gutter); }

/* ---------- section heads ---------- */
.s-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; padding-inline: var(--gutter); margin-bottom: clamp(2rem, 4vw, 3rem); position: relative; z-index: 2; }
.s-head h2 { font-size: var(--fs-h2); line-height: 1; }

/* ---------- shop: cart button, cart panel, checkout, order ---------- */
.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-icon {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(22, 19, 15, 0.92); border: 1px solid var(--line); color: var(--ivory);
  transition: border-color .3s, color .3s;
}
.header-icon svg { width: 20px; height: 20px; }
.header-icon:hover { border-color: var(--gold); color: var(--gold-pale); }
.header-count {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--gold); color: var(--onyx);
  font-size: .68rem; font-weight: 700; line-height: 20px; text-align: center;
}
.header-tip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px);
  padding: .3rem .6rem; border-radius: 999px; background: var(--ivory); color: var(--onyx);
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease-out);
}
@media (hover: hover) { .header-icon:hover .header-tip { opacity: 1; transform: translate(-50%, 0); } }
/* the header heart gives a small beat when something is saved */
.header-wish.is-bumped svg { animation: heartBeat .6s var(--ease-out); }
@keyframes heartBeat { 0% { transform: scale(1); } 30% { transform: scale(1.28); color: var(--gold); } 100% { transform: scale(1); } }
@media (max-width: 560px) {
  /* phones: logo, wishlist, cart and WhatsApp all fit; the round buttons tighten a little */
  .site-header { gap: .4rem; }
  .header-actions { gap: .3rem; }
  .header-icon { width: 42px; height: 42px; }
  .header-order { width: 42px; min-height: 42px; }
}
@media (max-width: 400px) {
  .site-header { gap: .3rem; }
  .header-actions { gap: .25rem; }
  .header-icon { width: 38px; height: 38px; }
  .header-icon svg, .header-order svg { width: 17px; height: 17px; }
  .header-order { width: 38px; min-height: 38px; }
  .header-count { top: -4px; right: -4px; min-width: 17px; height: 17px; line-height: 17px; font-size: .6rem; }
}
@media (max-width: 359px) {
  /* the smallest phones: WhatsApp keeps its place; the wishlist opens from the menu instead */
  .header-wish { display: none; }
}


.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--ivory); transition: color .2s; }
.stepper button:hover:not(:disabled) { color: var(--gold-pale); }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper output { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.cart { position: fixed; inset: 0; z-index: 120; visibility: hidden; transition: visibility 0s .5s; }
.cart.is-open { visibility: visible; transition: visibility 0s; }
.cart__scrim { position: absolute; inset: 0; background: rgba(8, 7, 6, .62); opacity: 0; transition: opacity .5s var(--ease-out); }
.cart.is-open .cart__scrim { opacity: 1; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--kohl); border-left: 1px solid var(--line-soft);
  transform: translateX(100%); transition: transform .55s var(--ease-out); outline: none;
}
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: var(--gutter); border-bottom: 1px solid var(--line-soft); }
.cart__title { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .03em; }
.cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem var(--gutter); }
.cart__empty { display: grid; gap: 1.2rem; justify-items: start; padding: 2.5rem 0; }
.cart__empty .notes { font-size: 1.5rem; }
/* wishlist lines: add to cart, or already in it */
.wish-line__add { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.wish-line__add:hover { color: var(--gold-pale); }
.wish-line__done { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }

/* a short message at the bottom of the screen */
.toast {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 110;
  display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 2rem);
  padding: .7rem .8rem .7rem 1.2rem; border-radius: 999px;
  background: var(--kohl); border: 1px solid var(--line); color: var(--ivory); box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  font-size: .86rem; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { min-height: 34px; padding: 0 .9rem; border-radius: 999px; background: var(--gold); color: var(--onyx); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cart__lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.cart-line__thumb {
  width: 64px; height: 80px; border-radius: 999px 999px 4px 4px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 100%, rgba(200, 163, 90, .2), transparent 60%), #0f0d0a;
  display: grid; place-items: end center; padding: 6px 6px 4px;
}
.cart-line__thumb img { max-height: 100%; object-fit: contain; }
.cart-line__info { display: grid; gap: .15rem; min-width: 0; }
.cart-line__house { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.cart-line__name { font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.cart-line__meta { font-size: .82rem; color: var(--ash); }
.cart-line__row { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.cart-line__remove { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); text-decoration: underline; text-underline-offset: 3px; }
.cart-line__remove:hover { color: var(--gold-pale); }
.cart-line__total { font-variant-numeric: tabular-nums; font-size: .92rem; white-space: nowrap; }
.cart-line.is-out .cart-line__thumb img { filter: grayscale(.9) brightness(.7); }
.cart-line.is-out .cart-line__meta { color: #e8a598; }
.cart__foot { padding: var(--gutter); border-top: 1px solid var(--line-soft); display: grid; gap: .8rem; }
.cart__sum { display: flex; justify-content: space-between; align-items: baseline; }
.cart__sum strong { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; color: var(--gold-pale); font-variant-numeric: tabular-nums; }
.cart__note { font-size: .82rem; color: var(--ash); }
.cart__wa, .cart__checkout { width: 100%; }
.cart__continue { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); min-height: 40px; }
.cart__continue:hover { color: var(--gold-pale); }

.pdp__buy { display: flex; gap: .75rem; align-items: stretch; flex-wrap: wrap; }
.pdp__buy .stepper button { width: 46px; height: 46px; }
.pdp__buy .btn { flex: none; }
.pdp__actions .btn { flex: none; }
@media (max-width: 560px) {
  /* phones: quantity and WhatsApp share one row; the second row splits evenly */
  .pdp__buy { flex-wrap: nowrap; }
  .pdp__buy .btn { flex: 1 1 0; min-width: 0; padding-inline: .9rem; letter-spacing: .08em; }
  .pdp__actions .btn { flex: 1 1 0; padding-inline: .9rem; }
  .btn__extra { display: none; }
}
@media (max-width: 360px) {
  .pdp__buy .stepper button { width: 40px; }
  .pdp__buy .btn, .pdp__actions .btn { font-size: .72rem; letter-spacing: .05em; gap: .4rem; padding-inline: .7rem; }
}

.checkout { padding-bottom: var(--section); }
.checkout__head { padding-bottom: 0; }
.checkout__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) 0; }
.checkout__form { display: grid; gap: 0; min-width: 0; }
.co-step { border: 0; margin: 0 0 clamp(2rem, 4vw, 2.75rem); padding: 0; display: grid; gap: 1.1rem; min-width: 0; }
.co-step legend { display: flex; align-items: center; gap: .75rem; padding: 0; margin-bottom: 1.1rem; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: .02em; }
.co-step__n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-family: var(--f-body); font-size: .8rem; font-weight: 600; flex: none; }
.co-address { display: grid; gap: 1.1rem; }
.co-address[hidden] { display: none; }
.choices { display: grid; gap: .6rem; }
@media (min-width: 640px) { .choices { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.choice {
  display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 12px; transition: border-color .3s, background-color .3s;
}
.choice:hover { border-color: var(--line); }
.choice:has(input:checked) { border-color: var(--gold); background: rgba(200, 163, 90, .06); }
.choice input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--gold); flex: none; }
.choice span { display: grid; gap: .15rem; }
.choice strong { font-weight: 600; }
.choice small { color: var(--ash); font-size: .82rem; }
.choice.is-off { opacity: .45; cursor: not-allowed; }
.checkout__submit { width: 100%; margin-top: .4rem; }
.checkout__submit:disabled { opacity: .5; cursor: default; }
.checkout__fine { font-size: .78rem; color: var(--ash); margin-top: .8rem; }
.checkout__summary { background: var(--kohl); border: 1px solid var(--line-soft); border-radius: 16px; padding: clamp(1.2rem, 3vw, 1.8rem); display: grid; gap: 1rem; align-self: start; }
.co-summary__head { display: flex; justify-content: space-between; align-items: baseline; }
.co-summary__head h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: .03em; }
.co-edit { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.co-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.co-lines li { display: flex; gap: .8rem; align-items: center; }
.co-lines__thumb { width: 40px; height: 50px; border-radius: 999px 999px 3px 3px; background: #0f0d0a; display: grid; place-items: end center; padding: 4px; flex: none; }
.co-lines__thumb img { max-height: 100%; object-fit: contain; }
/* a photo (no cut-out) fills the little arch instead of floating as a rectangle */
.cart-line__thumb.is-photo, .co-lines__thumb.is-photo { padding: 0; }
.cart-line__thumb.is-photo img, .co-lines__thumb.is-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.co-lines__name { flex: 1; min-width: 0; display: grid; font-weight: 500; line-height: 1.3; }
.co-lines__name small { color: var(--ash); font-size: .78rem; font-weight: 400; }
.co-lines__price { font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }
.co-totals { margin: 0; display: grid; gap: .45rem; border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.co-totals div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.co-totals dt { color: var(--ash); }
.co-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.co-total { padding-top: .5rem; }
.co-total dt { color: var(--ivory); font-weight: 600; }
.co-total dd { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; color: var(--gold-pale); }
@media (min-width: 960px) {
  .checkout__grid { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .checkout__summary { position: sticky; top: 7rem; }
}
@media (max-width: 959px) { .checkout__summary { order: -1; } }

.order { padding-bottom: var(--section); }
.order__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.order__detail { margin: 0 var(--gutter); max-width: 640px; }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* intro sequence (first visit per session) */
.intro {
  position: fixed; inset: 0; z-index: 300; background: var(--onyx);
  display: grid; place-items: center;
  transition: clip-path 1s var(--ease-inout) .2s;
  clip-path: inset(0 0 0 0);
}
.intro svg { width: 64px; color: var(--gold); opacity: 0; animation: introMark 1.1s var(--ease-out) forwards; }
.intro.is-done { clip-path: inset(0 0 100% 0); }
@keyframes introMark { 0% { opacity: 0; transform: translateY(12px) scale(.94); } 100% { opacity: 1; transform: none; } }

.js .hero__title .line > span { transform: translateY(108%); }
.js .hero-ready .hero__title .line > span { transform: none; transition: transform 1.2s var(--ease-out); }
.js .hero-ready .hero__title .line:nth-child(2) > span { transition-delay: .09s; }
.js .hero-ready .hero__title .line:nth-child(3) > span { transition-delay: .18s; }
.js .hero .marquee { opacity: 0; transform: translateY(60px); }
.js .hero-ready .hero .marquee { opacity: 1; transform: none; transition: opacity 1.2s var(--ease-out) .35s, transform 1.4s var(--ease-out) .35s; }
.js .hero__foot { opacity: 0; }
.js .hero-ready .hero__foot { opacity: 1; transition: opacity 1.2s ease .7s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .marquee { overflow-x: auto; }
  .vitrine__subject, .vitrine__halo, .vitrine__arch { transform: none !important; }
  .reveal { opacity: 1; transform: none; }
  .intro { display: none; }
}