/* 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. */

/* Palette PASTELLO su fondo chiaro, dal 2026-08-19 — la stessa di site.css.
   I due file restano gemelli di proposito: una vetrina che non somiglia al sito
   da cui il negoziante l'ha comprata sembra un altro prodotto.

   Pastello sulle SUPERFICI, tinta profonda su testo e bottoni: e' l'unico modo
   per avere l'aria del pastello e insieme un contrasto leggibile.

   ⚠️ Niente tema scuro, come in site.css: con `prefers-color-scheme: dark`
   attivo il fondo diventava nero, cioe' l'opposto di un sito chiaro. */
:root{
  --ink:#111111; --ink-soft:#4a4a4a; --line:#e8e5e0; --bg:#ffffff; --bg-soft:#faf9f6;
  --marchio:#E61873;
  --brand:#C20E58; --brand-soft:#fde7f0; --brand-dark:#8e0a3e;
  --accent:#2f6b5e; --accent-soft:#e3f1ec;
  --ok-bg:#e7f4ea; --ok-fg:#256b3c; --ok-line:#c2e2cc;
  --err-bg:#fdeae1; --err-fg:#a4472c; --err-line:#f3cbba;   /* errori: resta il rosso-terracotta, distinto dal magenta del marchio */
  --warn-bg:#fdf4e0; --warn-fg:#8a6011; --warn-line:#f2e2b6;
  --radius:10px; --maxw:1120px;
}

/* Icone Material Symbols dallo sprite locale /assets/icone.svg — lo stesso che
   usa il sito pubblico. Ereditano colore e dimensione dal testo. */
.ico{width:1.25em; height:1.25em; fill:currentColor; flex:none; vertical-align:-0.28em}

*{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;
  display:flex; align-items:center; gap:.6rem;
}
.testata__nome:hover{text-decoration:none}
/* Il logo del negozio (tema, Premium): decorativo, il nome resta accanto. */
.testata__logo{height:32px; width:auto; display:block}

/* --------------------------- disposizione (tema, Premium): classi sul body.
   Ogni classe corrisponde a una voce di Tema::DISPOSIZIONI; una scelta che
   non avesse regole qui sarebbe una promessa vuota. */
body.testata-scorrevole .testata{position:static}
body.catalogo-elenco .griglia{grid-template-columns:1fr}
body.catalogo-elenco .scheda{flex-direction:row}
body.catalogo-elenco .scheda__figura{
  aspect-ratio:auto; width:180px; flex:none;
  border-bottom:0; border-right:1px solid var(--line);
}
@media (max-width:560px){
  body.catalogo-elenco .scheda__figura{width:110px}
}

/* --------------------------- sezioni della home (tema, Premium).
   Rese dal server (Vetrina::sezioniHome) e riproposte identiche dal JS:
   tutte spente di serie. */
.home-sezioni{display:flex; flex-direction:column; gap:1.5rem; margin:1.75rem 0 2.25rem}
.home-hero{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:3rem 2.5rem; text-align:center}
.home-hero h2{font-size:2rem; letter-spacing:-.02em; line-height:1.15}
.home-hero p{color:var(--ink-soft); margin:.6rem auto 1.2rem; max-width:52ch}
.home-hero__bottone{display:inline-block; background:var(--brand); color:#fff; font-weight:600;
  padding:.7rem 1.5rem; border-radius:var(--radius)}
.home-hero__bottone:hover{background:var(--brand-dark); text-decoration:none; color:#fff}
.home-servizi{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem}
.home-servizio{border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1.1rem;
  display:flex; flex-direction:column; gap:.15rem; font-size:.88rem; background:var(--bg)}
.home-servizio strong{font-size:.95rem}
.home-servizio span{color:var(--ink-soft)}
.home-categorie{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem}
.home-categoria{border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem;
  display:flex; justify-content:space-between; align-items:baseline; font-weight:600; background:var(--bg)}
.home-categoria:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}
.home-categoria span{color:var(--ink-soft); font-weight:400; font-size:.8rem}
.home-banner{background:var(--brand); color:#fff; border-radius:var(--radius);
  padding:1.5rem 2rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem 1.25rem}
.home-banner strong{font-size:1.15rem}
.home-banner span{opacity:.85}
.home-novita h2, .home-testo h2{font-size:1.4rem; letter-spacing:-.01em; margin-bottom:1rem}
.home-testo{max-width:70ch}
.home-testo p{color:var(--ink-soft); margin-bottom:.6rem}

/* Il benvenuto con l'immagine: figura sopra, testo sotto, senza sfondo. */
.home-hero--con-figura{padding:0; overflow:hidden; text-align:left}
.home-hero__figura{width:100%; max-height:340px; object-fit:cover; display:block}
.home-hero--con-figura .home-hero__corpo{padding:1.75rem 2rem 2rem}

/* Barra degli annunci (sopra la testata) e pie' di pagina: ogni pagina. */
.barra-annuncio{background:var(--ink); color:var(--bg); text-align:center;
  font-size:.85rem; padding:.5rem 1.25rem}
.pie-negozio{border-top:1px solid var(--line); color:var(--ink-soft);
  font-size:.85rem; text-align:center; padding:1.5rem 1.25rem; margin-top:3rem}

/* Link alle pagine libere del negozio (chi siamo, spedizioni…), Fase G. */
.pie-negozio__pagine{display:flex; flex-wrap:wrap; gap:.4rem 1.25rem;
  justify-content:center; margin-bottom:.75rem}
.pie-negozio__pagine a{color:inherit}

/* Una pagina libera: colonna di lettura, non un muro a tutta larghezza. */
.pagina-negozio{max-width:46rem; margin:0 auto}
.pagina-negozio p{margin:0 0 1rem; line-height:1.7}

/* --------------------------- modelli di vetrina (tema, Premium).
   Una classe template-<nome> sul body, dalla lista chiusa in Tema.php.
   'serie' non produce classe. I riferimenti visivi: docs/template-frontend/. */

/* Classica: ariosa, schede grandi senza bordo, ombre morbide, titoli centrati. */
body.template-classica .griglia{grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.75rem}
body.template-classica .scheda{border:0; box-shadow:0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06)}
body.template-classica .scheda:hover{box-shadow:0 2px 6px rgba(0,0,0,.10), 0 14px 32px rgba(0,0,0,.10)}
body.template-classica #vista h1{font-size:2.1rem; text-align:center}
body.template-classica .sottotitolo{text-align:center}
body.template-classica .categorie{justify-content:center}
body.template-classica .home-hero{padding:4rem 2.5rem; border:0}

/* Ricca: testata nel colore del negozio, catalogo piu' denso, prezzi in evidenza. */
body.template-ricca .testata{background:var(--brand); border-bottom-color:var(--brand-dark)}
body.template-ricca .testata__nome, body.template-ricca .bottone-icona{color:#fff}
body.template-ricca .bottone-icona:hover{background:var(--brand-dark); color:#fff}
body.template-ricca .ricerca input{background:#fff; border-color:var(--brand-dark)}
body.template-ricca .griglia{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem}
body.template-ricca .scheda__prezzo{color:var(--brand)}

/* Laterale: le categorie diventano una colonna fissa a sinistra del catalogo.
   Copre entrambe le forme del markup: nav diretta (rendering server) e
   dentro #categorie (ridisegno JavaScript). */
@media (min-width:901px){
  body.template-laterale #vista{display:grid; grid-template-columns:240px minmax(0,1fr); column-gap:1.75rem}
  body.template-laterale #vista>*{grid-column:2}
  body.template-laterale #vista>.categorie,
  body.template-laterale #vista>#categorie{grid-column:1; grid-row:1/span 30;
    align-self:start; position:sticky; top:84px}
  body.template-laterale #vista .categorie{flex-direction:column; align-items:stretch}
  body.template-laterale #vista .categoria{display:flex; justify-content:space-between}
}

/* Notte: fondo scuro. Sovrascrive le variabili a livello di body, quindi
   vince anche sui colori del tema: chi sceglie Notte sceglie la notte. */
body.template-notte{--bg:#161412; --bg-soft:#1f1c1a; --ink:#f1ede8; --ink-soft:#b5aea6;
  --line:#332f2c; background:var(--bg); color:var(--ink)}
body.template-notte .scheda:hover{border-color:var(--brand)}
.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}

/* -------------------------------------------------------------- categorie */
.categorie{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:0 0 2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.categoria{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .85rem; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-soft); font-size:.9rem; font-weight:500; background:var(--bg);
}
.categoria:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}
.categoria--attiva{background:var(--brand); border-color:var(--brand); color:#fff}
.categoria--attiva:hover{color:#fff}
.categoria__conta{font-size:.78rem; opacity:.7}

/* --------------------------------------------------- filtri e ordinamento */
/* Filtro per fascia di prezzo + ordinamento del catalogo: stessi colori e
   forme delle categorie, cosi' la barra non sembra un modulo estraneo. */
.filtri{
  display:flex; flex-wrap:wrap; align-items:end; gap:.75rem;
  margin:0 0 1.5rem;
}
.filtri__prezzo{
  display:flex; align-items:center; gap:.5rem;
}
.filtri label{font-size:.85rem; color:var(--ink-soft); font-weight:500}
.filtri input, .filtri select{
  padding:.45rem .7rem; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-soft); color:var(--ink); font:inherit; font-size:.9rem;
}
.filtri input{width:7.5rem}
.filtri input:focus, .filtri select:focus{
  outline:2px solid var(--brand); outline-offset:-1px; background:var(--bg);
}
.filtri input::placeholder{color:var(--ink-soft)}

/* ---------------------------------------------------------------- catalogo */
.griglia{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

/* Prodotti correlati («spesso comprati insieme»): titolo staccato dal dettaglio. */
.correlati__titolo{margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.5rem}
.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); border-bottom:1px solid var(--line);
}
.scheda__figura .ico{width:34px; height:34px; vertical-align:0; opacity:.55}
.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);
}
.prodotto__figura .ico{width:64px; height:64px; vertical-align:0; opacity:.5}
.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);
}
.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)}
/* Ora e' un <svg>, non piu' un'emoji: font-size non lo dimensiona. */
.vuoto__icona{width:52px; height:52px; margin:0 auto 1rem; display:block;
  fill:currentColor; color:var(--ink-soft); opacity:.45}
.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)}
/* Aggiunte con i preventivi (2026-08-18): servono a distinguere "sto
   aspettando" da "e' andata male", che finora erano entrambe grigie. */
.stato--attesa{background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-line)}
.stato--negato{background:var(--err-bg); color:var(--err-fg); border-color:var(--err-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;
}

/* ===========================================================================
   Aggiunte il 2026-08-18: prezzo riservato, disponibilita', account
   (resi, assistenza, password). Vedi CLAUDE.md sulle sezioni gia' costruite
   lato API senza interfaccia fino a questa data.
   =========================================================================== */

/* Un prodotto esaurito resta nel catalogo, non si nasconde: la vetrina deve
   dire "non c'e' adesso", non far finta che non esista. */
.scheda--esaurito{opacity:.65}
.scheda--esaurito .scheda__figura{position:relative}

.etichetta{
  display:inline-block; font-size:.72rem; font-weight:600;
  padding:.15rem .5rem; border-radius:999px; align-self:flex-start;
}
.etichetta--esaurito{
  position:absolute; top:.5rem; right:.5rem;
  background:var(--err-bg); color:var(--err-fg); border:1px solid var(--err-line);
}
.etichetta--riservato{background:var(--brand-soft); color:var(--brand-dark)}

/* Il prezzo di catalogo, barrato, accanto a quello riservato: si vede subito
   quanto si sta risparmiando, non solo che il prezzo e' "diverso". */
.scheda__prezzo-prima{
  display:block; font-size:.85rem; font-weight:400;
  text-decoration:line-through; color:var(--ink-soft);
}

/* ------------------------------------------------------------ conversazione */
.conversazione{
  display:flex; flex-direction:column; gap:.75rem;
  margin:1rem 0; max-height:50vh; overflow-y:auto;
  padding:.75rem; background:var(--bg-soft); border-radius:var(--radius);
}
.messaggio{
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:.65rem .8rem; max-width:85%;
}
/* I nostri messaggi (scritti dal cliente stesso) a destra: si legge a colpo
   d'occhio chi ha detto cosa senza dover leggere ogni etichetta. */
.messaggio--nostro{align-self:flex-end; background:var(--brand-soft)}
.messaggio__chi{font-size:.75rem; opacity:.8; margin-bottom:.25rem}
.messaggio__chi .campo__aiuto{display:inline; margin-left:.4rem}
.messaggio__testo{white-space:pre-wrap; word-break:break-word}

/* Le due .figura erano pensate solo per l'emoji segnaposto; quando c'e' una
   foto reale (immagine_principale, dal 2026-08-18) l'<img> deve riempire lo
   stesso riquadro senza deformarsi. */
.scheda__figura img, .prodotto__figura img{
  width:100%; height:100%; object-fit:cover;
}

.riga-carrello__figura .ico{width:26px; height:26px; vertical-align:0}

/* --------------------------------------------------------------- consenso */
/* Compare in basso e non copre il contenuto: un banner che occupa lo schermo
   spinge ad accettare per toglierlo di mezzo, e un consenso strappato cosi'
   non e' libero — quindi non e' valido. Le due scelte hanno lo stesso peso
   visivo di proposito. */
.consenso{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:100;
  max-width:640px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.25rem; box-shadow:0 12px 32px -12px rgba(0,0,0,.35);
}
.consenso[hidden]{display:none}
.consenso__testo{flex:1 1 300px; font-size:.88rem; color:var(--ink-soft)}
.consenso__testo strong{display:block; color:var(--ink); margin-bottom:.25rem}
.consenso__testo p{margin:0}
.consenso__azioni{display:flex; gap:.5rem; flex-wrap:wrap}

/* ----------------------------------------------------------- stampa ordine
 * Il bottone «Stampa» del dettaglio ordine del cliente stampa SOLO il foglio
 * dell'ordine: via testata, piede, banner del consenso, bottoni e link interni.
 * Bianco e nero, bordi semplici: un foglio da mettere nel pacco o in archivio. */
@media print{
  .testata, .piede, .consenso, .solo-lettori{ display:none !important; }

  /* Comandi e navigazione non si stampano: resta solo il contenuto dell'ordine. */
  .bottone, .bottone-icona, button, a[data-vai], .sottotitolo{ display:none !important; }

  body, #vista, #vista *{
    background:none !important; color:#000 !important;
    box-shadow:none !important; text-shadow:none !important;
  }

  .tabella th, .tabella td{ border:1px solid #000 !important; }
  .stato{ border:1px solid #000 !important; }
  #vista{ padding:0; max-width:none; }
}