/* Svendita Arredamenti Letteriello — foglio di stile principale (sito pubblico + area riservata) */

:root {
  /* Palette allineata al logo Arredamenti Letteriello (ambra + grigio caldo).
     Ogni accostamento testo/fondo qui sotto arriva almeno a 4,5:1, il minimo
     perché un testo resti leggibile anche al sole, su uno schermo poco luminoso
     o con una vista non perfetta. Due regole da rispettare quando si aggiunge
     un colore: l'arancione del marchio è un FONDO e vuole sopra il testo scuro
     (bianco su arancione si legge male, 2,4:1), mentre come TESTO su fondo
     chiaro va usata la variante scura. */
  --colore-accento: #f0921e;        /* fondo di pulsanti e badge, testo scuro sopra: 5,92:1 */
  --colore-accento-passaggio: #d87e0e; /* stesso arancione al passaggio del mouse: 4,63:1 */
  --colore-accento-scuro: #a1580d;  /* arancione per il testo su fondo chiaro: almeno 4,56:1 */
  --colore-sfondo: #faf7f2;
  --colore-superficie: #ffffff;
  --colore-testo: #2e2b28;
  --colore-testo-tenue: #6c6a68;    /* almeno 4,58:1 su tutti i fondi chiari del sito */
  --colore-bordo: #e3e1dc;
  --colore-successo: #2f6b3a;
  --colore-successo-sfondo: #e6f2e6;
  --colore-errore: #a8341f;
  --colore-errore-sfondo: #fbe9e5;
  --colore-venduto: #767471;        /* fondo del badge "venduto", bianco sopra: 4,66:1 */
  --colore-riservato: #c98a2e;      /* fondo del badge "riservato", testo scuro sopra: 4,80:1 */
  --colore-riservato-testo: #8e6220; /* stessa ambra per il testo su fondo chiaro: almeno 4,56:1 */
  --colore-riservato-sfondo: #fbf1e0;
  --colore-bozza: #4a6fa5;          /* fondo del badge "bozza", bianco sopra: 5,11:1 */
  --raggio: 12px;
  --ombra: 0 2px 10px rgba(43, 36, 32, 0.08);
  --ombra-forte: 0 6px 24px rgba(43, 36, 32, 0.14);
}

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

body {
  margin: 0;
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: var(--colore-accento-scuro); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}
.wrap-stretta {
  max-width: 420px;
  margin: 48px auto;
  padding: 0 16px;
}

/* ---------- Header pubblico ---------- */

.site-header {
  background: var(--colore-superficie);
  border-bottom: 1px solid var(--colore-bordo);
  padding: 14px 0;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--colore-testo); min-width: 0; }
.brand-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torna-sito {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  background: var(--colore-superficie);
  color: var(--colore-testo);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.torna-sito:hover { border-color: var(--colore-accento-scuro); text-decoration: none; }
.torna-sito svg { color: var(--colore-accento-scuro); }
.torna-sito-corto { display: none; }
/* Sui telefoni più stretti il pulsante si accorcia, così il nome della vendita resta leggibile. */
@media (max-width: 400px) {
  .torna-sito { padding: 8px 12px; }
  .torna-sito-lungo { display: none; }
  .torna-sito-corto { display: inline; }
}
.brand:hover { text-decoration: none; }
.brand-badge {
  background: var(--colore-accento);
  color: var(--colore-testo);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
}
.brand-nome { font-weight: 700; font-size: 1.05rem; }

.banner-anteprima {
  background: #fff4da;
  border-bottom: 1px solid #eeddb0;
  color: #6b5216;
  font-size: 0.9rem;
  padding: 8px 0;
}

.site-footer {
  margin-top: 48px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--colore-bordo);
  color: var(--colore-testo-tenue);
  font-size: 0.9rem;
  text-align: center;
}
.footer-piccolo { font-size: 0.82rem; margin-top: 6px; }

/* ---------- Bottoni ---------- */

.btn {
  display: inline-block;
  border: 1px solid var(--colore-bordo);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { border-color: var(--colore-accento); text-decoration: none; }
.btn-primario {
  background: var(--colore-accento);
  border-color: var(--colore-accento);
  color: var(--colore-testo);
}
.btn-primario:hover { background: var(--colore-accento-passaggio); border-color: var(--colore-accento-passaggio); }
.btn-piccolo { padding: 8px 14px; font-size: 0.85rem; min-height: 38px; }
.btn-grande {
  display: block;
  width: 100%;
  padding: 16px 20px;
  font-size: 1.08rem;
  text-align: center;
  border-radius: var(--raggio);
}
.btn-scegli-foto { margin-bottom: 6px; }
.input-file-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.btn-whatsapp {
  display: block;
  width: 100%;
  text-align: center;
  background: #25d366;
  border-color: #25d366;
  color: var(--colore-testo);
}
.btn-whatsapp:hover { background: #1eb955; border-color: #1eb955; }
.btn-pericolo { color: var(--colore-errore); border-color: var(--colore-errore); }
.btn-pericolo:hover { background: var(--colore-errore-sfondo); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--colore-superficie); border-color: var(--colore-bordo); }

/* ---------- Stato (futura / terminata) ---------- */

.stato-box { text-align: center; padding: 56px 16px 72px; }
.stato-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-forte);
  padding: 44px 32px;
}
.stato-badge {
  display: inline-block;
  background: var(--colore-accento);
  color: var(--colore-testo);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.stato-badge-conclusa { background: var(--colore-venduto); color: #fff; }
.stato-box h1 { font-size: 1.85rem; margin: 0 0 14px; }
.stato-sottotitolo { color: var(--colore-testo-tenue); font-size: 1.02rem; line-height: 1.6; margin: 0 0 32px; }

.stato-invito {
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 24px 26px;
  margin: 0 0 28px;
}
.stato-invito p { margin: 0 0 18px; color: var(--colore-testo); line-height: 1.5; }
.stato-invito .btn { display: block; width: 100%; }

.stato-link-secondario {
  display: inline-block;
  color: var(--colore-testo-tenue);
  font-size: 0.92rem;
  font-weight: 600;
}
.stato-link-secondario:hover { color: var(--colore-accento-scuro); }

/* ---------- Disclaimer ---------- */

.disclaimer { max-width: 640px; padding-top: 32px; padding-bottom: 48px; }
.disclaimer h1 { font-size: 1.5rem; }
.disclaimer-testo {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 22px 24px;
  color: var(--colore-testo-tenue);
  font-size: 0.95rem;
  margin-bottom: 20px;
}
.disclaimer-intro { margin: 0 0 20px; line-height: 1.55; }

.disclaimer-sintesi {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.disclaimer-sintesi p { margin: 0 0 14px; color: var(--colore-testo); font-size: 0.94rem; line-height: 1.6; }
/* L'ultima indicazione (trasporto, consegna e montaggio esclusi) sta su una riga sua, con
   la barra di richiamo a sinistra: il grassetto da solo, in fondo a un blocco di testo
   della stessa misura, si perdeva. Il colore del testo resta quello delle altre righe
   perché è già quello che regge il contrasto richiesto. */
.disclaimer-sintesi .sintesi-ultimo-punto {
  padding: 10px 0 10px 14px;
  border-left: 3px solid var(--colore-accento);
}
.disclaimer-link-completo {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
}

.disclaimer-lista {
  list-style: none;
  counter-reset: disclaimer-contatore;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.disclaimer-lista > li {
  counter-increment: disclaimer-contatore;
  position: relative;
  padding-left: 38px;
  color: var(--colore-testo);
  line-height: 1.55;
}
.disclaimer-lista > li::before {
  content: counter(disclaimer-contatore);
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--colore-accento);
  color: var(--colore-testo);
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.disclaimer-titolo-punto {
  display: block;
  font-weight: 700;
  color: var(--colore-testo);
  margin-bottom: 4px;
}
.disclaimer-corpo-punto {
  display: block;
}

.disclaimer-sottolista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.disclaimer-sottolista li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--colore-testo-tenue);
}
.disclaimer-sottolista li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--colore-accento-scuro);
}

.disclaimer-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.checkbox-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  cursor: pointer;
  min-height: 44px;
  padding: 2px 0;
}
/* Le caselle di spunta del browser sono minuscole: ingrandite si centrano
   molto più facilmente con il dito. */
.checkbox-riga input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--colore-accento-scuro); }

/* ---------- Pagina legale (Privacy) ---------- */

.pagina-legale { max-width: 720px; padding-top: 32px; padding-bottom: 56px; }
.pagina-legale h1 { font-size: 1.5rem; margin-bottom: 4px; }
.pagina-legale-sottotitolo { color: var(--colore-testo-tenue); font-size: 0.85rem; margin-bottom: 20px; }
.pagina-legale > p { line-height: 1.6; margin-bottom: 24px; }

.pagina-legale-lista {
  list-style: none;
  counter-reset: legale-contatore;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pagina-legale-lista > li {
  counter-increment: legale-contatore;
  position: relative;
  padding-left: 38px;
}
.pagina-legale-lista > li::before {
  content: counter(legale-contatore);
  position: absolute;
  top: 2px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--colore-accento);
  color: var(--colore-testo);
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagina-legale-lista h2 { font-size: 1.02rem; margin: 0 0 6px; }
.pagina-legale-lista p { line-height: 1.6; color: var(--colore-testo); margin: 0 0 6px; }

.pagina-legale-sottolista {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pagina-legale-sottolista li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  color: var(--colore-testo-tenue);
}
.pagina-legale-sottolista li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--colore-accento-scuro);
}

.nota-privacy { font-size: 0.8rem; color: var(--colore-testo-tenue); margin: 8px 0 0; }

/* ---------- Catalogo ---------- */

.catalogo { padding-top: 28px; padding-bottom: 48px; }
.catalogo-intro h1 { font-size: 1.6rem; margin-bottom: 8px; }
.catalogo-intro p { color: var(--colore-testo-tenue); }
.catalogo-promessa { margin: 0 0 10px; }
.catalogo-dettagli { margin-bottom: 16px; }

/* Blocchi di testo richiudibili della testata: la riga resta sempre leggibile, il resto si
   apre con un tocco. Il freccino è disegnato qui perché quello di sistema cambia forma da un
   browser all'altro e in alcuni non si vede proprio. */
.blocco-pieghevole {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  margin-bottom: 12px;
}
.blocco-pieghevole > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--colore-testo);
}
.blocco-pieghevole > summary::-webkit-details-marker { display: none; }
.blocco-pieghevole > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--colore-accento-scuro);
  border-bottom: 2px solid var(--colore-accento-scuro);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.blocco-pieghevole[open] > summary::before { transform: rotate(45deg); }
.blocco-pieghevole > summary:focus-visible { outline: 3px solid var(--colore-accento-scuro); outline-offset: 2px; }
.blocco-pieghevole-corpo { padding: 0 16px 14px; }
.blocco-pieghevole-corpo p { margin: 0 0 10px; line-height: 1.55; }
.blocco-pieghevole-corpo p:last-child { margin-bottom: 0; }
.blocco-pieghevole-corpo strong { color: var(--colore-testo); }

.filtri {
  margin-bottom: 24px;
  padding: 12px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
}

.filtri-principale { display: flex; gap: 8px; align-items: center; }
.filtri input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  font-size: 1rem;
}
.filtri-principale .btn { flex: 0 0 auto; padding: 11px 16px; display: inline-flex; align-items: center; gap: 7px; }
.icona-lente {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
@media (max-width: 560px) {
  /* Titolo e margine della testata si stringono: ogni riga risparmiata qui è un pezzo di
     mobile che il cliente vede senza dover scorrere. */
  .catalogo { padding-top: 18px; }
  .catalogo-intro h1 { font-size: 1.35rem; line-height: 1.25; }
  .vista-toggle button { padding: 9px 14px; }

  /* Sul telefono i tre comandi in fila lasciavano al campo di ricerca poco più di cento
     pixel, e il pulsante dei filtri era un bottone qualsiasi stretto in un angolo: i clienti
     non lo trovavano. Ora la ricerca si prende la prima riga con la sua lente e "Ordina e
     filtra" va a capo largo quanto la pagina, dove non si può non vederlo. */
  .filtri-principale { flex-wrap: wrap; }
  #apri-filtri { flex: 1 1 100%; justify-content: center; }
  .filtri { padding: 10px; margin-bottom: 14px; }
  .catalogo-dettagli { margin-bottom: 12px; }

  /* Su schermi stretti "Cerca" resta la sola lente: con la parola per esteso il campo di
     ricerca si riduceva a mostrare mezza parola di quello che si stava scrivendo. */
  .solo-schermo-largo {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .filtri-principale .btn { padding: 11px 13px; font-size: 0.9rem; }
}

.filtri-avanzati {
  display: none;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--colore-bordo);
}
.filtri.aperto .filtri-avanzati { display: flex; }
.filtri select {
  flex: 1 1 200px;
  padding: 10px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--colore-superficie);
  color: var(--colore-testo);
}
/* Categorie come pulsanti in fila, scorrevoli di lato sul telefono: sono il modo in cui la
   gente cerca un mobile ("voglio vedere i divani"), quindi stanno fuori dal pannello e si
   vedono senza aprire niente. */
/* Questa è la sola parte che resta agganciata in alto mentre si scorre: cambiare reparto
   deve essere sempre a un dito di distanza, ma il riquadro intero della ricerca occupava un
   quinto dello schermo del telefono per tutta la navigazione. */
.barra-categorie-contenitore {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 12px;
  background: var(--colore-sfondo);
  border-bottom: 1px solid var(--colore-bordo);
}
.barra-categorie {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Frecce ai due lati della fila: compaiono solo dal lato in cui ci sono altre categorie
   nascoste. La sfumatura copre l'ultima categoria tagliata, così si capisce che la fila
   prosegue oltre il bordo e non che il bottone è stato stampato male. */
.freccia-categorie {
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 52px;
  display: flex;
  align-items: center;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--colore-accento-scuro);
  cursor: pointer;
  z-index: 1;
}
.freccia-destra {
  right: 0;
  justify-content: flex-end;
  padding-right: 4px;
  background: linear-gradient(to right, rgba(250, 247, 242, 0), var(--colore-sfondo) 55%);
}
.freccia-sinistra {
  left: 0;
  justify-content: flex-start;
  padding-left: 4px;
  background: linear-gradient(to left, rgba(250, 247, 242, 0), var(--colore-sfondo) 55%);
}
.freccia-categorie[hidden] { display: none; }
.freccia-categorie:focus-visible { outline: 3px solid var(--colore-accento-scuro); outline-offset: -3px; }
.chip-categoria {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  background: var(--colore-superficie);
  color: var(--colore-testo);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chip-categoria:hover { border-color: var(--colore-accento-scuro); }
.chip-categoria:focus-visible { outline: 3px solid var(--colore-accento-scuro); outline-offset: 2px; }
.chip-categoria.attivo {
  background: var(--colore-accento);
  border-color: var(--colore-accento);
}
.chip-conteggio {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--colore-testo-tenue);
}
.chip-categoria.attivo .chip-conteggio { color: var(--colore-testo); }
@media (min-width: 760px) {
  /* Da computer c'è spazio: vanno a capo invece di nascondersi oltre il bordo. */
  .barra-categorie { flex-wrap: wrap; overflow-x: visible; }
  .freccia-categorie { display: none; }
}

/* Numero sul pulsante "Ordina e filtra": dice quanti filtri sono attivi là dentro anche
   quando il pannello è chiuso, così nessuno crede che manchino dei prodotti. */
.pallino-filtri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--colore-accento-scuro);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}
.pallino-filtri.nascosto { display: none; }

.annuncio-risultati {
  margin: 10px 0 12px;
  font-size: 0.88rem;
  color: var(--colore-testo-tenue);
}
/* Vuoto non deve lasciare un buco: lo spazio lo prende solo quando ha qualcosa da dire.
   Senza :empty restava sempre una riga bianca fra i filtri e i prodotti. */
.annuncio-risultati:empty { margin: 0; }

@media (min-width: 760px) {
  /* Su schermo grande c'è spazio: i filtri restano sempre in vista e il
     pulsante che li apre non serve. */
  .filtri-avanzati { display: flex; }
  #apri-filtri { display: none; }
}

.vista-toggle {
  display: inline-flex;
  max-width: 100%;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 6px;
}
.vista-toggle button {
  border: none;
  background: transparent;
  color: var(--colore-testo-tenue);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
}
.vista-toggle button.attivo { background: var(--colore-accento); color: var(--colore-testo); }
.aiuto-vista { margin: 6px 0 14px; font-size: 0.8rem; }
.vista-contenuto.nascosto { display: none; }

.vuoto { color: var(--colore-testo-tenue); padding: 32px 0; text-align: center; }
.vuoto.nascosto { display: none; }

/* Precisazione sugli articoli che compaiono sotto più categorie: si legge prima
   dei blocchi, ma senza pesare come un avviso. */
.nota-categorie {
  margin: 0 0 14px;
  padding: 9px 12px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-left: 3px solid var(--colore-accento);
  border-radius: var(--raggio);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--colore-testo);
}

.categoria-blocco {
  margin-bottom: 18px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}
.categoria-blocco.nascosto { display: none; }
.categoria-blocco summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fbf5ec;
}
.categoria-blocco summary::-webkit-details-marker { display: none; }
.categoria-blocco summary .conteggio {
  color: var(--colore-testo-tenue);
  font-weight: 500;
  font-size: 0.85rem;
}

.griglia-prodotti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.scheda-prodotto {
  display: block;
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--colore-superficie);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.scheda-prodotto:hover { box-shadow: var(--ombra-forte); text-decoration: none; transform: translateY(-2px); }
.scheda-prodotto.nascosto { display: none; }

/* Riquadro quadrato invece di 4:3: le foto degli arredi arrivano sia in verticale
   (armadi, librerie) sia in orizzontale (divani, tavoli), e il quadrato è quello che
   lascia meno spazio vuoto attorno mostrando comunque il mobile per intero. */
.scheda-foto { position: relative; aspect-ratio: 1 / 1; background: #f1ece3; }
.scheda-foto img { width: 100%; height: 100%; object-fit: contain; }
.foto-assente {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--colore-testo-tenue); font-size: 0.85rem; text-align: center; padding: 8px;
}

.badge-sconto {
  position: absolute; top: 8px; left: 8px;
  background: var(--colore-accento); color: var(--colore-testo);
  font-weight: 700; font-size: 0.8rem;
  padding: 4px 9px; border-radius: 999px;
}
.badge-sconto-grande { position: static; display: inline-block; font-size: 1rem; padding: 6px 14px; }
.badge-sconto-inline { position: static; display: inline-block; }

.nastro-venduto, .nastro-riservato {
  position: absolute; top: 12px; right: -30px;
  color: #fff;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 5px 36px; transform: rotate(35deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.nastro-venduto { background: var(--colore-venduto); }
/* Sull'ambra chiara il bianco sparisce: qui il testo torna scuro. */
.nastro-riservato { background: var(--colore-riservato); color: var(--colore-testo); }
.nastro-grande { font-size: 0.95rem; padding: 7px 46px; top: 18px; right: -38px; }

.scheda-prodotto.venduto .scheda-foto img,
.scheda-prodotto.riservato .scheda-foto img { filter: grayscale(70%); opacity: 0.75; }

.scheda-corpo { padding: 12px 14px 16px; }
.scheda-codice {
  display: block; font-size: 0.86rem; font-weight: 600;
  color: var(--colore-testo-tenue); margin-bottom: 3px;
}
.scheda-nome { font-size: 1.08rem; margin: 0 0 6px; }
.scheda-descrizione { font-size: 0.92rem; color: var(--colore-testo-tenue); margin-bottom: 10px; }

.scheda-prezzi { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.prezzo-blocco { display: flex; flex-direction: column; gap: 1px; }
.prezzo-etichetta {
  display: block; font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--colore-testo-tenue);
}
.prezzo-originale { color: var(--colore-testo-tenue); font-size: 0.94rem; }
.prezzo-finale { color: var(--colore-accento-scuro); font-weight: 800; font-size: 1.3rem; }
.scheda-iva { display: block; font-size: 0.8rem; color: var(--colore-testo-tenue); margin-top: 4px; }

.etichetta-stato {
  color: #fff;
  font-weight: 700; font-size: 0.75rem;
  padding: 3px 9px; border-radius: 999px;
}
.etichetta-venduto { background: var(--colore-venduto); }
.etichetta-riservato { background: var(--colore-riservato); color: var(--colore-testo); }
.etichetta-bozza { background: var(--colore-bozza); }
.etichetta-novita { background: var(--colore-testo); }

.etichetta-quantita {
  display: inline-block;
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  font-weight: 600; font-size: 0.75rem;
  padding: 3px 9px; border-radius: 999px;
}
.etichetta-quantita-attesa { color: var(--colore-riservato-testo); border-color: var(--colore-riservato); }

/* ---------- Dettaglio prodotto ---------- */

.dettaglio { padding-top: 24px; padding-bottom: 48px; }
.torna-indietro { display: inline-block; margin-bottom: 18px; font-size: 0.9rem; }
.dettaglio-layout { display: grid; gap: 28px; grid-template-columns: 1fr; }
/* Il nastro "VENDUTO"/"RISERVATO" è ruotato e sborda di proposito oltre l'angolo, ma
   così faceva scorrere di lato l'intera pagina sul telefono: qui viene tagliato al
   bordo del riquadro, che è poi l'effetto voluto. */
.dettaglio-galleria { position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.foto-assente-grande { aspect-ratio: 4/3; border-radius: var(--raggio); border: 1px solid var(--colore-bordo); }

.galleria-principale {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  aspect-ratio: 1 / 1;
  border-radius: var(--raggio);
  border: 1px solid var(--colore-bordo);
  background: #f1ece3;
  -webkit-overflow-scrolling: touch;
}
.galleria-lastra {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
/* I mobili vanno visti per intero: ritagliare la foto per riempire il riquadro
   tagliava via proprio la parte che fa riconoscere il pezzo. */
.galleria-principale img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galleria-conteggio {
  margin: 0;
  font-size: 0.82rem;
  color: var(--colore-testo-tenue);
  text-align: center;
}

.finestra-foto {
  border: none;
  padding: 0;
  max-width: 96vw;
  max-height: 92vh;
  background: var(--colore-testo);
  border-radius: var(--raggio);
  overflow: hidden;
}
.finestra-foto::backdrop { background: rgba(20, 17, 15, 0.82); }
.finestra-foto img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; }
.chiudi-finestra-foto {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--colore-testo);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.galleria-miniature { display: flex; gap: 8px; flex-wrap: wrap; }
.miniatura {
  width: 72px; height: 72px; padding: 0;
  border: 2px solid var(--colore-bordo); border-radius: 8px;
  overflow: hidden; cursor: pointer; background: none;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura:hover { border-color: var(--colore-accento-scuro); }
.miniatura.attiva { border-color: var(--colore-accento-scuro); box-shadow: 0 0 0 2px rgba(161, 88, 13, 0.25); }
.dettaglio-info h1 { font-size: 1.5rem; }
.dettaglio-descrizione { color: var(--colore-testo-tenue); white-space: pre-line; }

.dettaglio-caratteristiche {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.9rem; color: var(--colore-testo);
}

.dettaglio-quantita {
  display: inline-block; margin: 0 0 16px;
  font-size: 0.85rem; font-weight: 700; color: var(--colore-accento-scuro);
}

.blocco-prezzi {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px; padding: 14px 16px;
  background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
}
.prezzo-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prezzo-riga .prezzo-etichetta { font-size: 0.78rem; }
.dettaglio-prezzi .prezzo-finale { font-size: 1.4rem; }
.dettaglio-prezzi .prezzo-originale small,
.dettaglio-prezzi .prezzo-finale small { font-size: 0.68rem; font-weight: 400; color: var(--colore-testo-tenue); }
.prezzo-convenienza { padding-top: 6px; border-top: 1px dashed var(--colore-bordo); }
.convenienza-valore { color: var(--colore-accento-scuro); font-weight: 800; font-size: 1.05rem; }

.avviso-disponibilita { font-size: 0.82rem; color: var(--colore-testo-tenue); margin: 0 0 14px; }
.avviso-non-vincolante {
  font-size: 0.82rem; color: var(--colore-testo-tenue);
  background: var(--colore-sfondo); border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
  padding: 10px 12px; margin: 0 0 14px;
}

.box-info-vendita {
  margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--colore-bordo); border-radius: var(--raggio);
  font-size: 0.82rem; color: var(--colore-testo-tenue);
}
.box-info-vendita p { margin: 0 0 8px; }
.box-info-vendita p:last-child { margin-bottom: 0; }
.box-info-link a { font-weight: 600; }

.catalogo-link-condizioni { font-size: 0.85rem; margin-top: 2px; }
/* Precisazione sull'IVA: sta sotto l'introduzione, leggibile ma senza rubare
   l'attenzione agli articoli. */
.nota-iva { font-size: 0.9rem; color: var(--colore-testo-tenue); margin-bottom: 6px; }
.nota-iva strong { color: var(--colore-testo); }

.avviso-venduto { color: var(--colore-venduto); font-weight: 700; }
.avviso-riservato { color: var(--colore-riservato-testo); font-weight: 700; }
.invito-negozio { color: var(--colore-testo-tenue); font-size: 0.92rem; }

.riquadro-prenota {
  margin-top: 20px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-left: 4px solid var(--colore-accento);
  border-radius: var(--raggio);
  padding: 16px 18px;
}
.riquadro-prenota h2 { font-size: 1.05rem; margin-bottom: 6px; }
.riquadro-prenota p { font-size: 0.9rem; color: var(--colore-testo-tenue); }
.form-prenota { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.form-prenota label { margin: 0 0 4px; flex-basis: 100%; }
.form-prenota input[type="email"] { flex: 1 1 220px; }
.form-prenota button { flex: 0 0 auto; }
.riquadro-prenota .separatore-o {
  text-align: center;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0;
}

@media (min-width: 720px) {
  .dettaglio-layout { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* ---------- Form generici ---------- */

form label, .etichetta-campo {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin: 14px 0 6px;
}
form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="search"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  font-size: 0.98rem;
  font-family: inherit;
  background: var(--colore-superficie);
  color: var(--colore-testo);
}
form input:focus, form select:focus, form textarea:focus {
  outline: 2px solid var(--colore-accento-scuro);
  outline-offset: 1px;
}

/* Chi naviga con il tasto Tab deve vedere sempre dov'è arrivato: senza questo
   contorno, su pulsanti e collegamenti il punto attivo era invisibile. Si usa
   :focus-visible e non :focus per non disegnarlo a chi clicca con il mouse. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--colore-accento-scuro);
  outline-offset: 2px;
  border-radius: 6px;
}
.aiuto { font-size: 0.8rem; color: var(--colore-testo-tenue); margin-top: 4px; }
.errore-campo {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  flex-basis: 100%;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--colore-errore);
}
.errore-campo::before { content: "!"; font-weight: 800; }
form input[aria-invalid="true"] { border-color: var(--colore-errore); border-width: 2px; }
.aiuto code {
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.78rem;
}
.form-ripristina { margin-top: 20px; }
.lista-checkbox-categorie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 12px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 6px;
}
.lista-checkbox-categorie .checkbox-riga { margin: 0; }
.riga-doppia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.azioni-form { display: flex; gap: 12px; margin-top: 20px; align-items: center; }
.form-inline { display: inline-block; margin: 0; }

/* ---------- Login / setup ---------- */

.pagina-login { display: flex; min-height: 100vh; align-items: center; }
.riquadro-login {
  width: 100%;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 28px 24px;
  box-shadow: var(--ombra);
}
.riquadro-login h1 { font-size: 1.3rem; }

/* ---------- Avvisi ---------- */

.avviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 0.92rem; }
.avviso-successo { background: var(--colore-successo-sfondo); color: var(--colore-successo); }
.avviso-errore { background: var(--colore-errore-sfondo); color: var(--colore-errore); }

/* ---------- Area riservata ---------- */

.admin-body { background: var(--colore-sfondo); }
.admin-header { background: var(--colore-testo); color: #fff; }
.admin-header-riga { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.admin-header .brand { color: #fff; }
.admin-header .brand-badge { background: var(--colore-accento); }
.admin-menu-toggle {
  display: block;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 8px;
  padding: 6px 12px; font-size: 0.85rem;
}
.admin-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.admin-nav.aperto { display: flex; }
.admin-nav a {
  color: #f0ece6;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-nav a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
.badge-nav {
  display: inline-block;
  background: var(--colore-accento);
  color: var(--colore-testo);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

@media (min-width: 860px) {
  .admin-menu-toggle { display: none; }
  .admin-nav { display: flex !important; flex-direction: row; flex-wrap: wrap; border-top: none; }
  .admin-nav a { border-bottom: none; padding: 14px 14px; }
}

.admin-main { padding-top: 24px; padding-bottom: 56px; }

.admin-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}

.admin-sezione-titolo {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colore-testo-tenue);
  margin: 28px 0 12px;
}
.admin-sezione-venduti { margin-top: 8px; }
.admin-sezione-venduti summary {
  cursor: pointer;
  list-style: none;
}
.admin-sezione-venduti summary::-webkit-details-marker { display: none; }
.admin-sezione-venduti summary.admin-sezione-titolo { margin-top: 28px; }

.riepilogo-venduti {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-left: 4px solid var(--colore-accento);
  border-radius: var(--raggio);
  padding: 16px 18px;
  margin-bottom: 8px;
}
.riepilogo-numeri { display: flex; flex-wrap: wrap; gap: 24px; }
.riepilogo-voce { display: flex; flex-direction: column; }
.riepilogo-valore { font-size: 1.4rem; font-weight: 800; color: var(--colore-accento-scuro); }
.riepilogo-etichetta { font-size: 0.78rem; color: var(--colore-testo-tenue); }
.riepilogo-categorie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.riepilogo-pillola {
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  color: var(--colore-testo-tenue);
}
.riepilogo-pillola strong { color: var(--colore-testo); }

/* Ricerca e filtri dell'area riservata: stessa forma del catalogo pubblico, ma
   senza restare agganciati in cima, perché qui si scorre molto di più. */
.filtri-admin { position: static; margin-bottom: 18px; }
.filtri-admin .filtri-avanzati { display: flex; }
.filtri-admin .annuncio-risultati { margin: 10px 0 0; }

/* Schede "Da pubblicare" / "Pubblicati": dividono l'elenco in due, così le bozze ancora da
   controllare non si perdono in mezzo agli articoli già in vendita. */
.schede-admin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  padding: 4px;
  margin: 22px 0 4px;
}
.schede-admin[hidden] { display: none; }
.schede-admin button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--colore-testo-tenue);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.schede-admin button:focus-visible { outline: 3px solid var(--colore-accento-scuro); outline-offset: 2px; }
.schede-admin button.attivo { background: var(--colore-accento); color: var(--colore-testo); }
.schede-admin-conteggio {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  color: var(--colore-testo);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
/* Il numero delle bozze ha il colore del badge "bozza": si riconosce a colpo d'occhio
   che lì c'è lavoro da fare anche quando si sta guardando l'altra scheda. */
#scheda-bozze .schede-admin-conteggio:not(.zero) { background: var(--colore-bozza); border-color: var(--colore-bozza); color: #fff; }
.gruppo-admin[hidden] { display: none; }

/* Prenotazioni prese dal negozio: si distinguono a colpo d'occhio da quelle arrivate dal sito. */
.etichetta-canale-telefono { background: var(--colore-bozza); color: #fff; }
/* Conferma del salvataggio mostrata in basso quando, dopo aver salvato, la pagina torna al
   punto in cui si stava lavorando e il messaggio in cima resterebbe fuori vista. */
.avviso-fluttuante {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  margin: 0;
  box-shadow: var(--ombra-forte);
  transition: opacity 0.6s;
}
.avviso-fluttuante.in-uscita { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .avviso-fluttuante { transition: none; } }
/* Scelta dell'articolo nella prenotazione telefonica: ricerca e schede toccabili al posto
   del menu a tendina, che con decine di voci era lento da usare con il telefono all'orecchio. */
.scelta-articolo { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.scelta-articolo legend { font-weight: 600; font-size: 0.88rem; margin: 14px 0 6px; padding: 0; }
.scelta-articolo-cerca { display: flex; gap: 8px; align-items: center; }
.scelta-articolo-cerca[hidden] { display: none; }
.scelta-articolo-cerca input { flex: 1 1 auto; min-width: 0; }
.elenco-articoli {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.articoli-scelti { display: grid; gap: 8px; margin-bottom: 10px; }
.articoli-scelti:empty { display: none; }
/* La quantità serve solo per gli articoli già scelti: nei risultati della ricerca resta nascosta. */
.voce-articolo-quantita { display: none; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.88rem; font-weight: 600; }
.articoli-scelti .voce-articolo-quantita { display: flex; }
form .voce-articolo-quantita input[type="number"] { width: 5.5em; padding: 6px 8px; }
.voce-articolo {
  display: grid;
  grid-template-columns: auto 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  cursor: pointer;
  font-weight: 400;
}
.voce-articolo[hidden] { display: none; }
.voce-articolo:hover { border-color: var(--colore-accento-scuro); }
.voce-articolo:has(input:checked) { border: 2px solid var(--colore-accento-scuro); background: var(--colore-sfondo); }
.voce-articolo input { width: 20px; height: 20px; margin: 0; accent-color: var(--colore-accento-scuro); }
.voce-articolo-foto {
  width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  background: var(--colore-sfondo); border: 1px solid var(--colore-bordo);
}
.voce-articolo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voce-articolo-testo { display: grid; gap: 2px; min-width: 0; }
.voce-articolo-testo strong { font-size: 0.95rem; line-height: 1.3; }
.voce-articolo-prezzo { font-weight: 700; color: var(--colore-accento-scuro); font-variant-numeric: tabular-nums; }

.pezzi-prenotati { font-size: 0.85em; font-weight: 700; color: var(--colore-accento-scuro); white-space: nowrap; }
.facoltativo { font-weight: 400; color: var(--colore-testo-tenue); }
.gruppo-vuoto { padding: 28px 8px; }

.admin-sezione.nascosto { display: none; }
.admin-riga-prodotto.nascosto { display: none; }

/* "Altre operazioni": i comandi rari stanno qui sotto, così nella riga restano
   solo quelli di tutti i giorni. */
.menu-azioni { position: relative; }
.menu-azioni > summary {
  list-style: none;
  display: inline-block;
  user-select: none;
}
.menu-azioni > summary::-webkit-details-marker { display: none; }
.menu-azioni > summary::after { content: " \25BE"; }
.menu-azioni[open] > summary { border-color: var(--colore-accento-scuro); }
.menu-azioni-voci {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
}
/* L'eliminazione è l'unica operazione che non si può disfare: sta staccata dalle
   altre, oltre una riga di separazione, per non finirci sopra per sbaglio. */
.zona-eliminazione {
  flex-basis: 100%;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--colore-bordo);
}

.admin-lista-prodotti { display: flex; flex-direction: column; gap: 12px; }
.admin-riga-prodotto {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 12px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
}
.admin-riga-prodotto.stato-riservato { border-left: 3px solid var(--colore-riservato); background: #fdfbf7; }
.admin-riga-prodotto.stato-venduto { border-left: 3px solid var(--colore-venduto); background: #f7f6f5; }
.admin-riga-prodotto.bozza { border-left: 3px solid var(--colore-bozza); }
.admin-riga-foto { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #f1ece3; }
.admin-riga-foto img { width: 100%; height: 100%; object-fit: cover; }
.admin-riga-foto .foto-assente { font-size: 0.68rem; }
.admin-riga-info h3 { font-size: 1rem; margin: 2px 0 8px; }
.admin-riga-azioni {
  grid-column: 1 / -1;
  display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px dashed var(--colore-bordo);
  padding-top: 10px;
}

@media (min-width: 640px) {
  .admin-riga-prodotto { grid-template-columns: 84px 1fr auto; align-items: center; }
  .admin-riga-azioni { grid-column: auto; border-top: none; padding-top: 0; }
}

.admin-lista-categorie { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.admin-riga-categoria {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
}
.admin-riga-categoria form.form-inline {
  flex: 1 1 200px;
  display: flex;
  gap: 8px;
  align-items: center;
  /* Sul telefono la riga non ci sta in larghezza: senza queste due, il pulsante Salva
     finiva oltre il bordo dello schermo, irraggiungibile. */
  flex-wrap: wrap;
  min-width: 0;
}
.admin-riga-categoria input[type="text"] { width: auto; flex: 1 1 140px; min-width: 0; }
/* Le frecce occupano quello che serve e basta. Il selettore ripete "form" perché altrimenti
   perde di specificità contro la regola qui sopra e si prendono anche loro i 200px. */
.admin-riga-categoria form.frecce-categoria { flex: 0 0 auto; gap: 4px; }
.admin-riga-categoria form.frecce-categoria .btn { min-width: 42px; }
.admin-riga-categoria .etichetta-posizione {
  margin: 0;
  font-size: 0.78rem;
  color: var(--colore-testo-tenue);
  white-space: nowrap;
}
.admin-riga-categoria .scelta-posizione { width: auto; flex: 0 0 auto; padding: 8px 6px; }
.conteggio-categoria { font-size: 0.82rem; color: var(--colore-testo-tenue); white-space: nowrap; }
.form-inline-categoria { display: flex; gap: 10px; max-width: 420px; }
.form-inline-categoria input { flex: 1; }

.galleria-esistente { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; }
.foto-esistente { width: 110px; text-align: center; }
.foto-esistente img { width: 110px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--colore-bordo); }
.foto-esistente.copertina img { border-color: var(--colore-accento); border-width: 2px; }
.foto-esistente label { font-size: 0.78rem; font-weight: 400; margin: 4px 0 0; display: block; }
.etichetta-copertina {
  display: inline-block; margin-top: 4px;
  background: var(--colore-accento); color: var(--colore-testo);
  font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.foto-esistente .btn-piccolo { font-size: 0.72rem; padding: 4px 8px; margin-top: 4px; }

.galleria-nuove-foto { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; }
.galleria-nuove-foto .btn-piccolo { margin-top: 4px; }

.riquadro-qrcode {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 24px;
  text-align: center;
  max-width: 380px;
}
.riquadro-qrcode img { margin: 0 auto 14px; border-radius: 8px; }
.url-pubblico { font-size: 0.85rem; color: var(--colore-testo-tenue); word-break: break-all; }

.admin-lista-prenotazioni { display: flex; flex-direction: column; gap: 12px; }
.admin-riga-prenotazione {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 14px 16px;
}
.prenotazione-info p { margin: 4px 0 8px; font-size: 0.92rem; }
.etichetta-prenotazione-richiesta { background: var(--colore-riservato); color: var(--colore-testo); }
.etichetta-prenotazione-archiviata { background: var(--colore-testo-tenue); color: #fff; }
.etichetta-prenotazione-scaduta { background: var(--colore-testo-tenue); color: #fff; }
.prenotazione-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.form-email-prova { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 16px 0 32px; max-width: 420px; }
.form-email-prova label { flex-basis: 100%; margin: 0 0 4px; }
.form-email-prova input { flex: 1; }

/* ---------- Utilità responsive ---------- */

@media (max-width: 480px) {
  .riga-doppia { grid-template-columns: 1fr; }
  .stato-card { padding: 32px 22px; }
  /* Sul telefono la riga della categoria sta su più righe: allineando in alto, le frecce
     restano accanto al numero di posizione invece di galleggiare a metà del blocco. */
  .admin-riga-categoria { align-items: flex-start; }
  .admin-riga-categoria form.frecce-categoria .btn { min-height: 44px; }
}

/* ---------- Backup ---------- */

.riquadro-backup {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.elenco-backup { margin: 0 0 18px; padding-left: 20px; color: var(--colore-testo); }
.elenco-backup li { margin-bottom: 8px; line-height: 1.5; }
.form-backup { margin-bottom: 18px; }
.form-backup:last-child { margin-bottom: 0; }
.form-backup .aiuto { margin-top: 8px; margin-bottom: 0; }

/* Campo trappola anti-bot: fuori dallo schermo, mai visibile né raggiungibile con il tab. */
.campo-trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Condivisione prodotto ---------- */

.box-condivisione {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.condivisione-invito {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--colore-testo);
}
.btn-condividi {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--colore-accento);
  border-color: var(--colore-accento);
  color: var(--colore-testo);
}
.btn-condividi:hover { background: var(--colore-accento-passaggio); border-color: var(--colore-accento-passaggio); }
.btn.nascosto { display: none; }
.conteggio-viste { color: var(--colore-accento-scuro); font-weight: 600; }
.foto-frecce { display: flex; gap: 4px; margin-top: 4px; }
.foto-frecce .btn { flex: 1; padding: 4px 0; font-size: 0.9rem; }

/* ---------- Operazioni su più prodotti ---------- */

.blocco-operazioni {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.blocco-operazioni > summary { cursor: pointer; font-weight: 700; }
.form-operazioni {
  border-top: 1px solid var(--colore-bordo);
  margin-top: 14px;
  padding-top: 14px;
}
.riga-operazione { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.riga-operazione select,
.riga-operazione input[type="number"] {
  padding: 9px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--colore-superficie);
  color: var(--colore-testo);
}
.riga-operazione select { flex: 1 1 200px; }
.riga-operazione input[type="number"] { width: 120px; }

/* ---------- Etichetta "Nuovo inserimento" ---------- */

.badge-novita {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: var(--colore-testo);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: var(--ombra-forte);
}
.scheda-prodotto.novita { border-color: var(--colore-accento); border-width: 2px; }
.badge-novita-statico {
  position: static;
  display: inline-block;
  margin-bottom: 8px;
  background: var(--colore-accento);
  color: var(--colore-testo);
}

/* ---------- Avviso catalogo in aggiornamento ---------- */

/* L'avviso è un blocco pieghevole come quelli della testata: aperto occupava mezzo schermo
   del telefono prima ancora che si vedesse un mobile. Qui resta solo il richiamo colorato. */
.avviso-catalogo { border-left: 4px solid var(--colore-accento); }
.avviso-catalogo > summary { font-weight: 700; }

/* ---------- Statistiche ---------- */

.riepilogo-statistiche {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
.dato-statistica {
  flex: 1 1 160px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 18px 20px;
}
.dato-numero {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--colore-accento-scuro);
  line-height: 1.1;
}
.dato-etichetta {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--colore-testo-tenue);
}

.tabella-statistiche {
  width: 100%;
  border-collapse: collapse;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  margin-bottom: 28px;
  font-size: 0.94rem;
}
.tabella-statistiche th,
.tabella-statistiche td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--colore-bordo);
}
.tabella-statistiche th {
  background: var(--colore-sfondo);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colore-testo-tenue);
}
.tabella-statistiche tr:last-child td { border-bottom: 0; }
.colonna-tenue { color: var(--colore-testo-tenue); }
.segnale-attenzione { color: var(--colore-errore); font-weight: 700; }

.elenco-mai-visti { margin: 0 0 20px; padding-left: 20px; }
.elenco-mai-visti li { margin-bottom: 6px; }

@media (max-width: 640px) {
  .tabella-statistiche { display: block; overflow-x: auto; }
}

/* ---------- Catalogo da stampare ---------- */

.pagina-stampa { background: var(--colore-sfondo); }
.barra-stampa {
  background: var(--colore-superficie);
  border-bottom: 1px solid var(--colore-bordo);
  padding: 14px 0 6px;
  margin-bottom: 20px;
}
.barra-stampa-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.barra-stampa-opzioni, .barra-stampa-azioni { display: flex; flex-wrap: wrap; gap: 8px; }

.foglio {
  background: #fff;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 28px 32px 36px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
}
@media screen {
  /* Il catalogo è una tabella pensata per il foglio A4: guardandola dal telefono
     sborda di qualche pixel e faceva scorrere di lato tutta la pagina. Ora a scorrere
     è il solo foglio. In stampa questa regola non vale e nulla cambia. */
  .foglio { overflow-x: auto; }
}
.intestazione-stampa { border-bottom: 2px solid var(--colore-testo); padding-bottom: 12px; margin-bottom: 20px; }
.intestazione-stampa h1 { margin: 0 0 4px; font-size: 1.5rem; }
.intestazione-stampa p { margin: 0; color: var(--colore-testo-tenue); font-size: 0.86rem; line-height: 1.5; }

.titolo-gruppo-stampa {
  font-size: 1.05rem;
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--colore-bordo);
}
.titolo-gruppo-stampa span { color: var(--colore-testo-tenue); font-weight: 400; font-size: 0.9rem; }

/* Il foglio riporta quattro soli dati per articolo: numero, foto e i due prezzi,
   elencati uno sotto l'altro su A4 verticale. */
.tabella-stampa { width: 100%; border-collapse: collapse; font-size: 0.95rem; table-layout: fixed; }
.tabella-stampa .colonna-numero { width: 12%; }
.tabella-stampa .colonna-foto { width: 24%; }
.tabella-stampa .colonna-prezzo { width: 32%; }
.tabella-stampa th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--colore-testo-tenue);
  border-bottom: 1px solid var(--colore-testo);
  padding: 6px 8px;
}
.tabella-stampa td {
  padding: 8px;
  border-bottom: 1px solid var(--colore-bordo);
  vertical-align: middle;
}
.colonna-prezzo { text-align: right; white-space: nowrap; }
.tabella-stampa th.colonna-prezzo { white-space: normal; line-height: 1.25; }
/* Il numero dell'articolo è il dato che si cerca per primo sul cartellino. */
.tabella-stampa .colonna-numero { font-size: 1.15rem; }
/* Il prezzo promozionale è quello che conta: si stacca dall'altro per corpo e peso. */
.prezzo-promozionale { font-size: 1.25rem; }
/* Riga verticale che separa i due articoli affiancati, per non leggere per sbaglio
   il prezzo di quello accanto. */
.tabella-stampa .inizio-blocco { border-left: 1px solid var(--colore-bordo); padding-left: 14px; }

.nota-stampa { color: var(--colore-testo-tenue); font-size: 0.78rem; line-height: 1.45; margin-top: 16px; }

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body.pagina-stampa { background: #fff; }
  .barra-stampa { display: none; }
  .foglio {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  /* L'intestazione della tabella si ripete in cima a ogni foglio: senza, dalla seconda
     pagina in poi non si capisce più quale colonna è il listino e quale il promozionale. */
  .tabella-stampa thead { display: table-header-group; }
  .tabella-stampa tr { page-break-inside: avoid; }
  .titolo-gruppo-stampa { page-break-after: avoid; }
  a { text-decoration: none; color: inherit; }
}
.admin-toolbar-azioni { display: flex; flex-wrap: wrap; gap: 8px; }

/* Miniature nel catalogo da stampare: servono a riconoscere l'articolo a colpo d'occhio
   mentre si gira per il negozio con il foglio in mano. */
.tabella-stampa .colonna-foto { text-align: left; }
.colonna-foto img {
  max-width: 100%;
  width: auto;
  height: 74px;
  margin: 0;
  /* Il mobile si vede intero: ritagliarlo per riempire il riquadro toglieva
     proprio la parte che lo fa riconoscere. */
  object-fit: contain;
  border-radius: 3px;
}
.foto-mancante-stampa { color: var(--colore-testo-tenue); }

@media print {
  /* Le immagini devono uscire anche in stampa, non solo a schermo. */
  .tabella-stampa { font-size: 10pt; }
  .tabella-stampa th { letter-spacing: 0; font-size: 7.5pt; }
  .tabella-stampa th,
  .tabella-stampa td { padding: 5px 8px; }
  .tabella-stampa .colonna-numero { font-size: 12pt; }
  .prezzo-promozionale { font-size: 13pt; }
  .colonna-foto img {
    max-width: 100%;
    width: auto;
    height: 26mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Parole chiave su più articoli ---------- */

.blocco-parole {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-left: 4px solid var(--colore-accento);
  border-radius: var(--raggio);
  padding: 16px 18px 18px;
  margin-bottom: 20px;
}
.blocco-parole label[for="parole"] { margin-top: 0; }
.scelta-modo { display: flex; flex-direction: column; gap: 2px; }
.scelta-modo .checkbox-riga { min-height: 38px; align-items: flex-start; padding: 4px 0; }
.scelta-modo input { margin-top: 7px; }
.scelta-modo em { color: var(--colore-testo-tenue); font-style: normal; }

.barra-selezione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.conteggio-selezione { font-size: 0.88rem; color: var(--colore-testo-tenue); }
.conteggio-selezione.con-selezione { color: var(--colore-accento-scuro); font-weight: 700; }

.elenco-parole { list-style: none; margin: 0 0 20px; padding: 0; }
.riga-parole {
  border-bottom: 1px solid var(--colore-bordo);
  background: var(--colore-superficie);
}
.riga-parole:first-child { border-top: 1px solid var(--colore-bordo); border-radius: var(--raggio) var(--raggio) 0 0; }
.riga-parole:last-child { border-radius: 0 0 var(--raggio) var(--raggio); }
.riga-parole.nascosto { display: none; }
.riga-parole .checkbox-riga { padding: 10px 14px; margin: 0; align-items: flex-start; }
.riga-parole input[type="checkbox"] { margin-top: 2px; }
.riga-parole-testo { display: block; line-height: 1.45; }
/* Le parole già presenti si vedono accanto all'articolo: senza, non si sa se si sta
   aggiungendo a un campo vuoto o sovrascrivendo qualcosa. */
.parole-attuali {
  display: block;
  font-size: 0.85rem;
  color: var(--colore-accento-scuro);
  margin-top: 2px;
}
.parole-attuali.parole-assenti { color: var(--colore-testo-tenue); }

/* Azzeramento delle statistiche: chiuso, in fondo alla pagina e col bordo che lo
   stacca dai dati, perché è l'unica operazione irreversibile che c'è lì dentro. */
.blocco-azzera {
  margin-top: 40px;
  padding: 16px 18px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-left: 3px solid var(--colore-errore);
  border-radius: var(--raggio);
}
.blocco-azzera > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--colore-errore);
}
.blocco-azzera .aiuto { margin-top: 10px; }
.form-azzera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--colore-bordo);
}
.form-azzera .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Prezzo incassato accanto al pulsante di vendita: si corregge al volo se si è trattato. */
.form-vendita { display: inline-flex; align-items: center; gap: 4px; }
.form-vendita input[type="number"] {
  width: 88px;
  padding: 5px 8px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  font-size: 0.85rem;
}
/* Data fino a cui l'articolo resta bloccato, accanto al pulsante di conferma: è la stessa
   che il cliente si vede scritta nell'email, quindi si decide qui e non altrove. */
.form-conferma { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.form-conferma label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--colore-testo-tenue);
  white-space: nowrap;
}
.form-conferma input[type="date"] {
  width: auto;
  padding: 5px 8px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  font-size: 0.85rem;
}
.scadenza-blocco {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.82rem;
  color: var(--colore-testo-tenue);
}
.etichetta-prenotazione-confermata { background: var(--colore-riservato); color: var(--colore-testo); }
.etichetta-prenotazione-venduta { background: var(--colore-successo); }
.etichetta-prenotazione-annullata { background: var(--colore-venduto); }