/* ===================== v34 =====================
   1. Scroll karne par sirf category bar (menu) upar rehta hai; logo wali upar ki patti scroll ke saath ghayab ho jati hai.
   2. Hero video / photo kat kar nahi dikhti: poori nazar aati hai (aas paas blur background).
   3. Laptop, phone aur bari screen ke hisab se hero aur photo sizes.
   4. 3D effects: hero depth, tilt cards, 3D reveal, 3D menu, 3D text/buttons.
   Is file ko hata dein to site wapas pehle jaisi ho jati hai. */

:root{--hx:0px}

/* ---------- 1. header: only the category bar stays ---------- */
header{top:calc(var(--hx) * -1)}

/* ---------- 2. media fit (JS adds .fit and a blurred .bk canvas) ---------- */
.slot .bk{display:none}
.slot.fit>i{display:none}
.slot.fit .bk{display:block;position:absolute;left:-6%;top:-6%;width:112%;height:112%;z-index:0;filter:blur(26px) brightness(.7) saturate(1.15);pointer-events:none}
.slot.fit video,.slot.fit img.ok{object-fit:contain;z-index:1}
.cv .slot.cvv,.cv .slot.fit{animation:none}

/* ---------- 3. sizes per device ---------- */
/* --hh = ticker + header height (set by JS), so the hero always fits the laptop screen under the header */
:root{--hh:170px}
html body{--hv:calc(100svh - var(--hh))}

/* laptop and desktop: shorter heroes */
html body .cine{min-height:0;height:clamp(500px,calc(var(--hv) - 20px),700px)}
html body .h-full,html body .h-full.mini{min-height:0;height:clamp(380px,calc(var(--hv) - 60px),580px)}
html body .h-full.mini{height:clamp(340px,calc(var(--hv) - 90px),500px)}
.hsl .cc{padding:36px 6vw 120px}
.cc h1{font-size:clamp(36px,5.2vw,80px)}
.cc .sub{margin:14px auto 24px}
.hdots{bottom:84px}
@media(min-width:901px) and (max-height:780px){.trust,.cc>.orn{display:none}}

/* big displays (27", 4K, ultra-wide) */
@media(min-width:1800px){
 html body .cine{height:clamp(640px,calc(var(--hv) - 20px),820px)}
 html body .h-full,html body .h-full.mini{height:clamp(480px,calc(var(--hv) - 60px),680px)}
 section.rv:not(.rvfull){padding-left:max(5vw,calc((100vw - 1720px)/2));padding-right:max(5vw,calc((100vw - 1720px)/2))}
 .cc{max-width:1200px}
}
/* tablet */
@media(max-width:900px){
 html body .cine{height:clamp(520px,var(--hv),680px)}
 html body .h-full,html body .h-full.mini{height:clamp(340px,calc(var(--hv) - 120px),480px)}
 .hsl .cc{padding:40px 7vw 190px}
}
/* phone */
@media(max-width:600px){
 html body .cine{height:clamp(560px,var(--hv),720px)}
 html body .h-full,html body .h-full.mini{height:clamp(300px,calc(var(--hv) - 200px),400px)}
 .trust,.cc>.orn{display:none}
 .hsl .cc{padding:36px 6vw 190px}
 .hdots{bottom:150px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
 .cats,.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .cats h3{font-size:18px}
}

/* hero: transparent, picture and video clearly visible (text keeps its own shadow) */
html body .hsl::before{background:radial-gradient(ellipse at 50% 48%,#0000002e,#00000012 70%,#0000 100%),linear-gradient(180deg,#00000040,#0000 24%,#0000 62%,#0000004d)}
html body .h-full::before{background:linear-gradient(90deg,#00000066,#0000 65%)}
html body .h-full.v1::before{background:#00000033}
html body .h-full.v2::before{background:linear-gradient(270deg,#00000066,#0000 65%)}
html body .cstrip{background:linear-gradient(180deg,#0000,#00000066)}
.cc .sub,.h-full .sub,.cc .eb,.h-full .eb{text-shadow:0 1px 10px #000a}
.cmute{display:none!important}
.cine[data-s="0"] .hdots button.on::after{animation-duration:6.5s}

/* home: the three "edit" video panels shorter */
html body .hp,html body .hp.p1,html body .hp.p2,html body .hp.c{aspect-ratio:3/3.7}

/* ELIN story pictures: wider, shorter */
html body .story{grid-template-columns:.7fr 1.3fr}
html body .story .storyshw,html body .story .slot{aspect-ratio:16/10;max-height:420px}
@media(max-width:800px){html body .story{grid-template-columns:1fr}html body .story .storyshw,html body .story .slot{aspect-ratio:4/3;max-height:320px}}

/* product pictures: less tall */
html[data-th]:not([data-th=home]){--ar:4/5}
html[data-th=footwear]{--ar:1/1}
.p .slot{aspect-ratio:var(--ar)}

/* banners: lower */
html body .fb{aspect-ratio:3.4/1;min-height:230px}
html body .cband .cbn{height:max(300px,30vw)}
html body .band .slot{min-height:260px}
@media(max-width:900px){html body .cband .cbn{height:280px}}
@media(max-width:600px){html body .fb{min-height:220px}html body .cband .cbn{height:240px}}
@media(min-width:1800px){html body .fb{max-height:640px}html body .cband .cbn{height:min(30vw,560px)}}

/* wholesale: shorter hero video and tiles */
html[data-th=reseller] .vgrid .vt,html[data-th=reseller] .rvfull .ct.reels>.vt:nth-child(n){aspect-ratio:1/1;max-height:60vh}

/* round collection photos look like 3D spheres */
.cir .cm{box-shadow:0 10px 18px #00000047,inset -6px -8px 14px #00000040}
.cir .cm::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,#ffffff8f,#ffffff00 40%,#00000033 100%);pointer-events:none}
.cst{padding-top:30px}

/* ---------- 4. 3D ---------- */
@media(prefers-reduced-motion:no-preference){

 /* hero depth: video layer and text layer move at different speeds */
 .cine,.h-full{--mx:0;--my:0;--sy:0}
 .cine .cv,.h-full .hm{inset:-18px;transform:translate3d(calc(var(--mx) * -10px),calc(var(--my) * -8px + var(--sy) * .22px),0);transition:transform .3s ease-out;will-change:transform}
 .cine .cc,.h-full .ht{transform:translate3d(calc(var(--mx) * 14px),calc(var(--my) * 10px - var(--sy) * .08px),0);transition:transform .3s ease-out}
 .cc h1,.h-full .ht h1{text-shadow:0 1px 0 #0003,0 2px 0 #0003,0 3px 0 #00000026,0 4px 0 #0000001f,0 5px 0 #00000018,0 6px 8px #0006,0 18px 46px #000b}

 /* sections rise out of the screen in 3D */
 .rv{transform:perspective(1400px) translate3d(0,46px,-80px) rotateX(9deg);transform-origin:50% 0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
 .rv.in{transform:none}
 @keyframes pop3d{from{opacity:0;transform:perspective(900px) translateY(36px) rotateX(16deg) rotateY(-10deg) translateZ(-50px)}}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>*{animation:pop3d .9s cubic-bezier(.2,.7,.2,1) backwards}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(2){animation-delay:.07s}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(3){animation-delay:.14s}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(4){animation-delay:.21s}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(5){animation-delay:.28s}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(6){animation-delay:.35s}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(7){animation-delay:.42s}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(8){animation-delay:.49s}
 .rv.in :is(.grid,.cats,.cols,.pair,.hpan)>:nth-child(n+9){animation-delay:.56s}

 /* raised section titles */
 .sh h2{text-shadow:0 1px 0 #fff,0 2px 0 #e9dfc4,0 3px 0 #ddd0a8,0 9px 14px #0000001c}

 /* 3D tilt cards (mouse only; JS adds .t3 and --rx --ry --sx --sy) */
 .p,.vt,.hp,.cats a,.cols a,.pair a{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
 html body .t3.t3{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(16px);transition:transform .12s linear,box-shadow .3s;transform-style:preserve-3d;box-shadow:calc(var(--sx,0) * 1px) calc(var(--sy,10) * 1px + 22px) 54px #0000004d;z-index:2}
 .p.t3 .slot{transform:translateZ(26px)}

 /* menu panel opens like a 3D flap */
 #mega{transform-origin:50% 0;transform:perspective(1000px) rotateX(-9deg) translateY(-8px)}
 #mega.on{transform:none}

 /* raised buttons */
 .cta .btn:not(.o),.fbt .btn:not(.o){box-shadow:0 1px 0 #ffffff40 inset,0 4px 0 #00000059,0 14px 24px #00000040;transition:transform .2s,box-shadow .2s}
 .cta .btn:not(.o):hover,.fbt .btn:not(.o):hover{transform:translateY(-3px);box-shadow:0 1px 0 #ffffff40 inset,0 7px 0 #00000059,0 20px 30px #00000045}
 .cta .btn:not(.o):active,.fbt .btn:not(.o):active{transform:translateY(3px);box-shadow:0 1px 0 #00000059,0 5px 10px #00000040}

 /* hero slides turn in 3D when they change */
 .hsls{perspective:1600px}
 .hsl{transform:rotateY(-14deg) translateZ(-140px) scale(.96);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),visibility 0s linear 1s}
 .hsl.on{transform:none;transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
 .gc,.sfr{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
 .cir .cm{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
 .cir:hover .cm{transform:translateY(-6px) scale(1.1) rotateY(18deg);box-shadow:0 18px 26px #00000059,inset -6px -8px 14px #00000040}
}


/* ---------- 5. transparent header over the hero (home + every category page) ---------- */
:root{--hdr:150px}
body.hpage header{margin-bottom:calc(var(--hdr) * -1)}
body.hpage.hov header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-bottom:0}
body.hpage.hov header nav{background:transparent;border-top:1px solid #ffffff38}
body.hpage.hov header::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-34px;background:linear-gradient(180deg,#000000b3,#0000);pointer-events:none;z-index:-1}
body.hpage.hov header .topl small,body.hpage.hov header .topl a,body.hpage.hov header nav>div>a,body.hpage.hov header .mmb{color:#fff;text-shadow:0 1px 8px #0009}
body.hpage.hov header .topl a:hover,body.hpage.hov header nav>div:hover>a,body.hpage.hov header nav>div>a:hover{color:#f3d57a}
body.hpage.hov header nav a.sale{color:#ff8a99}
body.hpage.hov header .mmb{border-top-color:#ffffff38}
body.hpage.hov header .cartb{background:#ffffff26;border-color:#ffffff73;box-shadow:none;color:#fff}
body.hpage.hov header .cartb:hover{background:#ffffff40}
/* hero grows by the header height so its bottom edge stays where it was */
html body.hpage .cine{height:calc(clamp(500px,calc(var(--hv) - 20px),700px) + var(--hdr))}
html body.hpage .h-full,html body.hpage .h-full.mini{height:calc(clamp(380px,calc(var(--hv) - 60px),580px) + var(--hdr));padding-top:var(--hdr)}
html body.hpage .hsl .cc{padding-top:calc(36px + var(--hdr))}
html body.hpage .cfr{top:calc(var(--hdr) + 12px)}
@media(min-width:1800px){
 html body.hpage .cine{height:calc(clamp(640px,calc(var(--hv) - 20px),820px) + var(--hdr))}
 html body.hpage .h-full,html body.hpage .h-full.mini{height:calc(clamp(480px,calc(var(--hv) - 60px),680px) + var(--hdr))}
}
@media(max-width:900px){
 html body.hpage .cine{height:calc(clamp(520px,var(--hv),680px) + var(--hdr))}
 html body.hpage .h-full,html body.hpage .h-full.mini{height:calc(clamp(340px,calc(var(--hv) - 120px),480px) + var(--hdr))}
 html body.hpage .hsl .cc{padding-top:calc(40px + var(--hdr))}
}
@media(max-width:600px){
 html body.hpage .cine{height:calc(clamp(560px,var(--hv),720px) + var(--hdr))}
 html body.hpage .h-full,html body.hpage .h-full.mini{height:calc(clamp(300px,calc(var(--hv) - 200px),400px) + var(--hdr))}
 html body.hpage .hsl .cc{padding-top:calc(36px + var(--hdr))}
}


/* ===================== v35 ===================== */
/* Bundle Offers + Wholesale & Bulk Orders: text blinks like Sale */
nav a.blink,#mmenu .mmr.blink{font-weight:600;animation:saleBlink 1s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){nav a.blink,#mmenu .mmr.blink{animation:none;color:#e0102f}}

/* top menu: gold when the cursor is on it (also over the transparent hero header) */
@media(hover:hover){
 html body header nav>div>a:hover,html body header nav>div:hover>a,html body header nav a.sale:hover,html body header nav a.blink:hover{color:#d4a017!important;animation:none;text-shadow:none}
 html body header nav>div>a:hover::after,html body header nav>div:hover>a::after{background:#d4a017;transform:scaleX(1)}
 html body header nav .dd a:hover{color:#d4a017!important}
 html body header .topl a:hover{color:#d4a017!important}
}

/* Bundle Offers hero: pictures cross-fade, transparent like the other heroes */
.bun-hero .bhs{position:absolute;inset:0;z-index:0}
.bun-hero .bhs .slot{position:absolute;inset:0;opacity:0;animation:bunfade 18s infinite}
.bun-hero .bhs .slot:nth-child(2){animation-delay:6s}
.bun-hero .bhs .slot:nth-child(3){animation-delay:12s}
.bun-hero .bhs .slot:first-child{opacity:1}
.bun-hero .bhs img{width:100%;height:100%;object-fit:cover}
@keyframes bunfade{0%{opacity:0}8%,33%{opacity:1}41%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.bun-hero .bhs .slot{animation:none}.bun-hero .bhs .slot:not(:first-child){display:none}}
.bun-hero .ht{position:relative;z-index:3}
.bun-hero.h-full::before{background:#00000038}

/* Wholesale hero: video fills the whole hero like the home hero */
.ws-hero{color:#fff}
.ws-hero .ht{max-width:760px}
.ws-hero .hbtns .btn.o{color:#fff;border-color:#fff}
.ws-hero .ht h1 em{color:#ffd98e}

/* Home "Watch & shop" videos: flip to the next set every 10 seconds */
.rvfull .car{perspective:1600px}
.rvfull .ct.reels{backface-visibility:hidden}
.bun-hero .slot.fit img.ok{object-fit:cover}
.bun-hero .slot .bk{display:none!important}