/* ALRAWI — storefront stylesheet.
   One maison, many rooms: ivory paper, oxblood, champagne hairlines, square edges.
   Performance rules learned on Safari (see README): animate only transform and
   opacity, no backdrop-filter, no drop-shadow or blur on anything that moves,
   no blend modes, decorative motion pauses off screen. */

:root{
  --ivory:#f6f1e7;--ivory2:#efe7d7;--paper:#fbf8f1;--tile:#efe8dc;
  --oxblood:#4a0e13;--oxblood2:#6a1620;--champagne:#c6a15b;--gold:#bfa05a;
  /* text colours on ivory meet WCAG AA (4.5:1): champagne stays for hairlines and dark grounds */
  --gold-ink:#7f6129;--espresso:#241712;--ink:#2c1b16;--taupe:#6e6050;--line:#e5dcca;--line-gold:#d9c79c;
  --focus:var(--oxblood);
  /* One pairing per role, in both scripts: titles in Cormorant Garamond / Amiri,
     text and interface in Jost / IBM Plex Sans Arabic. Latin letters take the first
     face, Arabic letters fall through to the second, so mixed lines stay consistent. */
  --serif:'Cormorant Garamond','Amiri',Georgia,serif;--sans:'Jost','IBM Plex Sans Arabic',system-ui,sans-serif;
  --mark:'ALRAWI Mark','Amiri',serif;--mark-line:'ALRAWI Mark Line','Amiri',serif;
  --ease:cubic-bezier(.2,.7,.2,1);--ease2:cubic-bezier(.65,0,.35,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --gut:clamp(18px,4.2vw,60px);--max:1480px;--hd:78px;--ann:0px;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--ease)}
.hd{view-transition-name:hd}
.ann{view-transition-name:ann}
/* a perfume's photo travels from the card that was pressed to the top of its page (site.js names it) */
.gal-shot:first-child{view-transition-name:pdp-photo}
/* the photo sets off at once and settles (a slow-starting ease left it hanging after the page had changed) */
::view-transition-group(pdp-photo){animation-duration:.5s;animation-timing-function:var(--ease)}
::view-transition-old(pdp-photo),::view-transition-new(pdp-photo){height:100%;object-fit:cover;mix-blend-mode:normal}
/* the photo that was there stays opaque beneath while the other dissolves in over it (the browser's own
   cross-fade would add the two together and blow the picture out to white); alone it leaves quickly */
::view-transition-old(pdp-photo){animation:none}
::view-transition-new(pdp-photo){animation:vt-in .5s var(--ease) both}
::view-transition-old(pdp-photo):only-child{animation:vt-out .3s var(--ease) both}
@keyframes vt-in{from{opacity:0}to{opacity:1}}
@keyframes vt-out{to{opacity:0}}
html.vt .gal-shot:first-child img{animation:none}
/* arriving through the transition, the page's own photo shows the moment it is ready (no fade of its
   own, no plain ground before it) — the travelling picture covers it until then */
html.vt .gal-shot:first-child img.lz{transition:none}
html.vt .gal-shot:first-child:not(:has(img.in)){background:transparent}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font:300 1rem/1.7 var(--sans);background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100vh}
html[dir=rtl] body{font-family:var(--sans);font-weight:400}
html[dir=rtl] *{letter-spacing:normal!important}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.band:not(.band-light),.ht,.fam-mini,.ed,.promise,.ft,.mega-feat,.ph,.hero-art,.ann,.ck-done{--focus:#f3e3bf}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:200;background:var(--oxblood);color:var(--ivory);padding:10px 16px;font-size:.8rem;transition:top .2s}
.skip:focus{top:12px}
main{display:block;outline:0}
bdi{unicode-bidi:isolate}

/* ── type & controls ─────────────────────────────────────────────────────── */
.eyebrow{font:400 .62rem/1.5 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gold-ink)}
html[dir=rtl] .eyebrow{font-size:.86rem}
.btn,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 36px;font:500 .7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--oxblood);transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);text-align:center}
.btn{background:var(--oxblood);color:var(--ivory)}
.btn:hover{background:var(--oxblood2);border-color:var(--oxblood2)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-gold)}
.btn-line:hover{border-color:var(--oxblood);color:var(--oxblood)}
html[dir=rtl] .btn,html[dir=rtl] .btn-line{font-size:.92rem;font-weight:500}
.lnk{border-bottom:1px solid var(--line-gold);padding-bottom:2px;transition:border-color .3s,color .3s}
.lnk:hover{border-color:var(--oxblood);color:var(--oxblood)}
.gl{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}

/* ── announcement ────────────────────────────────────────────────────────── */
.ann{position:relative;z-index:60;background:linear-gradient(90deg,#360a0e,var(--oxblood) 50%,#360a0e);color:#e9d5a3;text-align:center;padding:10px 48px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
html[dir=rtl] .ann{font-size:.86rem}
.ann a{border-bottom:1px solid rgba(233,213,163,.4)}
.ann-x{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);color:#e9d5a3;font-size:1.1rem;line-height:1;padding:6px}
.ann-off .ann{display:none}

/* ── header ──────────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:50;background:var(--ivory);border-bottom:1px solid var(--line)}
.p-home .hd:not(.is-scrolled){border-bottom-color:transparent}
.hd-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hd);max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.hd-l{display:flex;align-items:center;gap:30px;min-width:0}
.hd-nav{display:flex;gap:30px}
.hd-r{display:flex;align-items:center;justify-content:flex-end;gap:24px}
.hd-a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 0;font:400 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.hd-a::after{content:"";position:absolute;inset-inline:0;bottom:3px;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:var(--o,left);transition:transform .45s var(--ease)}
html[dir=rtl] .hd-a::after{--o:right}
.hd-a:hover::after,.hd-a[aria-expanded=true]::after,.hd-a[aria-current=page]::after{transform:scaleX(1)}
html[dir=rtl] .hd-a{font-size:.95rem;font-weight:500}
.hd-search svg{width:17px;height:17px}
.hd .chev{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .3s}
.hd-a[aria-expanded=true] .chev{transform:rotate(180deg)}
.hd-brand{display:flex;flex-direction:column;align-items:center;line-height:1;padding:6px 10px}
.hd-brand .nm{font:500 1.72rem/1 var(--serif);letter-spacing:.34em;padding-inline-start:.34em;color:var(--ink)}
.hd-brand .sub{font-size:.46rem;letter-spacing:.3em;color:var(--gold-ink);margin-top:7px;padding-inline-start:.3em;white-space:nowrap}
html[dir=rtl] .hd-brand .nm{font-family:var(--mark);font-size:2.2rem;font-weight:400;line-height:1.1}
html[dir=rtl] .hd-brand .sub{font-family:var(--mark-line);font-size:.8rem;margin-top:2px}
.hd-bag{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-inline-end:-8px}
.hd-bag svg{width:21px;height:21px;stroke:var(--ink);transition:stroke .3s}
.hd-bag:hover svg{stroke:var(--oxblood)}
.hd-count{position:absolute;top:1px;inset-inline-end:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--oxblood);color:var(--ivory);font:400 .6rem/17px var(--sans);text-align:center;opacity:0;transform:scale(.5);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hd-count.on{opacity:1;transform:none}
.hd-menu{display:none;width:40px;height:40px;align-items:center;margin-inline-start:-8px}
.hd-burger{display:flex;flex-direction:column;gap:7px;width:22px;margin-inline-start:8px}
.hd-burger i{display:block;height:1px;background:var(--ink)}
.hd-burger i:last-child{width:14px}
/* pop-overs: language and contact */
.hd-pop{position:relative}
.pop{position:absolute;top:calc(100% + 12px);inset-inline-end:-18px;min-width:230px;background:var(--paper);border:1px solid var(--line-gold);padding:6px 0;opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:5}
.pop.on{opacity:1;transform:none}
.pop-a,.pop-l{display:flex;flex-direction:column;gap:2px;padding:12px 20px;border-top:1px solid var(--line);font:400 .72rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:color .25s}
.pop-a:first-child,.pop-l:first-child{border-top:0}
.pop-a small{font-size:.78rem;letter-spacing:.02em;text-transform:none;color:var(--taupe)}
.pop-a:hover,.pop-l:hover,.pop-l[aria-current]{color:var(--oxblood)}
.pop-lang{min-width:170px}
.pop-l[lang=ar]{font-family:var(--sans);font-size:.98rem;letter-spacing:0}
html[dir=rtl] .pop-a{font-size:.95rem}

/* mega menus */
.mega{position:absolute;inset-inline:0;top:100%;background:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line-gold);opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mega.on{opacity:1;transform:none}
.mega-in{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;max-width:var(--max);margin:0 auto;padding:40px var(--gut) 44px}
.mega-h{font:400 .6rem/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:18px}
html[dir=rtl] .mega-h{font-size:.85rem}
.mega-list a{display:flex;align-items:baseline;gap:10px;padding:7px 0;font:500 1.12rem/1.25 var(--serif);color:var(--ink);transition:color .25s}
.mega-list a:hover,.mega-list a.on{color:var(--oxblood)}
.mega-list small{font:400 .66rem/1 var(--sans);color:var(--taupe);letter-spacing:.06em}
.mega-cols4{columns:4;column-gap:28px}
.mega-cols4 li{break-inside:avoid}
.mega-big a{font-size:1.5rem;padding:9px 0}
.mega-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px}
.mega-fams{columns:3;column-gap:28px}
.mega-fams li{break-inside:avoid}
.mega-fams a{align-items:center}
.mega-fams .gl{width:18px;height:18px;color:var(--champagne);flex:none}
.mega-all{display:inline-block;margin-top:22px;font:400 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--line-gold);padding-bottom:5px}
.mega-all:hover{color:var(--oxblood);border-color:var(--oxblood)}
.mega-side{position:relative;min-height:340px}
.mega-feat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;text-align:center;color:var(--hink);background:linear-gradient(160deg,var(--h1),var(--h2) var(--hm),var(--h3))}
.mega-feat::before{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--hacc) 45%,transparent);pointer-events:none}
.mega-logo{max-width:62%;max-height:120px;object-fit:contain}
.mega-word{font:500 1.8rem/1.1 var(--serif);letter-spacing:.08em}
.mega-origin{font:400 .58rem/1 var(--sans);letter-spacing:.32em;color:var(--hacc);margin-top:8px}
.mega-motto{font:italic 400 1.1rem/1.35 var(--serif);max-width:15em;opacity:.92}
.mega-go{font:400 .58rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--hacc);margin-top:8px}
.mega-pick{display:flex;flex-direction:column;gap:14px;min-height:0}
.mega-pic{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.mega-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mega-pick:hover .mega-pic img{transform:scale(1.04)}
.mega-cap{font:500 1.1rem/1.3 var(--serif);text-align:center}
.mega-cap small{display:block;font:400 .58rem/1.8 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-ink)}
.mega-cap b{font-weight:500;color:var(--taupe);margin-inline-end:4px}
.veil-mega{position:fixed;inset:0;z-index:40;background:rgba(36,23,18,.22);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.veil-mega.on{opacity:1}

@media (max-width:1180px){.mega-cols4{columns:3}.mega-in{grid-template-columns:minmax(0,1fr) 260px;gap:36px}.hd-nav{gap:22px}.hd-r{gap:18px}}
@media (max-width:1023px){
  :root{--hd:62px}
  .hd-nav,.hd-contact,.hd-lang,.hd-search .hd-t,.mega,.veil-mega{display:none!important}
  .hd-menu{display:flex}
  .hd-in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .hd-l{gap:2px}
  .hd-r{gap:4px}
  .hd-search{width:40px;height:40px;justify-content:center;padding:0}
  .hd-search::after{display:none}
  .hd-brand .nm{font-size:1.32rem}
  .hd-brand .sub{font-size:.4rem;margin-top:5px}
  html[dir=rtl] .hd-brand .nm{font-size:1.7rem}
  html[dir=rtl] .hd-brand .sub{font-size:.66rem}
}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:90;background:var(--ivory);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;transform:translateX(var(--from,-100%));transition:transform .5s var(--ease-drawer)}
html[dir=rtl] .mnav{--from:100%}
.mnav.on{transform:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 var(--gut);border-bottom:1px solid var(--line);flex:none;position:sticky;top:0;background:var(--ivory);z-index:1}
.mnav-brand{font:500 1.2rem/1 var(--serif);letter-spacing:.3em}
html[dir=rtl] .mnav-brand{font-family:var(--mark);font-size:1.6rem}
.mnav-x,.srch-x,.dclose,.fs-x,.zoom-x{font:400 .66rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid var(--line-gold)}
html[dir=rtl] .mnav-x,html[dir=rtl] .srch-x,html[dir=rtl] .dclose,html[dir=rtl] .fs-x,html[dir=rtl] .zoom-x{font-size:.9rem}
.mnav-body{padding:14px var(--gut) 10px}
.mnav-g{border-bottom:1px solid var(--line)}
.mnav-g summary,.mnav-a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font:500 1.65rem/1.1 var(--serif);color:var(--ink)}
.mnav-a{border-bottom:1px solid var(--line)}
.mnav-g summary::after{content:"";width:11px;height:11px;border-right:1px solid var(--taupe);border-bottom:1px solid var(--taupe);transform:rotate(45deg) translateY(-3px);transition:transform .35s var(--ease)}
.mnav-g[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.mnav-g ul{padding:0 0 18px}
.mnav-g li a{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font:400 1.02rem/1.3 var(--sans);color:var(--ink)}
.mnav-g li small{color:var(--taupe);font-size:.75rem}
.mnav-all{color:var(--oxblood)!important;font-size:.72rem!important;letter-spacing:.22em;text-transform:uppercase;padding-top:14px!important}
.mnav-foot{padding:26px var(--gut) 40px;margin-top:auto;background:var(--paper);border-top:1px solid var(--line)}
.mnav-h{font:400 .6rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-ink);margin:16px 0 8px}
html[dir=rtl] .mnav-h{font-size:.85rem}
.mnav-c{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.mnav-c small{color:var(--taupe)}
.mnav-lang{display:flex;gap:24px;padding-top:6px}
.mnav-lang a{font-size:.95rem;padding:6px 0}
.mnav-lang a[aria-current]{color:var(--oxblood);border-bottom:1px solid var(--oxblood)}
.mnav-lang a[lang=ar]{font-family:var(--sans)}

/* ── search ──────────────────────────────────────────────────────────────── */
.srch{position:fixed;inset:0;z-index:95;background:rgba(36,23,18,.28);opacity:0;transition:opacity .35s var(--ease)}
.srch.on{opacity:1}
.srch-in{background:var(--ivory);max-height:100%;overflow-y:auto;transform:translateY(-14px);transition:transform .45s var(--ease);border-bottom:1px solid var(--line-gold)}
.srch.on .srch-in{transform:none}
.srch-f{display:flex;align-items:center;gap:16px;max-width:var(--max);margin:0 auto;padding:26px var(--gut);border-bottom:1px solid var(--line)}
.srch-f svg{width:22px;height:22px;flex:none;color:var(--taupe)}
.srch-f input{flex:1;min-width:0;border:0;background:none;font:400 clamp(1.5rem,3vw,2.2rem)/1.2 var(--serif);color:var(--ink);padding:6px 0;outline:0}
html[dir=rtl] .srch-f input{font-family:var(--serif)}
.srch-f input::-webkit-search-cancel-button{display:none}
.srch-body{max-width:var(--max);margin:0 auto;padding:26px var(--gut) 40px}
.srch-h{font:400 .6rem/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 16px}
html[dir=rtl] .srch-h{font-size:.85rem}
.srch-sugg{display:flex;flex-wrap:wrap;gap:6px 28px}
.srch-sugg a{font:500 1.2rem/1.6 var(--serif);border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.srch-sugg a:hover{color:var(--oxblood);border-color:var(--line-gold)}
.srch-houses{display:flex;flex-wrap:wrap;gap:6px 28px;margin-bottom:28px}
.srch-houses a{font:500 1.3rem/1.6 var(--serif)}
.srch-houses a:hover{color:var(--oxblood)}
.srch-grid{--cols:6;--gx:22px;gap:var(--gx)}
.sr{display:flex;flex-direction:column;gap:8px;text-align:center}
.sr-pic{aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.sr-pic img{width:100%;height:100%;object-fit:cover}
.sr-h{font:400 .56rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.sr-n{font:500 1.02rem/1.2 var(--serif)}
.sr-p{font:500 .95rem/1 var(--serif);color:var(--oxblood)}
.srch-all{margin-top:28px;text-align:center}
.srch-none{font:italic 400 1.2rem/1.5 var(--serif);color:var(--taupe)}
@media (max-width:900px){.srch-grid{--cols:3;--gx:16px}}
@media (max-width:520px){.srch-grid{--cols:2}.srch-f{padding:16px var(--gut)}}

/* ── sections ────────────────────────────────────────────────────────────── */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,116px) var(--gut)}
.sec-head{text-align:center;margin-bottom:clamp(30px,4.4vw,56px)}
.sec-t{font:500 clamp(2rem,4.2vw,3.2rem)/1.1 var(--serif);color:var(--ink);margin-top:14px}
html[dir=rtl] .sec-t,html[dir=rtl] .phead-t,html[dir=rtl] .band-t,html[dir=rtl] .story-t,html[dir=rtl] .promise-t,html[dir=rtl] .rail-t,html[dir=rtl] .care-h{font-family:var(--serif);font-weight:400;line-height:1.4}
.sec-more{text-align:center;margin-top:clamp(30px,4vw,52px)}

/* ── home: hero ──────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5.5vw,96px);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(20px,3vw,40px) var(--gut) clamp(50px,7vw,100px);min-height:calc(100svh - var(--hd))}
.hero-txt{padding-block:20px}
.hero-eye{opacity:0;animation:up 1.1s var(--ease) .15s forwards}
.hero-h{font:500 clamp(3.1rem,7vw,6.8rem)/1.02 var(--serif);color:var(--oxblood);margin:26px 0 0;letter-spacing:.005em}
.hero-h span{display:block;opacity:0;animation:up 1.2s var(--ease) forwards}
.hero-h .l1{animation-delay:.3s}
.hero-h .l2{font-style:italic;color:var(--ink);animation-delay:.48s}
html[dir=rtl] .hero-h{font-family:var(--serif);font-weight:400;line-height:1.35;font-size:clamp(2.8rem,6.2vw,5.6rem)}
html[dir=rtl] .hero-h .l2{font-style:normal}
.hero-sub{max-width:31em;margin:26px 0 38px;color:var(--taupe);font-size:1.06rem;opacity:0;animation:up 1.2s var(--ease) .66s forwards}
html[dir=rtl] .hero-sub{font-size:1.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:up 1.2s var(--ease) .82s forwards}
/* the photograph keeps its 4:5 shape: on a short screen the frame narrows instead of cutting the bottle top and bottom */
.hero-art{position:relative;aspect-ratio:4/5;width:min(100%,calc((100svh - var(--hd) - 60px) * .8));justify-self:end;overflow:hidden;background:var(--tile);opacity:0;animation:fade 1.6s var(--ease) .2s forwards}
.hw{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;z-index:0}
.hw.on{opacity:1;z-index:1}
.hw img{width:100%;height:100%;object-fit:cover}
.hw-cap{position:absolute;inset-inline-start:34px;bottom:30px;color:#fff;font:500 1.3rem/1.2 var(--serif);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hw-cap small{display:block;font:400 .58rem/1.8 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.hw-frame{position:absolute;inset:16px;border:1px solid rgba(255,255,255,.42);z-index:2;pointer-events:none}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:28px;gap:34px}
  .hero-txt{text-align:center;padding:0}
  .hero-sub{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-art{width:100%;justify-self:stretch}
}

/* shop-for tiles */
.ed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.ed{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--h1),var(--h3));color:var(--hink)}
.ed-pic,.ed-pic img{position:absolute;inset:0;width:100%;height:100%}
.ed-pic img{object-fit:cover;transition:transform 1.4s var(--ease)}
.ed:hover .ed-pic img{transform:scale(1.04)}
.ed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--h3) 92%,transparent) 100%);pointer-events:none}
.ed::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.32);z-index:2;pointer-events:none;transition:inset .6s var(--ease)}
.ed-txt{position:absolute;inset-inline:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 24px 38px;text-align:center}
.ed-t{font:500 clamp(2rem,3.2vw,2.9rem)/1 var(--serif)}
html[dir=rtl] .ed-t{font-family:var(--serif);font-weight:400;line-height:1.3}
.ed-m{font:italic 400 1.1rem/1.3 var(--serif);opacity:.9}
html[dir=rtl] .ed-m{font-style:normal;font-family:var(--sans)}
.ed-go{font:400 .58rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--hacc);margin-top:10px}
html[dir=rtl] .ed-go{font-size:.85rem}
/* on a phone the three sit side by side, so all of them are seen at once */
@media (max-width:760px){
  .ed-grid{gap:8px}
  .ed{aspect-ratio:3/4}
  .ed::before{inset:6px}
  .ed-txt{padding:0 6px 14px;gap:3px}
  .ed-t{font-size:1.2rem}
  html[dir=rtl] .ed-t{font-size:1.3rem}
  .ed-m{display:none}
  .ed-go{display:none}
}

/* card grids: a row that does not fill (one, two or three left over) sits in the middle */
.grid,.ht-grid,.srch-grid{display:flex;flex-wrap:wrap;justify-content:center}
.grid>*,.ht-grid>*,.srch-grid>*{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols));min-width:0}

/* house tiles */
.ht-grid{--cols:4;--gx:clamp(10px,1.4vw,18px);gap:var(--gx)}
.ht-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 16px) / 4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ht-row::-webkit-scrollbar{display:none}
.ht-row .ht{scroll-snap-align:start}
.ht{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:1/1;padding:26px 18px 22px;text-align:center;color:var(--hink);background:linear-gradient(160deg,var(--h1),var(--h2) var(--hm),var(--h3));overflow:hidden;isolation:isolate}
.ht-frame{position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--hacc) 38%,transparent);pointer-events:none;transition:transform .7s var(--ease),border-color .7s var(--ease)}
.ht:hover .ht-frame{transform:scale(.975);border-color:color-mix(in srgb,var(--hacc) 75%,transparent)}
.ht-logo{max-width:58%;max-height:40%;object-fit:contain;transition:transform 1s var(--ease)}
.ht:hover .ht-logo{transform:scale(1.04)}
.ht-word{font:500 1.6rem/1.1 var(--serif);letter-spacing:.06em}
.ht-name{font:400 .6rem/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;margin-top:12px}
html[dir=rtl] .ht-name{font-family:var(--sans);font-size:.62rem}
.ht-origin{font:400 .52rem/1 var(--sans);letter-spacing:.3em;color:var(--hacc);opacity:.9}
html[dir=rtl] .ht-origin{font-size:.78rem;font-family:var(--sans)}
.ht-motto{position:absolute;inset-inline:22px;bottom:44px;font:italic 400 1rem/1.3 var(--serif);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html[dir=rtl] .ht-motto{font-style:normal;font-family:var(--sans);font-size:.95rem}
.ht-count{position:absolute;bottom:22px;inset-inline:0;font:400 .52rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;opacity:.7}
html[dir=rtl] .ht-count{font-size:.76rem}
@media (hover:hover){.ht:hover .ht-motto{opacity:.92;transform:none}.ht:hover .ht-logo{transform:translateY(-14px) scale(1.02)}.ht:hover .ht-name,.ht:hover .ht-origin{transform:translateY(-14px)}.ht-name,.ht-origin{transition:transform 1s var(--ease)}}
.ht-light .ht-frame{border-color:color-mix(in srgb,var(--hacc) 30%,transparent)}
@media (max-width:1100px){.ht-grid{--cols:3}.ht-row{grid-auto-columns:calc((100% - 2 * 16px) / 3)}}
@media (max-width:640px){.ht-grid{--cols:2}.ht-row{grid-auto-columns:46%;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}.ht-motto{display:none}.ht{padding:20px 12px 18px}.ht-count{bottom:16px}}

/* spotlight */

/* families */
.fam-gl{width:30px;height:30px;color:var(--hacc);fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.fam-strip{padding-top:0}
.fam-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fam-mini{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;color:var(--hink);background:linear-gradient(160deg,var(--h1),var(--h3));font:500 1rem/1 var(--serif)}
html[dir=rtl] .fam-mini{font-family:var(--sans);font-size:.92rem;padding:10px 12px 10px 16px}
.fam-mini .fam-gl{width:18px;height:18px;margin:0}

/* story & promise */
.story-sec{text-align:center}
.story-in{max-width:780px;margin:0 auto}
.story-t{font:500 clamp(2rem,4.2vw,3.3rem)/1.12 var(--serif);margin:20px 0 26px}
.story-in p{font:400 clamp(1.12rem,1.8vw,1.32rem)/1.75 var(--serif);color:var(--ink);margin-bottom:16px}
html[dir=rtl] .story-in p{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.95}
.story-in .btn-line{margin-top:20px}
.story-lead{font-size:clamp(1.4rem,2.4vw,1.8rem)!important;font-style:italic}
html[dir=rtl] .story-lead{font-style:normal}
.story-sig{font:500 1.1rem/1 var(--serif)!important;letter-spacing:.5em;color:var(--gold-ink)!important;margin-top:30px}
.promise{background:linear-gradient(160deg,#2a1712,var(--espresso) 55%,#1a100c);color:#efe5d1}
.promise-in{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,110px) var(--gut);text-align:center}
.promise-t{font:500 clamp(2rem,4vw,3rem)/1.1 var(--serif);margin:16px 0 clamp(36px,5vw,60px);color:#f0e6d2}
.promise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.pr{padding:0 10px}
.pr-n{display:block;font:italic 400 1.6rem/1 var(--serif);color:var(--champagne);margin-bottom:16px}
.pr-t{font:500 1.5rem/1.2 var(--serif);margin-bottom:10px;color:#f6efe0}
html[dir=rtl] .pr-t{font-family:var(--serif);font-weight:400}
.pr p{color:#cdbfa8;font-size:.98rem}
@media (max-width:760px){.promise-grid{grid-template-columns:1fr;gap:34px}}

/* ── page heads & bands ──────────────────────────────────────────────────── */
.phead{max-width:var(--max);margin:0 auto;padding:clamp(26px,3.6vw,48px) var(--gut) clamp(22px,3vw,36px);text-align:center}
.phead .crumbs{justify-content:center;margin-bottom:clamp(20px,3vw,38px)}
.phead-t{font:500 clamp(2.4rem,5.4vw,4.4rem)/1.06 var(--serif);color:var(--ink);margin-top:12px}
.phead-sub{max-width:40em;margin:18px auto 0;color:var(--taupe);font-size:1.02rem}
.phead-count{margin-top:14px;font:400 .62rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
html[dir=rtl] .phead-count{font-size:.86rem}
/* the Arabic title's tails reach down: the "last updated" line on a policy page stands a little further off */
html[dir=rtl] .phead-legal .phead-count{margin-top:28px}
.phead-story .phead-t{max-width:15em;margin-inline:auto}
.phead-search{display:flex;gap:10px;max-width:640px;margin:26px auto 0}
.phead-search input{flex:1;min-width:0;height:52px;border:0;border-bottom:1px solid var(--ink);background:none;padding:0 4px;font:400 1.3rem/1 var(--serif);outline:0}
.az{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:28px}
.az a{font:500 1.15rem/1.6 var(--serif);color:var(--taupe);border-bottom:1px solid transparent}
.az a:hover{color:var(--oxblood);border-color:var(--line-gold)}
.az-sec{padding-top:10px}
.az-sec .ht{scroll-margin-top:calc(var(--hd) + 24px)}
.ht-letter{position:absolute;top:18px;inset-inline-start:22px;font:400 1.5rem/1 var(--serif);color:var(--hacc);opacity:.8}

.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 0;font:400 .6rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
/* Back stays beside the trail; a long trail wraps inside its own box */
.crumbs{display:flex;align-items:center;flex-wrap:nowrap;gap:8px 18px}
.crumbs ol{min-width:0;flex:0 1 auto}
.back{flex:none}
html[dir=rtl] .crumbs ol{font-size:.8rem}
.crumbs li:not(:last-child)::after{content:"/";margin:0 10px;opacity:.5}
.crumbs a:hover{color:var(--oxblood)}
.crumbs [aria-current]{color:var(--ink)}

.band{position:relative;color:var(--hink);background:linear-gradient(160deg,var(--h1),var(--h2) var(--hm),var(--h3));text-align:center;overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--hacc) 30%,transparent);pointer-events:none}
.band-in{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:clamp(26px,3.4vw,44px) var(--gut) clamp(46px,6vw,80px);display:flex;flex-direction:column;align-items:center}
.band .crumbs{margin-bottom:clamp(26px,4vw,52px);justify-content:center;max-width:100%}
.band .crumbs ol{color:var(--hink)}
.band .crumbs [aria-current]{color:var(--hink)}
.band .crumbs a:hover{color:var(--hacc)}
.band-logo{max-width:min(300px,62vw);max-height:150px;object-fit:contain;margin-bottom:22px;opacity:0;animation:fade 1.2s var(--ease) .1s forwards}
.band-seal{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid color-mix(in srgb,var(--hacc) 55%,transparent);border-radius:50%;color:var(--hacc);margin-bottom:22px}
.band-seal .gl{width:28px;height:28px}
.band-eye{font:400 .62rem/1 var(--sans);letter-spacing:.38em;text-transform:uppercase;color:var(--hacc)}
html[dir=rtl] .band-eye{font-size:.88rem;font-family:var(--sans)}
.band-t{font:500 clamp(2.5rem,5.6vw,4.6rem)/1.04 var(--serif);margin-top:14px}
.band-t.with-logo{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.band-logo+.band-eye{margin-top:4px}
.band-sub{font:400 1.05rem/1.4 var(--sans);margin-top:8px;opacity:.85}
.band-motto{font:italic 400 clamp(1.15rem,2vw,1.45rem)/1.4 var(--serif);margin-top:14px;opacity:.92;max-width:28em}
html[dir=rtl] .band-motto{font-style:normal;font-family:var(--serif)}
.band-count{margin-top:18px;font:400 .58rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;opacity:.7}
html[dir=rtl] .band-count{font-size:.85rem}
.band-light{--h1:var(--ivory);--h2:var(--ivory);--h3:var(--ivory);--hink:var(--ink);--hacc:var(--gold-ink)}
.band-light::before{display:none}
.band-light .band-in{padding-bottom:clamp(20px,3vw,36px)}
.band-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:22px}
.band-links a{font:500 1.15rem/1.6 var(--serif);border-bottom:1px solid var(--line-gold)}
.band-links a:hover{color:var(--oxblood);border-color:var(--oxblood)}
html[dir=rtl] .band-links a{font-family:var(--sans)}

/* ── listing ─────────────────────────────────────────────────────────────── */
.lst{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(60px,8vw,110px)}
.lst-bar{position:sticky;top:var(--hd);z-index:20;display:flex;align-items:center;gap:20px;min-height:62px;margin-bottom:clamp(22px,3vw,40px);background:var(--ivory);border-bottom:1px solid var(--line)}
.lst-count{font:400 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
html[dir=rtl] .lst-count{font-size:.9rem}
.lst-chips{display:flex;flex-wrap:wrap;gap:6px 18px;flex:1;min-width:0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:4px 0;font:400 .64rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line-gold)}
.chip span{font-size:.9rem;line-height:.6;color:var(--taupe)}
.chip:hover{color:var(--oxblood);border-color:var(--oxblood)}
.chip-clear{color:var(--taupe);border-bottom-color:transparent}
html[dir=rtl] .chip{font-size:.88rem}
.lst-open{display:inline-flex;align-items:center;gap:10px;margin-inline-start:auto;padding:12px 0;font:400 .66rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--ink)}
html[dir=rtl] .lst-open{font-size:.92rem}
.lst-n:empty{display:none}
.lst-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:var(--oxblood);color:var(--ivory);font-size:.58rem;letter-spacing:0}
.grid{--cols:4;--gx:clamp(14px,2vw,30px);gap:clamp(34px,4vw,56px) var(--gx)}
@media (max-width:1100px){.grid{--cols:3}}
@media (max-width:640px){.grid{--cols:2;--gx:12px;row-gap:30px}.lst-bar{gap:12px;min-height:54px}.lst-chips{display:none}}
.lst-empty{padding:70px 0;text-align:center;font:italic 400 1.3rem/1.5 var(--serif);color:var(--taupe)}
.lst-more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(44px,6vw,72px)}
.lst-of{font:400 .62rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}
html[dir=rtl] .lst-of{font-size:.88rem}
.lst-bar2{position:relative;display:block;width:180px;height:1px;background:var(--line)}
.lst-bar2 i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--champagne);transition:width .6s var(--ease)}
.lst-more .btn-line{margin-top:10px;min-width:220px}

/* perfume card */
.pc{position:relative;display:flex;flex-direction:column;min-width:0}
.pc[hidden]{display:none}
.pc-link{display:block}
.pc-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .8s var(--ease),transform 1.3s var(--ease)}
.pc-alt{opacity:0}
@media (hover:hover){
  .pc.has-alt:hover .pc-alt{opacity:1}
  .pc:not(.has-alt):hover .pc-img{transform:scale(1.04)}
}
.pc-body{display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px 6px 0;text-align:center}
.pc-house{font:400 .58rem/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}
.pc-sig{color:var(--gold-ink)}
.pc-house>span:not(:first-child)::before,.pc-house .pc-sig:not(:first-child)::before{content:"·";margin:0 .6em;color:var(--line-gold)}
html[dir=rtl] .pc-house{font-size:.74rem}
.pc-name{font:500 1.3rem/1.18 var(--serif);color:var(--ink);transition:color .3s}
.pc-link:hover .pc-name{color:var(--oxblood)}
.pc-meta{font-size:.76rem;line-height:1.4;color:var(--taupe);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* in Arabic the sizes (a left-to-right run) wrap as one piece, cut only at their own end, never at their start */
html[dir=rtl] .pc-meta{white-space:normal}
html[dir=rtl] .pc-meta>bdi{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
html[dir=rtl] .pc-meta{font-size:.84rem}
.pc-price{font:500 1.12rem/1 var(--serif);color:var(--oxblood);margin-top:6px}
.from{font:400 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-inline-end:2px}
html[dir=rtl] .from{font-size:.82rem}
.pc-add{align-self:center;margin-top:14px;padding:12px 18px;font:400 .6rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-gold);transition:background-color .3s,border-color .3s,color .3s,opacity .45s var(--ease),transform .45s var(--ease)}
.pc-add:hover{background:var(--oxblood);border-color:var(--oxblood);color:var(--ivory)}
html[dir=rtl] .pc-add{font-size:.84rem}
@media (hover:hover) and (pointer:fine){.pc .pc-add{opacity:0;transform:translateY(6px)}.pc:hover .pc-add,.pc .pc-add:focus-visible{opacity:1;transform:none}}
@media (max-width:640px){.pc-name{font-size:1.1rem}.pc-body{padding-top:12px}.pc-add{padding:10px 12px;font-size:.54rem}.pc-meta{font-size:.68rem}}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;color:var(--hink);background:linear-gradient(160deg,var(--h1),var(--h2) var(--hm),var(--h3));text-align:center}
.ph-gl{width:34px;height:34px;color:var(--hacc);fill:none;stroke:currentColor;stroke-width:1.1}
.ph-n{font:500 1.3rem/1.2 var(--serif)}

/* rails */
.rail{max-width:var(--max);margin:0 auto;padding:clamp(50px,7vw,96px) var(--gut) 0}
.rail+.rail{padding-top:clamp(40px,5vw,70px)}
.rail-head{display:flex;align-items:baseline;gap:22px;margin-bottom:clamp(22px,3vw,34px)}
.rail-t{font:500 clamp(1.7rem,3vw,2.4rem)/1.1 var(--serif)}
.rail-all{font:400 .62rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--line-gold);padding-bottom:4px}
html[dir=rtl] .rail-all{font-size:.88rem}
.rail-all:hover{color:var(--oxblood);border-color:var(--oxblood)}
.rail-nav{display:flex;gap:6px;margin-inline-start:auto}
.rail-b{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-gold);color:var(--ink);transition:border-color .3s,color .3s,opacity .3s}
.rail-i{width:9px;height:14px;fill:none;stroke:currentColor;stroke-width:1.1}
.rail-b:hover{border-color:var(--oxblood);color:var(--oxblood)}
.rail-b:disabled{opacity:.3;cursor:default}
html[dir=rtl] .rail-i{transform:scaleX(-1)}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 24px) / 4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:6px}
.rail-track::-webkit-scrollbar{display:none}
.rail-track .pc{scroll-snap-align:start}
@media (max-width:1100px){.rail-track{grid-auto-columns:calc((100% - 2 * 20px) / 3);gap:20px}}
@media (max-width:640px){.rail-track{grid-auto-columns:64%;gap:14px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut)}.rail-nav{display:none}}
.p-home .rail{padding-top:clamp(20px,3vw,40px)}

/* home: the three promises, straight under the opening */
.trust{border-block:1px solid var(--line)}
.trust-in{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-items:center;max-width:var(--max);margin:0 auto;padding:20px var(--gut);font:400 .62rem/1.6 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.trust-in li{padding-inline:clamp(18px,4vw,60px);text-align:center}
.trust-in li+li{border-inline-start:1px solid var(--line-gold)}
html[dir=rtl] .trust-in{font-size:.86rem;letter-spacing:0}
@media (max-width:640px){.trust-in{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 2px;font-size:.6rem;line-height:1.5;letter-spacing:.1em}.trust-in li{padding-inline:6px}html[dir=rtl] .trust-in{font-size:.8rem}}

/* home: one door per scent family */
.fam-home,.houses-home{padding-bottom:0}
.fam-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.fam-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:clamp(118px,11vw,160px);padding:18px 20px;color:var(--hink);background:linear-gradient(160deg,var(--h1),var(--h3));overflow:hidden;isolation:isolate}
.fam-tile::before{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--hacc) 35%,transparent);pointer-events:none;transition:inset .6s var(--ease)}
.fam-tile .fam-gl{position:absolute;inset-inline-end:18px;top:16px;width:30px;height:30px;margin:0}
.fam-n{font:500 clamp(1.25rem,1.8vw,1.6rem)/1.1 var(--serif)}
html[dir=rtl] .fam-n{font-weight:400;line-height:1.45}
.fam-c{font:400 .54rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--hacc)}
html[dir=rtl] .fam-c{font-size:.78rem;letter-spacing:0}
@media (hover:hover){.fam-tile:hover::before{inset:12px}}
@media (max-width:1100px){.fam-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.fam-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fam-tile{min-height:88px;padding:10px 10px 12px;gap:4px}.fam-tile::before{inset:5px}.fam-tile .fam-gl{width:18px;height:18px;top:12px;inset-inline-end:12px}.fam-n{font-size:1.05rem}html[dir=rtl] .fam-n{font-size:1rem}.fam-c{font-size:.5rem;letter-spacing:.12em}html[dir=rtl] .fam-c{font-size:.7rem}}

/* home: every house at a glance */
.ht-compact{--cols:6}
.ht-compact .ht{padding:14px 10px}
.ht-compact :is(.ht-origin,.ht-motto,.ht-count){display:none}
.ht-compact .ht-logo{max-width:62%;max-height:44%}
.ht-compact .ht-name{margin-top:10px;font-size:.52rem;letter-spacing:.22em}
@media (hover:hover){.ht-compact .ht:hover :is(.ht-logo,.ht-name){transform:none}}
@media (max-width:1100px){.ht-compact{--cols:4}}
@media (max-width:640px){.ht-compact{--cols:3;--gx:8px}.ht-compact .ht{padding:10px 6px}.ht-compact .ht-frame{inset:6px}.ht-compact .ht-name{font-size:.44rem;letter-spacing:.12em;margin-top:8px}}

/* home: how ordering works */
.how{text-align:center}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,64px);max-width:1100px;margin:0 auto}
.how-steps li{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:26px;border-top:1px solid var(--line-gold)}
.how-n{font:italic 400 2rem/1 var(--serif);color:var(--gold-ink)}
.how-t{font:500 1.35rem/1.2 var(--serif)}
html[dir=rtl] .how-t{font-weight:400;line-height:1.5}
.how-steps p{color:var(--taupe);max-width:24em}
.how-more{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,48px)}
.how-more span{color:var(--line-gold)}
@media (max-width:760px){
  .how-steps{grid-template-columns:1fr;gap:0}
  .how-steps li{display:grid;grid-template-columns:40px 1fr;align-items:baseline;gap:4px 14px;padding:18px 0;text-align:start}
  .how-n{grid-row:span 2;font-size:1.6rem}
}

/* filter panel */
.fsheet{position:fixed;inset-block:0;inset-inline-end:0;z-index:92;width:min(440px,100vw);display:flex;flex-direction:column;background:var(--ivory);border-inline-start:1px solid var(--line-gold);transform:translateX(var(--off,100%));transition:transform .5s var(--ease-drawer)}
html[dir=rtl] .fsheet{--off:-100%}
.fsheet.on{transform:none}
.fs-head{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;border-bottom:1px solid var(--line)}
.fs-t{font:500 1.5rem/1 var(--serif)}
html[dir=rtl] .fs-t{font-family:var(--serif);font-weight:400}
.fs-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 28px 20px}
.fg{padding:22px 0 14px;border-bottom:1px solid var(--line)}
.fg:last-child{border-bottom:0}
.fg-h{font:400 .6rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
html[dir=rtl] .fg-h{font-size:.85rem}
.fo{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0;cursor:pointer;font-size:.95rem}
.fo input{position:absolute;opacity:0;width:1px;height:1px}
.fo-box{flex:none;position:relative;width:14px;height:14px;border:1px solid var(--taupe);transition:border-color .25s}
.fo-box::after{content:"";position:absolute;inset:3px;background:var(--oxblood);transform:scale(0);transition:transform .25s var(--ease)}
.fo input[type=radio]+.fo-box{border-radius:50%}
.fo input[type=radio]+.fo-box::after{border-radius:50%}
.fo input:checked+.fo-box{border-color:var(--oxblood)}
.fo input:checked+.fo-box::after{transform:none}
.fo input:focus-visible+.fo-box{outline:1px solid var(--champagne);outline-offset:3px}
.fo-l{flex:1}
.fo-n{font-size:.75rem;color:var(--taupe)}
.fo.is-empty{opacity:.4}
.fs-foot{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:16px 28px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.fs-foot .btn,.fs-foot .btn-line{padding:0 14px}
.scrim{position:fixed;inset:0;z-index:85;background:rgba(36,23,18,.34);opacity:0;transition:opacity .4s var(--ease)}
.scrim.on{opacity:1}

/* ── perfume page ────────────────────────────────────────────────────────── */
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(28px,4.6vw,84px);max-width:var(--max);margin:0 auto;padding:clamp(18px,2.6vw,36px) var(--gut) 0;align-items:start}
.pdp-gal{position:relative;min-width:0}
.gal-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gal-shot{grid-column:span 2;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.is-multi .gal-shot:not(:first-child){grid-column:span 1}
.is-multi .gal-shot:last-child:nth-child(even){grid-column:span 2}
.gal-shot.free{align-self:start}
@media (min-width:901px){.is-multi .gal-shot.lite:last-child:nth-child(even){grid-column:1 / -1;width:calc(50% - 6px);justify-self:center}}
.gal-zoom{display:block;width:100%;height:100%;cursor:zoom-in}
.gal-zoom img{width:100%;height:100%;object-fit:contain}
.gal-count,.gal-bar{display:none}
.pdp-info{position:sticky;top:calc(var(--hd) + 26px);padding:4px 0 40px;min-width:0}
.pdp-info .crumbs{margin-bottom:28px}
.pdp-house{display:inline-block;font:400 .7rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);border-bottom:1px solid transparent;padding-bottom:3px}
.pdp-house:hover{color:var(--oxblood);border-color:var(--line-gold)}
.pdp-name{font:500 clamp(2.4rem,4.2vw,3.7rem)/1.04 var(--serif);color:var(--ink);margin:14px 0 10px}
.pdp-sub{color:var(--taupe);font-size:.95rem}
.pdp-price{font:500 1.9rem/1 var(--serif);color:var(--oxblood);margin:24px 0 26px}
.pdp-lab{font:400 .6rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
html[dir=rtl] .pdp-lab{font-size:.85rem}
.pdp-opts{margin-bottom:22px}
.pdp-optrow{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:96px;padding:14px 16px;border:1px solid var(--line-gold);cursor:pointer;transition:border-color .3s,color .3s}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt-l{font:500 .95rem/1 var(--sans)}
.opt-p{font:500 1rem/1 var(--serif);color:var(--taupe)}
.opt:has(input:checked){border-color:var(--oxblood);color:var(--oxblood);box-shadow:inset 0 0 0 1px var(--oxblood)}
.opt:has(input:checked) .opt-p{color:var(--oxblood)}
.opt:has(input:focus-visible){outline:1px solid var(--champagne);outline-offset:3px}
.pdp-buy{display:flex;gap:10px}
.qty{display:flex;align-items:center;border:1px solid var(--line-gold);flex:none}
.qty button{width:42px;height:52px;font-size:1.1rem;color:var(--ink)}
.qty button:hover{color:var(--oxblood)}
.qty output{min-width:26px;text-align:center;font:500 1rem/1 var(--sans)}
.pdp-add{flex:1}
.pdp-wa{display:inline-block;margin-top:18px;font-size:.86rem;color:var(--ink);border-bottom:1px solid var(--line-gold);padding-bottom:2px}
.pdp-wa:hover{color:var(--oxblood);border-color:var(--oxblood)}
.pdp-assure{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.pdp-assure li{position:relative;padding-inline-start:14px;font:400 .62rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.pdp-assure li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border:1px solid var(--champagne);transform:rotate(45deg)}
html[dir=rtl] .pdp-assure li{font-size:.84rem}
.pdp-note{margin-top:30px;font:italic 400 1.35rem/1.45 var(--serif);color:var(--ink)}
.pdp-mood{margin-top:10px;font:400 .62rem/1.6 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
html[dir=rtl] .pdp-mood{font-size:.9rem;margin-top:28px}
.pdp-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:26px 0 8px;border-top:1px solid var(--line)}
.pdp-spec div{padding:14px 0;border-bottom:1px solid var(--line)}
.pdp-spec dt{font:400 .56rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);margin-bottom:8px}
html[dir=rtl] .pdp-spec dt{font-size:.8rem}
.pdp-spec dd{font:500 1.12rem/1.2 var(--serif)}
html[dir=rtl] .pdp-spec dd{font-family:var(--sans);font-size:1rem}
.pdp-spec a{border-bottom:1px solid var(--line-gold)}
.pdp-spec a:hover{color:var(--oxblood)}
.acc{margin-top:20px}
.acc-i{border-bottom:1px solid var(--line)}
.acc-i summary{position:relative;padding:18px 26px 18px 0;font:400 .66rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase}
html[dir=rtl] .acc-i summary{padding:18px 0 18px 26px;font-size:.92rem}
.acc-i summary::before,.acc-i summary::after{content:"";position:absolute;inset-inline-end:4px;top:50%;width:11px;height:1px;background:var(--ink);transition:transform .35s var(--ease)}
.acc-i summary::after{transform:rotate(90deg)}
.acc-i[open] summary::after{transform:rotate(0)}
.acc-b{padding:0 0 22px;color:var(--ink);font-size:.95rem}
.acc-b p+p{margin-top:10px}
.acc-motto{font:italic 400 1.2rem/1.4 var(--serif)}
html[dir=rtl] .acc-motto{font-style:normal;font-family:var(--serif)}
.acc-eye{font:400 .6rem/1 var(--sans);letter-spacing:.3em;color:var(--gold-ink)}
.acc-small{font-size:.84rem;color:var(--taupe)}
.pdp-bar{position:fixed;inset-inline:0;bottom:0;z-index:30;display:none;align-items:center;gap:12px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line-gold);transform:translateY(110%);transition:transform .45s var(--ease)}
.pdp-bar.on{transform:none}
.pdp-bar-n{flex:1;min-width:0;font:500 1.05rem/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-bar-n small{display:block;font:400 .52rem/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.pdp-bar-p{font:500 1.15rem/1 var(--serif);color:var(--oxblood)}
.pdp-bar .btn{min-height:46px;padding:0 20px}
@media (max-width:900px){
  .pdp-grid{grid-template-columns:1fr;padding:0;gap:0}
  .pdp-gal{margin:0}
  .gal-track{align-items:center;display:grid;grid-auto-flow:column;grid-auto-columns:100%;grid-template-columns:none;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .gal-track::-webkit-scrollbar{display:none}
  .gal-shot,.is-multi .gal-shot:not(:first-child),.is-multi .gal-shot:last-child:nth-child(even){grid-column:auto;scroll-snap-align:start}
  .gal-count{display:block;position:absolute;top:16px;right:var(--gut);font:400 .62rem/1 var(--sans);letter-spacing:.2em;color:var(--ink);background:rgba(251,248,241,.82);padding:7px 10px}
  html[dir=rtl] .gal-count{right:auto;left:var(--gut)}
  .gal-bar{display:block;position:absolute;inset-inline:var(--gut);bottom:16px;height:1px;background:rgba(255,255,255,.5)}
  .gal-bar i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--ink);transition:transform .35s var(--ease);transform-origin:var(--o,left)}
  .pdp-info{position:static;padding:22px var(--gut) 10px}
  .pdp-info .crumbs{margin-bottom:18px}
  .pdp-bar{display:flex}
}
/* zoom viewer */
.zoom{position:fixed;inset:0;z-index:110;background:var(--paper);opacity:0;transition:opacity .4s var(--ease)}
.zoom.on{opacity:1}
.zoom-x{position:absolute;top:18px;inset-inline-end:var(--gut);z-index:2;background:var(--paper)}
.zoom-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.zoom-track::-webkit-scrollbar{display:none}
.zoom-shot{scroll-snap-align:start;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pinch-zoom pan-x}
.zoom-shot img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;transition:transform .5s var(--ease)}
.zoom-shot img.big{cursor:zoom-out}

/* ── story / care / 404 ──────────────────────────────────────────────────── */
.story-page{padding-top:0}
.care{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,80px);padding-top:10px}
.care-block{border-top:1px solid var(--line-gold);padding-top:26px}
.care-h{font:500 clamp(1.6rem,2.6vw,2.1rem)/1.15 var(--serif);margin-bottom:16px}
.care-block p{margin-bottom:12px}
.care-block p a{border-bottom:1px solid var(--line-gold)}
.care-steps li{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding:12px 0}
.care-n{grid-row:span 2;font:italic 400 1.4rem/1.2 var(--serif);color:var(--gold-ink)}
.care-steps h3{font:500 1.2rem/1.2 var(--serif)}
html[dir=rtl] .care-steps h3{font-family:var(--serif);font-weight:400}
.care-contact{display:flex;flex-direction:column;margin-top:14px}
.care-contact a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.care-contact a:hover{color:var(--oxblood)}
.care-contact small{color:var(--taupe)}
@media (max-width:800px){.care{grid-template-columns:1fr}}
.nf{max-width:760px;margin:0 auto;padding:clamp(60px,10vw,140px) var(--gut) 20px;text-align:center}
.nf-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.nf-ar{margin-top:clamp(40px,6vw,64px);padding-top:28px;border-top:1px solid var(--line-gold);color:var(--taupe);font-family:var(--sans)}
.nf-ar-t{font:400 1.6rem/1.5 var(--serif);color:var(--ink);margin-bottom:6px}

/* ── footer ──────────────────────────────────────────────────────────────── */
.ft{margin-top:clamp(70px,9vw,130px);background:linear-gradient(180deg,#2a1813,var(--espresso) 40%,#1b110d);color:#d8cab2}
.p-home .ft,.p-story .ft{margin-top:0}
.ft-wall{max-width:var(--max);margin:0 auto;padding:clamp(46px,6vw,80px) var(--gut) clamp(34px,4vw,56px);text-align:center;border-bottom:1px solid rgba(198,161,91,.18)}
.ft-eye{font:400 .6rem/1 var(--sans);letter-spacing:.4em;text-transform:uppercase;color:var(--champagne);margin-bottom:30px}
html[dir=rtl] .ft-eye{font-size:.86rem}
.ft-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 44px}
.ft-logo img{height:46px;width:auto;max-width:120px;object-fit:contain;opacity:.62;transition:opacity .4s}
.ft-logo:hover img{opacity:1}
.ft-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(30px,5vw,80px);max-width:var(--max);margin:0 auto;padding:clamp(40px,5vw,70px) var(--gut)}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start}
.ft-nm{font:500 1.9rem/1 var(--serif);letter-spacing:.34em;color:#f3e9d6}
html[dir=rtl] .ft-nm{font-family:var(--mark);font-size:2.4rem;font-weight:400}
.ft-sub{font-size:.48rem;letter-spacing:.32em;color:var(--champagne);margin-top:8px}
html[dir=rtl] .ft-sub{font-family:var(--mark-line);font-size:.85rem}
.ft-msg{margin-top:22px;font:italic 400 1.15rem/1.5 var(--serif);color:#cbbca3;max-width:18em}
html[dir=rtl] .ft-msg{font-style:normal;font-family:var(--serif)}
.ft-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(20px,3vw,48px)}
.ft-h{font:400 .58rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--champagne);margin-bottom:16px}
html[dir=rtl] .ft-h{font-size:.84rem}
.ft-h2{margin-top:28px}
.ft-col a{display:inline-block;padding:4px 0;font-size:.9rem;color:#d8cab2;transition:color .3s}
.ft-col a:hover{color:#fff}
.ft-houses{columns:2;column-gap:20px}
.ft-c{display:flex!important;flex-direction:column;padding:6px 0!important}
.ft-c small{font-size:.78rem;color:#a8987f}
.ft-lang{display:flex;gap:18px}
.ft-lang a[aria-current]{color:var(--champagne)}
.ft-lang a[lang=ar]{font-family:var(--sans)}
.ft-fine{text-align:center;padding:22px var(--gut) calc(26px + env(safe-area-inset-bottom));font-size:.72rem;color:#8f806a;border-top:1px solid rgba(198,161,91,.14)}
@media (max-width:900px){.ft-in{grid-template-columns:1fr}.ft-cols{grid-template-columns:1fr 1fr}.ft-cols .ft-col:first-child{grid-column:1/-1}.ft-houses{columns:3}}
@media (max-width:560px){.ft-houses{columns:2}.ft-logos{gap:20px 30px}.ft-logo img{height:38px;max-width:96px}.p-pdp .ft{padding-bottom:70px}}

/* ── bag drawer & checkout ───────────────────────────────────────────────── */
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:100;width:min(470px,100vw);display:flex;flex-direction:column;background:var(--ivory);border-inline-start:1px solid var(--line-gold);transform:translateX(var(--off,100%));transition:transform .5s var(--ease-drawer),opacity .3s var(--ease);visibility:hidden}
.drawer.quiet{transition:none!important}
html[dir=rtl] .drawer{--off:-100%}
.drawer.on{transform:none;visibility:visible}
.drawer:not(.on){transition:transform .5s var(--ease-drawer),visibility 0s linear .5s}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--line)}
.dhead h2{font:500 1.7rem/1 var(--serif)}
html[dir=rtl] .dhead h2{font-family:var(--serif);font-weight:400;font-size:1.6rem}
.dsteps{display:flex;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--line);font:400 .56rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
html[dir=rtl] .dsteps{font-size:.8rem}
.dsteps li{display:flex;align-items:center;gap:8px}
.dsteps li::before{content:"";width:7px;height:7px;border:1px solid var(--line-gold);transform:rotate(45deg)}
.dsteps li.on{color:var(--oxblood)}
.dsteps li.on::before{background:var(--oxblood);border-color:var(--oxblood)}
.dsteps li.is-past::before{background:var(--champagne);border-color:var(--champagne)}
.ditems{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 28px 20px}
.dempty{padding:60px 0;text-align:center;font:italic 400 1.3rem/1.5 var(--serif);color:var(--taupe)}
.dempty .btn-line{margin-top:24px;font-style:normal}
.ditem{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line);animation:up .5s var(--ease) both}
.ditem img,.ditem .di-ph{width:84px;aspect-ratio:4/5;object-fit:cover;background:var(--tile)}
.di-brand{font:400 .56rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.di-name{font:500 1.2rem/1.2 var(--serif);margin-top:3px}
.di-opt{font-size:.8rem;color:var(--taupe)}
.di-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.di-qty{display:flex;align-items:center;border:1px solid var(--line-gold)}
.di-qty button{width:32px;height:32px}
.di-qty span{min-width:22px;text-align:center;font-size:.9rem}
.di-price{font:500 1.1rem/1 var(--serif);color:var(--oxblood)}
.di-remove{margin-top:8px;font:400 .58rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);border-bottom:1px solid var(--line-gold);padding-bottom:3px}
html[dir=rtl] .di-remove{font-size:.8rem}
.dfoot{padding:18px 28px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.dtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.dtotal .lbl{font:400 .64rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase}
html[dir=rtl] .dtotal .lbl{font-size:.92rem}
.dtotal .amt{font:500 1.6rem/1 var(--serif);color:var(--oxblood)}
.dfoot .btn{width:100%}
.dnote{margin-top:12px;font-size:.8rem;color:var(--taupe);text-align:center}
.disc-note{display:flex;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line-gold);font-size:.84rem;background:var(--ivory)}
.disc-note b{color:var(--champagne);font-weight:400}
.ckback{display:inline-flex;align-items:center;gap:8px;margin:12px 0 4px;font:400 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
html[dir=rtl] .ckback{font-size:.86rem}
.ckrecap{font:italic 400 1.1rem/1.4 var(--serif);color:var(--taupe);margin:6px 0 16px}
.ckfield{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.ckfield label{font:400 .6rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
html[dir=rtl] .ckfield label{font-size:.86rem}
.ckin{width:100%;height:46px;border:0;border-bottom:1px solid var(--line-gold);background:transparent;padding:0 2px;font-size:1rem;border-radius:0;outline:0;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.ckin:focus{border-bottom-color:var(--oxblood)}
select.ckin{background-image:linear-gradient(45deg,transparent 50%,var(--taupe) 50%),linear-gradient(135deg,var(--taupe) 50%,transparent 50%);background-position:calc(100% - 12px) 21px,calc(100% - 7px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:26px}
html[dir=rtl] select.ckin{background-position:12px 21px,17px 21px}
.ckta{height:84px;padding:10px 2px;resize:vertical;line-height:1.5}
.ckphone{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px}
.ckfield.bad label{color:#9b2a2a}
.ckin.bad{border-bottom-color:#9b2a2a}
.ckerr{margin-top:16px;color:#9b2a2a;font-size:.88rem;display:none}
.ckerr.show{display:block}
/* the spam trap sits inside the page (not 10,000px to one side, which let the Arabic checkout slide sideways) */
.ck-hp{position:absolute!important;inset-inline-start:0!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important}
.bagnote{margin-top:22px;font-size:.8rem;color:var(--taupe);line-height:1.6}
.btn.is-busy{opacity:.75;pointer-events:none}
.odone{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px;text-align:center;background:radial-gradient(120% 120% at 50% 40%,var(--paper),#f2ead9);opacity:0;transition:opacity .55s var(--ease)}
.odone.on{opacity:1}
.od-seal svg{width:64px;height:64px;fill:none;stroke:var(--champagne);stroke-width:1}
.od-seal circle{stroke-dasharray:82;stroke-dashoffset:82;animation:draw .6s var(--ease) .1s forwards}
.od-seal path{stroke:var(--oxblood);stroke-dasharray:17;stroke-dashoffset:17;animation:draw .4s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.od-t{font:500 clamp(2rem,5.4vw,2.8rem)/1.1 var(--serif)}
html[dir=rtl] .od-t{font-family:var(--serif);font-weight:400}
.od-rule{width:74px;height:1px;background:linear-gradient(90deg,transparent,var(--champagne),transparent)}
.od-b{max-width:30em;color:var(--taupe)}
.od-ref{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.od-ref span:first-child{font:400 .58rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--taupe)}
.od-ref span:last-child{font:500 1.5rem/1 var(--serif);letter-spacing:.12em;color:var(--oxblood)}

/* ── cursor (fine pointers) ──────────────────────────────────────────────── */
.cur{display:none}
@media (hover:hover) and (pointer:fine){
  .js .cur{display:block;position:fixed;inset:0;z-index:300;pointer-events:none}
  .cur-r,.cur-d{position:fixed;top:0;left:0;border-radius:50%;opacity:0;transition:opacity .3s}
  .cur.on .cur-r,.cur.on .cur-d{opacity:1}
  .cur-r{width:22px;height:22px;margin:-11px 0 0 -11px}
  .cur-r::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(198,161,91,.75);transition:transform .35s var(--ease),border-color .35s,background-color .35s}
  .cur.hov .cur-r::before{transform:scale(1.36);border-color:var(--oxblood);background:rgba(198,161,91,.09)}
  .cur-d{width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--oxblood)}
}

/* ── reveal ──────────────────────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(*){animation:none}
  .js .rv{opacity:1;transform:none}
}
body.lock{overflow:hidden}
/* a page whose fonts are slow to arrive keeps its words hidden a moment longer (early.js) */
html.fw body *{-webkit-text-fill-color:transparent!important;text-shadow:none!important}

/* ══ the opening curtain: once per visit (early.js adds .intro-on), the letters rise, the subtitle follows;
   then the mark travels to its place in the header while the panels part (site.js) ══ */
.intro{display:none}
html.intro-on:not(.intro-done) .intro{display:block;position:fixed;inset:0;z-index:400;cursor:pointer}
.intro-pan{position:absolute;inset-block:0;width:50.5%;background:linear-gradient(180deg,var(--paper),var(--ivory));transition:transform 1.1s var(--ease-in-out) .18s}
.intro-a{inset-inline-start:0;border-inline-end:1px solid rgba(198,161,91,.28)}
.intro-b{inset-inline-end:0}
.intro-out .intro-a{transform:translateX(-101%)}
.intro-out .intro-b{transform:translateX(101%)}
html[dir=rtl].intro-out .intro-a{transform:translateX(101%)}
html[dir=rtl].intro-out .intro-b{transform:translateX(-101%)}
.intro-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .45s var(--ease)}
.intro-fade .intro-mark{opacity:0}
/* the header's own mark waits for the travelling one */
html.intro-on:not(.intro-done) .hd-brand .nm,html.intro-on:not(.intro-done) .hd-brand .sub{opacity:0}
.intro-word{display:flex;font:500 clamp(2.6rem,7vw,4.4rem)/1 var(--serif);letter-spacing:.34em;padding-inline-start:.34em;color:var(--oxblood);overflow:hidden;padding-block:.08em}
.intro-word b{display:inline-block;font-weight:500;transform:translateY(110%);animation:intro-rise .9s var(--ease) forwards;animation-delay:calc(.15s + var(--i) * 70ms)}
.intro-ar{font-family:var(--mark);font-size:clamp(3.4rem,9vw,5.6rem);letter-spacing:0;padding:0;line-height:1.25;clip-path:inset(0 0 0 100%);animation:intro-wipe 1.1s var(--ease-in-out) .2s forwards}
.intro-sub{font:300 .62rem/1 var(--sans);letter-spacing:.3em;padding-inline-start:.3em;white-space:nowrap;text-transform:uppercase;color:var(--gold-ink);opacity:0;animation:fade .8s var(--ease) .95s forwards}
html[dir=rtl] .intro-sub{font-family:var(--mark-line);font-size:1.1rem;margin-top:-.55em}
@keyframes intro-rise{to{transform:none}}
@keyframes intro-wipe{to{clip-path:inset(0 0 0 0)}}
/* the page beneath waits for the curtain */
html.intro-on{--intro:2.1s}
.hero-eye,.hero-h span,.hero-sub,.hero-cta,.hero-art,.band-logo{animation-delay:calc(var(--intro,0s) + var(--d0,0s))!important}
.hero-eye{--d0:.15s}.hero-h .l1{--d0:.3s}.hero-h .l2{--d0:.48s}.hero-sub{--d0:.66s}.hero-cta{--d0:.82s}.hero-art{--d0:.2s}.band-logo{--d0:.1s}

/* page heads and bands arrive in order */
.band-in>*:not(.crumbs),.phead>*:not(.crumbs){animation:up 1s var(--ease) both;animation-delay:calc(var(--intro,0s) + var(--k,0) * 90ms + 80ms)}
.band-in>*:nth-child(2),.phead>*:nth-child(2){--k:1}.band-in>*:nth-child(3),.phead>*:nth-child(3){--k:2}.band-in>*:nth-child(4),.phead>*:nth-child(4){--k:3}
.band-in>*:nth-child(5),.phead>*:nth-child(5){--k:4}.band-in>*:nth-child(6),.phead>*:nth-child(6){--k:5}.band-in>*:nth-child(n+7),.phead>*:nth-child(n+7){--k:6}
.band-logo{animation:fade 1.2s var(--ease) both!important}
.pdp-info>*{animation:up .9s var(--ease) both;animation-delay:calc(var(--intro,0s) + var(--k,0) * 60ms + 60ms)}
.pdp-info>*:nth-child(2){--k:1}.pdp-info>*:nth-child(3){--k:2}.pdp-info>*:nth-child(4){--k:3}.pdp-info>*:nth-child(5){--k:4}.pdp-info>*:nth-child(n+6){--k:5}
.gal-shot:first-child img{animation:settle 1.4s var(--ease) both;animation-delay:var(--intro,0s)}
@keyframes settle{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}

/* scroll reveals: cards and images settle, words rise */
.js .rv-card{transform:translateY(26px)}
.js .rv-img{opacity:0;transform:scale(1.03);transition:opacity 1.2s var(--ease),transform 1.6s var(--ease)}
.js .rv-img.in{opacity:1;transform:none}

/* ══ the add-to-bag ceremony ══ */
.sweep{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.sweep::before{content:"";position:absolute;inset-block:0;inset-inline-start:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,248,232,.5),transparent);transform:skewX(-14deg);animation:sweep 1s var(--ease-in-out) forwards}
html[dir=rtl] .sweep::before{animation-name:sweep-rtl}
@keyframes sweep{to{transform:translateX(420%) skewX(-14deg)}}
@keyframes sweep-rtl{to{transform:translateX(-420%) skewX(-14deg)}}
/* the gold star that carries the perfume to the bag: a bright core in a soft glow, four fine rays */
.mote{position:fixed;z-index:160;width:34px;height:34px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fffaf0 0,#f5dfa5 14%,rgba(232,200,130,.6) 26%,rgba(205,170,100,.22) 42%,rgba(205,170,100,0) 62%)}
.mote::before,.mote::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:150%;background:linear-gradient(180deg,rgba(255,246,221,0),rgba(243,220,160,.9) 38%,#fff8e6 50%,rgba(243,220,160,.9) 62%,rgba(255,246,221,0));transform:translate(-50%,-50%)}
.mote::after{transform:translate(-50%,-50%) rotate(90deg)}
.hd-bag::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--champagne);opacity:0;transform:scale(.6);pointer-events:none}
.hd-bag.receive::after{animation:halo 1.2s var(--ease) forwards}
.hd-bag.receive svg{animation:receive .7s var(--ease)}
.hd-bag.receive .hd-count{animation:roll .6s var(--ease)}
@keyframes halo{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.9)}}
@keyframes receive{0%{transform:none}35%{transform:scale(1.12)}100%{transform:none}}
@keyframes roll{0%{transform:translateY(60%);opacity:0}100%{transform:none;opacity:1}}

.addnote{position:fixed;top:calc(var(--hd) + 14px);inset-inline-end:clamp(14px,2.4vw,30px);z-index:70;width:min(380px,calc(100vw - 28px));display:grid;grid-template-columns:60px minmax(0,1fr);gap:4px 16px;padding:16px 18px 14px;background:var(--paper);border:1px solid var(--line-gold);opacity:0;transform:translateY(-10px);transition:opacity .4s ease,transform .4s ease}
.addnote.on{opacity:1;transform:none}
.addnote::before{content:"";position:absolute;inset:4px;border:1px solid rgba(198,161,91,.22);pointer-events:none}
.addnote::after{content:"";position:absolute;top:-1px;inset-inline-start:14px;height:1px;width:0;background:linear-gradient(90deg,var(--champagne),transparent);transition:width .9s var(--ease) .15s}
html[dir=rtl] .addnote::after{background:linear-gradient(-90deg,var(--champagne),transparent)}
.addnote.on::after{width:60%}
.an-img{grid-row:span 2;width:60px;height:75px;object-fit:cover;background:var(--tile)}
.an-b{font:400 .56rem/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);padding-inline-end:24px}
html[dir=rtl] .an-b{font-size:.78rem}
.an-n{font:500 1.15rem/1.2 var(--serif);color:var(--ink)}
.an-o{display:block;margin-top:3px;font:400 .78rem/1.3 var(--sans);color:var(--taupe)}
.an-s{display:flex;align-items:center;gap:7px;margin-top:4px;font:italic 400 .98rem/1.3 var(--serif);color:var(--gold-ink)}
html[dir=rtl] .an-s{font-style:normal;font-family:var(--sans);font-size:.86rem}
.seal{width:15px;height:15px;flex:none;fill:none}
.seal circle{stroke:var(--champagne);stroke-width:1.2;stroke-dasharray:38;stroke-dashoffset:38}
.seal path{stroke:var(--gold-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14}
.addnote.on .seal circle{animation:draw .7s var(--ease) .25s forwards}
.addnote.on .seal path{animation:draw .5s var(--ease) .6s forwards}
.an-acts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.an-a{min-height:42px;padding:0 10px;font:400 .6rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line-gold);color:var(--ink);transition:background-color .3s,border-color .3s,color .3s}
.an-a:hover{border-color:var(--oxblood);color:var(--oxblood)}
.an-go{background:var(--oxblood);border-color:var(--oxblood);color:var(--ivory)}
.an-go:hover{background:var(--oxblood2);color:var(--ivory)}
html[dir=rtl] .an-a{font-size:.84rem}
.an-x{position:absolute;top:6px;inset-inline-end:6px;width:32px;height:32px;font-size:1.15rem;line-height:1;color:var(--taupe)}
.an-x:hover{color:var(--oxblood)}
@media (max-width:640px){.addnote{inset-inline:12px;width:auto;top:calc(var(--hd) + 10px)}}

/* ══ the full-screen checkout ══ */
.ck{position:fixed;inset:0;z-index:120;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(120% 90% at 50% 0%,var(--paper),var(--ivory) 60%,#f1e9da);opacity:0;transition:opacity .3s var(--ease)}
.ck.on{opacity:1}
/* checkout: the bag becomes the checkout where it stands. On a wide screen a full-width ivory
   surface, its gold edge on the bag's edge, grows out of the bag across the screen (transform
   only) while the bag's contents fade and the checkout's rise in their place; on a phone, where
   the bag fills the screen, only the contents change. Nothing slides away. */
.ck-bloom{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ck-bloom i{position:absolute;inset-block:0;inset-inline-end:0;width:100%;background:radial-gradient(120% 90% at 50% 0%,var(--paper),var(--ivory) 60%,#f1e9da);border-inline-start:1px solid var(--line-gold);will-change:transform}
.drawer.lift{z-index:130}
.drawer.fade{opacity:0;transition:opacity .24s var(--ease) .06s,transform .5s var(--ease-drawer)}
/* back to the bag: the page's contents dissolve while the surface retracts */
.ck.ck-out>*:not(.ck-bloom){opacity:0;transition:opacity .24s var(--ease)}
.ck.bloom{opacity:1;transition:none;background:transparent}
.ck.bloom .ck-bloom{display:block}
.ck.bloom-hide>*:not(.ck-bloom){visibility:hidden}
.ck>*:not(.ck-bloom){position:relative;z-index:1}
.ck.on .ck-top,.ck.on .ck-steps{animation:fade .4s var(--ease) backwards}
.ck-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1180px;margin:0 auto;padding:30px clamp(26px,5vw,60px) 0}
/* "back to the bag" sits on the bag's side (the bag opens at the end of the line: right in English,
   left in Arabic) and its arrow points that way; Close takes the other side */
.ck-back{grid-column:3;grid-row:1;justify-self:end}
.ck-x{grid-column:1;grid-row:1;justify-self:start}
.ck-brand{grid-column:2;grid-row:1}
.ck-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.ck-back:hover,.ck-x:hover{color:var(--oxblood)}
.ck-x{min-height:44px;font:400 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--line-gold)}
html[dir=rtl] .ck-back,html[dir=rtl] .ck-x{font-size:.9rem}
.ck-brand{display:flex;flex-direction:column;align-items:center;line-height:1}
.ck-brand .nm{font:500 1.6rem/1 var(--serif);letter-spacing:.34em;padding-inline-start:.34em}
.ck-brand .sub{font-size:.44rem;letter-spacing:.3em;color:var(--gold-ink);margin-top:7px}
html[dir=rtl] .ck-brand .nm{font-family:var(--mark);font-size:2rem;letter-spacing:0;padding:0}
html[dir=rtl] .ck-brand .sub{font-family:var(--mark-line);font-size:.8rem;margin-top:2px}
.ck-steps{display:flex;justify-content:center;gap:clamp(18px,4vw,48px);margin:26px auto 0;padding:0 20px;font:400 .58rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--taupe)}
html[dir=rtl] .ck-steps{font-size:.82rem}
.ck-steps li{display:flex;align-items:center;gap:9px}
.ck-steps li::before{content:"";width:7px;height:7px;border:1px solid var(--line-gold);transform:rotate(45deg)}
.ck-steps li.on{color:var(--oxblood)}
.ck-steps li.on::before{background:var(--oxblood);border-color:var(--oxblood)}
.ck-steps li.is-past::before{background:var(--champagne);border-color:var(--champagne)}
.ck-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);max-width:1180px;margin:0 auto;padding:clamp(28px,4vw,48px) clamp(26px,5vw,60px) 70px;align-items:start}
.ck-form{grid-column:1;grid-row:1}.ck-sum{grid-column:2;grid-row:1}
/* "backwards", not "both": a lingering transform would trap the phone's picker sheet inside the form */
.ck.on .ck-form,.ck.on .ck-sum{animation:up .45s var(--ease) backwards}
.ck.on .ck-sum{animation-delay:.06s}
/* confirming: the details dissolve where they stand and the confirmation takes their place */
.ck-body.out{opacity:0;transform:translateY(-10px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.ck-t{font:500 clamp(2rem,3.4vw,2.6rem)/1.1 var(--serif)}
html[dir=rtl] .ck-t{font-weight:400;line-height:1.4}
.ck-lead{margin:10px 0 6px;color:var(--taupe);font-size:.95rem}
.ck .ckfield{margin-top:20px}
.ck .ckfield label,.ck .ckfield .lbl{font:400 .6rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
html[dir=rtl] .ck .ckfield label,html[dir=rtl] .ck .ckfield .lbl{font-size:.86rem}
.ck .ckin{height:50px;font-size:1rem}
.ck .ckta{height:96px;resize:none}
.ck .ckphone{grid-template-columns:118px minmax(0,1fr)}
/* the code and the number always share one row, whatever else the row holds (the dimming layer a
   touch screen adds beside the picker is laid over the page, never in the row) */
.ckphone>.pk{grid-column:1;grid-row:1}.ckphone>.ckin{grid-column:2;grid-row:1}
.ckfield.bad .lbl,.ckfield.bad label{color:#9b2a2a}
.ckin[aria-invalid=true]{border-bottom-color:#9b2a2a}
.ckcheck{position:relative;display:flex;align-items:flex-start;gap:14px;margin-top:20px;cursor:pointer;font-size:.92rem;line-height:1.55}
.ckcheck input{position:absolute;opacity:0;width:20px;height:20px;margin:0;inset-inline-start:0;top:1px;cursor:pointer}
.ckbox{flex:none;position:relative;width:18px;height:18px;margin-top:2px;border:1px solid var(--taupe);transition:border-color .25s}
.ckbox::after{content:"";position:absolute;inset:3px;background:var(--oxblood);transform:scale(0);transition:transform .25s var(--ease)}
.ckcheck input:checked+.ckbox{border-color:var(--oxblood)}
.ckcheck input:checked+.ckbox::after{transform:none}
.ckcheck input:focus-visible+.ckbox{outline:2px solid var(--focus);outline-offset:3px}
.ckcheck.bad .ckbox{border-color:#9b2a2a}
.ckconsent a{border-bottom:1px solid var(--line-gold)}
.ckconsent a:hover{color:var(--oxblood);border-color:var(--oxblood)}
.ck-forget{margin:10px 0 0;padding:6px 0;font:400 .6rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);border-bottom:1px solid var(--line-gold)}
html[dir=rtl] .ck-forget{font-size:.84rem}
.ck .ckerr{margin-top:18px}
.ck-submit{width:100%;margin-top:22px;min-height:56px}
.ck-small{margin-top:12px;font-size:.82rem;color:var(--taupe);text-align:center}
.ck-sum{position:sticky;top:30px;padding:26px 28px;background:rgba(251,248,241,.86);border:1px solid var(--line-gold)}
.ck-sum::before{content:"";position:absolute;inset:5px;border:1px solid rgba(198,161,91,.18);pointer-events:none}
.ck-sumtog{display:none}
.ck-sum-t{font:500 1.5rem/1.1 var(--serif);margin-bottom:12px}
html[dir=rtl] .ck-sum-t{font-weight:400;line-height:1.4}
.ck-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ck-item img{width:64px;height:80px;object-fit:cover;background:var(--tile)}
.ck-in{font:500 1.1rem/1.2 var(--serif)}
.ck-sum .dtotal{margin:16px 0 10px}
.ck-line{font-size:.86rem;color:var(--taupe);margin-top:4px}
.ck-sum .bagnote{margin-top:14px}
.ck-done{max-width:640px;margin:0 auto;padding:clamp(40px,8vh,90px) 26px 80px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.ck-done.on>*{animation:up .45s var(--ease) both}
.ck-done.on>*:nth-child(2){animation-delay:.06s}.ck-done.on>*:nth-child(3){animation-delay:.1s}.ck-done.on>*:nth-child(4){animation-delay:.14s}.ck-done.on>*:nth-child(5){animation-delay:.18s}.ck-done.on>*:nth-child(6){animation-delay:.22s}
.ck-done .od-seal svg{width:68px;height:68px}
.ck-done .od-t:focus{outline:none}
@media (max-width:900px){
  .ck-top{padding-top:22px}
  .ck-brand .nm{font-size:1.25rem}
  .ck-body{grid-template-columns:1fr;gap:18px;padding-top:22px}
  .ck-form,.ck-sum{grid-column:1;grid-row:auto}
  .ck-sum{position:static;padding:0;background:none;border:0}
  .ck-sum::before{display:none}
  .ck-sumtog{display:flex;justify-content:space-between;width:100%;min-height:52px;padding:0 16px;align-items:center;border:1px solid var(--line-gold);background:var(--paper);font:400 .64rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
  html[dir=rtl] .ck-sumtog{font-size:.88rem}
  .ck-sumtot{font:500 1.05rem/1 var(--serif);letter-spacing:0;color:var(--oxblood);text-transform:none}
  .ck-sumbody{display:none;padding:6px 16px 16px;border:1px solid var(--line-gold);border-top:0;background:var(--paper)}
  .ck.sum-open .ck-sumbody{display:block}
}

/* ══ pickers ══ */
.pk{position:relative}
.pk-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:start;cursor:pointer}
.pk-btn.empty .pk-val{color:var(--taupe)}
.pk-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-chev{width:10px;height:6px;flex:none;fill:none;stroke:var(--taupe);stroke-width:1.3;transition:transform .25s var(--ease)}
.pk.open .pk-chev{transform:rotate(180deg)}
.pk-pop{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:20;width:max(100%,300px);max-width:calc(100vw - 40px);background:var(--paper);border:1px solid var(--line-gold);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top;transition:opacity .2s var(--ease),transform .2s var(--ease)}
/* the dialling-code list opens from the left edge of the (left-to-right) phone row, in Arabic too */
.ckphone .pk-pop{inset-inline-start:auto;left:0}
.pk-pop.on{opacity:1;transform:none}
.pk-head{display:none}
.pk-search{padding:10px 12px;border-bottom:1px solid var(--line)}
.pk-q{width:100%;height:42px;border:0;border-bottom:1px solid var(--line-gold);background:none;padding:0 2px;font-size:1rem;outline:0}
.pk-q:focus{border-bottom-color:var(--oxblood)}
.pk-list{max-height:280px;overflow-y:auto;overscroll-behavior:contain;outline:0}
.pk-list [role=option]{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);cursor:pointer;font-size:.95rem}
.pk-list [role=option]:first-child{border-top:0}
.pk-list [role=option] small{color:var(--taupe);font-size:.85rem}
.pk-list [role=option].on{background:var(--ivory);color:var(--oxblood)}
.pk-list [role=option][aria-selected=true]{color:var(--oxblood);font-weight:500}
.pk-list [role=option][aria-selected=true] span::before{content:"";display:inline-block;width:6px;height:6px;margin-inline-end:10px;vertical-align:.18em;background:var(--oxblood);transform:rotate(45deg)}
.pk-sep{height:0;border-top:1px solid var(--line-gold);margin:0}
.pk-none{padding:16px;color:var(--taupe);font-style:italic}
.pk-list:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* On a touch screen (phone or tablet) the list is a sheet at the foot of the screen, fitted above the
   keyboard by site.js: a gold edge, the field's name and Close in the header's type, the search beneath,
   the list scrolling inside; the page dims behind it. On a phone it spans the width; on a tablet it is a
   panel of its own width in the middle. A mouse or trackpad keeps the dropdown under the field. */
.pk.sheet .pk-pop{position:fixed;inset:auto 0 0 0;top:auto;width:auto;max-width:none;max-height:56vh;display:flex;flex-direction:column;border-inline:0;border-bottom:0;border-top:1px solid var(--line-gold);background:var(--paper);padding-bottom:env(safe-area-inset-bottom);transform:translateY(16px)}
.pk.sheet .pk-pop.on{transform:none}
.pk.sheet .pk-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 8px;font:400 .62rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
html[dir=rtl] .pk.sheet .pk-head{font-size:.86rem;letter-spacing:0}
.pk.sheet .pk-done{font:inherit;letter-spacing:inherit;color:var(--ink);padding:4px 0;border-bottom:1px solid var(--line-gold)}
.pk.sheet .pk-search{padding:4px 16px 10px}
.pk.sheet .pk-list{max-height:none;flex:1}
.pk.sheet .pk-list [role=option]{padding:11px 16px}
@media (min-width:641px){.pk.sheet .pk-pop{max-width:560px;margin-inline:auto;max-height:60vh;border:1px solid var(--line-gold);border-bottom:0}}
.pk-veil{position:fixed;inset:0;z-index:19;background:rgba(36,23,18,.3);opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.pk-veil.on{opacity:1;pointer-events:auto}

/* ══ policy pages, client care, footer ══ */
.phead-legal .phead-t{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.legal{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(30px,6vw,90px);max-width:1100px;padding-top:10px}
.lg-doc{max-width:42rem}
.lg-doc .lg-h{font:500 1.55rem/1.2 var(--serif);margin:34px 0 10px;text-wrap:balance}
html[dir=rtl] .lg-doc .lg-h{font-weight:400;line-height:1.5}
.lg-doc .lg-h:first-child{margin-top:0}
.lg-doc p{margin-bottom:12px;font-size:1.02rem;line-height:1.75;text-wrap:pretty}
html[dir=rtl] .lg-doc p{line-height:1.95}
.lg-side{position:sticky;top:calc(var(--hd) + 30px);display:flex;flex-direction:column;align-self:start;border-top:1px solid var(--line-gold)}
.lg-side-h{font:400 .6rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-ink);padding:16px 0 8px}
html[dir=rtl] .lg-side-h{font-size:.85rem}
.lg-side a{padding:11px 0;border-bottom:1px solid var(--line);font:500 1.08rem/1.3 var(--serif)}
.lg-side a:hover{color:var(--oxblood)}
.lg-biz,.care-biz{display:flex;flex-direction:column;gap:4px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line-gold);font-style:normal;font-size:.92rem;color:var(--taupe)}
.lg-biz b,.care-biz b{font-weight:500;color:var(--ink)}
.lg-biz a,.care-biz a{color:var(--ink);border-bottom:1px solid var(--line-gold)}
.care-links li a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font:500 1.1rem/1.3 var(--serif)}
.care-links li a:hover{color:var(--oxblood)}
@media (max-width:800px){.legal{grid-template-columns:1fr}.lg-side{position:static}}
.ft-fine{display:flex;flex-direction:column;align-items:center;gap:6px}
.ft-tm{max-width:44rem;font-size:.7rem;color:#9a8a72;line-height:1.5}
/* who made the site: one quiet line, its name on a gold hairline */
.ft-by{margin-top:4px;font-size:.7rem;color:#9a8a72;letter-spacing:.04em}
.ft-by a{color:#c6a15b;border-bottom:1px solid rgba(198,161,91,.35);padding-bottom:1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
@media (hover:hover){.ft-by a:hover{color:#e9d5a3;border-color:#c6a15b}}
@media (prefers-reduced-motion:reduce){
  html.intro-on:not(.intro-done) .intro{display:none}
  .js .rv-img{opacity:1;transform:none}
}

/* tap targets: small text controls are at least 32px tall (WCAG 2.5.8 asks 24) */
.chip{min-height:32px}
.di-remove{min-height:32px;display:inline-flex;align-items:center;padding:0;border-bottom-width:0;text-decoration:underline;text-decoration-color:var(--line-gold);text-underline-offset:4px}
.ft-col a{padding:6px 0}
.mega-all,.rail-all{display:inline-flex;align-items:center;min-height:32px}
.ann-x{min-width:32px;min-height:32px}
@media (max-width:380px){.hd-bag{margin-inline-end:0}.hd-menu{margin-inline-start:0}}
/* the browser's own round clear button inside search fields is not part of the house style */
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}

/* ══ Arabic letters keep their tails ══
   Safari paints a rising title into its own layer cut to the title's box; Amiri's deep tails
   (ع ج ي) reach below that box and were clipped until the rise ended. Room is added under each
   title and taken back with a negative margin, so nothing moves. */
html[dir=rtl] :is(.phead-t,.band-t,.band-motto,.hero-h span,.sec-t,.rail-t,.od-t,.ck-t){padding-bottom:.3em;margin-bottom:-.3em}
html[dir=rtl] .story-t{padding-bottom:.3em;margin-bottom:calc(26px - .3em)}
html[dir=rtl] .care-h{padding-bottom:.3em;margin-bottom:calc(16px - .3em)}
html[dir=rtl] .pdp-name{padding-bottom:.3em;margin-bottom:calc(10px - .3em)}
html[dir=rtl] .lg-doc .lg-h{padding-bottom:.3em;margin-bottom:calc(10px - .3em)}
html[dir=rtl] .promise-t{padding-bottom:.3em;margin-bottom:calc(clamp(36px,5vw,60px) - .3em)}
html[dir=rtl] :is(.phead-count,.band-count,.band-eye,.band-sub,.ck-steps,.pdp-assure){padding-bottom:.2em;margin-bottom:-.2em}
html[dir=rtl] :is(.phead-sub,.pdp-sub,.pdp-mood,.pr,.od-b){padding-bottom:.25em;margin-bottom:-.25em}
html[dir=rtl] .od-t{padding-top:.25em;margin-top:-.25em}
/* cards inside a sideways rail only fade in: rising, their foot was cut by the rail */
.js :is(.rail-track,.ht-row,.ed-grid) .rv-card{transform:none}
/* Arabic has no italic: these lines stay upright instead of a slanted imitation */
html[dir=rtl] :is(.mega-motto,.srch-none,.lst-empty,.pdp-note,.dempty,.ckrecap,.pk-none){font-style:normal}
/* the checkout's top line stays on one line on a phone */
@media (max-width:480px){.ck-top{column-gap:10px}.ck-back,.ck-x{white-space:nowrap;letter-spacing:.14em}.ck-back{gap:7px}.ck-brand .nm{font-size:1.1rem;letter-spacing:.26em;padding-inline-start:.26em}html[dir=rtl] .ck-brand .nm{font-size:1.7rem}}
/* the Arabic mark has no letter-spacing to balance, so no padding either: it sits on the centre line */
html[dir=rtl] .hd-brand .nm,html[dir=rtl] .hd-brand .sub,html[dir=rtl] .intro-sub{padding-inline-start:0}
/* the header mark without kerning matches the curtain's letter-by-letter mark exactly */
.hd-brand .nm{font-kerning:none}
@media (prefers-reduced-motion:reduce){.ck{transition-duration:.3s!important}}
/* a sideways row with only one to three cards sits in the middle; a row that scrolls still starts flush */
.rail-track,.ht-row{justify-content:safe center}
/* search results: the heading and houses line up with the centred cards */
.srch-body:has(.srch-grid) .srch-h{text-align:center}
.srch-houses{justify-content:center}

/* ══ going back ══
   "Back" sits before the trail on every inner page (site.js returns to where the visitor came
   from); on a phone's perfume page it floats over the photograph. The arrow is drawn and turns
   round for Arabic, where back points right. */
.back{display:inline-flex;align-items:center;gap:9px;min-height:32px;padding-inline-end:18px;border-inline-end:1px solid var(--line-gold);font:400 .6rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
html[dir=rtl] .back{font-size:.82rem}
.back-i{width:14px;height:10px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
html[dir=rtl] .back-i{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.back:hover{color:var(--oxblood)}.back:hover .back-i{transform:translateX(-3px)}html[dir=rtl] .back:hover .back-i{transform:scaleX(-1) translateX(-3px)}}
.band .back{color:var(--hink);border-color:color-mix(in srgb,var(--hink) 32%,transparent)}
.band .back:hover{color:var(--hacc)}
.gal-back{display:none}
@media (max-width:900px){
  .gal-back{display:inline-grid;place-items:center;position:absolute;top:12px;inset-inline-start:12px;z-index:3;width:42px;height:42px;background:rgba(251,248,241,.92);border:1px solid var(--line-gold);color:var(--ink)}
  .gal-back .back-i{width:16px;height:12px}
  .pdp-info .crumbs .back{display:none}
}
/* swiping back on a phone (site.js): the page follows the finger beneath the header, a soft shadow
   rides its edge, and once let go the browser's page transition carries it the rest of the way out
   while the previous page slides in beneath it, the way the phone's own back swipe looks.
   early.js sets --sw-x (where the page stood in the picture the browser took), --sw-to, --sw-from. */
.swipe-shade{position:fixed;top:0;bottom:0;left:0;z-index:49;width:36px;pointer-events:none;opacity:0;transform:translate3d(-36px,0,0);background:linear-gradient(90deg,rgba(36,23,18,0),rgba(36,23,18,.1))}
.swipe-shade.rtl{background:linear-gradient(270deg,rgba(36,23,18,0),rgba(36,23,18,.1))}
html.swiping{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){
  html.swv::view-transition-old(root){animation:sw-out .4s cubic-bezier(.3,.6,.3,1) both;z-index:1;mix-blend-mode:normal;clip-path:inset(0 var(--sw-clip-r,0px) 0 var(--sw-clip-l,0px))}
  html.swv::view-transition-new(root){animation:sw-in .4s cubic-bezier(.3,.6,.3,1) both;mix-blend-mode:normal}
  @keyframes sw-out{to{transform:translate3d(var(--sw-to,100vw),0,0)}}
  @keyframes sw-in{from{transform:translate3d(var(--sw-from,-30vw),0,0)}to{transform:none}}
}
/* in a swipe nothing travels on its own: the photo and its card stay with their pages */
html.swv .vt-from,html.swv .gal-shot:first-child{view-transition-name:none!important}

/* language on a phone: the other language, beside the menu */
.hd-lng{display:none;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 4px;font:400 .72rem/1 var(--sans);letter-spacing:.18em;color:var(--ink)}
.hd-lng:lang(ar){font-size:.92rem;letter-spacing:0}
@media (max-width:1023px){.hd-lng{display:inline-flex}}

/* ══ like an app: after the first page of a visit, a page appears at once (the browser's page
   transition cross-fades it); the staged entrance plays only on the first page ══ */
html.again :is(.hero-eye,.hero-h span,.hero-sub,.hero-cta,.hero-art,.band-logo,.band-in>*,.phead>*,.pdp-info>*,.gal-shot:first-child img){animation:fade .3s var(--ease) both!important;animation-delay:0s!important}
html.again.vt .gal-shot:first-child img{animation:none!important}
/* the browser's page cross-fade is the only fade when a page arrives through it */
html.again.vt :is(.hero-eye,.hero-h span,.hero-sub,.hero-cta,.hero-art,.band-logo,.band-in>*,.phead>*,.pdp-info>*){animation:none!important;opacity:1}
@media (max-width:374px){.hd-brand .nm{font-size:1.14rem;letter-spacing:.3em;padding-inline-start:.3em}.hd-lng{min-width:34px}}

/* ══ round 4 polish ══ */
/* a band too light for its small text: a measured shade (parts.mjs topShade) behind the trail */
.band-shade::after{content:"";position:absolute;inset:0 0 auto;height:min(240px,60%);background:linear-gradient(180deg,rgba(18,10,8,var(--shade)) 0,rgba(18,10,8,var(--shade)) 40%,transparent);pointer-events:none}
/* Back and the trail stay on one line on a phone; "Home" gives way, the current page truncates */
.back,.back-i{flex-shrink:0}
@media (max-width:640px){
  .crumbs{flex-wrap:nowrap;max-width:100%}
  .crumbs ol{flex-wrap:nowrap;min-width:0}
  .crumbs li{white-space:nowrap}
  .crumbs li:first-child{display:none}
  .crumbs li[aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .band-in{padding-inline:max(var(--gut),32px)}
}
/* what has focus is never hidden under the sticky header */
html{scroll-padding-top:calc(var(--hd) + 20px)}
.gal-back:focus-visible{outline-offset:-5px}
/* the hero caption keeps its contrast over a bright photograph */
.hw::after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(transparent,rgba(20,12,8,.48));z-index:1;pointer-events:none}
.hw-cap{z-index:2}
/* one rhythm down the home page; the opening photograph takes half the width at most, so text and photo balance */
.p-home .ed-sec{padding-top:clamp(20px,3vw,40px)}
@media (min-width:901px){.hero{grid-template-columns:minmax(0,1fr) min(50%,calc((100svh - var(--hd) - 60px) * .8))}.hero-art{width:100%}}
/* no single word left alone on a heading's or a paragraph's last line */
:is(.hero-h,.sec-t,.story-t,.phead-t,.promise-t){text-wrap:balance}
:is(.hero-sub,.story-in p,.pr p){text-wrap:pretty}

/* ══ photographs ══
   A <picture> takes no box of its own, so its image lays out exactly as an <img> would. A photograph
   waits on its own ground colour (set inline from its master) and appears softly once it has arrived. */
picture{display:contents}
.js img.lz{opacity:0;transition:opacity .7s var(--ease),transform 1.3s var(--ease)}
.js img.lz.in{opacity:1}
img[src=""]{visibility:hidden}

/* the confirmation's invoice: the customer's copy, and word of the one sent to their WhatsApp */
.od-inv{margin-top:2px}
.od-inv a{font:400 .72rem/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
html[dir=rtl] .od-inv a{font-size:.95rem;letter-spacing:0;text-transform:none}
.od-wl{margin-top:6px}
/* Apple's and Google's own badges, as they draw them (public/images/wallet/, unaltered): 50px high, never
   below 48px, with clear space all round */
.wallet-add{display:inline-block;margin:8px 0;line-height:0}
.wallet-add img{display:block;height:50px;width:auto;max-width:100%}
.od-wa{font-size:.86rem;color:var(--taupe);max-width:30em}
.od-wa.on{animation:up .45s var(--ease) both}
.ck-done.on>*:nth-child(7){animation-delay:.26s}.ck-done.on>*:nth-child(8){animation-delay:.3s}

/* ══ cookie consent: a band at the foot of the first page of a visit, and its settings (site.js) ══ */
.ccb{position:fixed;inset-inline:0;bottom:0;z-index:250;background:var(--paper);border-top:1px solid var(--line-gold);box-shadow:0 -14px 40px rgba(36,23,18,.07);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ccb.on{opacity:1;transform:none}
.ccb-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px clamp(24px,4vw,56px);max-width:var(--max);margin:0 auto;padding:24px var(--gut) calc(24px + env(safe-area-inset-bottom))}
.ccb-t{font:500 1.3rem/1.2 var(--serif);color:var(--oxblood);margin-bottom:8px}
.ccb-txt p{font-size:.86rem;line-height:1.7;color:var(--ink);max-width:76ch}
.ccb-txt .lnk{white-space:nowrap}
.ccb-act,.ccs-act{display:flex;gap:10px}
.ccb-act .btn,.ccb-act .btn-line,.ccs-act .btn,.ccs-act .btn-line{min-height:46px;padding:0 24px;white-space:nowrap}
.ccs{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:16px;background:rgba(36,23,18,.36);opacity:0;transition:opacity .45s var(--ease)}
.ccs.on{opacity:1}
.ccs-box{width:min(640px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--paper);border:1px solid var(--line-gold);padding:28px clamp(20px,4vw,34px) 26px;transform:translateY(14px);transition:transform .5s var(--ease)}
.ccs.on .ccs-box{transform:none}
.ccs-hd{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ccs-t{font:500 1.55rem/1.2 var(--serif);color:var(--oxblood)}
.ccs-x{width:40px;height:40px;margin-inline-end:-10px;font:300 1.6rem/1 var(--sans);color:var(--taupe);background:none;border:0;cursor:pointer;transition:color .25s}
.ccs-x:hover{color:var(--oxblood)}
.ccs-intro{margin:10px 0 18px;font-size:.88rem;line-height:1.65;color:var(--taupe)}
.ccs-row{border-top:1px solid var(--line);padding:18px 0}
.ccs-row:last-of-type{border-bottom:1px solid var(--line)}
.ccs-rh{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 8px}
label.ccs-rh{position:relative}
.ccs-rh input{inset:0;width:100%;height:100%;top:0}
.ccs-h{font:500 .7rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.ccs-on{font:400 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.ccs-row p{font-size:.84rem;line-height:1.65;color:var(--taupe)}
.ccs-act{flex-wrap:wrap;justify-content:flex-end;margin-top:22px}
html[dir=rtl] .ccs-h,html[dir=rtl] .ccs-on{letter-spacing:0;text-transform:none;font-size:.95rem}
html[dir=rtl] .ccs-on{font-size:.85rem}
html[dir=rtl] .ccb-txt p,html[dir=rtl] .ccs-row p,html[dir=rtl] .ccs-intro{font-size:.95rem}
/* the band waits for the opening curtain */
html.intro-on:not(.intro-done) .ccb{display:none}
.ft-cc{display:inline-block;padding:4px 0;font:inherit;font-size:.9rem;color:#d8cab2;background:none;border:0;cursor:pointer;text-align:start;transition:color .3s}
.ft-cc:hover{color:#fff}
@media (max-width:820px){
  .ccb-in{grid-template-columns:1fr;padding-top:20px}
  .ccb-act{display:grid;grid-template-columns:1fr 1fr}
  .ccb-act [data-cc=accept]{grid-column:1/-1;grid-row:1}
  .ccb-act .btn,.ccb-act .btn-line{padding:0 12px}
  .ccs{place-items:end stretch;padding:0}
  .ccs-box{width:100%;max-height:88vh;max-height:88dvh;border-inline:0;border-bottom:0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .ccs-act{display:grid;grid-template-columns:1fr 1fr}
  .ccs-act [data-cc=accept]{grid-column:1/-1;grid-row:1}
  .ccs-act .btn,.ccs-act .btn-line{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){.ccb,.ccs,.ccs-box{transition:none}}