/* Dar Jana Fashion — theme styles */
:root{
  --bg:#FAF8F3;--surface:#fff;--ink:#2B2926;--muted:#77716A;--line:#e6ddcd;--soft:#F1E9DC;
  --gold:#C9A227;--gold-deep:#A87908;--gold-lite:#E0C15A;--stage:#241C16;--stage-fg:#FAF8F3;--stage-dim:#cbbfa9;--stage-line:#463a2e;
  --ph:#F3EFE7;--wa:#1f8f55;--grad:linear-gradient(135deg,#A87908,#E0C15A,#C9A227);
  --display:"Instrument Sans","Tajawal","Helvetica Neue",Arial,sans-serif;
  --sans:"Nunito","Tajawal","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,4vw,56px);--ease:cubic-bezier(.2,.7,.2,1);--hdr-h:57px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.15}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#000;color:#fff;padding:8px 14px}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(56px,7vw,96px)}
.band{background:var(--bg)}.band.ivory{background:var(--bg)}.band.white{background:#fff}
.band.goldfade{background:linear-gradient(180deg,#f6ebcc 0%,#fbf5e6 30%,#fff 70%)}
.band.whitegold{background:linear-gradient(180deg,#fff 0%,#fff 55%,#fbf7ee 100%)}
.band.soft{background:#f2f2f2}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.chev{width:10px;height:6px}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:46px;height:9px;flex:none;background:linear-gradient(var(--gold),var(--gold)) 10px 50%/36px 1px no-repeat,linear-gradient(45deg,transparent 40%,var(--gold) 40% 60%,transparent 60%) 0 0/9px 9px no-repeat;border:0}
.center .eyebrow::before,.eyebrow.plain::before{display:none}
.h-sec{font-size:clamp(22px,2.5vw,34px);text-transform:uppercase;letter-spacing:.06em}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,3vw,40px);flex-wrap:wrap}
.sec-head>div:first-child{display:grid;gap:8px}
.center{text-align:center}.center .sec-head{justify-content:center}.center .sec-head>div{justify-items:center}
.note{color:var(--muted);font-size:14px}
.lnk{display:inline-flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid var(--gold)}
.lnk:hover{color:var(--gold-deep)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 28px;background:var(--stage);color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--stage);transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.gold{background:var(--grad);border:0;color:var(--stage)}
.btn.outline-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}.btn.outline-w:hover{background:#fff;color:var(--ink)}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* announcement */
.ann{background:#efe6d5;color:var(--ink);font-size:11px;letter-spacing:.22em;text-transform:uppercase;overflow:hidden;white-space:nowrap;position:relative;display:flex;align-items:center}
.ann-track{display:inline-flex;gap:96px;padding:10px 48px;animation:marq 40s linear infinite;flex:none}
.ann:hover .ann-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.ann-loc{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);background:#efe6d5;padding-left:12px}
.ann-loc select{border:1px solid var(--gold);background:#fff;font-size:11px;letter-spacing:.1em;padding:4px 8px}

/* header */
.section-header{position:sticky;top:0;z-index:60}
.hdr{position:relative;background:#0d0b0a;color:#fff;border-bottom:1px solid var(--gold-deep);transition:background .35s var(--ease),border-color .35s}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdr-h);gap:16px}
.hdr .logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.nav>a,.nav .has>a{display:inline-flex;align-items:center;gap:6px;line-height:1.1;text-align:center;padding:6px 0}
.nav a:hover{color:var(--gold-lite)}
.nl{display:inline-grid}
.has{position:relative}
.drop{position:absolute;top:100%;left:-18px;min-width:220px;background:#fff;color:var(--ink);padding:14px 0;box-shadow:0 18px 40px -20px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:.25s var(--ease);border-top:2px solid var(--gold)}
.has:hover .drop,.has:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:7px 20px;font-size:12px;letter-spacing:.12em}
.drop a:hover{background:#faf6ec;color:var(--gold-deep)}
.acts{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10px,1.2vw,18px)}
.icb{position:relative;display:inline-grid;place-items:center;width:30px;height:30px}
.cnt{position:absolute;top:-4px;right:-6px;min-width:17px;height:17px;border-radius:9px;background:var(--gold);color:#111;font-size:10px;display:grid;place-items:center;padding:0 4px}
.cnt[hidden]{display:none}
.burger{display:none}
body.dj-has-hero .hdr.clear{background:transparent;border-bottom-color:transparent}
body.dj-has-hero .hdr.clear:hover{background:#0d0b0a}
#main>.hero:first-child{margin-top:calc(-1 * var(--hdr-h) - 1px)}
@media (max-width:1100px){.nav{font-size:11.5px;gap:12px}}
@media (max-width:960px){
  .hdr-in{grid-template-columns:auto 1fr auto}
  .hdr .nav{display:none}.burger{display:inline-grid}
  .hdr .logo{justify-self:start}
  body.dj-has-hero .hdr.clear{background:#0d0b0a}
}
/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden}
.drawer.open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:.3s}
.drawer.open .scrim{opacity:1}
.drawer .panel{position:absolute;top:0;bottom:0;left:0;width:min(360px,88vw);background:#fff;transform:translateX(-100%);transition:transform .35s var(--ease);overflow-y:auto;padding:22px}
.drawer.right .panel{left:auto;right:0;transform:translateX(100%)}
.drawer.open .panel{transform:none}
.drawer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--gold)}
.mnav a,.mnav summary{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.14em;font-size:13px;cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav details a{padding-left:14px;font-size:12px}
/* search overlay */
.srch{position:fixed;inset:0 0 auto 0;z-index:95;background:#fff;padding:28px var(--gut);transform:translateY(-110%);transition:transform .35s var(--ease);box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
.srch.open{transform:none}
.srch form{display:flex;gap:12px;max-width:820px;margin:0 auto}
.srch input{flex:1;border:0;border-bottom:1px solid var(--ink);padding:12px 4px;font-size:18px;background:transparent}

/* hero */
.hero{position:relative;height:min(100svh,860px);min-height:460px;overflow:hidden;background:#111;color:#fff}
.hero video,.hero img.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.35) 100%)}
.hero-in{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:26px;text-align:center;padding:var(--gut);padding-top:calc(var(--hdr-h) + 20px)}
.hero h1{font-size:clamp(22px,2.6vw,38px);letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.hero-in>*{animation:rise .9s var(--ease) both}.hero-in>*:nth-child(2){animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@media (max-width:760px){.hero{height:62svh;min-height:380px}.hero h1{font-size:20px}}

/* perks */
.perks{background:#fff;border-bottom:1px solid var(--line)}
.perks-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:clamp(36px,5vw,58px);text-align:center}
.perk{display:grid;justify-items:center;gap:8px;align-content:start}
.perk .ic{width:30px;height:30px;stroke:var(--gold-deep);stroke-width:1.2;margin-bottom:6px}
.perk h3{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;line-height:1.4}
.perk p{font-size:13px;color:var(--muted)}
@media (max-width:860px){.perks-in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}}

/* promo band */
.promo{background:var(--stage);color:var(--stage-fg)}
.promo-in{display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding-block:clamp(26px,3vw,40px)}
.promo .tag{background:var(--gold);color:var(--stage);font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:5px 10px;flex:none}
.promo-t{flex:1;display:grid;gap:4px}
.promo .ar{font-family:"Tajawal",sans-serif;direction:rtl;text-align:left;color:var(--stage-dim);font-size:15px}
.promo h2{font-size:clamp(20px,2.4vw,34px);letter-spacing:.06em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo p.sub{color:var(--stage-dim);font-size:14px}
@media (max-width:760px){.promo-in{flex-direction:column;align-items:flex-start}}

/* product grid + card */
.grid{display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.grid.narrow{max-width:1100px;margin-inline:auto}
@media (max-width:990px){.grid{grid-template-columns:repeat(min(var(--cols,4),3),minmax(0,1fr))}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .grid.scroll-sm{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .grid.scroll-sm>*{scroll-snap-align:start}}
.card{position:relative;display:grid;gap:12px;align-content:start;min-width:0}
.card .ph{position:relative;display:block;aspect-ratio:3/4;background:var(--ph);overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--ease),transform 1.1s var(--ease)}
.card .ph img.b{opacity:0}
@media (hover:hover){.card:hover .ph img.b{opacity:1}.card:hover .ph img{transform:scale(1.04)}}
.badges{position:absolute;top:12px;left:12px;display:grid;gap:6px;z-index:2;justify-items:start}
.badge{background:var(--grad);color:#2b2208;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px}
.badge.sale{background:var(--gold-deep);color:#fff}
.badge.out{background:#fff;color:var(--ink)}
.card-info{display:grid;gap:3px}
.card-info .nm{text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.card-info .nm:hover{color:var(--gold-deep)}
.code{font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.price{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:14px;color:var(--gold-deep)}
.price s{color:var(--muted)}
.price .off{color:var(--gold-deep)}
.quick-add{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;opacity:0;transform:translateY(8px);transition:.3s var(--ease)}
@media (hover:hover){.card:hover .quick-add{opacity:1;transform:none}}
.quick-add .btn{width:100%;min-height:40px;background:rgba(255,255,255,.94);color:var(--ink);border-color:transparent}
.quick-add .btn:hover{background:var(--stage);color:#fff}

/* rail */
.rail{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;scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media (max-width:990px){.rail{grid-auto-columns:40%}}
@media (max-width:600px){.rail{grid-auto-columns:70%;gap:14px}}
.arrows{display:flex;gap:8px}
.arrows button{width:42px;height:42px;border:1px solid var(--gold);display:grid;place-items:center}
.arrows button:hover{background:var(--gold);color:#fff}

/* explore collections frames */
.frames{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.frame{grid-column:span 3;position:relative;display:block;overflow:hidden;color:#fff;border:1px solid var(--gold)}
.frame:nth-child(1),.frame:nth-child(2){grid-column:span 6}
.frame .ph{position:relative;display:block;aspect-ratio:3/4;background:#f3eee2}
.frame:nth-child(-n+2) .ph{aspect-ratio:4/3}
.frame .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:opacity .55s var(--ease),transform 1.1s var(--ease)}
.frame .ph img.a{object-fit:contain;background:linear-gradient(90deg,#f3eee2 0 18%,#fff 18% 82%,#f3eee2 82%)}
.frame .ph img.m{z-index:1}
@media (hover:hover){.frame:hover .ph img.m{opacity:0}.frame:hover .ph img{transform:scale(1.04)}}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(40,32,24,.62) 100%);z-index:2;pointer-events:none}
.frame-t{position:absolute;left:clamp(14px,1.6vw,22px);right:14px;bottom:clamp(14px,1.8vw,26px);z-index:3;display:grid;gap:6px;transition:transform .4s var(--ease)}
.frame-t small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.9}
.frame-t h3{font-size:clamp(15px,1.45vw,20px);letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.frame:nth-child(-n+2) .frame-t h3{font-size:clamp(18px,2vw,28px)}
.frame-t .go{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lite);opacity:0;transform:translateY(6px);transition:.35s var(--ease)}
@media (hover:hover){.frame:hover .frame-t{transform:translateY(-6px)}.frame:hover .go{opacity:1;transform:none}}
@media (max-width:760px){.frames{grid-template-columns:1fr 1fr}.frame,.frame:nth-child(1),.frame:nth-child(2){grid-column:span 1}.frame .ph,.frame:nth-child(-n+2) .ph{aspect-ratio:3/4}.frame-t h3,.frame:nth-child(-n+2) .frame-t h3{font-size:14px;letter-spacing:.06em}}

/* black edit belt */
.belt{position:relative;overflow:hidden;background:#fff}
.belt-track{display:flex;width:max-content;animation:belt 60s linear infinite}
.belt-track img{height:clamp(220px,30vw,420px);width:auto;max-width:none;flex:none}
@keyframes belt{to{transform:translateX(-50%)}}
.belt.titled::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.32) 100%);pointer-events:none}
.belt-title{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);z-index:2;white-space:nowrap;color:#fff;font-family:var(--display);font-size:clamp(13px,1.15vw,17px);letter-spacing:.3em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.be-cta{display:flex;justify-content:center;margin-top:clamp(22px,3vw,34px)}
@media (prefers-reduced-motion:reduce){.belt-track,.ann-track{animation:none}}

/* discover slider */
.ds{position:relative;max-width:1100px;margin:0 auto}
.ds-slide{display:none;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px);align-items:center}
.ds-slide.on{display:grid;animation:fade .7s var(--ease)}
@keyframes fade{from{opacity:0}}
.ds-model{aspect-ratio:4/5;background:#eee;overflow:hidden;position:relative}
.ds-model img{width:100%;height:100%;object-fit:cover}
.ds-prod{display:grid;justify-items:center;gap:10px;text-align:center}
.ds-pimg{position:relative;width:min(100%,340px);aspect-ratio:3/4;background:#fff;overflow:hidden}
.ds-pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.ds-pimg img.b{opacity:0}
@media (hover:hover){.ds-pimg:hover img.b{opacity:1}}
.ds-prod h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.ds-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:2}
.ds-nav.prev{left:-12px}.ds-nav.next{right:-12px}
.ds-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.ds-dots button{width:7px;height:7px;border-radius:50%;background:#cfc6b5}.ds-dots button.on{background:var(--ink)}
@media (max-width:760px){.ds-slide{grid-template-columns:1fr}.ds-nav{top:30%}}

/* GCC delivery */
.gcc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-block:1px solid var(--line)}
.gcc div{padding:22px 14px;display:grid;gap:4px;border-left:1px solid var(--line)}
.gcc div:first-child{border-left:0}
.gcc b{font-family:var(--display);font-weight:400;font-size:20px}
.gcc span{font-size:12px;color:var(--muted)}
@media (max-width:860px){.gcc{grid-template-columns:repeat(3,1fr)}.gcc div:nth-child(4){border-left:0}}

/* reviews */
.rv2-wrap{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.rv2-sum{display:flex;gap:12px;align-items:center}
.rv2-sum img{width:56px;height:56px;object-fit:contain;background:#111;padding:6px}
.stars{color:var(--gold);letter-spacing:2px}
.rv2-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rv2{margin:0;background:#f4f2ee;padding:18px;display:grid;gap:8px;align-content:start;scroll-snap-align:start;min-width:0}
.rv2-h{display:flex;gap:10px;align-items:center}
.rv2-av{width:34px;height:34px;border-radius:50%;background:var(--gold-deep);color:#fff;display:grid;place-items:center;font-size:14px}
.rv2 blockquote{margin:0;font-size:14px}
.rv2 .for{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
@media (max-width:760px){.rv2-wrap{grid-template-columns:1fr}.rv2-row{grid-auto-columns:78%}}

/* follow */
.follow .sec{padding-block:clamp(36px,4vw,56px)}
.follow .h-sec{font-size:clamp(18px,1.8vw,24px)}
.fl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.fl-card{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid rgba(176,141,60,.35);transition:border-color .3s}
.fl-card:hover{border-color:var(--gold-deep)}
.fl-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold-deep);color:var(--gold-deep)}
.fl-ic .ic{width:16px;height:16px}
.fl-card b{font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.fl-card span.h{font-size:12px;color:var(--gold-deep)}
@media (max-width:640px){.fl-card span.h{display:none}}

/* newsletter + footer */
.news{background:#efe6d5}
.news-in{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding-block:clamp(36px,5vw,60px)}
.news .field{display:flex;border-bottom:1px solid var(--ink)}
.news input{flex:1;border:0;background:transparent;padding:12px 2px}
.news button{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
@media (max-width:760px){.news-in{grid-template-columns:1fr}}
.ftr-wrap{background:var(--stage);color:var(--stage-fg)}
.ftr{padding-block:clamp(40px,5vw,64px);position:relative}
.ftr-cols{display:grid;grid-template-columns:1.3fr 2fr 1fr 1fr;gap:32px}
.ftr h3{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lite);margin-bottom:14px}
.ftr li a{display:block;padding:4px 0;font-size:14px}
.ftr li a:hover{color:var(--gold-lite)}
.ftr .fshop ul{columns:2;column-gap:24px}
.ftr .fshop a{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ftr .about{color:var(--stage-dim);font-size:14px;max-width:38ch}
.ftr .logo img{height:40px;width:auto}
.ftr-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--stage-line);font-size:12px;color:var(--stage-dim)}
.pay{display:flex;gap:8px;flex-wrap:wrap}.pay span{border:1px solid var(--stage-line);padding:3px 9px;font-size:11px}
.pay svg{height:22px;width:auto}
@media (max-width:900px){.ftr-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-cols{grid-template-columns:1fr}}

/* floating social */
.float{position:fixed;right:16px;bottom:18px;z-index:50;display:grid;gap:10px}
.float a{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.14);border:1px solid var(--line)}
.float a.wa{background:var(--wa);color:#fff;border-color:var(--wa)}

/* collection page */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:22px}
.plp-head{padding-block:clamp(18px,3vw,32px) clamp(16px,2vw,24px);display:grid;gap:8px}
.plp-head h1{font-size:clamp(26px,3vw,40px);text-transform:uppercase;letter-spacing:.06em}
.plp{display:grid;grid-template-columns:240px 1fr;gap:clamp(20px,3vw,40px);padding-bottom:70px}
.plp.nofacets{grid-template-columns:1fr}
.facets details{border-bottom:1px solid var(--line);padding:12px 0}
.facets summary{cursor:pointer;font-size:12px;letter-spacing:.2em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.facets summary::-webkit-details-marker{display:none}
.facets label{display:flex;gap:10px;align-items:center;font-size:14px;padding:4px 0;cursor:pointer}
.facets label span{margin-left:auto;color:var(--muted);font-size:12px}
.facets .price-range{display:flex;gap:8px;padding-top:8px}
.facets .price-range input{width:100%;border:1px solid var(--line);padding:8px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar select{border:1px solid var(--line);background:#fff;padding:10px 12px}
.active-f{display:flex;gap:8px;flex-wrap:wrap}
.active-f a{border:1px solid var(--line);padding:4px 10px;font-size:12px}
.fbtn{display:none}
@media (max-width:900px){.plp{grid-template-columns:1fr}.facets{display:none}.facets.open{display:block}.fbtn{display:inline-flex}}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}
.pagination a,.pagination span{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);padding:0 10px}
.pagination .current{background:var(--stage);color:#fff;border-color:var(--stage)}
.empty{padding:60px 0;text-align:center;display:grid;gap:14px;justify-items:center}

/* product page */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);padding-block:20px 70px}
.gal{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;position:sticky;top:calc(var(--hdr-h) + 16px)}
.thumbs{display:grid;gap:10px}
.thumbs button{aspect-ratio:3/4;background:var(--ph);overflow:hidden;border:1px solid transparent}
.thumbs button.on{border-color:var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.main-img{aspect-ratio:3/4;background:var(--ph);overflow:hidden;position:relative}
.main-img img{width:100%;height:100%;object-fit:cover}
.info{display:grid;gap:18px;align-content:start}
.info h1{font-size:clamp(24px,2.6vw,34px);text-transform:uppercase;letter-spacing:.08em}
.info .price{font-size:18px}
.info .desc{color:#4a453f}
.opt-h{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0}
.opts span{display:inline-grid;place-items:center;min-width:48px;height:44px;padding:0 14px;border:1px solid var(--line);background:#fff;font-size:13px;cursor:pointer}
.opts input:checked+span{border-color:var(--gold);background:#fbf6e8}
.opts input:focus-visible+span{outline:2px solid var(--gold)}
.opts input.na+span{color:#bbb;text-decoration:line-through}
.qty{display:inline-flex;border:1px solid var(--line);background:#fff}
.qty button{width:44px;height:46px}
.qty input{width:46px;text-align:center;border:0;background:transparent}
.buy-row{display:grid;grid-template-columns:auto 1fr;gap:12px}
.wa-ask{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--wa)}
.acc details{border-top:1px solid var(--line);padding:14px 0}
.acc summary{cursor:pointer;font-size:12px;letter-spacing:.2em;text-transform:uppercase;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc .rte{padding-top:10px}
@media (max-width:900px){.pdp{grid-template-columns:1fr}.gal{position:static;grid-template-columns:1fr}.thumbs{grid-auto-flow:column;grid-auto-columns:64px;overflow-x:auto;order:2}}

/* cart */
.cart-tbl{display:grid;gap:0}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-row img{width:96px;aspect-ratio:3/4;object-fit:cover;background:var(--ph)}
.cart-sum{display:grid;gap:14px;max-width:420px;margin-left:auto;padding-top:24px}
.cart-sum .tot{display:flex;justify-content:space-between;font-size:18px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;z-index:99;background:var(--stage);color:#fff;padding:14px 22px;font-size:13px;letter-spacing:.06em;transition:.35s var(--ease);display:flex;gap:16px;align-items:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast a{color:var(--gold-lite);text-decoration:underline}

/* generic rich text pages */
.rte{max-width:780px}
.rte h2,.rte h3{margin:1.4em 0 .5em}
.rte p{margin:0 0 1em}
.rte a{text-decoration:underline}
.rte img{height:auto}
.form{display:grid;gap:14px;max-width:520px}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--line);background:#fff;padding:12px}
.form .err{color:#9a3a22;font-size:14px}
.form .ok{color:var(--wa);font-size:14px}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
.no-js .rv{opacity:1;transform:none}

/* WordPress extras */
.admin-bar .section-header{top:32px}
@media (max-width:782px){.admin-bar .section-header{top:46px}}
.wa-ask svg{width:18px;height:18px}
.news .btn svg,.btn .ic{width:18px;height:18px}
.alignwide{max-width:1200px;margin-inline:auto}.alignfull{width:100%}
.dj-widget{margin-bottom:22px}.dj-widget-title{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.price ins{text-decoration:none;order:1}.price del{color:var(--muted);order:2}.price .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Header menu: one line per item, menus close to the centred logo */
.hdr .nl{display:inline!important}
.hdr .nl>span{display:inline!important}
.hdr .nl>span+span::before{content:" "}
.hdr .nav{gap:clamp(14px,1.6vw,26px)!important;font-size:12.5px!important;letter-spacing:.1em!important;flex-wrap:nowrap!important}
.hdr .nav>a,.hdr .nav .has>a{white-space:nowrap!important;line-height:1.2!important}
.hdr-in>.nav{justify-self:end!important;justify-content:flex-end!important;margin-right:clamp(20px,2.6vw,44px)!important;margin-left:0!important}
.hdr-in>.logo{justify-self:center!important}
.hdr .acts{justify-content:flex-end!important;min-width:0}
.hdr .acts>.nav{margin-left:clamp(20px,2.6vw,44px)!important;margin-right:auto!important;justify-content:flex-start!important}
@media (max-width:1240px){.hdr .nav{font-size:11.5px!important;gap:12px!important;letter-spacing:.07em!important}.hdr-in>.nav{margin-right:16px!important}.hdr .acts>.nav{margin-left:16px!important}}

/* Tighter spacing between home page sections */
.sec{padding-block:clamp(30px,3.6vw,52px)!important}
.sec-head{margin-bottom:clamp(18px,2vw,28px)!important}
.band.follow .sec{padding-block:clamp(26px,3vw,40px)!important}

/* No diamond before small headings: gold line only */
.eyebrow::before{width:36px!important;height:1px!important;background:var(--grad)!important}

/* Even tighter spacing between sections */
.sec{padding-block:clamp(22px,2.4vw,34px)!important}
.sec-head{margin-bottom:clamp(14px,1.6vw,22px)!important}
.eyebrow::after{display:none!important}

/* ===== Responsive polish (phone + desktop) ===== */
/* NEW / discount tags: smaller so the photo stays visible */
.badges{top:10px!important;left:10px!important;gap:4px!important}
.badge{font-size:9px!important;letter-spacing:.14em!important;padding:4px 7px!important;line-height:1.2}
/* Promotion band: centred */
.promo-in{flex-direction:column!important;align-items:center!important;justify-content:center;text-align:center;gap:14px!important;padding-block:clamp(28px,4vw,46px)!important}
.promo-t{justify-items:center;text-align:center}
.promo .ar{text-align:center!important;direction:rtl}
.promo h2{max-width:22ch;margin-inline:auto}
/* Discover: product column a little narrower on desktop */
.ds-pimg{width:min(100%,300px)}

@media (max-width:760px){
	.badges{top:6px!important;left:6px!important;gap:3px!important}
	.badge{font-size:8px!important;letter-spacing:.1em!important;padding:3px 5px!important}
	/* floating buttons: WhatsApp only on phones */
	.float{right:12px;bottom:14px}
	.float a:not(.wa){display:none}
	.float a{width:44px;height:44px}
	/* store qualities */
	.perks-in{gap:18px 12px;padding-block:26px}
	.perk h3{font-size:11px;letter-spacing:.14em}
	.perk p{font-size:12px}
	/* promotion */
	.promo h2{font-size:20px;letter-spacing:.04em}
	.promo p.sub{font-size:13px}
	.promo .btn{min-height:42px;padding:10px 20px}
	/* product cards */
	.card-info .nm{font-size:12.5px}
	.card .price,.card-info .price{font-size:12.5px;gap:6px}
	.card .price del{font-size:11px}
	/* collection frames: title only */
	.frame-t small{display:none}
	.frame-t{left:10px;right:8px;bottom:10px}
	/* Discover: photo and product side by side, as on desktop */
	.ds-slide.on{display:grid;grid-template-columns:1.15fr 1fr!important;gap:12px!important;align-items:center}
	.ds-model{aspect-ratio:3/4}
	.ds-prod{gap:6px}
	.ds-pimg{width:100%;max-width:150px}
	.ds-prod h3{font-size:12px;letter-spacing:.08em}
	.ds-prod .price{font-size:12px;justify-content:center}
	.ds-prod .code{font-size:10px}
	.ds-prod .btn{min-height:36px;padding:8px 12px;font-size:9.5px;letter-spacing:.14em}
	.ds-nav{width:34px;height:34px;top:42%}
	.ds-nav .ic{width:16px;height:16px}
	.ds-nav.prev{left:-8px}.ds-nav.next{right:-8px}
	/* delivery times */
	.gcc{grid-template-columns:repeat(2,minmax(0,1fr))}
	.gcc div{padding:12px 10px;border-left:0;border-top:1px solid var(--line)}
	.gcc div:nth-child(-n+2){border-top:0}
	.gcc div:nth-child(even){border-left:1px solid var(--line)}
	.gcc b{font-size:15px}
	.gcc span{font-size:11px}
	/* headings */
	.h-sec{font-size:20px!important;letter-spacing:.05em}
	.sec-head .lnk{font-size:10px}
	/* announcement bar */
	.ann{font-size:10px}
}

/* Delivery table: flags + full border */
.gcc{border:1px solid var(--line)!important}
.gcc .flag{width:30px;height:20px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);margin-bottom:8px}
@media (max-width:760px){.gcc .flag{width:24px;height:16px;margin-bottom:6px}}

/* Footer collections: one line each */
.ftr .fshop ul{columns:2;column-gap:28px}
.ftr .fshop a{white-space:nowrap;font-size:11.5px;letter-spacing:.1em}
@media (max-width:420px){.ftr .fshop a{font-size:10.5px;letter-spacing:.06em}.ftr .fshop ul{column-gap:16px}}

/* Newsletter form */
.dj-sub{display:grid;gap:12px}
.dj-sub-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dj-sub-main{grid-template-columns:1fr auto}
.dj-sub input{width:100%;min-height:48px;border:1px solid #d9ccb3;background:#fff;padding:12px 14px;font:inherit;font-size:14px;color:var(--ink);border-radius:0}
.dj-sub input:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.dj-sub .btn{min-height:48px}
.dj-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.dj-sub-msg{font-size:13px;padding:10px 12px;border-left:3px solid var(--gold);background:#fff}
.dj-sub-msg.err{border-left-color:#9a3a22;color:#9a3a22}
.dj-sub-wa a{display:inline-flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.06em;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dj-sub-wa .ic{width:16px;height:16px;color:var(--wa)}
@media (max-width:560px){.dj-sub-row,.dj-sub-main{grid-template-columns:1fr}}

/* Show the whole abaya (collar to hem) in product photos */
.card .ph,.ds-pimg,.lt-ph{aspect-ratio:2/3!important;background:#fff}
.card .ph img,.ds-pimg img{object-fit:contain!important;object-position:50% 50%!important;padding:4% 3% 2%}
@media (hover:hover){.card:hover .ph img{transform:scale(1.02)}}

/* Wishlist + compare buttons on cards */
.card,.woocommerce ul.products li.product{position:relative}
.dj-favs{position:absolute;top:8px;right:8px;z-index:3;display:grid;gap:6px}
.dj-fav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 1px 6px rgba(0,0,0,.08);transition:transform .2s,color .2s,background .2s}
.dj-fav .ic{width:17px;height:17px;stroke-width:1.5}
.dj-fav:hover{transform:scale(1.08)}
.dj-heart.is{color:#b3261e}.dj-heart.is .ic{fill:currentColor}
.dj-cmp.is{background:var(--stage);color:var(--gold-lite)}
@media (max-width:760px){.dj-favs{top:5px;right:5px;gap:4px}.dj-fav{width:28px;height:28px}.dj-fav .ic{width:14px;height:14px}.dj-hide-sm{display:none!important}}

/* Wishlist / compare pages */
.dj-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:#fff}
.dj-cmp-table{border-collapse:collapse;width:100%;min-width:calc(140px + var(--n) * 220px);table-layout:fixed}
.dj-cmp-table th,.dj-cmp-table td{border-bottom:1px solid var(--line);padding:14px;vertical-align:top;text-align:left;font-size:14px}
.dj-cmp-table tbody th{width:140px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;background:#faf7f0}
.dj-cmp-table thead th:first-child{width:140px;background:#faf7f0}
.dj-cmp-table thead th{position:relative;font-weight:400}
.dj-cmp-ph{display:block;aspect-ratio:2/3;background:#fff;margin-bottom:10px}
.dj-cmp-ph img{width:100%;height:100%;object-fit:contain}
.dj-cmp-nm{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.dj-cmp-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:16px;line-height:1;z-index:2}
.dj-cmp-table .btn{min-height:40px;padding:8px 14px;font-size:10px}
.stars{color:var(--gold);letter-spacing:2px}
@media (max-width:760px){.dj-cmp-table{min-width:calc(96px + var(--n) * 170px)}.dj-cmp-table tbody th,.dj-cmp-table thead th:first-child{width:96px;font-size:10px;letter-spacing:.1em;padding:10px}.dj-cmp-table td{font-size:12.5px;padding:10px}}

/* Availability dot */
.dj-avail{font-size:13px;color:var(--muted)}
.dj-avail .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1f8f55;margin-right:8px;vertical-align:middle}
.dj-avail .dot.out{background:#b3261e}
.dj-avail a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Hero video: dark background while loading, then fade in (no old cover image) */
.hero{background:#0d0b0a}
.hero video.dj-hero-vid{opacity:0;transition:opacity .6s ease}
.hero video.dj-hero-vid.is-on,.hero video.dj-hero-vid[poster]{opacity:1}
.hero:not(.vid-on) .hero-in{animation-delay:.2s}

/* Opening screen: logo + name, then fades into the site (pure CSS, never blocks) */
.dj-intro{position:fixed;inset:0;z-index:200;background:#0d0b0a;display:grid;place-items:center;animation:djIntroOut .6s ease 1.1s forwards;pointer-events:none}
.dj-intro-in{display:grid;justify-items:center;gap:14px;animation:djIntroIn .7s ease both}
.dj-intro img{width:clamp(120px,14vw,180px);height:auto}
.dj-intro-name{font-family:var(--display);color:#e0c15a;font-size:clamp(14px,1.6vw,20px);letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.dj-intro-line{display:block;height:1px;width:0;background:linear-gradient(90deg,transparent,#c9a227,transparent);animation:djIntroLine .9s ease .2s forwards}
@keyframes djIntroIn{from{opacity:0;transform:translateY(8px)}}
@keyframes djIntroLine{to{width:min(220px,50vw)}}
@keyframes djIntroOut{to{opacity:0;visibility:hidden}}
.dj-intro-seen .dj-intro{display:none}
@media (prefers-reduced-motion:reduce){.dj-intro{animation-duration:.01s;animation-delay:.6s}.dj-intro-in,.dj-intro-line{animation:none}.dj-intro-line{width:180px}}

/* Product photos: fill the frame, anchored at the top (no empty bands, no cut collars) */
.card .ph,.ds-pimg{aspect-ratio:2/3!important;background:#f4f1ec}
.card .ph img,.ds-pimg img{object-fit:cover!important;object-position:50% 0!important;padding:0!important;width:100%!important;height:100%!important}
.dj-cmp-ph img{object-fit:cover;object-position:50% 0}

/* Discover Dar Jana: keep heads in view */
.ds-model{aspect-ratio:3/4!important;background:#f4f1ec}
.ds-model img{width:100%;height:100%;object-fit:cover!important;object-position:50% 0!important}
.ds-pimg img{object-position:50% 0!important}
/* Explore frames: anchor at the top too */
.frame .ph img{object-position:50% 0!important}

/* Explore Collections: taller large frames + photos anchored at the top, so heads are never cut */
.frame:nth-child(-n+2) .ph{aspect-ratio:5/4!important}
.frame .ph{background:#ecebee}
.frame .ph img,.frame .ph img.m,.frame .ph img.a{object-fit:cover!important;object-position:50% 0!important}
@media (max-width:760px){.frame:nth-child(-n+2) .ph,.frame .ph{aspect-ratio:3/4!important}}

/* 1.4.6 — cards match the product photo shape (984×1599 ≈ 8/13) so the hem is never cut */
.card .ph,.ds-pimg,.lt-ph{aspect-ratio:8/13!important;background:#fff}
.card .ph img,.ds-pimg img{object-fit:cover!important;object-position:50% 0!important}
.dj-cmp-ph{aspect-ratio:8/13}
.dj-cmp-ph img{object-fit:contain;object-position:50% 50%}

/* 1.4.7 — promotion heading on one line on desktop (phones keep two lines) */
@media (min-width:761px){.promo h2{max-width:none;white-space:nowrap;font-size:clamp(20px,2.3vw,34px)}}

/* 1.4.8 — show every abaya whole: Discover photo and Explore frames never cut the hem or blow photos up */
.ds-model{background:#fff!important}
.ds-model img{object-fit:cover!important;object-position:50% 0!important}
.frame .ph{background:#fff!important}
.frame:nth-child(-n+2) .ph img,.frame:nth-child(-n+2) .ph img.m,.frame:nth-child(-n+2) .ph img.a{object-fit:contain!important;object-position:50% 50%!important}
.frame:nth-child(n+3) .ph{aspect-ratio:8/13!important}
@media (max-width:760px){.frame .ph,.frame:nth-child(-n+2) .ph{aspect-ratio:8/13!important}.frame .ph img,.frame .ph img.m,.frame .ph img.a{object-fit:cover!important;object-position:50% 0!important}}
.frame .ph img,.frame .ph img.a{background:#fff!important}

/* 1.4.9 — photos come in several shapes: always show the whole abaya inside the card */
.card .ph img,.ds-pimg img{object-fit:contain!important;object-position:50% 50%!important;background:#fff}

/* 1.4.13 — Discover: large photo of the girl on the left, product close beside it (desktop) */
@media (min-width:761px){
.ds-slide.on{grid-template-columns:minmax(0,560px) 320px!important;justify-content:center;gap:clamp(24px,3vw,48px)!important}
.ds-model{aspect-ratio:4/5!important;width:100%;height:auto;background:#eee!important}
.ds-model img{object-fit:cover!important;object-position:50% 0!important}
.ds-prod .ds-pimg{width:100%!important}
}

/* 1.4.12 — Explore: girl wearing the abaya in front, the whole abaya on hover */
.frame .ph img.m{object-fit:cover!important;object-position:50% 8%!important;transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.frame .ph img.a{object-fit:contain!important;object-position:50% 50%!important;background:#fff!important}
.frame:nth-child(n) .ph img.m{object-fit:cover!important;object-position:50% 0!important}
.frame:nth-child(n) .ph img.a{object-fit:contain!important;object-position:50% 50%!important;background:#fff!important}

/* 1.5.0 — opening screen: photo grid with the big DAR JANA name (Zara-style), then the cover video */
.dj-intro.dj-intro-grid{display:block;place-items:initial;background:#e7e3dd;pointer-events:auto;cursor:pointer;animation:djGridOut .9s ease var(--dj-intro-t,3s) forwards}
.dj-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(3,1fr);gap:1px;background:#c9c3ba}
.dj-tile{position:relative;overflow:hidden;background:#d9d4cc;opacity:0;animation:djTile .55s ease forwards;animation-delay:calc(var(--i) * 45ms)}
.dj-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.dj-word{position:absolute;left:0;right:0;bottom:7vh;text-align:center;font-family:"Bodoni Moda","Didot","Bodoni 72",serif;font-weight:500;font-size:clamp(56px,15vw,260px);line-height:.82;letter-spacing:-.01em;color:#0d0b0a;white-space:nowrap;animation:djWord 1s cubic-bezier(.2,.7,.2,1) .55s both;pointer-events:none}
.dj-intro-grid.dj-intro-go{animation:djGridOut .55s ease forwards!important}
@keyframes djTile{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes djWord{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes djGridOut{to{opacity:0;visibility:hidden;transform:scale(1.03)}}
@media (max-width:760px){.dj-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.dj-tile:nth-child(n+17){display:none}.dj-word{font-size:17.5vw;bottom:15vh}}
@media (prefers-reduced-motion:reduce){.dj-tile,.dj-word{animation:none;opacity:1}}

/* 1.6.2 — cover: editorial transition
   photos wipe in column by column (alternating up / down) with a slow zoom-out,
   the logo settles, DAR JANA rises letter by letter in gold, then the whole cover lifts away to the video */
.dj-intro.dj-intro-grid{background:#0d0b0a;animation:djLift 1s cubic-bezier(.76,0,.24,1) var(--dj-intro-t,3s) forwards}
@keyframes djLift{to{transform:translateY(-100%);visibility:hidden}}
.dj-intro-grid.dj-intro-go{animation:djLift .8s cubic-bezier(.76,0,.24,1) forwards!important}
.dj-grid{background:#0d0b0a;gap:2px}
.dj-tile{opacity:1;background:#1a1613;clip-path:inset(0 0 100% 0);animation:djWipe .95s cubic-bezier(.77,0,.18,1) forwards;animation-delay:calc(var(--c) * 90ms + var(--r) * 70ms + .05s)}
.dj-tile:nth-child(even){clip-path:inset(100% 0 0 0)}
.dj-tile img{transform:scale(1.22) translateY(-4%);animation:djSettle 1.8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:inherit}
.dj-tile:nth-child(even) img{transform:scale(1.22) translateY(4%)}
@keyframes djWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes djSettle{to{transform:scale(1) translateY(0)}}
.dj-grid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(10,8,6,.78),rgba(10,8,6,.35) 55%,transparent);opacity:0;animation:djShade .8s ease .5s forwards;pointer-events:none}
@keyframes djShade{to{opacity:1}}
.dj-brand{position:absolute;left:0;right:0;bottom:6vh;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,18px);pointer-events:none}
.dj-brand-logo{width:clamp(90px,9vw,150px);height:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.45));opacity:0;animation:djLogo 1s cubic-bezier(.2,.7,.2,1) .45s forwards}
@keyframes djLogo{from{opacity:0;transform:translateY(-14px) scale(.85)}to{opacity:1;transform:none}}
.dj-brand .dj-word{position:static;animation:none;background:none;color:inherit;filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));font-size:clamp(48px,11.5vw,210px);line-height:.95;letter-spacing:.06em;padding-left:.06em;text-align:center;white-space:nowrap;overflow:hidden;padding-bottom:.06em}
.dj-l{display:inline-block;background:linear-gradient(180deg,#f6e3a1 0%,#d9b442 45%,#a57d16 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(105%);opacity:0;animation:djLetter .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--k) * 70ms + .7s)}
.dj-sp{display:inline-block;width:.5em}
@keyframes djLetter{60%{opacity:1}to{transform:none;opacity:1}}
@media (max-width:760px){
.dj-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}
.dj-tile:nth-child(n+17){display:none}
.dj-tile{animation-delay:calc(var(--mc) * 90ms + var(--mr) * 80ms + .05s)}
.dj-brand{bottom:12vh}.dj-brand-logo{width:84px}
.dj-brand .dj-word{font-size:14vw;letter-spacing:.04em;padding-left:.04em}
}
@media (prefers-reduced-motion:reduce){.dj-tile,.dj-tile img,.dj-l,.dj-brand-logo{animation:none;clip-path:none;transform:none;opacity:1}}

/* 1.6.3 — cover: photos open one by one from the first, line by line, quickly */
.dj-tile{animation-duration:.55s;animation-delay:calc(var(--i) * 45ms + .05s)}
.dj-tile img{animation-duration:1.2s}
@media (max-width:760px){.dj-tile{animation-delay:calc(var(--i) * 55ms + .05s)}}

/* 1.6.4 — no lift at the end: the cover simply fades to the video */
@keyframes djFadeAway{to{opacity:0;visibility:hidden}}
.dj-intro.dj-intro-grid{animation:djFadeAway .6s ease var(--dj-intro-t,3s) forwards}
.dj-intro-grid.dj-intro-go{animation:djFadeAway .4s ease forwards!important}

/* 1.7.1 — Explore with 7 frames: 2 large on top, 5 in the second row */
@media (min-width:761px){
.frames-n7{grid-template-columns:repeat(10,minmax(0,1fr))}
.frames-n7 .frame{grid-column:span 2}
.frames-n7 .frame:nth-child(1),.frames-n7 .frame:nth-child(2){grid-column:span 5}
}
@media (max-width:760px){
.frames-n7 .frame:last-child{grid-column:span 2}
.frames-n7 .frame:last-child .ph{aspect-ratio:4/3!important}
.frames-n7 .frame:last-child .ph img{object-fit:cover!important;object-position:50% 12%!important}
}
.dj-intro-seen .dj-intro,.dj-intro-seen .dj-intro.dj-intro-grid{display:none!important}

/* 1.8.1 — Explore: same layout as before, with small touches: gold number, inset gold frame line, caption underline */
.frame-no{font-size:11px;letter-spacing:.14em;color:var(--gold-lite,#e8c860);display:block;margin-bottom:2px}
.frame .ph::before{content:"";position:absolute;inset:10px;border:1px solid rgba(232,200,96,.55);z-index:3;pointer-events:none;opacity:.6;transition:opacity .4s,inset .5s var(--ease)}
.frame-t h3{position:relative;padding-bottom:8px}
.frame-t h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:1px;background:var(--gold);transition:width .5s var(--ease)}
@media (hover:hover){.frame:hover .ph::before{opacity:1;inset:14px}.frame:hover .frame-t h3::after{width:70px}}
@media (max-width:760px){.frame .ph::before{inset:6px}.frame-no{font-size:10px}}
.dj-grid::after{height:42%!important;background:linear-gradient(to top,rgba(10,8,6,.62),rgba(10,8,6,.22) 55%,transparent)!important}