/* Parti comuni alle pagine interne della demo C (shop, prodotto): stessi colori, font e pezzi della home c-wow.html */
:root{
  --black:#0b0b0b; --bone:#f3efe4; --yellow:#ffd60a; --red:#e30613; --silver:#b9bcc4;
  --fg:#f3efe4; --fg2:#c4bfb3; --acc:#ffd60a; --riga:#4a473f;
  --fat:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif; --sans:'Schibsted Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --lato:clamp(16px,3.6vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black)}
body{background:var(--black);color:var(--fg);font-family:var(--sans);font-size:18px;line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.mono{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #0b0b0b}

/* testata: come la home */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(12px,3vw,40px);color:#f3efe4;pointer-events:none}
header>*{pointer-events:auto;background:#0b0b0b;border-radius:999px;padding:7px}
header .brand{padding:6px 20px 6px 6px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fat);font-weight:900;font-size:31px;letter-spacing:.01em;line-height:1}
.brand img{width:40px;height:40px;border-radius:50%;background:#fff;padding:2px}
header nav{display:flex;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:2px solid #55524a;font-weight:700;font-size:15px;transition:background .3s,color .3s,transform .4s var(--ease)}
.pill:hover{transform:translateY(-3px) rotate(-2deg)}
.pill[aria-current="page"]{border-color:var(--bone)}
.pill.full{background:var(--yellow);color:#0b0b0b;border-color:var(--yellow)}
#count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#0b0b0b;color:var(--yellow);font-family:var(--mono);font-size:13px;font-weight:700}
@media(max-width:640px){header nav .pill:not(.full){display:none}}

/* nastri */
.tape{position:relative;z-index:10;background:var(--red);color:#fff;padding:22px 0;overflow:hidden;transform:rotate(-2.2deg) scale(1.04);margin:-30px 0}
.tape.b{background:var(--yellow);color:#0b0b0b;transform:rotate(1.6deg) scale(1.04);margin-top:-12px}
.tape div{display:inline-flex;white-space:nowrap;font-family:var(--fat);font-weight:900;font-size:clamp(54px,10.5vw,176px);line-height:.95;text-transform:uppercase;will-change:transform}
.tape span{padding-right:.5em}
.cover{position:relative;z-index:9;background:var(--black);overflow:hidden;padding:56px 0 60px}

/* gli altri prodotti «Tostapane»: la riga si colora dal basso e la foto salta fuori dalla linea */
#altri{position:relative;z-index:9;background:var(--black);color:var(--bone);padding:clamp(60px,9vh,110px) 0 0;overflow:hidden}
#altri .testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:0 var(--lato);margin-bottom:clamp(20px,4vh,46px)}
#altri h2{font-family:var(--fat);font-weight:900;font-size:clamp(70px,12vw,210px);line-height:.8;text-transform:uppercase}
#altri .testa p{max-width:22em;font-size:18px;font-weight:500;color:#d6d1c5}
#altri .riga{position:relative;border-top:2px solid var(--riga);padding:0 var(--lato);cursor:pointer;color:var(--bone);transition:color .35s}
#altri .riga::before{content:"";position:absolute;inset:0;background:var(--bg);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
#altri .capo{position:relative;z-index:4;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:18px;padding:12px 0}
#altri .capo .n{font-family:var(--mono);font-size:13px;color:var(--yellow);transition:color .4s}
#altri .nome{display:flex;align-items:center;gap:clamp(14px,2vw,30px);min-width:0}
#altri .capo h3{font-family:var(--fat);font-weight:900;font-size:clamp(46px,12vw,210px);line-height:.84;text-transform:uppercase;white-space:nowrap}
#altri .capo .pz{font-family:var(--fat);font-weight:900;font-size:clamp(34px,4.6vw,78px);line-height:.85;white-space:nowrap}
#altri .vai{display:inline-flex;padding:12px 22px;border-radius:999px;background:var(--c);color:var(--bg);font-weight:700;font-size:16px;white-space:nowrap;opacity:0;transform:translateX(16px);transition:opacity .3s,transform .5s var(--ease)}
#altri .buco{position:absolute;z-index:3;left:64%;bottom:-2px;width:clamp(160px,20vw,300px);height:clamp(220px,28vw,410px);overflow:hidden;pointer-events:none}
#altri .buco img{position:absolute;left:8%;bottom:0;width:84%;aspect-ratio:1;object-fit:cover;border-radius:18px 18px 0 0;transform:translateY(106%) rotate(8deg);transform-origin:50% 100%;transition:transform .75s var(--ease)}
#altri .riga.on{color:var(--c);z-index:4}
#altri .riga.on::before{transform:scaleY(1)}
#altri .riga.on .n{color:var(--c)}
#altri .riga.on .buco img{transform:translateY(0) rotate(-5deg)}
#altri .riga.on .vai{opacity:1;transform:none}
@media(max-width:760px){#altri .capo{grid-template-columns:1fr auto}#altri .capo .n{display:none}#altri .buco{left:auto;right:17%;width:30vw;height:42vw}#altri .vai{display:none}}

/* piede */
footer{position:relative;z-index:9;background:#0b0b0b;color:#cfcabd;border-top:2px solid var(--riga);padding:26px var(--lato);display:flex;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;font-size:15px}
footer a:hover{color:#fff}

/* tendina d'ingresso e pallino che vola nel carrello */
#load{position:fixed;inset:0;z-index:100;background:var(--yellow);display:grid;place-items:center}
#load img{width:120px;animation:spin 1.2s var(--ease) infinite}
@keyframes spin{50%{transform:rotate(-14deg) scale(1.12)}}
.fly{position:fixed;left:0;top:0;z-index:99;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--red);border:3px solid #fff;pointer-events:none}

@media(prefers-reduced-motion:reduce){#load img{animation:none}#altri .riga::before,#altri .buco img,#altri .vai,.pill{transition-duration:.01s}}