/* Prova: il negozio di Endor fatto da noi. Catalogo, carrello e pagamento sono di Shopify (Storefront API). */
:root{--nero:#0B0B0C;--limbo:#FAFAF8;--grigio:#8A8D93;--filo:#26282D;--rosso:#FF2A14;--s:'Geist',system-ui,sans-serif;--m:'Geist Mono',ui-monospace,Menlo,monospace;--gut:clamp(16px,3vw,44px);--ease:cubic-bezier(.2,.7,.2,1);--h:56px}
*{box-sizing:border-box}
html{background:var(--nero);color:var(--limbo);-webkit-font-smoothing:antialiased;font-family:var(--s)}
body{margin:0;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:0}
img{display:block;width:100%;height:100%;object-fit:cover;background:#131417}
h1,h2,p,figure{margin:0}
.mono{font-family:var(--m);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase}
.gr{color:var(--grigio)}
.pt{color:var(--rosso)}
.fr{display:inline-block;transition:transform .3s var(--ease)}
a:hover .fr{transform:translateX(5px)}

header{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--h);padding:0 var(--gut);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.pieno{background:rgba(11,11,12,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--filo)}
header svg{display:block}
svg path{stroke:currentColor}
header nav{display:flex;gap:28px}
header nav:last-child{justify-content:flex-end}
header nav a,header nav button{opacity:.7;transition:opacity .2s}
header nav a:hover,header nav button:hover{opacity:1}
main{animation:entra .5s var(--ease) both}
@keyframes entra{from{opacity:0}}

/* comparsa allo scorrimento */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.c.rv{opacity:1;transform:none}.c.rv>*{opacity:0;transition:opacity .9s var(--ease);transition-delay:var(--d,0s)}.c.rv.in>*{opacity:1}

/* apertura */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden}
.hero img{object-position:50% 28%;animation:lento 14s var(--ease) both}
@keyframes lento{from{transform:scale(1.09)}}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.5),rgba(11,11,12,0) 22%,rgba(11,11,12,0) 48%,rgba(11,11,12,.86))}
.hero .sotto{position:absolute;z-index:1;left:var(--gut);right:var(--gut);bottom:clamp(20px,4vh,40px)}
.hero h1{font-weight:200;font-size:clamp(54px,11.6vw,208px);line-height:.86;letter-spacing:-.055em;margin-left:-.05em}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 i{display:block;font-style:normal;animation:sale 1.1s var(--ease) both}
.hero h1 span+span i{animation-delay:.12s}
@keyframes sale{from{transform:translateY(105%)}}
.hero .riga{display:flex;justify-content:space-between;margin-top:22px;padding-top:16px;border-top:1px solid rgba(250,250,248,.28);animation:entra 1s .5s both}

/* manifesto */
.detto{display:grid;grid-template-columns:1fr 2.4fr;gap:var(--gut);padding:clamp(72px,13vw,190px) var(--gut)}
.detto p{font-weight:300;font-size:clamp(26px,3.5vw,58px);line-height:1.08;letter-spacing:-.03em;max-width:20em}
.detto p em{font-style:normal;color:var(--grigio)}
.detto a{display:inline-block;margin-top:36px;padding-bottom:6px;border-bottom:1px solid currentColor}

/* sezioni di catalogo */
.capo{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--gut) 20px}
.capo h2{font-weight:200;font-size:clamp(34px,5vw,84px);line-height:.95;letter-spacing:-.045em}
.griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo);border-top:1px solid var(--filo);border-bottom:1px solid var(--filo)}
.griglia.due{grid-template-columns:repeat(2,1fr)}
.c{position:relative;display:block;background:var(--nero)}
.c .f{position:relative;aspect-ratio:4/5;overflow:hidden}
.griglia.due .c .f{aspect-ratio:1}
.c .f img{position:absolute;inset:0;transition:opacity .4s var(--ease),transform 1.2s var(--ease)}
.c .f img+img{opacity:0}
.c:hover .f img+img{opacity:1}
.c:hover .f img{transform:scale(1.03)}
.c .nr{position:absolute;z-index:1;left:16px;top:14px;mix-blend-mode:difference}
.c .t{display:flex;justify-content:space-between;gap:12px;padding:15px 16px 22px}
.c .t b{font-family:var(--s);font-weight:400;font-size:17px;letter-spacing:-.01em;text-transform:none}
.c .t span:last-child{white-space:nowrap}

/* lookbook */
.look{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gut);padding:clamp(72px,12vw,180px) var(--gut);align-items:end}
.look figure{overflow:hidden}
.look .a{aspect-ratio:4/5}
.look .b{display:grid;gap:var(--gut)}
.look .b figure{aspect-ratio:5/4}
.look .b figure:last-of-type{aspect-ratio:4/5;width:62%}
.look img{transition:transform 1.6s var(--ease)}
.look figure:hover img{transform:scale(1.035)}

/* dal gioco */
.gioco{padding:0 0 clamp(72px,12vw,180px)}
.nastro{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);background:var(--filo)}
.nastro::-webkit-scrollbar{display:none}
.nastro a{position:relative;flex:0 0 clamp(230px,24vw,400px);aspect-ratio:4/5;overflow:hidden;scroll-snap-align:start}
.nastro img{transition:transform 1.2s var(--ease)}
.nastro a:hover img{transform:scale(1.05)}
.nastro span{position:absolute;left:16px;bottom:14px;mix-blend-mode:difference}

/* scheda prodotto */
.scheda{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,1fr);padding-top:var(--h);border-bottom:1px solid var(--filo)}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:1px;align-content:start;border-right:1px solid var(--filo)}
.gal figure{aspect-ratio:4/5;overflow:hidden;box-shadow:0 0 0 1px var(--filo)}
.gal figure:only-child,.gal figure:first-child:nth-last-child(odd){grid-column:1/-1;aspect-ratio:5/4}
.gal img{animation:entra .7s var(--ease) both}
.info{position:sticky;top:var(--h);align-self:start;padding:40px var(--gut) 48px;display:flex;flex-direction:column;gap:30px;max-height:calc(100vh - var(--h));overflow:auto;scrollbar-width:none}
.info h1{margin-top:12px;font-weight:200;font-size:clamp(36px,4vw,64px);line-height:.94;letter-spacing:-.045em}
.prezzo{font-size:20px;font-weight:300}
.opz{display:flex;flex-direction:column;gap:10px}
.opz div{display:flex;flex-wrap:wrap;gap:8px}
.opz button{min-width:54px;height:46px;padding:0 18px;border:1px solid var(--filo);transition:border-color .2s,background .2s,color .2s}
.opz button:hover{border-color:var(--grigio)}
.opz button[aria-pressed=true]{background:var(--limbo);color:var(--nero);border-color:var(--limbo)}
.compra{flex:none;display:grid;place-items:center;height:58px;width:100%;background:var(--limbo);color:var(--nero);transition:opacity .2s}
.compra:hover{opacity:.86}
.compra[disabled]{background:none;color:var(--grigio);border:1px solid var(--filo);cursor:default;opacity:1}
.testo{font-size:16px;line-height:1.55;font-weight:300;color:#DEDEDA}
.testo p{margin:0 0 10px}
dl{margin:0;border-top:1px solid var(--filo)}
dl div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--filo)}
dd{margin:0;text-align:right}
.origine{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--filo)}
.origine figure{aspect-ratio:1;overflow:hidden}
.origine div{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,5vw,72px) var(--gut)}
.origine p{font-weight:300;font-size:clamp(24px,2.9vw,46px);line-height:1.08;letter-spacing:-.03em;max-width:15em}
.origine a{align-self:flex-start;padding-bottom:6px;border-bottom:1px solid currentColor}
.altri{padding-top:clamp(56px,8vw,120px)}
.altri .griglia{grid-template-columns:repeat(4,1fr)}

.gal figure{cursor:zoom-in}
#lente{position:fixed;inset:0;z-index:40;background:var(--nero);overflow:auto;display:none;cursor:zoom-out}
#lente.su{display:block;animation:entra .3s both}
#lente img{width:100%;height:auto;min-height:100%;object-fit:contain;background:var(--nero)}
#lente span{position:fixed;right:var(--gut);top:20px;mix-blend-mode:difference}
@media (max-width:980px){.riemp{display:none}}
/* carrello */
#velo{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s}
#carrello{position:fixed;z-index:31;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--nero);border-left:1px solid var(--filo);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .42s var(--ease)}
body.aperto #velo{opacity:1;pointer-events:auto}
body.aperto #carrello{transform:none}
#carrello>div:first-child{display:flex;justify-content:space-between;align-items:center;height:var(--h);padding:0 24px;border-bottom:1px solid var(--filo)}
#righe{flex:1;overflow:auto}
.r{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:20px 24px;border-bottom:1px solid var(--filo)}
.r .f{aspect-ratio:4/5}
.r>div:last-child{display:flex;flex-direction:column;gap:6px}
.r b{font-weight:400;font-size:16px}
.r .q{margin-top:auto;display:flex;align-items:center;gap:14px}
.r .q button{width:28px;height:28px;border:1px solid var(--filo)}
.r .q .via{width:auto;border:0;margin-left:auto;opacity:.62}
#piede{padding:20px 24px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--filo);display:flex;flex-direction:column;gap:16px}
#piede div{display:flex;justify-content:space-between}
.vuoto{padding:48px 24px}

footer{padding:clamp(56px,9vw,130px) var(--gut) calc(26px + env(safe-area-inset-bottom))}
footer svg{display:block;width:100%;height:auto;overflow:visible}
footer div{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(28px,4vw,56px);padding-top:18px;border-top:1px solid var(--filo)}
footer .piedi{display:grid;grid-template-columns:repeat(4,1fr);gap:28px var(--gut);justify-content:normal}
footer nav{display:flex;flex-direction:column;gap:10px}footer nav a{opacity:.8;transition:opacity .2s}footer nav a:hover{opacity:1}footer nav>span:first-child{margin-bottom:6px}
@media (max-width:700px){footer .piedi{grid-template-columns:1fr 1fr}}

@media (max-width:980px){
  .griglia,.altri .griglia{grid-template-columns:repeat(2,1fr)}.detto{grid-template-columns:1fr}.look{grid-template-columns:1fr}.look .b figure:last-of-type{width:70%}
  .scheda{grid-template-columns:1fr}.gal{border-right:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none}.gal figure{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/5!important}
  .info{position:static;max-height:none;border-top:1px solid var(--filo);padding-top:28px}.origine{grid-template-columns:1fr}.origine div{gap:40px}
  header nav:first-child a:nth-child(2){display:none}.c .t{flex-direction:column;gap:2px;padding:12px 12px 18px}
}
@media (max-width:560px){.griglia.due{grid-template-columns:1fr}.hero .riga span:nth-child(2){display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.c.rv>*{opacity:1;transform:none}}