/* Mazia Parfums
   Concept: the numbered bottle. Pure black like the product photograph, gold taken from the cap,
   and each fragrance told as its own chapter whose colour comes from its mood.
   One bold device: the giant Bodoni numeral that echoes the gold plaque on the bottle. */
:root{
  --black:#000;
  --onyx:#121110;
  --porcelain:#efeeeb;
  --ink:#1b1a18;
  --ink-2:#55524c;
  --smoke:#b9b3a8;        /* secondary text on black */
  --gold:#c9a463;
  --gold-hi:#ecd4a0;
  --gold-lo:#8d6a33;
  --gold-grad:linear-gradient(100deg, #8d6a33 0%, #e9d09a 38%, #b98f4c 62%, #f1dcab 82%, #9a7639 100%);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --serif:'Bodoni Moda', 'Didot', Georgia, serif;
  --sans:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --header-h:72px;
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 52px); -webkit-tap-highlight-color:transparent }
body{ margin:0; font-family:var(--sans); font-size:1.0625rem; line-height:1.8; color:var(--ink); background:var(--black); -webkit-font-smoothing:antialiased }
body.lock{ overflow:hidden }
img{ display:block; max-width:100% }
a{ color:inherit }
button{ font:inherit; color:inherit }
h1,h2,h3{ margin:0; font-weight:300; line-height:1.3; text-wrap:balance }
p{ margin:0; text-wrap:pretty }
.wrap{ width:min(1280px, 100% - 32px); margin-inline:auto }
@media (min-width:900px){ .wrap{ width:min(1280px, 100% - 96px) } }
.latin{ font-family:var(--serif); direction:ltr; unicode-bidi:isolate; font-variant-numeric:lining-nums }
.skip{ position:absolute; inset-inline-start:16px; top:-60px; z-index:300; background:var(--gold); color:#000; padding:.6rem 1rem }
.skip:focus{ top:12px }
:focus-visible{ outline:1.5px solid var(--gold); outline-offset:3px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* Buttons */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 2.1rem; border:1px solid currentColor; border-radius:0; cursor:pointer;
  font:500 .95rem/1 var(--sans); text-decoration:none; white-space:nowrap; background:transparent; overflow:hidden; isolation:isolate;
  transition: color 300ms var(--ease-out), border-color 300ms var(--ease-out), transform 160ms var(--ease-out) }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--fill, var(--ink)); transform:scaleX(0); transform-origin:right; transition: transform 420ms var(--ease-out) }
.btn:active{ transform:scale(.98) }
.btn-gold{ border-color:transparent; color:#1a1408; background:linear-gradient(100deg, #b8904f 0%, #ecd4a0 40%, #c9a463 70%, #f0dbaa 100%); background-size:180% 100%; background-position:0 0; transition: background-position 700ms var(--ease-out), transform 160ms var(--ease-out) }
.btn-gold::before{ display:none }
.btn-line-light{ color:#f2efe9; border-color:rgba(242,239,233,.55); --fill:#f2efe9 }
.btn-line-dark{ color:var(--ink); border-color:var(--ink); --fill:var(--ink) }
.btn-solid-dark{ color:#f2efe9; background:var(--ink); border-color:var(--ink) }
.btn-solid-dark::before{ background:#000 }
@media (hover:hover){
  .btn-gold:hover{ background-position:100% 0 }
  .btn::before{ }
  .btn:hover::before{ transform:scaleX(1); transform-origin:left }
  .btn-line-light:hover{ color:#000 }
  .btn-line-dark:hover{ color:#f2efe9 }
}
.btn-block{ width:100% }
.textlink{ background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; font-size:.92rem }

/* Announcement */
.announce{ background:var(--black); color:var(--gold-hi); text-align:center; font-size:.84rem; padding:.55rem 16px; border-bottom:1px solid rgba(201,164,99,.25) }
.announce a{ color:inherit; text-underline-offset:4px }

/* Header */
.site-header{ position:sticky; top:0; z-index:80; height:var(--header-h); background:var(--black); color:#f2efe9; border-bottom:1px solid rgba(201,164,99,.18) }
.site-header .wrap{ height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem }
.nav{ display:none; gap:2rem; font-size:.92rem }
.nav a{ text-decoration:none; color:#d8d2c8; transition: color 200ms var(--ease-out) }
.nav a:hover{ color:var(--gold-hi) }
.brand{ display:block; width:136px; height:36px; background:var(--gold-grad);
  -webkit-mask:var(--logo) no-repeat center / contain; mask:var(--logo) no-repeat center / contain }
.tools{ justify-self:end; display:flex; align-items:center; gap:.25rem }
.icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:0; cursor:pointer; color:#f2efe9; text-decoration:none }
.icon-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.2 }
.bag-count{ position:absolute; top:5px; inset-inline-end:3px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--gold); color:#000; font-size:.68rem; line-height:18px; text-align:center; font-weight:600 }
.bag-count[data-n="0"]{ display:none }
.bag-count.bump{ animation:bump 380ms var(--ease-out) }
@keyframes bump{ 40%{ transform:scale(1.35) } }
.menu-btn{ display:inline-flex }
.mobile-nav{ display:none; position:absolute; inset-inline:0; top:100%; background:var(--black); padding:.5rem 16px 1.25rem; border-bottom:1px solid rgba(201,164,99,.18) }
.mobile-nav.open{ display:block }
.mobile-nav a{ display:block; padding:.85rem 0; border-bottom:1px solid rgba(242,239,233,.1); text-decoration:none; color:#e9e4da }
@media (min-width:960px){ .nav{ display:flex } .menu-btn{ display:none } }

/* Hero: the bottle in the dark, the wordmark behind it */
.hero{ position:relative; background:var(--black); color:#f2efe9; overflow:hidden; isolation:isolate }
.hero-stage{ position:relative; height:66svh; min-height:440px; overflow:hidden }
.hero-bottle{ position:absolute; left:0; right:0; margin-inline:auto; bottom:-24%; height:150%; width:auto; aspect-ratio:1024/2296; max-width:none;
  animation: bottle-in 1600ms 150ms var(--ease-out) both }
@keyframes bottle-in{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
.hero-copy{ position:relative; z-index:1; padding:0 0 3.5rem; display:grid; gap:1.75rem; animation: copy-in 1200ms 900ms var(--ease-out) both }
@keyframes copy-in{ from{ opacity:0 } to{ opacity:1 } }
.hero h1{ font-size:clamp(2.2rem, 4vw, 3.4rem); font-weight:200; color:#f6f2ea }
.hero .lede{ margin-top:.75rem; color:var(--smoke); max-width:24rem }
.hero .side{ display:grid; gap:1.25rem; align-content:end }
.price-pair{ display:flex; gap:2.25rem; color:#f2efe9 }
.price-pair div{ display:grid; line-height:1.4 }
.price-pair b{ font-family:var(--serif); font-weight:400; font-size:1.9rem; color:var(--gold-hi) }
.price-pair span{ font-size:.85rem; color:var(--smoke) }
.hero .cta{ display:flex; flex-wrap:wrap; gap:.75rem }
@media (min-width:900px){
  .hero{ height:calc(100svh - var(--header-h) - 38px); min-height:640px; max-height:1000px }
  .hero-stage{ position:absolute; inset:0; height:auto }
  .hero-bottle{ bottom:-26% }
  .hero-copy{ position:absolute; inset-inline:0; bottom:0; grid-template-columns:1fr 1fr; align-items:end; column-gap:min(36vw, 520px); padding-bottom:3.5rem }
  .hero .side{ justify-items:end }
}

/* Statement */
.statement{ background:var(--porcelain); color:var(--ink); padding-block:clamp(5rem, 11vw, 9rem); text-align:center }
.statement .big{ font-size:clamp(1.9rem, 4vw, 3.3rem); font-weight:200; line-height:1.45; max-width:22ch; margin-inline:auto }
.statement p.small{ margin-top:1.5rem; color:var(--ink-2); max-width:36rem; margin-inline:auto }
.index{ margin-top:3rem; display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem 2.25rem }
.index a{ font-family:var(--serif); font-size:1.6rem; text-decoration:none; color:var(--ink); position:relative; padding:.25rem .25rem }
.index a::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transition: transform 400ms var(--ease-out) }
.index a:hover::after{ transform:scaleX(1) }

/* Chapter rail (sticky numbers while browsing the collection) */
.rail{ position:sticky; top:var(--header-h); z-index:70; background:rgba(0,0,0,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(201,164,99,.18) }
.rail .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:48px }
.rail ol{ list-style:none; margin:0; padding:0; display:flex; gap:.25rem }
.rail a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; font-family:var(--serif); font-size:1.05rem; color:#8f897f; text-decoration:none; transition: color 250ms var(--ease-out) }
.rail a[aria-current="true"]{ color:var(--gold-hi) }
.rail .rail-note{ font-size:.82rem; color:var(--smoke) }

/* Chapters */
.chapter{ --bg:#111; --fg:#f2efe9; --muted:#b9b3a8; --acc:var(--gold-hi); --line:rgba(242,239,233,.16);
  background:var(--bg); color:var(--fg) }
.chapter[data-n="10"]{ --bg:#16201f; --acc:#d9c08b; --muted:#aebdb8 }
.chapter[data-n="11"]{ --bg:#e3eaea; --fg:#14201f; --muted:#4b5958; --acc:#3d6170; --line:rgba(20,32,31,.16) }
.chapter[data-n="12"]{ --bg:#22150f; --acc:#e0a97a; --muted:#c3ab9a }
.chapter[data-n="13"]{ --bg:#f3e6e2; --fg:#2a1b1a; --muted:#6c5450; --acc:#8a463f; --line:rgba(42,27,26,.16) }
.chapter[data-n="14"]{ --bg:#171b16; --acc:#c3cfa9; --muted:#aab2a2 }
.chapter{ position:relative; overflow:hidden; isolation:isolate }
.chapter .ch-inner{ width:min(1180px, 100% - 32px); margin-inline:auto; display:grid; padding-block:0 3.5rem }
/* The mood photograph is the chapter's backdrop: full bleed on one side, dissolving into the chapter colour */
.ch-media{ position:relative; margin:0 -16px; z-index:0; height:min(78vw, 460px); z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 100%); mask-image:linear-gradient(to bottom, #000 55%, transparent 100%) }
.ch-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition: transform 2200ms var(--ease-out) }
.chapter.seen .ch-media img{ transform:scale(1) }
.chapter .ch-body{ margin-top:-4.5rem }
@media (min-width:900px){
  .chapter .ch-inner{ grid-template-columns:1fr 1fr; min-height:min(640px, 78svh); align-items:center; padding-block:5rem }
  .ch-media{ position:absolute; top:0; bottom:0; right:0; left:auto; width:57%; height:auto; margin:0;
    -webkit-mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%); mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%) }
  .chapter.flip .ch-media{ right:auto; left:0;
    -webkit-mask-image:linear-gradient(to right, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%); mask-image:linear-gradient(to right, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%) }
  .chapter .ch-body{ grid-column:2; margin-top:0 }
  .chapter.flip .ch-body{ grid-column:1 }
}
.ch-body{ display:flex; flex-direction:column; justify-content:center; max-width:34rem }
.ch-head{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line) }
.numeral{ grid-row:span 2; font-family:var(--serif); font-weight:400; font-size:4.25rem; line-height:.9; color:var(--acc); direction:ltr; letter-spacing:-.01em;
  padding-inline-end:1.25rem; border-inline-end:1px solid var(--line) }
.ch-name{ font-family:var(--serif); font-weight:400; font-size:1.55rem; letter-spacing:.03em; line-height:1.25; text-align:right }
.ch-feel{ color:var(--acc); font-size:.95rem; margin-top:.15rem }
.signature{ display:inline-block; margin-top:1.25rem; padding:.15rem .65rem; border:1px solid var(--acc); color:var(--acc); font-size:.78rem; width:max-content }
.ch-story{ margin-top:1.25rem; color:var(--muted); font-size:1rem; line-height:1.85 }
.notes{ margin:1.5rem 0 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; padding:1rem 0; border-block:1px solid var(--line) }
.notes div{ display:grid; gap:.2rem; align-content:start }
.notes dt{ color:var(--muted); font-size:.8rem }
.notes dd{ margin:0; font-size:.92rem; line-height:1.6 }
.buy{ margin-top:1.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem }
.buy .price{ font-family:var(--serif); font-size:1.5rem; line-height:1; white-space:nowrap }
.buy .price small{ font-family:var(--sans); font-size:.85rem; margin-inline-start:.3rem }
.chapter .btn-add{ color:var(--bg); background:var(--fg); border-color:var(--fg); --fill:var(--acc); min-height:48px }
.chapter .btn-add.added{ background:transparent; color:var(--fg) }
.ch-body details{ margin-top:1rem; font-size:.85rem; color:var(--muted) }
.ch-body summary{ cursor:pointer; text-decoration:underline; text-underline-offset:6px; list-style:none; width:max-content }
.ch-body summary::-webkit-details-marker{ display:none }
.inci{ margin-top:.75rem; direction:ltr; text-align:left; font-size:.76rem; line-height:1.65; max-width:68ch }

/* Trio builder */
.trio{ position:relative; background:var(--black); color:#f2efe9; overflow:hidden; isolation:isolate }
.trio-bg{ position:absolute; inset:0; z-index:-1 }
.trio-bg img{ width:100%; height:100%; object-fit:cover; opacity:.38 }
.trio-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.92) 60%) }
.trio .wrap{ padding-block:clamp(5rem, 10vw, 8rem); display:grid; gap:3rem }
.trio h2{ font-size:clamp(2.2rem, 4.6vw, 3.8rem); font-weight:200 }
.trio .lede{ margin-top:1rem; color:#cfc8bc; max-width:30rem }
.trio-prices{ margin-top:2rem; display:flex; align-items:baseline; gap:1.25rem }
.trio-prices b{ font-family:var(--serif); font-weight:400; font-size:3.2rem; line-height:1; color:var(--gold-hi) }
.trio-prices s{ color:#9a9388; font-family:var(--serif); font-size:1.4rem }
.trio-prices span{ color:var(--smoke); font-size:.92rem }
.builder{ background:rgba(0,0,0,.55); border:1px solid rgba(201,164,99,.3); padding:1.5rem }
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.slot{ aspect-ratio:3/4; border:1px dashed rgba(242,239,233,.3); display:grid; place-items:center; position:relative; overflow:hidden; color:#8f897f; font-size:.85rem; background:none; padding:0; cursor:default }
.slot.filled{ border:1px solid var(--gold); cursor:pointer }
.slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.slot .no{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); padding:.05rem .6rem; background:rgba(0,0,0,.75); color:var(--gold-hi); font-family:var(--serif); font-size:1rem; direction:ltr }
.picker{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem }
.pick{ min-width:56px; height:48px; border:1px solid rgba(242,239,233,.3); background:transparent; color:#f2efe9; cursor:pointer; font-family:var(--serif); font-size:1.15rem;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out) }
.pick:hover{ border-color:var(--gold) }
.pick:disabled{ opacity:.35; cursor:not-allowed }
.builder .status{ margin-top:1rem; min-height:1.8em; color:#d9d3c8; font-size:.92rem }
.builder .actions{ margin-top:1rem; display:grid; gap:.5rem }
@media (min-width:900px){ .trio .wrap{ grid-template-columns:1fr 1fr; align-items:center; gap:5rem } }

/* Craft */
.craft{ background:var(--black); color:#f2efe9 }
.craft .wrap{ display:grid; gap:3rem; align-items:center; padding-block:clamp(4.5rem, 9vw, 7.5rem) }
.craft figure{ margin:0 }
.craft img{ width:100%; aspect-ratio:1; object-fit:cover }
.craft h2{ font-size:clamp(2rem, 3.6vw, 3rem); font-weight:200 }
.craft p{ margin-top:1.25rem; color:var(--smoke); max-width:31rem }
.details-list{ margin:2.25rem 0 0; padding:0; list-style:none; max-width:31rem }
.details-list li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline; padding:1rem 0; border-top:1px solid rgba(242,239,233,.14) }
.details-list b{ font-weight:500; color:var(--gold-hi) }
.details-list span{ color:var(--smoke) }
@media (min-width:900px){ .craft .wrap{ grid-template-columns:1fr 1fr; gap:6rem } }

/* Services + FAQ */
.care{ background:var(--porcelain); color:var(--ink) }
.services{ list-style:none; margin:0; padding:clamp(4rem, 8vw, 6rem) 0 0; display:grid; gap:2.5rem }
.services li{ display:grid; gap:.4rem; justify-items:center; text-align:center }
.services svg{ width:30px; height:30px; fill:none; stroke:var(--gold-lo); stroke-width:1.1; margin-bottom:.5rem }
.services b{ font-weight:500 }
.services span{ color:var(--ink-2); font-size:.94rem; max-width:18rem }
@media (min-width:760px){ .services{ grid-template-columns:repeat(3,1fr) } }
.faq-wrap{ display:grid; gap:2rem; padding-block:clamp(4rem, 8vw, 6rem) }
.faq-wrap h2{ font-size:clamp(2rem, 3.6vw, 2.8rem); font-weight:200 }
@media (min-width:900px){ .faq-wrap{ grid-template-columns:1fr 2fr; gap:5rem } }
.faq{ border-top:1px solid #cfccc5 }
.faq details{ border-bottom:1px solid #cfccc5 }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; padding-block:1.25rem; font-weight:500 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-weight:300; font-size:1.5rem; line-height:1; color:var(--gold-lo); transition: transform 260ms var(--ease-out) }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding-bottom:1.25rem; color:var(--ink-2) }

/* Footer */
.site-footer{ background:var(--black); color:var(--smoke); font-size:.92rem; padding-block:4rem 2rem }
.foot-top{ display:grid; gap:2.5rem }
.foot-top .brand{ width:150px; height:40px; -webkit-mask-position:right center; mask-position:right center }
.foot-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem }
.foot-cols h3{ font-size:.9rem; font-weight:500; color:#f2efe9; margin-bottom:.75rem }
.foot-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.foot-cols a{ text-decoration:none }
.foot-cols a:hover{ color:var(--gold-hi) }
.foot-base{ margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid rgba(242,239,233,.12); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.84rem; color:#8f897f }
@media (min-width:900px){ .foot-top{ grid-template-columns:1fr 2fr } .foot-cols{ grid-template-columns:repeat(3,1fr) } }

/* Bag drawer */
.scrim{ position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity 300ms var(--ease-out) }
.scrim.on{ opacity:1; pointer-events:auto }
.drawer{ position:fixed; top:0; bottom:0; left:0; z-index:160; width:min(440px, 100%); background:#0c0b0a; color:#f2efe9; display:flex; flex-direction:column;
  transform:translateX(-102%); visibility:hidden; transition: transform 460ms var(--ease-out), visibility 0s 460ms; border-right:1px solid rgba(201,164,99,.25) }
.drawer.open{ transform:none; visibility:visible; transition: transform 460ms var(--ease-out) }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding:0 20px; border-bottom:1px solid rgba(242,239,233,.12) }
.drawer-head h2{ font-size:1.15rem; font-weight:400 }
.close{ width:44px; height:44px; border:0; background:none; cursor:pointer; color:inherit; font-size:1.5rem; line-height:1 }
.drawer-body{ flex:1; overflow-y:auto; padding:8px 20px }
.progress{ padding:16px 0 8px; font-size:.9rem; color:#ddd6ca }
.progress .bar{ margin-top:.6rem; height:2px; background:rgba(242,239,233,.15); position:relative }
.progress .bar i{ position:absolute; inset-block:0; right:0; background:var(--gold-grad); transition: width 500ms var(--ease-out) }
.line-item{ display:grid; grid-template-columns:72px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid rgba(242,239,233,.1) }
.line-item img{ width:72px; height:96px; object-fit:cover }
.line-item .nm{ font-family:var(--serif); font-size:1rem; line-height:1.3; direction:ltr; text-align:right }
.line-item .sub{ color:var(--smoke); font-size:.84rem }
.qty{ margin-top:.6rem; display:inline-flex; align-items:center; border:1px solid rgba(242,239,233,.2) }
.qty button{ width:38px; height:38px; border:0; background:none; cursor:pointer; color:inherit; font-size:1.1rem }
.qty output{ min-width:26px; text-align:center; font-size:.9rem }
.line-item .lp{ font-size:.92rem; white-space:nowrap }
.empty{ padding:3.5rem 0; text-align:center; color:var(--smoke) }
.drawer-foot{ border-top:1px solid rgba(242,239,233,.12); padding:18px 20px calc(18px + env(safe-area-inset-bottom)); display:grid; gap:.7rem }
.sum-row{ display:flex; justify-content:space-between; font-size:.95rem }
.sum-row.save{ color:var(--gold-hi) }
.sum-row.total{ font-size:1.2rem }
.sum-row.total span:last-child{ font-family:var(--serif) }
.gift-opt{ display:flex; gap:.6rem; align-items:center; cursor:pointer; font-size:.92rem }
.gift-opt input{ width:18px; height:18px; accent-color:var(--gold) }
.fine{ font-size:.8rem; color:#8f897f; text-align:center }
.btn[aria-disabled="true"]{ opacity:.4; pointer-events:none }

.toast{ position:fixed; bottom:24px; left:50%; z-index:200; transform:translate(-50%, 16px); opacity:0; background:#f2efe9; color:#000; padding:.75rem 1.3rem; font-size:.9rem;
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out); pointer-events:none }
.toast.on{ opacity:1; transform:translate(-50%, 0) }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .hero-bottle, .hero-copy{ animation:none }
  .ch-media img{ transform:none }
  *, *::before{ transition-duration:0ms !important }
}
.hero-stage picture{ display:contents }
@media (max-width:899px){ .rail .rail-note{ display:none } .numeral{ font-size:3.4rem } .notes{ grid-template-columns:1fr; gap:.6rem } .notes div{ grid-template-columns:6.5rem 1fr; gap:1rem } }
.trio-bg picture{ display:contents }
.hero-mark{ display:block; width:min(300px, 64vw); aspect-ratio:1297/360; margin-bottom:1.5rem; background:var(--gold-grad);
  -webkit-mask:var(--logo) no-repeat right center / contain; mask:var(--logo) no-repeat right center / contain }
@media (min-width:900px){ .hero-mark{ width:min(340px, 26vw); margin-bottom:2rem } }
@media (max-width:899px){ .hero-mark{ display:none } }
@media (min-width:900px){
  .hero h1{ font-size:clamp(1.6rem, 2.3vw, 2.15rem); font-weight:300; line-height:1.5 }
  .hero .lede{ font-size:.95rem; margin-top:.6rem; max-width:22rem }
  .hero-mark{ width:min(360px, 27vw); margin-bottom:1.75rem }
}
@media (min-width:900px){ .hero-mark{ margin-right:calc(min(360px, 27vw) * -0.043) } }
/* Header wordmark waits until the large hero logo has scrolled away */
.site-header .brand{ transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out) }
.site-header.brand-hidden .brand{ opacity:0; transform:translateY(6px); pointer-events:none }

/* ===== Hero v2: studio photograph with light beams ===== */
.hero{ position:relative; background:#1d1d1d; color:#f6f2ea; overflow:hidden; isolation:isolate; height:auto; min-height:0; max-height:none }
.hero-bg{ display:block; position:relative; aspect-ratio:680/727; max-height:72svh; width:100% }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; animation: settle 1800ms var(--ease-out) both }
@keyframes settle{ from{ opacity:0; transform:scale(1.04) } to{ opacity:1; transform:none } }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 60%, #1d1d1d 100%) }
.hero .hero-copy{ position:relative; display:block; padding:0 0 3.5rem; margin-top:-2rem; animation:none }
.hero-text{ display:grid; gap:0; max-width:30rem }
.hero h1{ margin-top:0 }
.hero .price-pair{ margin-top:1.75rem }
.hero .cta{ margin-top:1.5rem }
@media (min-width:900px){
  .hero{ margin-top:calc(-1 * var(--header-h)); height:calc(100svh - 38px); min-height:680px; max-height:1040px; background:#2b2b2b }
  .hero-bg{ position:absolute; inset:0; aspect-ratio:auto; max-height:none }
  .hero-bg img{ object-position:40% 50% }
  .hero-bg::after{ background:
      linear-gradient(to bottom, rgba(12,12,12,.55), transparent 22%),
      linear-gradient(to left, rgba(14,14,14,.82) 0%, rgba(14,14,14,.55) 30%, rgba(14,14,14,0) 55%) }
  .hero .hero-copy{ position:absolute; inset:0; margin:0 auto; padding:calc(var(--header-h) + 2rem) 0 3rem; display:flex; align-items:center }
  .hero-text{ animation: copy-in 1200ms 500ms var(--ease-out) both }
}
.site-header.on-hero{ background:transparent; border-bottom-color:transparent }
.site-header{ transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out) }
@media (prefers-reduced-motion: reduce){ .hero-bg img, .hero-text{ animation:none } }
.hero .lede{ color:#ddd6ca }
/* Stage photograph: darker, warmer overlay so text holds against the busy auditorium */
.hero{ background:#120f0d }
.hero-bg::after{ background:linear-gradient(to bottom, transparent 55%, #120f0d 100%) }
@media (min-width:900px){
  .hero{ background:#120f0d }
  .hero-bg::after{ background:
      linear-gradient(to bottom, rgba(10,8,6,.6), transparent 20%),
      linear-gradient(to top, rgba(10,8,6,.35), transparent 30%),
      linear-gradient(to left, rgba(10,8,6,.9) 0%, rgba(10,8,6,.72) 28%, rgba(10,8,6,.25) 48%, rgba(10,8,6,0) 60%) }
}

/* ===== Language switch ===== */
.icon-btn.lang{ width:auto; min-width:44px; padding:0 .6rem; font-size:.82rem; letter-spacing:.06em; border:1px solid rgba(242,239,233,.28); height:32px; margin-inline-end:.35rem; transition: border-color 250ms var(--ease-out), color 250ms var(--ease-out) }
.icon-btn.lang:hover{ border-color:var(--gold); color:var(--gold-hi) }
.icon-btn.lang[lang="ar"]{ font-family:var(--sans); letter-spacing:0; font-size:.9rem }

/* ===== English (LTR) mirroring ===== */
[dir="ltr"] .btn::before{ transform-origin:left }
@media (hover:hover){ [dir="ltr"] .btn:hover::before{ transform-origin:right } }
[dir="ltr"] .ch-name, [dir="ltr"] .line-item .nm{ text-align:left }
[dir="ltr"] .foot-top .brand{ -webkit-mask-position:left center; mask-position:left center }
[dir="ltr"] .hero-mark{ -webkit-mask-position:left center; mask-position:left center; margin-right:0 }
[dir="ltr"] .progress .bar i{ right:auto; left:0 }
[dir="ltr"] .drawer{ left:auto; right:0; transform:translateX(102%); border-right:0; border-left:1px solid rgba(201,164,99,.25) }
[dir="ltr"] .drawer.open{ transform:none }
[dir="ltr"] .trio-bg::after{ background:linear-gradient(270deg, rgba(0,0,0,.2), rgba(0,0,0,.92) 60%) }
[lang="en"] h1, [lang="en"] .statement .big, [lang="en"] .trio h2, [lang="en"] .craft h2, [lang="en"] .faq-wrap h2{ font-family:var(--serif); font-weight:400; letter-spacing:-.005em }
[lang="en"] .hero h1{ line-height:1.35 }
@media (min-width:900px){
  /* keep the copy on the right of the photo so the bottle stays clear */
  [dir="ltr"] .hero .hero-copy{ justify-content:flex-end }
  [dir="ltr"] .hero-mark{ margin-left:calc(min(360px, 27vw) * -0.02) }
  [dir="ltr"] .ch-media{ right:auto; left:0;
    -webkit-mask-image:linear-gradient(to right, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%); mask-image:linear-gradient(to right, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%) }
  [dir="ltr"] .chapter.flip .ch-media{ left:auto; right:0;
    -webkit-mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%); mask-image:linear-gradient(to left, #000 38%, rgba(0,0,0,.5) 66%, transparent 94%) }
}
html, body{ overflow-x:clip }
[lang="en"] .hero-text{ max-width:34rem }
@media (max-width:899px){ .icon-btn.lang{ height:30px; min-width:38px; padding:0 .45rem; margin-inline-end:0 } .tools{ gap:0 } }