/* ZNEAKERZ — sistema di design "catalogo d'asta streetwear"
   Base scura, packshot in teca chiara, un solo colore firma: il rosso del logo. */

:root{
  --nero:#141412;          /* fondo pagina */
  --nero-2:#1B1B18;        /* pannelli scuri */
  --linea:#2C2C27;         /* bordi su scuro */
  --teca:#F1EFEA;          /* pannello chiaro dove vivono i packshot */
  --teca-2:#E7E4DD;        /* variante teca */
  --linea-teca:#D8D5CC;    /* bordi su chiaro */
  --inchiostro:#EDEBE3;    /* testo su scuro */
  --muto:#98948A;          /* testo secondario su scuro */
  --ink-teca:#171713;      /* testo su chiaro */
  --muto-teca:#6E6A60;     /* secondario su chiaro */
  --rosso:#E3372C;         /* firma, uso testuale su scuro */
  --rosso-pieno:#AD0000;   /* firma, blocchi pieni (il rosso del logo) */
  --verde-ok:#7FB069;
  --font-d:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nero); color:var(--inchiostro);
  font-family:var(--font-d); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}

.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(16px,3vw,40px)}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--font-d); font-weight:900; font-stretch:125%;
  text-transform:uppercase; letter-spacing:-.015em; line-height:.95;
  text-wrap:balance; margin:0;
}
.mono{font-family:var(--mono)}
.label{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muto);
}
.label--rosso{color:var(--rosso)}

/* ---------- topbar + header ---------- */
.topbar{
  background:var(--rosso-pieno); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; padding:7px 16px;
}
header.sito{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--nero) 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.header-in{
  display:flex; align-items:center; gap:28px;
  padding-top:16px; padding-bottom:16px;
}
.logo{color:var(--inchiostro); display:flex; align-items:center}
.logo svg{height:20px; width:auto}
.logo:hover{color:var(--rosso)}
nav.principale{display:flex; gap:22px; margin-left:8px}
nav.principale a{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muto); padding:4px 0; border-bottom:1px solid transparent;
}
nav.principale a:hover, nav.principale a[aria-current]{color:var(--inchiostro); border-bottom-color:var(--rosso)}
.header-cta{margin-left:auto; display:flex; gap:10px; align-items:center}
.btn-wa{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--linea); color:var(--inchiostro);
  padding:9px 16px; background:none; display:inline-block;
}
.btn-wa:hover{border-color:var(--rosso); color:var(--rosso)}
.btn-rosso{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--rosso-pieno); color:#fff; border:1px solid var(--rosso-pieno);
  padding:10px 18px; display:inline-block;
}
.btn-rosso:hover{background:#8f0000; border-color:#8f0000}

@media (max-width:860px){
  nav.principale{display:none}
  .header-in{gap:14px}
}

/* ---------- hero: il lotto in evidenza ---------- */
.hero{border-bottom:1px solid var(--linea)}
.hero-in{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,64px); align-items:stretch;
  padding-top:clamp(40px,6vw,88px); padding-bottom:clamp(40px,6vw,88px);
}
.hero-testo{display:flex; flex-direction:column; justify-content:center; gap:22px}
.hero h1{font-size:clamp(34px,4.6vw,64px)}
.hero .tagline{color:var(--muto); max-width:44ch; margin:0; font-size:17px}
.spec{
  border-top:1px solid var(--linea); margin-top:6px;
  font-family:var(--mono); font-size:13px;
}
.spec div{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--linea);
}
.spec dt{color:var(--muto); margin:0}
.spec dd{margin:0; text-align:right}
.prezzo-hero{font-family:var(--mono); font-size:26px; color:var(--rosso); letter-spacing:-.02em}
.hero-azioni{display:flex; gap:12px; flex-wrap:wrap}
.hero-teca{
  background:var(--teca); position:relative; display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,4vw,56px); min-height:340px;
}
.hero-teca img{width:100%; max-width:640px; mix-blend-mode:multiply}
.timbro{
  position:absolute; top:18px; left:18px; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rosso-pieno);
}
.timbro .z{
  width:26px; height:26px; border:1.5px solid var(--rosso-pieno);
  display:flex; align-items:center; justify-content:center;
}
.timbro .z svg{width:12px; height:auto}
.lotto-num{
  position:absolute; bottom:16px; right:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muto-teca);
}
@media (max-width:860px){ .hero-in{grid-template-columns:1fr} .hero-teca{order:-1} }

/* ---------- striscia fiducia ---------- */
.fiducia{border-bottom:1px solid var(--linea); background:var(--nero-2)}
.fiducia-in{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea);
}
.fiducia-item{background:var(--nero-2); padding:20px clamp(14px,2vw,28px)}
.fiducia-item b{display:block; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.04em}
.fiducia-item span{font-family:var(--mono); font-size:12px; color:var(--muto)}
@media (max-width:720px){ .fiducia-in{grid-template-columns:1fr} }

/* ---------- sezioni ---------- */
section.blocco{padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(48px,6vw,84px)}
.blocco-testa{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:28px; flex-wrap:wrap;
}
.blocco-testa h2{font-size:clamp(24px,3vw,38px)}
.blocco-testa .tutti{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muto); border-bottom:1px solid var(--rosso); padding-bottom:2px;
}
.blocco-testa .tutti:hover{color:var(--inchiostro)}

/* ---------- card prodotto ---------- */
.griglia{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.griglia--3{grid-template-columns:repeat(3,1fr)}
.griglia--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1080px){ .griglia,.griglia--3{grid-template-columns:repeat(3,1fr)} .griglia--6{grid-template-columns:repeat(4,1fr)} }
@media (max-width:760px){ .griglia,.griglia--3{grid-template-columns:repeat(2,1fr)} .griglia--6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .griglia--6{grid-template-columns:repeat(2,1fr)} }

.card{display:flex; flex-direction:column; min-width:0}
.card-foto{
  background:var(--teca); aspect-ratio:5/4; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:10%;
}
.card-foto img{
  width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
  transition:opacity .18s ease;
}
.card-foto .foto-b{position:absolute; inset:10%; width:80%; height:80%; opacity:0; margin:auto}
.card:hover .foto-b{opacity:1}
.card:hover .foto-a{opacity:0}
.card-badge{
  position:absolute; top:10px; left:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px; background:var(--nero); color:var(--inchiostro);
}
.card-badge--sold{background:var(--rosso-pieno); color:#fff}
.card-info{padding:12px 2px 0; display:flex; flex-direction:column; gap:5px}
.card-nome{
  font-weight:700; font-size:13px; line-height:1.3; text-transform:uppercase;
  letter-spacing:.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta{font-family:var(--mono); font-size:11px; color:var(--muto); letter-spacing:.04em}
.card-prezzo{font-family:var(--mono); font-size:13px; color:var(--rosso)}
.card-prezzo .sold{color:var(--muto)}
.card:hover .card-nome{color:#fff}

/* ---------- teca / grail gallery ---------- */
.teca-sezione{background:var(--teca); color:var(--ink-teca)}
.teca-sezione .label{color:var(--muto-teca)}
.teca-sezione .blocco-testa .tutti{color:var(--muto-teca)}
.teca-sezione .blocco-testa .tutti:hover{color:var(--ink-teca)}
.grail-griglia{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea-teca); border:1px solid var(--linea-teca)}
@media (max-width:900px){ .grail-griglia{grid-template-columns:1fr} }
.grail{background:var(--teca); padding:26px; display:flex; flex-direction:column; gap:10px; position:relative}
.grail:hover{background:var(--teca-2)}
.grail img{aspect-ratio:5/3; object-fit:contain; mix-blend-mode:multiply; margin-bottom:6px}
.grail-nome{font-weight:800; text-transform:uppercase; font-size:15px; line-height:1.25; letter-spacing:.01em}
.grail-dati{font-family:var(--mono); font-size:12px; color:var(--muto-teca); display:flex; flex-direction:column; gap:3px}
.grail-prezzo{font-family:var(--mono); font-size:17px; color:var(--rosso-pieno)}

/* ---------- servizi ---------- */
.servizi-griglia{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:900px){ .servizi-griglia{grid-template-columns:1fr} }
.servizio{border:1px solid var(--linea); padding:26px; display:flex; flex-direction:column; gap:12px; background:var(--nero-2)}
.servizio h3{margin:0; font-weight:800; text-transform:uppercase; font-size:17px; letter-spacing:.01em}
.servizio p{margin:0; color:var(--muto); font-size:14px}
.servizio .righe{font-family:var(--mono); font-size:13px; border-top:1px solid var(--linea)}
.servizio .righe div{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--linea)}
.servizio .righe .p{color:var(--rosso)}
.servizio .azione{margin-top:auto}

/* ---------- store ---------- */
.store{border-top:1px solid var(--linea)}
.store-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center}
@media (max-width:860px){ .store-in{grid-template-columns:1fr} }
.store h2{font-size:clamp(26px,3.4vw,44px); margin-bottom:14px}
.store p{color:var(--muto); max-width:52ch}
.store-dati{font-family:var(--mono); font-size:13px; margin-top:18px; border-top:1px solid var(--linea)}
.store-dati div{display:flex; gap:20px; padding:10px 0; border-bottom:1px solid var(--linea)}
.store-dati dt{color:var(--muto); min-width:110px; margin:0; text-transform:uppercase; font-size:11px; letter-spacing:.1em; padding-top:2px}
.store-dati dd{margin:0}
.z-grande{color:var(--rosso-pieno); display:flex; justify-content:center}
.z-grande svg{width:min(46%,300px); height:auto; opacity:.92}

/* ---------- footer ---------- */
footer.sito{border-top:1px solid var(--linea); background:var(--nero-2)}
.footer-in{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px;
  padding-top:48px; padding-bottom:24px;
}
@media (max-width:860px){ .footer-in{grid-template-columns:1fr 1fr} }
.footer-in h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muto); margin:0 0 12px; font-weight:500;
}
.footer-in ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.footer-in a:hover{color:var(--rosso)}
.footer-legal{
  font-family:var(--mono); font-size:11px; color:var(--muto);
  border-top:1px solid var(--linea); padding-top:16px; padding-bottom:28px; line-height:1.8;
}
.footer-logo{color:var(--inchiostro)}
.footer-logo svg{height:18px; width:auto; margin-bottom:14px}
.footer-frase{color:var(--muto); font-size:14px; max-width:30ch}

/* ---------- pagina shop ---------- */
.shop-testa{padding-top:40px; padding-bottom:8px}
.shop-testa h1{font-size:clamp(28px,4vw,52px)}
.filtri{
  position:sticky; top:57px; z-index:40; background:var(--nero);
  border-bottom:1px solid var(--linea); padding-top:14px; padding-bottom:14px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.filtri select, .filtri input[type=search]{
  background:var(--nero-2); color:var(--inchiostro); border:1px solid var(--linea);
  font-family:var(--mono); font-size:12px; padding:8px 10px; letter-spacing:.04em;
}
.filtri input[type=search]{min-width:200px}
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--linea); background:none; color:var(--muto); padding:7px 12px;
}
.chip[aria-pressed="true"]{background:var(--rosso-pieno); border-color:var(--rosso-pieno); color:#fff}
.chip:hover{border-color:var(--muto)}
.conteggio{font-family:var(--mono); font-size:12px; color:var(--muto); margin-left:auto}
.shop-griglia{padding-top:26px; padding-bottom:80px}

/* ---------- pagina prodotto ---------- */
.pdp{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,56px); padding-top:34px; padding-bottom:90px}
@media (max-width:900px){ .pdp{grid-template-columns:1fr} }
.pdp-galleria{display:flex; flex-direction:column; gap:10px}
.pdp-main{background:var(--teca); padding:clamp(20px,3vw,48px); display:flex; align-items:center; justify-content:center; aspect-ratio:5/4; position:relative}
.pdp-main img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.pdp-thumbs{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.pdp-thumbs button{background:var(--teca); border:2px solid transparent; padding:8px; aspect-ratio:1}
.pdp-thumbs button[aria-current]{border-color:var(--rosso)}
.pdp-thumbs img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.pdp-info{display:flex; flex-direction:column; gap:18px}
.pdp-info h1{font-size:clamp(24px,2.6vw,36px)}
.pdp-prezzo{font-family:var(--mono); font-size:24px; color:var(--rosso)}
.pdp-prezzo small{color:var(--muto); font-size:13px}
.taglie{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.taglia{
  border:1px solid var(--linea); background:none; color:var(--inchiostro);
  font-family:var(--mono); font-size:12px; padding:10px 4px; text-align:center; line-height:1.4;
}
.taglia b{display:block; font-size:13px; font-weight:600}
.taglia span{color:var(--muto); font-size:11px}
.taglia:hover{border-color:var(--muto)}
.taglia[aria-pressed="true"]{border-color:var(--rosso); background:color-mix(in srgb, var(--rosso-pieno) 14%, transparent)}
.taglia[aria-pressed="true"] span{color:var(--rosso)}
.taglia--out{opacity:.45}
.taglia--out b{text-decoration:line-through}
.pdp-azioni{display:flex; flex-direction:column; gap:10px}
.pdp-azioni .btn-rosso, .pdp-azioni .btn-wa{text-align:center; padding:14px}
.pdp-desc{color:var(--muto); font-size:14px; line-height:1.7}
.pdp-desc b, .pdp-desc strong{color:var(--inchiostro)}
.pdp-desc p{margin:0 0 10px}
.avviso-sold{
  border:1px solid var(--rosso-pieno); padding:14px 16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--rosso);
}
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--nero-2); border-top:1px solid var(--linea);
  display:none; align-items:center; gap:14px; padding:12px 16px;
}
.sticky-bar .p{font-family:var(--mono); color:var(--rosso); font-size:16px}
.sticky-bar .btn-rosso{margin-left:auto}
@media (max-width:900px){ .sticky-bar{display:flex} }

/* ---------- faq ---------- */
.faq-lista{border-top:1px solid var(--linea)}
.faq-lista details{border-bottom:1px solid var(--linea)}
.faq-lista summary{
  cursor:pointer; padding:18px 36px 18px 0; font-weight:700; font-size:15px;
  list-style:none; position:relative; text-transform:uppercase; letter-spacing:.01em;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{
  content:"+"; position:absolute; right:4px; top:14px;
  font-family:var(--mono); font-size:20px; color:var(--rosso);
}
.faq-lista details[open] summary::after{content:"–"}
.faq-lista summary:hover{color:var(--rosso)}
.faq-lista p{margin:0 0 20px; color:var(--muto); font-size:14.5px; line-height:1.7; max-width:66ch}

.skeleton{color:var(--muto); font-family:var(--mono); font-size:13px; padding:60px 0; text-align:center}
::selection{background:var(--rosso-pieno); color:#fff}