/* ===================== v13: products within easy reach (LV-style home + side-panel menu) ===================== */

/* ---------- hero: the silk falls once on its own, then rests under the headline ---------- */
.lv-hero{position:relative;margin-top:calc(var(--head) * -1);height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#E9D9C2;z-index:2}
.lv-hero video,.lv-hero .lv-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lv-hero .lv-still{background:url(hero-silk-ending.webp) center/cover;display:none}
.lv-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(244,237,227,.78) 0%,rgba(244,237,227,.45) 32%,rgba(244,237,227,0) 58%),linear-gradient(180deg,rgba(244,237,227,.45),rgba(244,237,227,0) 24%)}
.lv-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding-top:var(--head)}
.lv-copy h1{font-size:clamp(48px,6.6vw,108px);color:var(--plum-deep);max-width:9.5em;line-height:1}
.lv-copy h1 em{color:var(--plum)}
.lv-copy p{max-width:28em;color:var(--ink);font-size:clamp(16px,1.25vw,19px);font-weight:400}
.lv-copy .label{color:var(--plum)}
.lv-copy .ctas{display:flex;gap:12px;flex-wrap:wrap}
.lv-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--plum-deep)}
.lv-cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.2s var(--ease) infinite}
@media (max-width:767px){
  .lv-shade{background:linear-gradient(180deg,rgba(244,237,227,.55),rgba(244,237,227,.2) 30%,rgba(244,237,227,.15) 48%,rgba(244,237,227,.85) 78%)}
  .lv-copy{justify-content:flex-end;padding-bottom:84px;gap:16px}
  .lv-copy h1{font-size:clamp(44px,12vw,60px)}
  .lv-copy .ctas .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.lv-hero video{display:none}.lv-hero .lv-still{display:block}}

/* ---------- category tiles: one click from the products ---------- */
.stackhead{display:flex;flex-direction:column;gap:16px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,22px)}
.tiles .tile{grid-column:span 2}
.tile{position:relative;display:block;aspect-ratio:4/4.6;border-radius:18px;overflow:hidden;background:var(--panel);color:var(--ivory);isolation:isolate}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease),opacity .6s}
.tile video{opacity:0}
.tile.playing video{opacity:1}
.tiles .tile.wide{grid-column:span 3;aspect-ratio:6/4.6}
.tile .pair{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.tile .pair img{position:relative;inset:auto;object-position:50% 18%}
.tile:hover img,.tile:hover video{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,52,69,0) 45%,rgba(28,52,69,.78));z-index:1;pointer-events:none}
.tile .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2vw,30px);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tile h3{color:var(--ivory);font-size:clamp(28px,2.6vw,42px)}
.tile small{display:block;margin-top:8px;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(247,241,232,.78)}
.tile .go{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(247,241,232,.5);display:grid;place-items:center;transition:background .4s,color .4s,transform .5s var(--ease)}
.tile .go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.tile:hover .go{background:var(--ivory);color:var(--plum-deep);transform:translateX(4px)}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}.tiles .tile,.tiles .tile.wide{grid-column:span 1;aspect-ratio:3/4}.tile .pair{grid-template-columns:1fr}.tile .pair img+img{display:none}.tile{aspect-ratio:3/4;border-radius:14px}.tile .go{display:none}.tile h3{font-size:26px}}

/* ---------- product rows ---------- */
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.row-head .right{display:flex;align-items:center;gap:22px}
@media (max-width:760px){.row-head .arrows{display:none}}

/* ---------- campaign blocks ---------- */
.lv-camp{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;overflow:hidden;background:var(--plum-deep);color:var(--ivory)}
.lv-camp video,.lv-camp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lv-camp::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,52,69,.82) 0%,rgba(28,52,69,.45) 42%,rgba(28,52,69,0) 70%);pointer-events:none}
.lv-camp .wrap{position:relative;z-index:2}
.lv-camp .copy{max-width:520px;display:flex;flex-direction:column;gap:22px}
.lv-camp h2{color:var(--ivory)}
.lv-camp h2 em{color:#BCDCEC}
.lv-camp .label{color:#BCDCEC}
.lv-camp p{color:rgba(247,241,232,.85);font-size:18px}
@media (max-width:760px){.lv-camp{align-items:flex-end;padding-bottom:50px;min-height:78svh}.lv-camp::after{background:linear-gradient(180deg,rgba(28,52,69,.05) 25%,rgba(28,52,69,.88) 75%)}}
.lv-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px)}
.lv-duo .tile{aspect-ratio:4/4.4}
.lv-duo .tile h3{font-size:clamp(32px,3.2vw,52px)}
.lv-duo .tile p{color:rgba(247,241,232,.85);margin-top:8px;max-width:22em;font-size:15px}
@media (max-width:760px){.lv-duo{grid-template-columns:1fr}.lv-duo .tile{aspect-ratio:4/4.2}}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.svc a,.svc div{background:var(--panel);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--ease),box-shadow .5s}
.svc a:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(28,52,69,.45)}
.svc svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.4}
.svc h3{font-size:24px}
.svc p{color:var(--muted);font-size:15px}
@media (max-width:900px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.svc{grid-template-columns:1fr}}

/* ---------- the menu: an LV-style side panel ---------- */
.menu{position:fixed;inset:0;z-index:80;display:block;padding:0;background:none!important;transform:none!important;border-radius:0!important;clip-path:none;overflow:hidden;visibility:hidden;transition:visibility 0s .75s}
.menu.on{visibility:visible;transition:visibility 0s}
.menu::before{display:none!important}
.mscrim{position:absolute;inset:0;background:rgba(28,52,69,.42);opacity:0;transition:opacity .5s var(--ease) .1s}
.menu.on .mscrim{opacity:1;transition:opacity .45s var(--ease)}
.mpanel{position:absolute;left:0;top:0;bottom:0;width:min(460px,100vw);background:var(--canvas);color:var(--ink);display:flex;flex-direction:column;gap:30px;padding:calc(var(--head) + 54px) clamp(24px,3vw,44px) 30px;overflow-y:auto;transform:translateX(-102%);transition:transform .6s cubic-bezier(.6,0,.3,1);box-shadow:30px 0 60px -40px rgba(28,52,69,.5)}
.menu.on .mpanel{transform:none;transition:transform .75s var(--ease)}
.mlist{display:flex;flex-direction:column}
.mlist .label{margin-bottom:12px}
.mlist a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--stone);font:500 clamp(28px,2.4vw,36px)/1.1 var(--serif);color:var(--ink);opacity:0;transform:translateX(-18px);transition:opacity .3s,transform .4s var(--ease),color .3s,padding .4s var(--ease)}
.menu.on .mlist a{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(.18s + var(--i) * 45ms),transform .7s var(--ease) calc(.18s + var(--i) * 45ms),color .3s,padding .4s var(--ease)}
.mlist a small{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mlist a:hover,.mlist a:focus-visible,.mlist a.cur-page{color:var(--plum);padding-left:10px}
.mlist a:hover em{opacity:1}
.mlist2{display:flex;flex-wrap:wrap;gap:12px 22px;opacity:0;transition:opacity .3s}
.menu.on .mlist2{opacity:1;transition:opacity .7s var(--ease) .5s}
.mlist2 a{font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);position:relative;padding-bottom:5px}
.mlist2 a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.mlist2 a:hover::after{transform:scaleX(1)}
.mfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted);opacity:0;transition:opacity .3s}
.menu.on .mfoot{opacity:1;transition:opacity .7s var(--ease) .6s}
.mfoot .soc3{display:flex;gap:16px;flex-wrap:wrap}
.mfoot a:hover{color:var(--plum)}
.mpreview{position:absolute;top:0;bottom:0;left:min(460px,100vw);right:0;overflow:hidden;opacity:0;transition:opacity .4s}
.menu.on .mpreview{opacity:1;transition:opacity .8s var(--ease) .3s}
.mpreview img,.mpreview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 2.4s var(--ease)}
.mpreview video{opacity:0}
.mpreview.playing video{opacity:1}
.menu.on .mpreview img{transform:scale(1.04)}
.mpreview::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,52,69,.55),rgba(28,52,69,0) 40%)}
.mpreview .cap{position:absolute;left:clamp(24px,3vw,48px);bottom:clamp(24px,4vh,44px);z-index:2;color:var(--ivory);font:500 clamp(40px,4vw,64px)/1 var(--serif)}
.mpreview .cap small{display:block;margin-bottom:12px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#BCDCEC}
@media (max-width:860px){.mpreview{display:none}.mpanel{width:100vw;padding-top:calc(var(--head) + 46px)}}
/* header stays itself while the panel is open */
.menu-open .hdr{background:var(--canvas)!important;color:var(--ink)!important;box-shadow:0 1px 0 var(--stone)!important;transform:none!important}
.menu-open .hdr .logo{color:var(--ink)!important}
.menu-open .announce{visibility:visible}
@media (prefers-reduced-motion:reduce){.mpanel,.mlist a,.mscrim{transition:none!important}}
@media (max-width:767px){.lv-cue{display:none}}
.mlist a:focus:not(:focus-visible){outline:none}

/* perfumes: a grid you browse downward */
.pf-gridsec{background:var(--plum-deep);color:var(--ivory);padding:clamp(70px,9vw,120px) 0}
.pf-gridsec .row-head h2{color:var(--ivory)}
.pf-gridsec .row-head h2 em{color:#BCDCEC}
.pf-gridsec .label{color:var(--gold)}
.pf-tools{display:flex;align-items:center;gap:22px;flex-wrap:wrap;color:rgba(247,241,232,.7)}
.pf-tools .small{color:rgba(247,241,232,.7)}
.pf-tools select{font:400 14px var(--sans);background:transparent;color:var(--ivory);border:1px solid rgba(247,241,232,.3);border-radius:999px;padding:10px 14px}
.pf-tools select option{color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,44px) clamp(16px,2vw,28px)}
.pgrid .pcard{flex:none;width:auto}
.pgrid .pcard .pbtm{flex-wrap:wrap;row-gap:12px}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:28px 12px}.pgrid .pcard .nm{font-size:19px}.pgrid .pcard .btn{width:100%;min-height:40px;padding:0 10px}}

/* long product grids: cards far off-screen are not drawn until they come near (smoother scrolling on phones) */
#shopGrid .card,.pgrid .pcard,#wGrid .card{content-visibility:auto;contain-intrinsic-block-size:auto 420px;min-width:0}
.grid,.pgrid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.grid.d3{--cols:3}
@media (max-width:1100px){.grid,.pgrid{--cols:3}}
@media (max-width:760px){.grid,.pgrid{--cols:2}}
.best .grid{--cols:3}
@media (hover:none),(pointer:coarse){.pframe{transform-style:flat;transition:none}.pframe .glint{display:none}.pf-ring{animation:none}}
/* Full-scene perfume photos fill their arched cards. */
.pframe[href="/hams-al-gharam-eau-de-parfum"] img,
.pframe[href="/ajmal-wisal-layl-eau-de-parfum"] img{padding:0;object-fit:cover;mix-blend-mode:normal}