/* ============================================================
   RIMALA — where sands become scent
   Palette and forms are taken from the packaging: kraft sand,
   gold foil, the arch of the label, the R mark's dune curve.
   ============================================================ */

:root{
  --sand-00:#faf4ea;
  --sand-05:#f2e7d5;
  --sand-10:#e9dac2;
  --sand-20:#dcc7a7;
  --sand-30:#c8ad88;
  --dune:#8d6f4e;
  --dune-deep:#5c452e;
  --ink:#1b1510;
  --ink-soft:#4a3d31;
  --night:#120e14;
  --gold:#c9a15a;
  --gold-lit:#e3c384;
  --gold-deep:#93733a;
  --line:rgba(27,21,16,.14);
  --line-soft:rgba(27,21,16,.08);

  --bg:var(--sand-05);
  --fg:var(--ink);
  --hdr-solid:rgba(242,231,213,.9);
  /* Text on a photograph, or on a surface that is dark in BOTH hours (the hero,
     the night sections, the footer). It must not follow the theme: --sand-00
     and --sand-05 are light by day and near-black at night, which turned the
     page heroes and the footer into dark text on a dark picture. */
  --on-dark:#f3eee4;

  --display:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --arabic:"Noto Nastaliq Urdu","Amiri",serif;

  --gut:clamp(18px,5vw,64px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --arch:999px 999px 10px 10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-weight:300;
  font-size:clamp(15px,.55vw + 13.6px,17px);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* the whole page sits under a fine sand grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:300;margin:0;letter-spacing:-.015em;line-height:1.08}
.d1{font-family:var(--display);font-size:clamp(2.9rem,9vw,7rem);letter-spacing:.06em;font-weight:200}
.d2{font-family:var(--display);font-size:clamp(2rem,4.6vw,3.6rem);font-weight:250}
.d3{font-family:var(--display);font-size:clamp(1.35rem,2.3vw,1.95rem);font-weight:300}
.ar{font-family:var(--arabic);direction:rtl;font-weight:400;line-height:2.4}
.eyebrow{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dune);font-weight:400;
}
.lede{font-size:clamp(1.02rem,1.25vw,1.22rem);color:var(--ink-soft);max-width:56ch;font-weight:300}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.9em;border-radius:999px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:var(--sand-05);
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
  border:1px solid var(--ink);
}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--sand-05);border-color:var(--ink)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#221a0c}
.btn--gold:hover{background:var(--gold-lit);border-color:var(--gold-lit);color:#221a0c}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:120;
  display:flex;align-items:center;gap:1.4rem;
  padding:.9rem var(--gut);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.hdr--solid{background:var(--hdr-solid);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-soft)}
/* Over a photograph the nav has to survive whatever is behind it, and the
   heroes run from a night sky to pale kraft. The header carries its own scrim
   rather than relying on every image being dark at the top. */
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,7,12,.74),rgba(10,7,12,.38) 58%,transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.hdr--over::before{opacity:1}
.hdr__logo{display:flex;align-items:center;flex:0 0 auto}
/* the supplied lockup already contains the wordmark, so no type is set here */
.hdr__logo img{width:clamp(104px,11vw,132px);height:auto;display:block}
.hdr__nav{display:flex;gap:1.8rem;margin-inline-start:auto;align-items:center}
.hdr__nav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding:.3em 0;
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;
  transition:right .4s var(--ease);
}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{right:0}
/* Over a photograph the nav is always light: --sand-00 flips dark at night,
   which left the links invisible on the hero. */
.hdr--over{color:#f6f1e7;text-shadow:0 1px 14px rgba(8,6,12,.55)}
/* the mark is gold and reads on the dark hero as it is — lift it slightly
   rather than inverting it, which would lose the brand colour */
.hdr--over .hdr__logo img{filter:brightness(1.25) saturate(1.05)}

.cartbtn{display:flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.cartbtn__n{
  min-width:1.5em;height:1.5em;padding:0 .4em;border-radius:999px;
  background:var(--gold);color:#221a0c;display:grid;place-items:center;
  font-size:.62rem;letter-spacing:0;transform:scale(0);transition:transform .3s var(--ease);
}
.cartbtn__n[data-on]{transform:scale(1)}
.burger{display:none;margin-inline-start:auto;width:34px;height:34px;position:relative}
.burger i{position:absolute;left:7px;right:7px;height:1px;background:currentColor;transition:.35s var(--ease)}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){bottom:13px}
body.navopen .burger i:nth-child(1){top:16px;transform:rotate(45deg)}
body.navopen .burger i:nth-child(2){bottom:17px;transform:rotate(-45deg)}

@media (max-width:860px){
  /* the overlay is painted over the header, so the burger — which is also the
     close button, its two bars crossing into an X — has to be lifted above it
     or there is no visible way out of the menu */
  .burger{display:block;position:relative;z-index:130}
  body.navopen .burger{color:var(--on-dark)}
  .hdr__nav{
    position:fixed;inset:0;background:var(--night);flex-direction:column;
    justify-content:center;gap:1.6rem;margin:0;
    clip-path:circle(0 at 92% 4%);transition:clip-path .6s var(--ease);
  }
  .hdr__nav a{font-size:1rem;color:var(--on-dark)}
  /* in the menu these are the only controls left, so they get a real tap
     target rather than the 36px disc that suits a desktop header */
  .hdr__nav .hourbtn,.hdr__nav .langbtn{width:46px;height:46px}
  .hdr__nav .langbtn[lang="ar"]{font-size:1.2rem}
  .hdr__nav .hourbtn__i{width:21px;height:21px}
  body.navopen .hdr__nav{clip-path:circle(150% at 92% 4%)}
  body.navopen{overflow:hidden}
}

/* ---------- the desert stage ----------
   A real photograph underneath; the canvas only carries the moving sand. */
.stage{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#2a1c12}
.stage__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);will-change:transform;
}
/* a video backdrop behaves exactly like the still, and never shows controls */
video.stage__bg{pointer-events:none;background:#2a1c12;transition:none}
video.stage__bg::-webkit-media-controls{display:none!important}
.stage__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(0,0,0,.42), transparent 62%),
    linear-gradient(to bottom, rgba(12,8,6,.34) 0%, rgba(12,8,6,.05) 38%, rgba(12,8,6,.62) 100%);
}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.stage__in{
  position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:0 var(--gut);color:var(--on-dark);
}
.stage__ar{
  font-family:var(--arabic);direction:rtl;
  font-size:clamp(2.4rem,8.5vw,6rem);line-height:2.1;color:var(--gold-lit);padding-bottom:.12em;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
  opacity:0;transform:translateY(18px);animation:rise 1.5s var(--ease) .3s forwards;
}
/* the wordmark is the logo artwork, not type — the brand's own lettering is
   not a font we have, so setting it in anything else would be a near miss */
.stage__name{
  margin-top:.5em;opacity:0;transform:translateY(18px);
  animation:rise 1.5s var(--ease) .5s forwards;line-height:1;
}
.stage__name img{
  width:clamp(230px,34vw,430px);height:auto;display:block;margin-inline:auto;
  filter:brightness(1.45) saturate(.85);
}
.stage__tag{
  font-family:var(--mono);font-size:clamp(.6rem,1.5vw,.76rem);letter-spacing:.42em;
  text-transform:uppercase;margin-top:1.5em;color:rgba(255,255,255,.72);
  opacity:0;animation:rise 1.5s var(--ease) .75s forwards;
}
.stage__cta{margin-top:2.6rem;opacity:0;animation:rise 1.5s var(--ease) .95s forwards}
@keyframes rise{to{opacity:1;transform:none}}

.scrollcue{
  position:absolute;left:50%;bottom:2.2rem;z-index:4;translate:-50% 0;
  display:grid;place-items:center;gap:.7rem;color:rgba(255,255,255,.55);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;
}
.scrollcue i{width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.55),transparent);display:block}
@media (prefers-reduced-motion:no-preference){
  .scrollcue i{animation:cue 2.4s var(--ease) infinite}
  @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
                 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
}

/* ---------- sections ---------- */
.sec{padding:clamp(4.5rem,11vw,9rem) 0;position:relative}
.sec--sand{background:var(--sand-10)}
.sec--night{background:var(--night);color:var(--on-dark)}
.sec--night .eyebrow{color:var(--gold)}
.sec--night .lede{color:rgba(255,255,255,.72)}
.sechead{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sechead__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.4rem;justify-content:space-between}

/* ---------- the arch card ---------- */
.grid{display:grid;gap:clamp(1.6rem,3.4vw,3rem)}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}

.card{display:flex;flex-direction:column;position:relative;isolation:isolate}
.card__art{
  position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:3/4;background:var(--sand-20);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px -26px rgba(27,21,16,.55);
}
.card__art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.card:hover .card__art img{transform:scale(1.055)}
.card__art::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 1px rgba(27,21,16,.1) inset;pointer-events:none;
}
.card__gold{position:absolute;inset:8px;border-radius:12px;pointer-events:none;border:1px solid rgba(201,161,90,.4)}
.card__body{padding:1.1rem .2rem 0;display:flex;flex-direction:column;gap:.3rem;flex:1}
.card__name{font-family:var(--display);font-size:1.16rem;letter-spacing:.3em;font-weight:300;text-transform:uppercase}
.card__meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dune)}
.card__insp{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft)}
/* Cards also appear inside the always-dark sections, where --ink-soft and
   --dune are the wrong end of the scale: in day mode they are brown on near
   black. Secondary card text there is set off the light token instead. */
.sec--night .card__meta{color:rgba(243,238,228,.8)}
.sec--night .card__insp{color:rgba(243,238,228,.66)}
.sec--night .card__name,.sec--night .card__price{color:var(--on-dark)}
.card__foot{margin-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card__price{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em}
.card__add{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.6em 1.15em;
  transition:.3s var(--ease);
}
.card__add:hover{background:var(--ink);color:var(--sand-05);border-color:var(--ink)}
.card__add[data-in]{background:var(--gold);border-color:var(--gold);color:#221a0c}
.card__link{position:absolute;inset:0;z-index:2}
.card__foot .card__add{position:relative;z-index:3}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.filters button{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.62em 1.2em;border:1px solid var(--line);border-radius:999px;transition:.3s var(--ease);
}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--sand-05);border-color:var(--ink)}

/* ---------- scent page ---------- */
.scent{--sd:#1b1510;--sa:#c9a15a;--sl:#f2e7d5}
.scent__hero{position:relative;min-height:88svh;display:grid;align-items:center;overflow:hidden;background:var(--sd)}
.scent__hero .stage__bg{opacity:.62}
.scent__hero .stage__veil{background:
  radial-gradient(120% 90% at 50% 6%, rgba(0,0,0,.34), transparent 66%),
  linear-gradient(to bottom, color-mix(in srgb, var(--sd) 58%, transparent), color-mix(in srgb, var(--sd) 22%, transparent) 48%, color-mix(in srgb, var(--sd) 92%, transparent) 100%)}
.scent__hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scent__hero .wrap{position:relative;z-index:3}
.scent__split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding:7rem 0 4rem}
@media (max-width:900px){.scent__split{grid-template-columns:1fr;padding-top:6rem}}
.scent__label{position:relative;max-width:420px;width:100%;justify-self:center}
/* never let the product shot dictate the page height — a fallback label has a
   different aspect ratio to the bottle photograph */
.scent__label img{
  width:100%;height:auto;max-height:66svh;object-fit:contain;
  filter:drop-shadow(0 46px 70px rgba(0,0,0,.55));
}
.scent__txt{color:var(--on-dark)}
.scent__ar{font-family:var(--arabic);direction:rtl;font-size:clamp(1.9rem,4.6vw,3.2rem);color:var(--sa);line-height:2.2;padding-bottom:.1em}
.scent__name{font-family:var(--display);font-weight:200;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:.34em;text-transform:uppercase;margin-top:.15em}
.scent__mean{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:1.2em}
.scent__story{margin-top:1.8rem;color:rgba(255,255,255,.82);max-width:46ch;font-size:1.05rem}
.scent__buy{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.scent__price{font-family:var(--mono);font-size:1.1rem;letter-spacing:.1em;color:var(--on-dark)}

.pyramid{display:grid;gap:0;counter-reset:n}
.pyr{display:grid;grid-template-columns:minmax(120px,.28fr) 1fr;gap:1.5rem;padding:1.7rem 0;border-top:1px solid var(--line)}
.pyr:last-child{border-bottom:1px solid var(--line)}
.pyr__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dune);padding-top:.35em}
.pyr__v{display:flex;flex-wrap:wrap;gap:.5rem}
.pyr__v span{
  font-family:var(--display);font-size:1.02rem;font-weight:300;
  padding:.36em .95em;border:1px solid var(--line);border-radius:999px;
}
@media (max-width:640px){.pyr{grid-template-columns:1fr;gap:.7rem}}

/* ---------- cart drawer ---------- */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(440px,100%);z-index:200;
  background:var(--sand-05);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .5s var(--ease);
  box-shadow:-30px 0 80px -40px rgba(27,21,16,.6);
}
body.cartopen .drawer{transform:none}
.drawer__scrim{
  position:fixed;inset:0;z-index:190;background:rgba(18,14,20,.45);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
body.cartopen .drawer__scrim{opacity:1;pointer-events:auto}
body.cartopen{overflow:hidden}
.drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:1.5rem var(--gut) 1.2rem;border-bottom:1px solid var(--line)}
.drawer__hd h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase}
.drawer__x{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:.3s var(--ease)}
.drawer__x:hover{background:var(--sand-20)}
.drawer__body{flex:1;overflow:auto;padding:.5rem var(--gut)}
.drawer__ft{padding:1.3rem var(--gut) 1.8rem;border-top:1px solid var(--line);display:grid;gap:1rem}
.drawer__tot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.82rem;letter-spacing:.1em}
.drawer__note{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--dune);line-height:1.7;text-transform:uppercase}
.drawer .btn{width:100%}
.empty{padding:3.5rem 0;text-align:center;color:var(--dune);font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}

.li{display:grid;grid-template-columns:62px 1fr auto;gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line-soft)}
.li img{width:62px;height:84px;object-fit:cover;border-radius:8px;background:var(--sand-20)}
.li__n{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:.88rem}
.li__m{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--dune);margin-top:.25em}
.li__r{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.li__p{font-family:var(--mono);font-size:.76rem}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px}
.qty button{width:26px;height:26px;display:grid;place-items:center;font-size:.9rem;line-height:1;color:var(--dune)}
.qty button:hover{color:var(--ink)}
.qty span{font-family:var(--mono);font-size:.7rem;min-width:1.6em;text-align:center}

/* ---------- misc ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:1.1rem 0;background:var(--sand-10)}
.marq__in{display:flex;gap:3.5rem;width:max-content;font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dune)}
@media (prefers-reduced-motion:no-preference){.marq__in{animation:marq 42s linear infinite}}
@keyframes marq{to{transform:translateX(-50%)}}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal[data-in]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

.ftr{background:var(--night);color:var(--on-dark);padding:clamp(3.5rem,7vw,6rem) 0 2.5rem}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}}
.ftr h3{font-family:var(--mono);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.ftr a{color:rgba(255,255,255,.72);display:block;padding:.28em 0;font-size:.92rem;transition:color .3s var(--ease)}
.ftr a:hover{color:var(--on-dark)}
.ftr__bot{margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ftr__logo{width:168px;margin-bottom:1.3rem;filter:brightness(1.22)}

.notice{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;line-height:1.8;
  color:var(--dune);border:1px dashed var(--line);border-radius:12px;padding:1rem 1.2rem;
}

.card__art--flat img{object-fit:contain;background:var(--sand-10);padding:8%}


/* ---------- card hover: the frame draws itself ----------
   The product image never moves. On hover the carton's own debossed oval is
   drawn around the card in gold, a stroke at a time, and the note pyramid
   rises underneath. Swapping the photograph on hover made the grid restless —
   nineteen cards all flickering between two images as the cursor crossed them. */
.card__art{isolation:isolate}

.card__frame{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;
}
.card__frame rect{
  fill:none;stroke:var(--sa,var(--gold-lit));stroke-width:1.1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.15s var(--ease),opacity .4s var(--ease);
  opacity:0;
}
.card:hover .card__frame rect,.card:focus-within .card__frame rect{
  stroke-dashoffset:0;opacity:.9;
}

/* the pyramid rises, a line at a time */
.card__notes{
  /* the drawn frame sits ~3% in from the card edge, so the text needs to
     clear that line, not sit on it */
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.5rem 1.4rem;
  /* the scrim is this scent's own dark tone, taken off its label artwork */
  background:linear-gradient(to top,
    var(--scrim-a,rgba(14,10,16,.96)) 0 42%,
    var(--scrim-b,rgba(14,10,16,.86)) 68%,transparent);
  display:grid;gap:.3rem;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease);
}
.card:hover .card__notes,.card:focus-within .card__notes{opacity:1}
.card__notes b{
  font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.07em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.6;text-transform:uppercase;color:var(--sa,var(--gold-lit));
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.card__notes b span{color:rgba(255,255,255,.82);letter-spacing:.08em}
.card:hover .card__notes b,.card:focus-within .card__notes b{opacity:1;transform:none}
.card:hover .card__notes b:nth-child(2){transition-delay:.1s}
.card:hover .card__notes b:nth-child(3){transition-delay:.2s}

@media (hover:none){.card__frame,.card__notes{display:none}}
@media (prefers-reduced-motion:reduce){
  .card__frame rect{transition:opacity .2s}
  .card__notes b{transition:opacity .2s;transform:none}
}

/* ---------- product gallery ---------- */
.gal{display:flex;flex-direction:column;gap:.9rem;align-items:center}
.gal__main{position:relative;width:100%;max-width:420px}
.gal__main img{
  width:100%;height:auto;max-height:62svh;object-fit:contain;
  filter:drop-shadow(0 46px 70px rgba(0,0,0,.55));
}
.gal__thumbs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.gal__thumbs button{
  width:52px;height:68px;border-radius:9px;overflow:hidden;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);
  transition:.3s var(--ease);padding:0;
}
.gal__thumbs button img{width:100%;height:100%;object-fit:cover}
.gal__thumbs button[aria-current="true"]{border-color:var(--sa);transform:translateY(-2px)}
.gal__thumbs button:hover{border-color:var(--sa)}

/* ===========================================================================
   Brand pattern — the wave motif off the carton's side panels. It was printed
   on every box and used nowhere on the site, so it does the decorative work
   here rather than anything invented. It is a mask, so it takes any colour.
   =========================================================================== */
:root{
  --wave-v:url("../assets/img/brand/wave-v.png");
  --wave-h:url("../assets/img/brand/wave-h.png");
}

.rail{
  position:absolute;top:0;bottom:0;width:22px;pointer-events:none;
  background-color:var(--gold);opacity:.13;
  -webkit-mask-image:var(--wave-v);mask-image:var(--wave-v);
  -webkit-mask-size:18px auto;mask-size:18px auto;
  -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
  -webkit-mask-position:center top;mask-position:center top;
}
.rail--l{left:clamp(6px,1.6vw,22px)}
.rail--r{right:clamp(6px,1.6vw,22px)}
.sec--night .rail{background-color:var(--gold-lit);opacity:.17}
@media (max-width:760px){.rail{display:none}}

.wavediv{
  height:26px;width:100%;pointer-events:none;
  background-color:var(--gold);opacity:.15;
  -webkit-mask-image:var(--wave-h);mask-image:var(--wave-h);
  -webkit-mask-size:auto 13px;mask-size:auto 13px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:center;mask-position:center;
}

/* a gold rule that draws itself under a section's eyebrow */
.sechead .eyebrow{position:relative;display:inline-block;padding-bottom:.55rem}
.sechead .eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.reveal[data-in] .eyebrow::after,.sechead[data-in] .eyebrow::after{transform:scaleX(1)}

/* ---------- pointer ----------
   A small gold ring that lags behind a hard dot, opening up over anything
   clickable. Hidden for touch and for anyone who asked for less motion — on
   those it would be either meaningless or unwelcome. */
.cursor-sand{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  width:100%;height:100%;
}
.cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--gold-lit);box-shadow:0 0 0 1px rgba(20,14,8,.35);
  transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease);
}
.cursor--hot{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
body:not(.cursor-on) .cursor,body:not(.cursor-on) .cursor-sand{display:none}
@media (hover:none),(prefers-reduced-motion:reduce){
  .cursor,.cursor__ring{display:none!important}
}

/* the motif doubles as the marquee's separator, instead of a bullet */
.wavesep{
  display:inline-block;width:20px;height:11px;margin:0 1.5rem;vertical-align:middle;
  background-color:currentColor;opacity:.55;
  -webkit-mask-image:var(--wave-h);mask-image:var(--wave-h);
  -webkit-mask-size:auto 11px;mask-size:auto 11px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}

/* ===========================================================================
   Editorial pages — every tab opens on a full-bleed photograph, not on type.
   The research on fragrance sites is consistent on one point: sequencing.
   Scent cannot be shown, so the page has to build a world first and let the
   functional detail follow. Only the homepage was doing that.
   =========================================================================== */
.phero{
  position:relative;min-height:clamp(380px,58svh,620px);
  display:grid;align-items:end;overflow:hidden;background:var(--night);
}
.phero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);will-change:transform;
}
.phero__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    /* a darker band at the very top so the fixed header stays legible over a
       bright picture — the counter and gifting shots are pale at the top */
    linear-gradient(to bottom,rgba(10,7,12,.72) 0,rgba(10,7,12,.28) 16%,transparent 34%),
    linear-gradient(to top,rgba(12,9,14,.92) 0 22%,rgba(12,9,14,.6) 52%,rgba(12,9,14,.2) 78%,transparent);
}
.phero .wrap{
  position:relative;z-index:2;color:var(--on-dark);
  padding-block:clamp(3rem,7vw,5.5rem);
}
.phero .eyebrow{color:var(--gold-lit)}
.phero .d2{color:var(--on-dark);text-shadow:0 2px 30px rgba(8,6,12,.6)}
.phero .lede{color:rgba(255,255,255,.8)}
.phero .rail{opacity:.22}

/* a full-bleed editorial band: picture behind, a column of text over it */
.band{
  position:relative;display:grid;align-items:center;overflow:hidden;
  min-height:clamp(420px,66svh,700px);background:var(--night);
}
.band__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);will-change:transform;
}
.band__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(10,8,12,.9) 0 34%,rgba(10,8,12,.35) 68%,transparent);
}
.band--right .band__veil{
  background:linear-gradient(to left,rgba(10,8,12,.9) 0 34%,rgba(10,8,12,.35) 68%,transparent);
}
.band__in{position:relative;z-index:2;max-width:44ch;color:var(--on-dark)}
.band--right .band__in{margin-inline-start:auto;text-align:right}
.band__in .eyebrow{color:var(--gold-lit)}
.band__in p{color:rgba(255,255,255,.82);font-size:clamp(1rem,1.2vw,1.16rem)}
@media (max-width:760px){
  .band__veil,.band--right .band__veil{
    background:linear-gradient(to top,rgba(10,8,12,.92) 0 55%,rgba(10,8,12,.45));
  }
  .band__in,.band--right .band__in{max-width:none;text-align:left}
  .band{align-items:end;min-height:72svh}
  .band .wrap{padding-bottom:3rem}
}

/* a quiet full-bleed strip used to break long type pages */
.strip{position:relative;height:clamp(220px,34svh,380px);overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.strip::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(12,9,14,.35),rgba(12,9,14,.1) 50%,rgba(12,9,14,.45));
}

/* ---------- a split: copy beside an arch-framed photograph ----------
   The arch is the carton window and the card frame, so a picture in it reads as
   part of the packaging rather than a stock crop dropped on the page. */
.split{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:2.5rem}}

.arch{
  position:relative;margin:0;border-radius:999px 999px 14px 14px;overflow:hidden;
  aspect-ratio:4/5;box-shadow:0 34px 60px -40px rgba(27,21,16,.6);
}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.arch:hover img{transform:scale(1.04)}
.arch::after{
  content:"";position:absolute;inset:10px;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(201,161,90,.55);
}
.arch figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem 1.1rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-lit);text-align:center;
  background:linear-gradient(to top,rgba(14,10,16,.8),transparent);
}

/* ---------- spec cards ---------- */
/* each point about the product gets a photograph of the part it describes, so
   the section reads as four objects rather than four paragraphs of text */
.specs{
  list-style:none;margin:clamp(2.6rem,5vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem);
}
.spec{
  display:flex;flex-direction:column;
  background:var(--sand-00);
  border-radius:16px;overflow:hidden;
  box-shadow:
    0 26px 60px 10px rgba(92,69,46,.15),
    0 8px 22px 2px rgba(92,69,46,.09);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.spec:hover{
  transform:translateY(-4px);
  box-shadow:
    0 34px 70px 12px rgba(92,69,46,.2),
    0 10px 26px 2px rgba(92,69,46,.11);
}
.spec__b{padding:clamp(1.5rem,2.4vw,2rem)}
.spec__k{
  display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;margin:0 0 .8rem;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dune);
}
.spec__i{
  width:26px;height:26px;flex:none;
  fill:none;stroke:var(--gold);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.spec__i circle{fill:var(--gold);stroke:none}
.spec h3{margin:0;font-size:clamp(1.02rem,1.5vw,1.3rem)}
.spec p{margin:.65rem 0 0;font-size:.86rem;line-height:1.65;color:var(--ink-soft)}
@media (max-width:980px){.specs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.specs{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .spec{transition:none}
  .spec:hover{transform:none}
}

/* ---------- the other half of the day ----------
   Night is the same design with the tokens flipped; no component knows about
   it. The values are sampled off the night clip itself (sky rgb(73,95,146) to
   rgb(125,132,180), dune in shadow rgb(32,34,36)), so the page and the
   backdrop are the same place at the same hour. */
html[data-theme="night"]{
  --sand-00:#191c27;
  --sand-05:#12141d;
  --sand-10:#1d2130;
  --sand-20:#272c3d;
  --sand-30:#3c4356;
  --dune:#a2967f;
  --dune-deep:#c4b69b;
  --ink:#e9e5dc;
  --ink-soft:#bcb5a6;
  --night:#0a0c13;
  --gold:#d3ab66;
  --gold-lit:#ecd09a;
  --gold-deep:#9a7a3e;
  --line:rgba(233,229,220,.16);
  --line-soft:rgba(233,229,220,.08);
  color-scheme:dark;
}
/* the flip is a dissolve, not a cut, because the backdrop is dissolving too */
body,.sec,.spec,.hdr,.card,.drawer{
  transition:background-color .9s var(--ease),border-color .9s var(--ease),color .9s var(--ease);
}
html[data-theme="night"] .spec{
  box-shadow:0 26px 60px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(233,229,220,.06);
}
html[data-theme="night"]{--hdr-solid:rgba(18,20,29,.88)}
html[data-theme="night"] .stage,
html[data-theme="night"] video.stage__bg{background:#0a0c13}

/* day / night switch in the header */
.hourbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:inherit;
  cursor:pointer;
  transition:border-color .3s var(--ease),transform .6s var(--ease);
}
.hourbtn:hover{border-color:var(--gold);transform:rotate(-20deg)}
.hourbtn__i{
  width:17px;height:17px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.hourbtn__i--moon{display:none}
html[data-theme="night"] .hourbtn__i--sun{display:none}
html[data-theme="night"] .hourbtn__i--moon{display:block}
@media (prefers-reduced-motion:reduce){
  body,.sec,.spec,.hdr,.card,.drawer{transition:none}
  .hourbtn:hover{transform:none}
}

/* Night is the day clip put through a day-for-night grade: level down, the
   warmth drained out and what is left pushed blue, with the stars drawn over
   it on the sand canvas. Two alternatives were tried and rejected — the sunset
   take keeps the sun but never reads as night, and the 10pm take reads as
   night but its dune has drifted off the ridge trace. */
.stage__bg{transition:filter 1.1s var(--ease)}
html[data-theme="night"] .stage__bg{
  filter:brightness(.42) saturate(.38) sepia(.32) hue-rotate(188deg) saturate(1.75) contrast(1.06);
}
@media (prefers-reduced-motion:reduce){.stage__bg{transition:none}}

/* ---------- العربية ----------
   The Arabic site is the same stylesheet with the direction flipped. Three
   things actually have to change: the typeface (Nastaliq is for the brand
   calligraphy, never for running text), the letter-spacing, and the handful of
   rules that were written with physical sides instead of logical ones. */
[dir="rtl"]{
  --display:"IBM Plex Sans Arabic","Jost",sans-serif;
  --body:"IBM Plex Sans Arabic","Jost",sans-serif;
  --mono:"IBM Plex Sans Arabic",ui-monospace,monospace;
}
/* Arabic is cursive. letter-spacing pulls the joins apart and leaves a row of
   disconnected shapes, and text-transform does nothing but break Latin names
   caught in the same rule. Both go, everywhere, rather than in forty places. */
[dir="rtl"] *{letter-spacing:normal!important;text-transform:none!important}
[dir="rtl"] .lede,[dir="rtl"] p{line-height:1.85}
[dir="rtl"] .eyebrow,[dir="rtl"] .spec__k,[dir="rtl"] .pyr dt{font-size:.74rem}
[dir="rtl"] .d1,[dir="rtl"] .d2,[dir="rtl"] .d3{line-height:1.35}
[dir="rtl"] .stage__name img{max-width:min(78vw,420px)}

/* the nav underline grows from the other end */
[dir="rtl"] .hdr__nav a::after{left:100%;right:0}
[dir="rtl"] .hdr__nav a:hover::after,[dir="rtl"] .hdr__nav a[aria-current]::after{left:0;right:0}

/* the cart comes in from the side the reader starts on */
[dir="rtl"] .drawer{
  inset:0 auto 0 0;transform:translateX(-101%);
  box-shadow:30px 0 80px -40px rgba(27,21,16,.6);
}
[dir="rtl"] body.cartopen .drawer{transform:none}

/* and the marquee travels with the text */
[dir="rtl"] .marq__in{animation-name:marq-rtl}
@keyframes marq-rtl{to{transform:translateX(50%)}}

/* the language switch, beside the day/night one */
.langbtn{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--line);color:inherit;
  line-height:1;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.langbtn:hover{border-color:var(--gold)}
/* it lives among the nav links, so it inherits their growing underline — which
   is for words, not for a disc */
.hdr__nav .langbtn::after{content:none}
/* the ain has to carry a whole language on its own, so it is set in the Arabic
   face at a size that reads next to the day/night icon rather than under it */
.langbtn[lang="ar"]{
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",sans-serif;
  font-size:.92rem;font-weight:600;line-height:1;
}
/* CSS centres the line box, not the ink, and the ain hangs below its baseline:
   rendered at 300px and measured off the pixels it lands .16em low and .029em
   right of the middle of the disc. The nudge goes on the glyph — put it on the
   button and the whole disc moves out of line with the day/night one instead. */
.langbtn[lang="ar"] span{display:block;transform:translate(-.029em,-.16em)}
/* EN needs no correction of its own — measured, it lands within .15px of the
   middle. It only ever looked high because the Arabic nudge above was being
   applied to it: the generator was leaving lang="ar" on a button that says EN.
   No letter-spacing either — the trailing gap would sit inside the disc and
   pull the pair left. */
.langbtn[lang="en"]{font-family:var(--mono);font-size:.62rem;font-weight:500}

/* Arabic has no capitals and no letter-spacing to lean on, so the weight does
   the work the styling does in English: every control is set a step heavier. */
[dir="rtl"] .btn,[dir="rtl"] button,[dir="rtl"] .langbtn,
[dir="rtl"] .cartbtn,[dir="rtl"] .filters button,[dir="rtl"] .card__add{font-weight:600}

/* Those small mono labels are sized for spaced Latin capitals. The same size in
   Arabic, which has no capitals and loses its spacing, reads as fine print. */
[dir="rtl"] .eyebrow,[dir="rtl"] .scrollcue,[dir="rtl"] .card__meta,[dir="rtl"] .card__insp,
[dir="rtl"] .filters button,[dir="rtl"] .pyr__k,[dir="rtl"] .drawer__note,[dir="rtl"] .li__m,
[dir="rtl"] .ftr h3,[dir="rtl"] .ftr__bot,[dir="rtl"] .spec__k,[dir="rtl"] .marq__in,
[dir="rtl"] .scent__mean,[dir="rtl"] figcaption,[dir="rtl"] .empty{font-size:.78rem}
[dir="rtl"] .hdr__nav a,[dir="rtl"] .cartbtn,[dir="rtl"] .btn,[dir="rtl"] .drawer__hd h2{font-size:.82rem}
[dir="rtl"] .stage__tag{font-size:clamp(.9rem,2.1vw,1.1rem)}

/* The UAE dirham sign, drawn rather than typed (U+20C3 has no font support
   yet). It inherits the colour and scales with the type around it, and the
   Bank's guidance is that it comes before the number. */
.dhs{white-space:nowrap}
.dh{
  /* the Bank's rule is that the symbol stands as tall as the digits and sits
     on the same baseline, with clear space before the numeral */
  display:inline-block;height:.72em;width:auto;
  vertical-align:baseline;margin-inline-end:.3em;
}

/* ---------- the cart on a phone ----------
   In the burger menu the cart was the odd one out: a button among links, so it
   sat smaller and off-centre however it was styled, and it was hidden behind a
   tap. Below the nav breakpoint it comes out as a floating button instead. */
.cartfab{display:none}
@media (max-width:860px){
  .hdr__nav .cartbtn{display:none}
  .cartfab{
    display:grid;place-items:center;
    position:fixed;z-index:150;
    inset-block-end:calc(1.1rem + env(safe-area-inset-bottom));
    inset-inline-end:calc(1.1rem + env(safe-area-inset-right));
    width:56px;height:56px;border-radius:999px;
    background:var(--gold);color:#221a0c;
    box-shadow:0 10px 26px -8px rgba(27,21,16,.55), 0 2px 6px rgba(27,21,16,.25);
    transition:transform .4s var(--ease),opacity .3s var(--ease);
  }
  .cartfab svg{
    width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .cartfab__n{
    position:absolute;top:-3px;inset-inline-end:-3px;
    min-width:21px;height:21px;padding:0 .35em;border-radius:999px;
    background:var(--ink);color:var(--sand-00);
    display:grid;place-items:center;
    font-family:var(--mono);font-size:.62rem;letter-spacing:0;
    transform:scale(0);transition:transform .3s var(--ease);
  }
  .cartfab__n[data-on]{transform:scale(1)}
  /* out of the way while the menu or the drawer itself is open */
  body.navopen .cartfab,body.cartopen .cartfab{opacity:0;pointer-events:none;transform:scale(.6)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .cartfab,.cartfab__n{transition:none}
}

/* ---------- search ----------
   One panel, reachable from the header on every page (or by pressing "/").
   It matches on the two names, the notes and — the thing people actually
   remember — the fragrance each scent is inspired by. */
.srchbtn{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:999px;
  border:1px solid var(--line);color:inherit;background:transparent;cursor:pointer;
  transition:border-color .3s var(--ease);
}
.srchbtn:hover{border-color:var(--gold)}
.srchbtn svg,.srch__in>svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;
}
.srch[hidden]{display:none}
.srch{position:fixed;inset:0;z-index:300;display:grid;align-items:start;justify-items:center}
.srch__scrim{position:absolute;inset:0;background:rgba(12,9,14,.6);backdrop-filter:blur(4px)}
.srch__box{
  position:relative;z-index:1;width:min(620px,calc(100% - 2*var(--gut)));
  margin-top:clamp(3rem,12vh,8rem);
  background:var(--sand-00);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(27,21,16,.55);
  animation:srchin .32s var(--ease) both;
}
@keyframes srchin{from{opacity:0;transform:translateY(-10px)}}
.srch__in{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.srch__in>svg{flex:none;color:var(--dune)}
.srch__in input{
  flex:1;min-width:0;border:0;background:none;color:var(--fg);
  font-family:var(--body);font-size:1rem;
}
.srch__in input::placeholder{color:var(--dune);opacity:.75}
.srch__in input:focus{outline:none}
.srch__x{font-size:1.4rem;line-height:1;color:var(--dune);background:none;border:0;cursor:pointer;padding:0 .2em}
.srch__out{max-height:min(58vh,480px);overflow:auto}
.srch__r{
  display:flex;align-items:center;gap:.9rem;padding:.7rem 1.1rem;
  border-bottom:1px solid var(--line-soft);transition:background .2s var(--ease);
}
.srch__r:last-child{border-bottom:0}
.srch__r:hover,.srch__r:focus-visible{background:var(--sand-10)}
.srch__r img{width:46px;height:62px;object-fit:cover;border-radius:7px;flex:none;background:var(--sand-10)}
.srch__t{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.srch__t b{font-family:var(--display);font-weight:300;font-size:1rem;letter-spacing:.18em;text-transform:uppercase}
.srch__t i,.srch__t u{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-style:normal;text-decoration:none;color:var(--dune);
}
.srch__t u{color:var(--gold-deep)}
.srch__p{font-family:var(--mono);font-size:.8rem;flex:none}
.srch__none{padding:1.6rem 1.1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--dune)}
body.srchopen{overflow:hidden}
[dir="rtl"] .srch__t b,[dir="rtl"] .srch__t i,[dir="rtl"] .srch__t u{letter-spacing:normal}
@media (max-width:860px){
  .hdr__nav .srchbtn{width:46px;height:46px}
  .hdr__nav .srchbtn svg{width:21px;height:21px}
  .srch__box{margin-top:calc(1rem + env(safe-area-inset-top))}
}