/* La Cuoieria — catalogo
   Palette presa dal sito esistente (css/stile.css): testo #3b3836, accento
   #ea5454, grigi #74716f, fondi bianco/#f2f2f2. Il rosso vivo resta sugli
   elementi non testuali; dove c'e' testo si usa la variante scurita che
   supera il contrasto 4.5. */

:root{
  --carta:      #f7f7f6;
  --carta-alta: #ffffff;
  --inchiostro: #3b3836;
  --seppia:     #74716f;
  --vacchetta:  #ea5454;   /* solo decorativo */
  --cuoio:      #c62f2f;   /* testo e codici — 5.46 su bianco */
  --ferro:      #b82828;
  --velo-ombra: rgba(59,56,54,.14);
  --filo:       #e4e2e0;

  --display: "Fraunces", Georgia, serif;
  --testo:   "Karla", system-ui, sans-serif;
  /* etichette e codici articolo: stesso sans del corpo in maiuscoletto spaziato.
     Un monospace darebbe un registro da terminale, fuori posto per una cuoieria. */
  --mono:    "Karla", system-ui, sans-serif;

  --gutter: clamp(1.1rem, 4vw, 3.5rem);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

/* .velo e .pannello dichiarano display:grid/flex, che pareggia [hidden] dell'UA
   e vince per ordine: senza questo resterebbero a schermo all'avvio. */
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}

.grana{ display:none; }  /* la texture di carta era decorazione posticcia */
/* alza il contenuto sopra la grana. Esclude gli strati fixed: questa regola ha
   specificita' maggiore di .velo/.pannello e ne annullerebbe il position:fixed. */
body > *:not(.grana):not(.velo):not(.pannello){ position:relative; z-index:1; }

a{ color:inherit; }

/* ---------- testata ---------- */
.testata{
  display:grid; gap:1.4rem;
  grid-template-columns:1fr;
  padding:clamp(2rem,6vw,4.5rem) var(--gutter) clamp(1.4rem,3vw,2.2rem);
  border-bottom:1px solid var(--filo);
}
@media (min-width:900px){
  .testata{ grid-template-columns:auto 1fr auto; align-items:end; gap:2.5rem; }
  .testata__recapiti{ text-align:right; }
}

.marchio{ text-decoration:none; display:block; }
.marchio__nome{
  display:block;
  font-family:var(--display);
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight:600;
  font-size:clamp(2.4rem,7vw,4.1rem);
  line-height:.9;
  letter-spacing:-.025em;
  color:var(--inchiostro);
}
.marchio__coda{
  display:block; margin-top:.55rem;
  font-family:var(--mono);
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cuoio);
}
.marchio__coda i{ font-style:normal; opacity:.45; }

.testata__claim{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1rem,1.7vw,1.15rem);
  line-height:1.5;
  color:var(--seppia);
  max-width:34ch;
}
.testata__recapiti{
  font-family:var(--mono); font-size:.78rem; line-height:1.9; color:var(--seppia);
}
.testata__recapiti a{ text-decoration:none; border-bottom:1px solid var(--filo); }
.testata__recapiti a:hover{ color:var(--ferro); border-color:currentColor; }

/* ---------- barra strumenti ---------- */
.barra{
  position:sticky; top:0; z-index:30;
  padding:.9rem var(--gutter) .6rem;
  background:color-mix(in srgb, var(--carta) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--filo);
}
.barra__interno{ display:flex; gap:.7rem; align-items:stretch; }

.cerca{
  position:relative; flex:1; display:flex; align-items:center;
  background:var(--carta-alta);
  border:1px solid var(--filo);
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:border-color .18s, box-shadow .18s;
}
.cerca:focus-within{
  border-color:var(--vacchetta);
  box-shadow:0 0 0 3px rgba(234,84,84,.2);
}
.cerca__ico{
  width:17px; height:17px; margin-left:.85rem; flex:none;
  fill:none; stroke:var(--cuoio); stroke-width:1.9; stroke-linecap:round;
}
#q{
  flex:1; min-width:0;
  padding:.72rem .7rem;
  border:0; background:none; outline:none;
  font-family:var(--testo); font-size:.95rem; color:var(--inchiostro);
}
#q::placeholder{ color:#8a8582; }
#q::-webkit-search-cancel-button{ display:none; }
.cerca__x{
  border:0; background:none; cursor:pointer; padding:0 .8rem;
  font-size:1.3rem; line-height:1; color:var(--seppia);
}

.ordine-apri{
  flex:none; display:inline-flex; align-items:center; gap:.55rem;
  padding:0 1.05rem;
  background:var(--inchiostro); color:var(--carta);
  border:1px solid var(--inchiostro); border-radius:8px;
  font-family:var(--mono); font-size:.85rem; font-weight:600; letter-spacing:.04em;
  cursor:pointer; transition:background .18s;
}
.ordine-apri:hover{ background:var(--cuoio); border-color:var(--cuoio); }
.pallino{
  display:grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .3rem;
  background:var(--vacchetta); color:var(--inchiostro);
  border-radius:99px; font-size:.72rem; font-weight:600;
}
.ordine-apri[data-pieno="0"] .pallino{ background:rgba(242,236,225,.22); color:var(--carta); }
.ordine-apri__corta{ display:none; }

/* mobile: testata compatta e etichetta breve, il pulsante deve restare dentro il bordo */
@media (max-width:620px){
  .ordine-apri__lunga{ display:none; }
  .ordine-apri__corta{ display:inline; }
  .ordine-apri{ padding:0 .75rem; gap:.4rem; }
  .testata{ padding-top:1.6rem; gap:.85rem; }
  .testata__claim{ font-size:.95rem; max-width:none; }
  .testata__claim br{ display:none; }
  .testata__recapiti{ font-size:.72rem; line-height:1.7; }
  .conta{ font-size:.66rem; gap:.35rem .9rem; }
}

/* chip categorie */
.chip{
  display:flex; gap:.4rem; margin-top:.7rem;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding-bottom:.15rem;
}
.chip::-webkit-scrollbar{ display:none; }
.chip button{
  flex:none; cursor:pointer;
  padding:.42rem .85rem;
  background:none; color:var(--seppia);
  border:1px solid var(--filo); border-radius:99px;
  font-family:var(--mono); font-size:.82rem; font-weight:600; letter-spacing:.02em;
  white-space:nowrap; transition:.18s;
}
.chip button:hover{ border-color:var(--cuoio); color:var(--cuoio); }
.chip button[aria-pressed="true"]{
  background:var(--inchiostro); color:var(--carta); border-color:var(--inchiostro);
}
.chip button b{ font-weight:400; opacity:.55; margin-left:.4rem; }

.conta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:center;
  margin-top:.6rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:0; color:var(--seppia);
}
.spunta{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; }
.spunta input{ accent-color:var(--cuoio); }

/* ---------- griglia ---------- */
main{ padding:clamp(1.4rem,4vw,2.6rem) var(--gutter) 4rem; }

.griglia{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.8rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fill, minmax(158px, 1fr));
}
@media (min-width:700px){
  .griglia{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
}

.art{
  display:flex; flex-direction:column;
  background:var(--carta-alta);
  border:1px solid var(--filo);
  border-radius:8px;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
  animation:sali .5s both cubic-bezier(.2,.7,.3,1);
}
@keyframes sali{ from{ opacity:0; transform:translateY(11px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .art{ animation:none; } }

.art:hover, .art:focus-visible{
  transform:translateY(-3px);
  border-color:var(--cuoio);
  box-shadow:0 10px 24px -14px var(--velo-ombra);
  outline:none;
}

.art__foto{
  position:relative; aspect-ratio:1; padding:.7rem;
  background:#fff;
  border-bottom:1px solid var(--filo);
}

/* assoluta: un'immagine verticale con height:100% romperebbe l'aspect-ratio del box */
.art__foto img{
  position:absolute; inset:.7rem;
  width:calc(100% - 1.4rem); height:calc(100% - 1.4rem);
  object-fit:contain; display:block;
  mix-blend-mode:multiply;
}

.art__corpo{ padding:.62rem .72rem .78rem; display:flex; flex-direction:column; gap:.18rem; flex:1; }
.art__nome{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"opsz" 24, "WONK" 1;
  font-weight:500; font-size:1rem; line-height:1.2;
}
.art__en{ margin:0; font-size:.85rem; font-style:italic; color:#767170; }
.art__cod{
  margin:.32rem 0 0; font-family:var(--mono); font-size:.85rem; font-weight:600;
  letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--cuoio);
}
.art__tag{
  align-self:flex-start; margin-top:.45rem;
  padding:.2rem .5rem;
  font-family:var(--mono); font-size:.75rem; font-weight:600; letter-spacing:.04em;
  border:1px solid; border-radius:8px;
}
.art__tag--conf{ color:var(--ferro); border-color:rgba(198,47,47,.3); background:rgba(156,51,22,.05); }
.art__tag--nasc{ color:var(--seppia); border-color:var(--filo); background:rgba(59,56,54,.04); }

.art__inlista{
  position:absolute; top:.42rem; right:.42rem;
  display:grid; place-items:center; width:1.5rem; height:1.5rem;
  background:var(--inchiostro); color:var(--carta);
  border-radius:99px; font-family:var(--mono); font-size:.66rem; font-weight:600;
}

.vuoto{ text-align:center; padding:4rem 1rem; color:var(--seppia); font-family:var(--display); font-style:italic; font-size:1.15rem; }

/* ---------- scheda prodotto ---------- */
.velo{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:1rem;
  background:rgba(36,26,18,.42); backdrop-filter:blur(3px);
  animation:sfuma .2s both;
}
@keyframes sfuma{ from{opacity:0} to{opacity:1} }

.scheda{
  position:relative; width:min(760px,100%); max-height:90vh; overflow:auto;
  display:grid; grid-template-columns:1fr;
  background:var(--carta-alta);
  border:1px solid var(--cuoio); border-radius:8px;
  box-shadow:0 30px 70px -30px rgba(36,26,18,.55);
  animation:entra .28s both cubic-bezier(.2,.7,.3,1);
}
@keyframes entra{ from{ opacity:0; transform:translateY(14px) scale(.985);} to{ opacity:1; transform:none;} }
@media (min-width:680px){ .scheda{ grid-template-columns:1fr 1fr; } }

.scheda__x{
  position:absolute; top:.45rem; right:.55rem; z-index:2;
  border:0; background:none; cursor:pointer;
  font-size:1.8rem; line-height:1; color:var(--seppia);
}
.scheda__x:hover{ color:var(--ferro); }

.scheda__foto{ position:relative; background:#fff; padding:1.6rem; aspect-ratio:1; }

.scheda__foto img{
  position:absolute; inset:1.6rem;
  width:calc(100% - 3.2rem); height:calc(100% - 3.2rem);
  object-fit:contain; mix-blend-mode:multiply;
}

.scheda__corpo{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; }
.scheda__cat{
  margin:0 0 .5rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cuoio);
}
.scheda__nome{
  margin:0; font-family:var(--display);
  font-variation-settings:"opsz" 80, "WONK" 1; font-weight:600;
  font-size:1.9rem; line-height:1.06; letter-spacing:-.015em;
}
.scheda__en{ margin:.28rem 0 0; font-family:var(--display); font-style:italic; color:#767170; }
.scheda__cod{
  margin:.9rem 0 0; padding:.42rem .6rem; align-self:flex-start;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.09em;
  background:rgba(234,84,84,.1); border:1px solid rgba(234,84,84,.3); border-radius:8px;
}
.scheda__desc{ margin:.9rem 0 0; font-size:.88rem; color:var(--seppia); }

.scheda__qta{ display:flex; align-items:center; gap:.4rem; margin:1.2rem 0 .7rem; }
.scheda__qta button{
  width:2.1rem; height:2.1rem; cursor:pointer;
  background:none; border:1px solid var(--filo); border-radius:8px;
  font-size:1.05rem; color:var(--seppia);
}
.scheda__qta button:hover{ border-color:var(--cuoio); color:var(--cuoio); }
.scheda__qta input{
  width:3.6rem; height:2.1rem; text-align:center;
  font-family:var(--mono); font-size:.9rem;
  background:var(--carta); border:1px solid var(--filo); border-radius:8px; color:inherit;
}

.btn{
  padding:.72rem 1rem; cursor:pointer;
  background:var(--inchiostro); color:var(--carta);
  border:1px solid var(--inchiostro); border-radius:8px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  transition:background .18s;
}
.btn:hover{ background:var(--cuoio); border-color:var(--cuoio); }
.btn--vuoto{ background:none; color:var(--seppia); border-color:var(--filo); }
.btn--vuoto:hover{ background:none; color:var(--ferro); border-color:var(--ferro); }

.scheda__avviso{
  margin:.75rem 0 0; padding:.55rem .7rem;
  font-size:.76rem; color:var(--ferro);
  background:rgba(234,84,84,.07); border-left:2px solid var(--ferro);
}

/* ---------- pannello ordine ---------- */
.pannello{
  position:fixed; top:0; right:0; bottom:0; z-index:70;
  width:min(400px,100%);
  display:flex; flex-direction:column;
  background:var(--carta-alta);
  border-left:1px solid var(--cuoio);
  box-shadow:-24px 0 60px -30px rgba(36,26,18,.5);
  animation:scorri .28s both cubic-bezier(.2,.7,.3,1);
}
@keyframes scorri{ from{ transform:translateX(100%);} to{ transform:none;} }

.pannello__testa{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 1.2rem; border-bottom:1px solid var(--filo);
}
.pannello__testa h2{
  margin:0; font-family:var(--display); font-weight:600; font-size:1.35rem;
  font-variation-settings:"opsz" 40, "WONK" 1;
}
.pannello__testa button{ border:0; background:none; cursor:pointer; font-size:1.7rem; line-height:1; color:var(--seppia); }
.pannello__testa button:hover{ color:var(--ferro); }

.pannello__corpo{ flex:1; overflow:auto; padding:.5rem 1.2rem; }
.riga{
  display:grid; grid-template-columns:44px 1fr auto; gap:.7rem; align-items:center;
  padding:.7rem 0; border-bottom:1px dashed var(--filo);
}
.riga img{ width:44px; height:44px; object-fit:contain; background:#fff; border:1px solid var(--filo); mix-blend-mode:multiply; }
.riga__nome{ font-family:var(--display); font-weight:500; font-size:.92rem; line-height:1.15; }
.riga__cod{ font-family:var(--mono); font-size:.68rem; color:var(--cuoio); letter-spacing:.06em; }
.riga__q{ display:flex; align-items:center; gap:.25rem; }
.riga__q button{ width:1.5rem; height:1.5rem; cursor:pointer; background:none; border:1px solid var(--filo); border-radius:8px; color:var(--seppia); }
.riga__q button:hover{ border-color:var(--cuoio); color:var(--cuoio); }
.riga__q span{ font-family:var(--mono); font-size:.8rem; min-width:1.5rem; text-align:center; }

.pannello__pie{ padding:1rem 1.2rem 1.3rem; border-top:1px solid var(--filo); display:grid; gap:.5rem; }
.pannello__tot{ margin:0 0 .2rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.07em; color:var(--seppia); }
.pannello__nota{ margin:.4rem 0 0; font-size:.74rem; line-height:1.5; color:#767170; font-style:italic; }
.pannello__vuoto{ padding:3rem 0; text-align:center; color:#767170; font-family:var(--display); font-style:italic; }

/* ---------- piede ---------- */
.pie{
  display:grid; gap:1.3rem;
  padding:2.2rem var(--gutter) 3rem;
  border-top:1px solid var(--filo);
  background:rgba(59,56,54,.035);
  font-size:.82rem; line-height:1.7; color:var(--seppia);
}
@media (min-width:760px){ .pie{ grid-template-columns:1fr 1fr 1.3fr; gap:2.5rem; } }
.pie a{ text-decoration:none; border-bottom:1px solid var(--filo); }
.pie a:hover{ color:var(--ferro); }
.pie__nota{ font-style:italic; color:#767170; font-size:.78rem; }

body.bloccato{ overflow:hidden; }

/* accesso all'area riservata dal catalogo pubblico */
.testata__recapiti .area{
  display:inline-block; margin-top:.4rem; padding:.4rem .9rem;
  border:1px solid var(--cuoio); border-radius:999px;
  color:var(--cuoio); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:.72rem;
}
.testata__recapiti .area:hover{ background:var(--cuoio); color:var(--carta-alta); }