/* YOUCART — Vetrina del negozio.
   Condivide i token cromatici del sito principale (assets/site.css) ma vive da
   solo: la vetrina e' servita su <slug>.youcart.it e non carica il CSS del sito
   di marketing. */

:root{
  --ink:#0f172a; --ink-soft:#475569; --line:#e2e8f0; --bg:#ffffff; --bg-soft:#f8fafc;
  --brand:#4338ca; --brand-soft:#eef2ff; --brand-dark:#312e81;
  --ok-bg:#ecfdf5; --ok-fg:#047857; --ok-line:#a7f3d0;
  --err-bg:#fef2f2; --err-fg:#b91c1c; --err-line:#fecaca;
  --warn-bg:#fffbeb; --warn-fg:#b45309; --warn-line:#fde68a;
  --radius:14px; --maxw:1120px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#f1f5f9; --ink-soft:#94a3b8; --line:#1e293b; --bg:#0b1120; --bg-soft:#0f172a;
    --brand:#818cf8; --brand-soft:#1e1b4b; --brand-dark:#c7d2fe;
    --ok-bg:#052e21; --ok-fg:#34d399; --ok-line:#065f46;
    --err-bg:#3f1212; --err-fg:#fca5a5; --err-line:#7f1d1d;
    --warn-bg:#3a2a06; --warn-fg:#fbbf24; --warn-line:#78350f;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

.contenitore{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem}

/* ---------------------------------------------------------------- testata */
.testata{
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.testata__riga{
  display:flex; align-items:center; gap:1.25rem;
  min-height:64px; max-width:var(--maxw); margin:0 auto; padding:0 1.25rem;
}
.testata__nome{
  font-weight:700; font-size:1.15rem; color:var(--ink);
  letter-spacing:-.01em; margin-right:auto;
}
.testata__nome:hover{text-decoration:none}
.testata__nav{display:flex; align-items:center; gap:.35rem}

.bottone-icona{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .8rem; border-radius:10px; border:1px solid transparent;
  color:var(--ink-soft); font-size:.92rem; font-weight:500;
  background:none; cursor:pointer; font-family:inherit;
}
.bottone-icona:hover{background:var(--bg-soft); color:var(--ink); text-decoration:none}

/* Il contatore parte nascosto: senza, a carrello vuoto comparirebbe uno "0"
   che sembra un errore di caricamento. */
.pallino{
  display:none; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:var(--brand); color:#fff;
  font-size:.72rem; font-weight:700; line-height:20px; text-align:center;
}
.pallino[data-pieno]{display:inline-block}

/* ------------------------------------------------------------------ ricerca */
.ricerca{position:relative; flex:0 1 320px; display:flex}
.ricerca input{
  width:100%; padding:.55rem .8rem; border:1px solid var(--line);
  border-radius:10px; background:var(--bg-soft); color:var(--ink);
  font:inherit; font-size:.92rem;
}
.ricerca input:focus{outline:2px solid var(--brand); outline-offset:-1px; background:var(--bg)}

/* ------------------------------------------------------------------- corpo */
main{min-height:60vh; padding:2rem 0 4rem}
h1{font-size:1.75rem; line-height:1.25; letter-spacing:-.02em; margin:0 0 .5rem}
h2{font-size:1.25rem; letter-spacing:-.01em; margin:2rem 0 1rem}
.sottotitolo{color:var(--ink-soft); margin:0 0 2rem}

/* ---------------------------------------------------------------- catalogo */
.griglia{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.scheda{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.scheda:hover{border-color:var(--brand); transform:translateY(-2px); text-decoration:none}
.scheda__figura{
  aspect-ratio:4/3; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:2rem; border-bottom:1px solid var(--line);
}
.scheda__corpo{padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.scheda__categoria{font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft)}
.scheda__nome{font-weight:600; color:var(--ink); line-height:1.35}
.scheda__prezzo{margin-top:auto; padding-top:.5rem; font-size:1.1rem; font-weight:700; color:var(--ink)}
.scheda__iva{font-size:.78rem; font-weight:400; color:var(--ink-soft)}

/* ----------------------------------------------------------- scheda prodotto */
.prodotto{display:grid; gap:2.5rem; grid-template-columns:minmax(0,1fr) minmax(0,380px)}
@media (max-width:820px){ .prodotto{grid-template-columns:1fr} }

.prodotto__figura{
  aspect-ratio:1/1; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); display:flex; align-items:center;
  justify-content:center; color:var(--ink-soft); font-size:4rem;
}
.prodotto__acquisto{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; background:var(--bg-soft); align-self:start;
}
.prodotto__prezzo{font-size:2rem; font-weight:700; letter-spacing:-.02em}
.prodotto__dettagli{
  list-style:none; padding:0; margin:1.5rem 0 0;
  border-top:1px solid var(--line); font-size:.9rem;
}
.prodotto__dettagli li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line);
}
.prodotto__dettagli dt,.prodotto__dettagli span:first-child{color:var(--ink-soft)}

/* --------------------------------------------------------------- quantita' */
.quantita{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.quantita button{
  width:36px; height:38px; border:none; background:none; cursor:pointer;
  color:var(--ink); font-size:1.1rem; font-family:inherit; line-height:1;
}
.quantita button:hover:not(:disabled){background:var(--bg-soft)}
.quantita button:disabled{opacity:.35; cursor:default}
.quantita input{
  width:48px; height:38px; border:none; border-left:1px solid var(--line);
  border-right:1px solid var(--line); background:none; color:var(--ink);
  text-align:center; font:inherit; font-size:.95rem; -moz-appearance:textfield;
}
.quantita input::-webkit-outer-spin-button,
.quantita input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* ---------------------------------------------------------------- bottoni */
.bottone{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.4rem; border-radius:10px; border:1px solid transparent;
  font:inherit; font-size:.95rem; font-weight:600; cursor:pointer;
  background:var(--brand); color:#fff; text-align:center;
}
.bottone:hover:not(:disabled){background:var(--brand-dark); text-decoration:none; color:#fff}
.bottone:disabled{opacity:.5; cursor:default}
.bottone--largo{width:100%}
.bottone--tenue{background:none; border-color:var(--line); color:var(--ink)}
.bottone--tenue:hover:not(:disabled){background:var(--bg-soft); color:var(--ink)}
.bottone--testo{background:none; border:none; color:var(--ink-soft); padding:.35rem; font-weight:500}
.bottone--testo:hover{color:var(--err-fg); background:none; text-decoration:underline}

/* --------------------------------------------------------------- carrello */
.carrello{display:grid; gap:2rem; grid-template-columns:minmax(0,1fr) minmax(0,340px); align-items:start}
@media (max-width:820px){ .carrello{grid-template-columns:1fr} }

.riga-carrello{
  display:grid; gap:1rem; align-items:center;
  grid-template-columns:72px minmax(0,1fr) auto auto auto;
  padding:1rem 0; border-bottom:1px solid var(--line);
}
.riga-carrello__figura{
  width:72px; height:72px; border-radius:10px; background:var(--bg-soft);
  border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; color:var(--ink-soft); font-size:1.4rem;
}
.riga-carrello__nome{font-weight:600; color:var(--ink)}
.riga-carrello__codice{font-size:.8rem; color:var(--ink-soft)}
.riga-carrello__importo{font-weight:600; min-width:90px; text-align:right}

@media (max-width:620px){
  .riga-carrello{grid-template-columns:60px minmax(0,1fr) auto; row-gap:.75rem}
  .riga-carrello__figura{width:60px; height:60px}
  .riga-carrello__importo{grid-column:2/4; text-align:left}
}

.riepilogo{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; background:var(--bg-soft); position:sticky; top:88px;
}
.riepilogo__voce{display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; font-size:.95rem}
.riepilogo__voce--totale{
  margin-top:.5rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:1.2rem; font-weight:700;
}
.riepilogo__nota{font-size:.8rem; color:var(--ink-soft); margin:.35rem 0 1.25rem}

/* ------------------------------------------------------------------ moduli */
.modulo{max-width:420px; margin:0 auto}
.modulo--largo{max-width:none}
.campo{margin-bottom:1.1rem}
.campo label{display:block; font-size:.88rem; font-weight:600; margin-bottom:.35rem}
.campo input,.campo textarea,.campo select{
  width:100%; padding:.65rem .8rem; border:1px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; font-size:.95rem;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--brand); outline-offset:-1px}
.campo__aiuto{font-size:.8rem; color:var(--ink-soft); margin-top:.3rem}
.coppia{display:grid; gap:1.1rem; grid-template-columns:1fr 1fr}
@media (max-width:560px){ .coppia{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- messaggi */
.avviso{
  padding:.9rem 1.1rem; border-radius:10px; border:1px solid;
  margin-bottom:1.5rem; font-size:.92rem;
}
.avviso--errore{background:var(--err-bg); color:var(--err-fg); border-color:var(--err-line)}
.avviso--ok{background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-line)}
.avviso--attenzione{background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-line)}

.vuoto{text-align:center; padding:4rem 1rem; color:var(--ink-soft)}
.vuoto__icona{font-size:3rem; margin-bottom:1rem; opacity:.5}
.vuoto h2{margin:0 0 .5rem; color:var(--ink)}

/* Segnaposto durante il caricamento: evita che la pagina "salti" quando i dati
   arrivano, e dice che sta succedendo qualcosa senza mostrare uno spinner. */
.scheletro{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  animation:pulsa 1.4s ease-in-out infinite;
}
.scheletro__figura{aspect-ratio:4/3; background:var(--bg-soft)}
.scheletro__riga{height:12px; margin:.75rem 1rem; border-radius:6px; background:var(--bg-soft)}
.scheletro__riga--corta{width:55%}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .scheletro{animation:none}
  .scheda:hover{transform:none}
}

/* ----------------------------------------------------------------- ordini */
.tabella{width:100%; border-collapse:collapse; font-size:.93rem}
.tabella th{
  text-align:left; padding:.7rem .8rem; border-bottom:2px solid var(--line);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
}
.tabella td{padding:.85rem .8rem; border-bottom:1px solid var(--line)}
.tabella tr:hover td{background:var(--bg-soft)}
.avvolgi-tabella{overflow-x:auto}

.stato{
  display:inline-block; padding:.2rem .6rem; border-radius:999px;
  font-size:.75rem; font-weight:600; background:var(--bg-soft);
  border:1px solid var(--line); color:var(--ink-soft);
}
.stato--confermato{background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-line)}

/* ------------------------------------------------------------------- piede */
.piede{
  border-top:1px solid var(--line); padding:2rem 0; margin-top:4rem;
  color:var(--ink-soft); font-size:.87rem;
}
.piede__riga{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center}

/* Visibile solo agli screen reader — usato per annunciare gli aggiornamenti
   del carrello, che altrimenti cambierebbero in silenzio. */
.solo-lettori{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}