/* HDOA هدوء — home page. Cream paper, blush, bronze; a dark room until the candle is lit. RTL. */
.eyebrow{margin:0 0 12px;font:500 12px/1.4 var(--sans);letter-spacing:.08em;color:var(--gold)}
h1,h2{font-family:var(--arab);font-weight:500}
h1 em,h2 em{font-style:normal;color:var(--wine)}
.en{font-family:var(--serif)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.sec__head h2{font-size:clamp(32px,4.6vw,56px)}
.sec__head--c{display:block;text-align:center;max-width:640px;margin-inline:auto}

/* hero */
.hero{position:relative;min-height:max(560px,calc(100svh - 92px));overflow:hidden;--fx:50%;--fy:40%;--px:50%;--py:60%}
.hero__dark{position:absolute;inset:0;background:radial-gradient(420px circle at var(--px) var(--py),rgba(242,180,92,.10),transparent 70%),radial-gradient(120% 90% at 50% 100%,#3a2a21 0%,#1d1511 60%,#140e0b 100%);cursor:pointer}
.hero__dim{position:absolute;inset:0;display:grid;place-items:center;align-content:start;gap:10px;text-align:center;color:#d8c3b0;padding-top:clamp(40px,9vh,110px)}
.hero__whisper{margin:0;font:400 clamp(64px,13vw,170px)/1 var(--arab);color:rgba(255,236,215,.07);letter-spacing:0}
.hero__hint{margin:0;display:grid;gap:2px;font-size:15px;color:#cdb39c;animation:breathe 2.6s ease-in-out infinite}
.hero__hint small{font-size:15px;font-style:italic;color:#8f7764}
@keyframes breathe{50%{opacity:.45}}
.hero__lit{position:absolute;inset:0;--r:0%;clip-path:circle(var(--r) at var(--fx) var(--fy));background:radial-gradient(70% 60% at var(--fx) var(--fy),#fff6ea 0%,var(--paper) 55%,var(--blush) 100%)}
.hero.is-lit .hero__dark{pointer-events:none}
.hero__in{min-height:inherit;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding-top:40px;padding-bottom:40px}
.hero__copy h1{font-size:clamp(54px,8.4vw,118px);line-height:1.05}
.hero__en{margin:6px 0 0;font-size:clamp(20px,2.2vw,28px);font-style:italic;color:var(--gold)}
.hero__lead{max-width:44ch;color:var(--mute);margin:22px 0 30px;font-size:17px}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero__photo{margin:0;justify-self:start;width:min(400px,100%);max-height:calc(100svh - 190px);aspect-ratio:4/5;border-radius:999px 999px 26px 26px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(61,44,35,.5);position:relative}
.hero__photo::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.7);border-radius:999px 999px 18px 18px;pointer-events:none}
.hero__photo img{width:100%;height:115%;object-fit:cover}

/* the candle */
.candle{position:absolute;z-index:3;left:50%;bottom:9%;width:clamp(150px,17vw,210px);transform:translateX(-50%);transition:left 1.4s var(--ease),bottom 1.4s var(--ease),width 1.4s var(--ease)}
.hero.is-lit .candle{left:calc(50% - min(12vw,170px));bottom:6%;width:clamp(110px,12vw,160px)}
.candle__body{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 26px 30px rgba(0,0,0,.35))}
.hero.is-lit .candle__body{filter:drop-shadow(0 24px 28px rgba(110,79,58,.28))}
.candle__label{font:500 16px var(--serif);letter-spacing:.4em;fill:#9a7a60}
.candle__label--ar{font:400 14px var(--arab);letter-spacing:0}
.candle__wick{position:absolute;left:50%;top:-34%;width:76px;height:96px;transform:translateX(-50%);background:none;border:0;cursor:pointer;border-radius:50%;z-index:2}
.candle__wick:focus-visible{outline:2px dashed var(--flame);outline-offset:4px}
.hero:not(.is-lit) .candle__wick::after{content:"";position:absolute;left:50%;bottom:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;box-shadow:0 0 0 0 rgba(242,180,92,.6);animation:ping 1.8s ease-out infinite}
@keyframes ping{to{box-shadow:0 0 0 26px rgba(242,180,92,0)}}
.candle__flame{position:absolute;left:50%;top:-30%;width:26%;aspect-ratio:1/2;transform:translateX(-50%) scale(0);transform-origin:50% 100%;opacity:0;pointer-events:none}
.hero.is-lit .candle__flame{transform:translateX(-50%) scale(1);opacity:1}
.candle__flame i,.candle__flame b{position:absolute;inset:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform-origin:50% 100%}
.candle__flame i{background:radial-gradient(60% 70% at 50% 72%,#fff 0%,#ffe9a8 30%,#f6a53a 65%,rgba(230,110,30,0) 100%);animation:flick 2.4s ease-in-out infinite}
.candle__flame b{inset:38% 32% 6%;background:radial-gradient(#5d79ff 0%,rgba(93,121,255,0) 70%);opacity:.5}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(.94,1.06) rotate(-2deg)}50%{transform:scale(1.04,.96) rotate(1.5deg)}75%{transform:scale(.97,1.04) rotate(-1deg)}}
.candle__glow{position:absolute;left:50%;top:-40%;width:340%;aspect-ratio:1;transform:translate(-50%,-30%);background:radial-gradient(circle,rgba(255,196,110,.38) 0%,rgba(255,196,110,0) 60%);opacity:0;pointer-events:none;transition:opacity 1.2s;animation:glow 3s ease-in-out infinite}
.hero.is-lit .candle__glow{opacity:1}
@keyframes glow{50%{transform:translate(-50%,-30%) scale(1.06)}}

/* rituals */
.rituals{padding:110px 0 70px}
.rituals__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px)}
.ritual{background:none;border:0;padding:0;cursor:pointer;text-align:center;display:grid;justify-items:center;gap:2px;color:var(--ink);font:inherit}
.ritual:nth-child(2){margin-top:60px}
.ritual figure{position:relative;margin:0 0 16px;width:100%;aspect-ratio:3/4;border-radius:999px 999px 22px 22px;overflow:hidden;background:var(--blush);box-shadow:0 30px 60px -36px rgba(61,44,35,.5)}
.ritual figure::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.8);border-radius:999px 999px 14px 14px;pointer-events:none}
.ritual img{width:100%;height:118%;object-fit:cover;transition:scale 1s var(--ease)}
.ritual:hover img{scale:1.06}
.ritual__n{font-size:15px;color:var(--gold);font-style:italic}
.ritual h3{font:500 24px var(--arab)}
.ritual .en{font-size:16px;color:var(--mute);font-style:italic}
.ritual small{font-size:13px;color:var(--wine);margin-top:4px;min-height:1.5em}

/* perfumes */
.scents{padding:100px 0;background:linear-gradient(180deg,var(--paper),var(--blush) 22%,var(--blush) 78%,var(--paper));overflow:hidden}
.scents__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.scents__copy h2{font-size:clamp(36px,5vw,62px);line-height:1.15}
.scents__en{margin:8px 0 16px;font-size:24px;font-style:italic;color:var(--gold)}
.scents__copy p{color:var(--mute);max-width:42ch}
.scents__copy b{color:var(--ink);font-weight:500}
.scents__price{margin-top:22px!important;display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--gold);border-radius:999px;padding:8px 26px;color:var(--ink)!important;font-size:18px}
.scents__price b{font:500 34px var(--serif)}
.scents__price span{font-size:13px;color:var(--mute)}
.bottles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,22px);align-items:end}
.bottle{background:none;border:0;padding:0;cursor:pointer;display:grid;gap:10px;justify-items:center;font:inherit;color:var(--ink)}
.bottle img{width:100%;aspect-ratio:3/4.2;object-fit:cover;border-radius:20px;box-shadow:0 30px 50px -30px rgba(61,44,35,.45);transition:transform .6s var(--ease)}
.bottle--mid img{aspect-ratio:3/4.8}
.bottle:hover img{transform:translateY(-10px)}
.bottle span{font-size:15px}

/* shop */
.shop{padding:90px 0}
.pcard{background:var(--white)}
.pcard h3{font-family:var(--arab)}
.pcard__en{font-family:var(--serif);font-style:italic;font-size:14px!important}
.pcard__price{color:var(--wine)}

/* story */
.story{padding:100px 0;background:var(--night);color:#efe3d7}
.story .eyebrow{color:var(--flame)}
.story__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.story__pic{margin:0;aspect-ratio:4/5;border-radius:300px 300px 24px 24px;overflow:hidden}
.story__pic img{width:100%;height:100%;object-fit:cover}
.story__words{font:400 clamp(22px,2.6vw,34px)/1.75 var(--arab);margin:0 0 34px}
.story__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.story__steps li{border-top:1px solid rgba(239,227,215,.22);padding-top:14px;display:grid;gap:4px}
.story__steps b{font:italic 400 22px var(--serif);color:var(--flame)}
.story__steps span{font-size:14px;color:#cdb9a7}

/* pop-ups */
.seen{padding:44px 0;overflow:hidden;border-bottom:1px solid var(--line);display:grid;gap:14px;justify-items:center}
.seen__label{margin:0;font-size:13px;color:var(--gold);letter-spacing:.08em}
.seen__track{justify-self:start;display:flex;gap:28px;align-items:center;white-space:nowrap;animation:slide 28s linear infinite;font:italic 400 clamp(26px,3.4vw,42px) var(--serif);color:var(--ink)}
.seen__track i{font-style:normal;font-size:16px;color:var(--gold)}
@keyframes slide{to{transform:translateX(33.333%)}}
@media (prefers-reduced-motion:reduce){.seen__track{animation:none}.candle__flame i,.candle__glow,.hero__hint,.candle__wick::after{animation:none!important}}

/* product cards */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.pcard:hover{transform:translateY(-5px);box-shadow:0 30px 50px -36px rgba(59,30,29,.55)}
.pcard.is-skel{aspect-ratio:3/4.4;background:linear-gradient(100deg,#fff 30%,var(--blush) 50%,#fff 70%) 0 0/300% 100%;animation:skel 1.4s infinite}
@keyframes skel{to{background-position:-150% 0}}
.pcard__pic{position:relative;display:block;aspect-ratio:1;border:0;padding:0;margin:0;background:var(--blush);cursor:zoom-in;overflow:hidden}
.pcard__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform .8s var(--ease)}
.pcard__pic img+img{opacity:0}
.pcard:hover .pcard__pic img:first-child{transform:scale(1.05)}
.pcard:hover .pcard__pic img+img{opacity:1}
.pcard__badge{position:absolute;top:12px;right:12px;background:var(--wine);color:#fff;font-size:12px;font-weight:500;padding:5px 12px;border-radius:999px}
.pcard__badge--out{background:var(--ink)}
.pcard__mat{position:absolute;bottom:10px;left:12px;background:rgba(255,255,255,.88);font-size:12px;padding:3px 10px;border-radius:999px;color:var(--ink)}
.pcard__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px;flex:1}
.pcard h3{font-size:16.5px;font-weight:500;line-height:1.45}
.pcard__en{margin:0;font-size:12px;color:var(--mute);direction:ltr;text-align:right}
.pcard__tag{margin:6px 0 0;font-size:13px;color:var(--mute);line-height:1.5}
.pcard__price{margin:auto 0 0;padding-top:12px;font-size:17px;font-weight:500;color:var(--wine)}
.pcard__price.soon{color:var(--mute);font-size:14px;font-weight:400}
.pcard__add{margin-top:10px;display:flex;align-items:center;justify-content:center;width:100%;border:1.5px solid var(--wine);color:var(--wine);background:transparent;border-radius:999px;padding:11px 10px;font:500 14px var(--sans);cursor:pointer;text-decoration:none;transition:background .25s,color .25s}
.pcard__add:hover,.pcard__add.added{background:var(--wine);color:#fff}
.pcard__add[disabled]{border-color:var(--line);color:var(--mute)}
.pcard__add--ask{border-color:var(--ink);color:var(--ink)}
.pcard__add--ask:hover{background:var(--ink);color:#fff}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;cursor:pointer;font-size:14px;transition:all .25s}
.chip:hover{border-color:var(--wine)}
.chip[aria-pressed="true"]{background:var(--wine);border-color:var(--wine);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1060px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:1fr 1fr;gap:12px}.pcard__body{padding:12px}.pcard h3{font-size:15px}.pcard__tag{display:none}.pcard__add{font-size:13px;padding:10px 6px}}
.more{display:flex;justify-content:center;margin-top:36px}

/* quick view */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(59,30,29,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet__panel{position:relative;width:min(980px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--paper);border-radius:28px;display:grid;grid-template-columns:1.1fr 1fr;box-shadow:0 40px 100px -30px rgba(59,30,29,.5)}
.sheet__x{position:absolute;top:14px;left:14px;z-index:2}
.sheet__gallery{display:grid;gap:6px;background:var(--blush);align-content:start}
.sheet__gallery img{width:100%;aspect-ratio:1;object-fit:cover}
.sheet__info{padding:34px 30px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;align-self:start}
.sheet__tag{margin:0;font-size:13px;color:var(--wine)}
.sheet__info h3{font-size:28px}
.sheet__en{margin:0;color:var(--mute);font-size:14px;text-align:right}
.sheet__spec{margin:6px 0 0;font-size:14px}
.sheet__desc{margin:8px 0 0;color:var(--mute)}
.sheet__price{margin:12px 0 10px;font-size:26px;font-weight:600;color:var(--wine)}
.sheet__tabby{margin:-6px 0 12px;font-size:13.5px;color:var(--mute)}
.sheet__tabby b{color:var(--ink);font-weight:500}
.tabby-mark{display:inline-block;background:#3bffc1;color:#000;font:600 12px/1 var(--sans);padding:4px 8px;border-radius:6px;direction:ltr}
.sheet__btns{display:grid;gap:12px}
.sheet__ask{text-align:center;font-size:14px;color:var(--ink)}
@media (max-width:760px){.sheet{padding:0;align-items:end}.sheet__panel{grid-template-columns:1fr;border-radius:28px 28px 0 0;max-height:92vh}.sheet__gallery{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory}.sheet__gallery img{scroll-snap-align:start}.sheet__info{position:static;padding:22px 20px calc(24px + env(safe-area-inset-bottom))}}

/* perks */
/* perks */
.perks{padding:10px 0 70px}
.perks__in{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.perk{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:#fff;text-align:center}
.perk svg{width:46px;height:46px;fill:none;stroke:var(--wine);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 10px}
.perk h3{font-size:18px}
.perk p{margin:4px 0 0;color:var(--mute);font-size:14px}
@media (max-width:760px){.perks__in{grid-template-columns:1fr}}
.perks{padding:70px 0 80px}
.perk{background:var(--white)}
.perk svg{stroke:var(--gold)}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;text-align:center;align-items:start;padding-top:44px;padding-bottom:250px;gap:0}
  .hero__copy{display:grid;justify-items:center}
  .hero__ctas{justify-content:center}
  .hero__photo{display:none}
  .hero.is-lit .candle{left:50%;bottom:20px;width:104px}
  .candle{width:132px}
  .scents__in,.story__in{grid-template-columns:1fr;gap:36px}
  .story__pic{max-width:420px;width:100%;margin-inline:auto}
}
@media (max-width:640px){
  .hero{min-height:calc(100svh - 140px)}
  .rituals{padding:80px 0 50px}
  .rituals__grid{grid-template-columns:1fr 1fr}
  .ritual:nth-child(2){margin-top:0}
  .ritual:nth-child(3){grid-column:1/-1;width:60%;justify-self:center}
  .ritual h3{font-size:20px}
  .scents,.shop,.story{padding-block:70px}
  .story__steps{grid-template-columns:1fr 1fr}
  .hero__lead{font-size:15.5px}
}