@charset "utf-8";

/* Ok Ufficio Arredamento — negozio e pannello.
   Si appoggia a site.css: qui stanno solo i pezzi che il sito statico
   non aveva (schede prodotto, carrello, tabelle del pannello). */

/* Niente @layer: sito.css non ne usa, e una regola dentro un layer
   perde contro una regola fuori anche se è più specifica. Qui serviva
   il contrario: shop.css si carica dopo e deve poter correggere.
*/

/* -- il carrello in testata ---------------------------------------------- */
/* Sta accanto alla pasticca del telefono e ne ha la forma: è il posto dove
   l'occhio va già a cercare le cose da fare. */
.pasticca--carrello { margin-inline-start: 10px; }
.pasticca--carrello b { font-size: 16px; font-weight: 600; }
.pasticca--carrello svg { fill: var(--tenue); }
.pasticca--carrello:hover svg { fill: var(--rosso); }
@media (max-width: 560px) {
  .pasticca--carrello { margin-inline-start: 0; margin-block-start: 8px; }
}

.carrello-n {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  margin-inline-start: 2px;
  padding-inline: 0.3em;
  background: var(--rosso);
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
}
.carrello-n[hidden] { display: none; }

/* -- il carrello sospeso e la conferma di un'aggiunta -------------------- */
/* Il carrello in testata scorre via dopo due schermate: da lì in poi resta
   questo, in alto a destra, ed è a lui che si attacca la conferma. Prima la
   conferma compariva in basso a destra e il carrello stava in cima: due cose
   lontane che parlavano della stessa. */
.carrello-sospeso {
  position: fixed; inset-block-start: 14px; inset-inline-end: 14px; z-index: 50;
  display: grid; justify-items: end; gap: 10px;
}
.carrello-sospeso[hidden] { display: none; }
.carrello-sospeso__tasto {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  background: var(--carta); border: 1px solid #c9c9c9; border-radius: 999px;
  box-shadow: 0 3px 14px rgb(0 0 0 / 14%);
  text-decoration: none; white-space: nowrap;
}
.carrello-sospeso__tasto:hover { border-color: var(--rosso); }
.carrello-sospeso__tasto svg { width: 19px; height: 19px; fill: var(--tenue); }
.carrello-sospeso__tasto:hover svg { fill: var(--rosso); }
.carrello-sospeso__tasto b { font-size: 15px; font-weight: 600; color: var(--scuro); }

/* Il riquadro: cosa è entrato, quanto c'è dentro, come andarci. */
.conferma {
  width: min(22rem, calc(100vw - 28px));
  padding: 16px;
  background: var(--carta);
  border: 1px solid #c9c9c9;
  border-top: 3px solid var(--rosso);
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.conferma--visibile { opacity: 1; transform: none; pointer-events: auto; }
/* Quando il carrello in testata si vede, il riquadro si piazza da solo
   appena sotto, nello stesso angolo: l'occhio fa un salto solo. */
.conferma--alta {
  position: fixed; inset-block-start: 14px; inset-inline-end: 14px; z-index: 50;
}
.conferma__riga { display: flex; gap: 12px; align-items: flex-start; }
.conferma__riga img {
  width: 56px; height: 56px; object-fit: contain;
  background: #f5f5f5; border: 1px solid var(--riga-tenue); flex: none;
}
.conferma__nome { margin: 0; font-weight: 600; color: var(--scuro); line-height: 1.3; }
.conferma__stato { margin: 4px 0 0; font-size: .84rem; color: var(--tenue); }
.conferma__tasti { display: flex; gap: 8px; margin-block-start: 14px; }
.conferma__tasti .bottone { flex: 1; padding: 10px 12px; text-align: center; font-size: 14px; }
.conferma--guaio { border-top-color: var(--scuro); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
  .conferma { transition: none; transform: none; }
}
@media (max-width: 560px) {
  /* Sul telefono il carrello sta in basso, dove arriva il pollice. */
  .carrello-sospeso {
    inset-block: auto 14px; inset-inline: 14px 14px;
    justify-items: end;
  }
  .conferma--alta { inset-block: auto 14px; inset-inline-end: 14px; }
}

/* Il contatore che si alza di un pezzo lo deve far vedere. */
@keyframes cresce { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.carrello-n--cresce { animation: cresce .32s ease-out; }
@media (prefers-reduced-motion: reduce) { .carrello-n--cresce { animation: none; } }

/* Mentre il carrello o il listino si rifanno restano leggibili, ma si vede
   che è in corso. */
#carrello-vivo.in-corso, #listino-vivo.in-corso { opacity: .55; }

/* -- avvisi -------------------------------------------------------------- */
.avviso {
  display: grid;
  gap: 0.3rem;
  margin-block-end: 2rem;
  padding: 1rem 1.25rem;
  border-inline-start: 4px solid var(--signal);
  background: var(--sheet-2);
  font-size: var(--t-sm);
}
.avviso--ok { border-inline-start-color: #1b7f4b; }
.avviso ul { margin-block-start: 0.4rem; }
.avviso li { padding-block: 0.12rem; }
.avviso li::before {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-inline-end: 0.6rem;
  vertical-align: 0.15em;
  background: var(--signal);
}

/* -- vetrina ------------------------------------------------------------- */
/* Le famiglie: la barra con cui si sceglie cosa vedere. Resta in alto
   mentre si scorre, perché è lì che si torna di continuo. */
.famiglie {
  position: sticky; inset-block-start: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-block: 2.2rem 0;
  padding-block: 12px;
  background: var(--carta);
  border-bottom: 1px solid var(--riga-tenue);
}
.famiglie a {
  padding: 8px 14px;
  background: var(--banda-chiara);
  border: 1px solid var(--riga);
  color: var(--scuro); text-decoration: none;
  font-size: .86rem; white-space: nowrap;
}
.famiglie a:hover { background: var(--carta); border-color: var(--scuro); }
.famiglie a[aria-current="true"] {
  background: var(--scuro); border-color: var(--scuro); color: #fff;
}
.famiglie span { color: var(--tenue); font-size: .8rem; }
.famiglie a[aria-current="true"] span { color: #cfcfcf; }
/* Quando il carrello sospeso è in vista, la barra gli lascia il posto. */
@media (min-width: 561px) {
  .con-sospeso .famiglie { padding-inline-end: 170px; }
}
/* Sul telefono i chip non vanno a capo: scorrono di lato, così la barra
   resta alta una riga e non mangia mezzo schermo. */
@media (max-width: 760px) {
  .famiglie {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -24px;        /* il padding di .shell */
    padding-inline: 24px;
  }
  .famiglie::-webkit-scrollbar { display: none; }
}

h2.famiglia {
  scroll-margin-block-start: 5rem;
  margin: 2.6rem 0 1rem;
  padding-block-end: 8px;
  border-bottom: 2px solid var(--scuro);
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

.listino {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.articolo {
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border: 1px solid #cfcfcf;
}
.articolo__foto { display: block; border-bottom: 1px solid var(--riga-tenue); }
.articolo__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 14px;
  background: #f5f5f5;
}
.articolo__corpo {
  display: flex; flex: 1; flex-direction: column;
  padding: 14px 16px 18px;
}
.articolo h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.articolo__codice {
  margin: 4px 0 0;
  font-size: .74rem; letter-spacing: .05em; color: var(--tenue);
}
.articolo__testo {
  margin: 10px 0 0; font-size: .86rem; line-height: 1.45; color: var(--testo);
}
.articolo__prezzo {
  margin: auto 0 0; padding-block-start: 14px;
  font-size: 1.15rem; font-weight: 700; color: var(--scuro);
}
.articolo__minimo { margin: 4px 0 0; font-size: .78rem; color: var(--tenue); }
.articolo form { display: flex; gap: 8px; margin-block-start: 12px; }
.articolo input[type="number"] {
  width: 4.2rem; padding: 9px 8px;
  border: 1px solid #c9c9c9; font: inherit; text-align: center;
}
.articolo .bottone { flex: 1; padding-inline: 12px; text-align: center; }
.articolo--esaurito .articolo__corpo { opacity: 0.6; }

/* -- scelta del paese ----------------------------------------------------- */
.scelta-paese {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px;
  margin-block: 1.6rem;
  padding: 14px 18px 16px;
  background: var(--banda-chiara);
  border: 1px solid var(--riga);
}
.scelta-paese label { font-size: .9rem; font-weight: 600; }
.scelta-paese select {
  padding: 9px 10px; border: 1px solid #c9c9c9;
  background: var(--carta); font: inherit; font-size: .9rem;
}
.scelta-paese__nota {
  flex: 1 1 100%; margin: 0;
  font-size: .82rem; line-height: 1.5; color: var(--tenue);
}

/* -- carrello ------------------------------------------------------------ */
.tabella-carrello { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th {
  padding: 10px 12px 10px 0;
  border-bottom: 2px solid var(--scuro);
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  text-align: left; white-space: nowrap; color: var(--scuro);
}
.tabella td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--riga-tenue); vertical-align: top;
}
.tabella tr:last-child td { border-bottom: 0; }
.tabella .num { text-align: right; padding-inline-end: 0; white-space: nowrap; }
.tabella__nome { font-weight: 600; }
.tabella__nome a { color: inherit; text-decoration: none; }
.tabella__nome a:hover { color: var(--rosso-cupo); }
.tabella__nome small {
  display: block; margin-block-start: 3px;
  font-weight: 400; font-size: .76rem; letter-spacing: .04em; color: var(--tenue);
}
.tabella input[type="number"] {
  width: 4.2rem; padding: 7px 6px;
  border: 1px solid #c9c9c9; font: inherit; text-align: center;
}
.tabella__via {
  padding: 6px 10px;
  background: none; border: 1px solid var(--riga);
  color: var(--tenue); font: inherit; font-size: .78rem; cursor: pointer;
}
.tabella__via:hover { border-color: var(--rosso); color: var(--rosso); }

/* Sul telefono cinque colonne non ci stanno: ogni riga diventa un blocco,
   con l'etichetta che il <th> non può più dare (attributo data-voce). */
@media (max-width: 640px) {
  .tabella thead { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  .tabella tr { padding-block: 14px; border-bottom: 1px solid var(--riga); }
  .tabella td { border: 0; padding: 3px 0; text-align: left; }
  .tabella td.num { text-align: left; }
  .tabella td[data-voce]::before {
    content: attr(data-voce) ": ";
    color: var(--tenue); font-size: .82rem;
  }
  .tabella__nome { margin-block-end: 6px; }
}

.totali {
  display: grid; gap: 2px;
  margin: 1.6rem 0 0 auto; max-width: 22rem; font-size: .92rem;
}
.totali div {
  display: flex; justify-content: space-between; gap: 2rem;
  padding-block: 8px; border-bottom: 1px solid var(--riga-tenue);
}
.totali div:last-child {
  border-bottom: 0; border-top: 2px solid var(--scuro);
  padding-block-start: 12px;
  font-size: 1.1rem; font-weight: 700; color: var(--scuro);
}
.note { font-size: .82rem; color: var(--tenue); line-height: 1.5; }
.note--destra { text-align: right; margin-block-start: 10px; }

.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 1.6rem; }
.carrello-vuoto { padding-block: 3rem; text-align: center; }
.carrello-vuoto p { color: var(--tenue); margin-block-end: 1.5rem; }

/* -- il modulo dell'ordine ------------------------------------------------ */
.ordine {
  display: grid; gap: 40px;
  margin-block-start: 3rem; padding-block-start: 2.5rem;
  border-top: 1px solid var(--riga);
}
@media (min-width: 900px) { .ordine { grid-template-columns: 1.35fr 1fr; gap: 56px; } }
.ordine__titolo {
  margin: 0 0 1.4rem; padding-block-end: 8px;
  border-bottom: 2px solid var(--scuro);
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ordine__lato { display: grid; gap: 16px; align-content: start; }

.form p { margin-block: 0 1rem; }
.form label { display: block; margin-block-end: 5px; font-size: .86rem; font-weight: 600; }
/* `password` era rimasto fuori dall'elenco, e si vedeva: nel pannello il
   campo della password era largo quanto la scatola vuota del browser mentre
   quelli accanto erano larghi tutto il modulo. Capitava in quattro punti —
   accesso, primo accesso, creazione di un utente, cambio password. */
.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="password"], .form input[type="number"],
.form textarea, .form input[readonly] {
  width: 100%; padding: 10px 12px;
  border: 1px solid #c9c9c9; background: var(--carta); font: inherit;
}
.form input[readonly] { background: var(--banda-chiara); color: var(--tenue); }
.form textarea { min-height: 7rem; resize: vertical; }
.form .note { margin-block: -0.6rem 1.2rem; }
.form .corto { max-width: 7rem; }
.form .maiuscolo { text-transform: uppercase; }
.duo { display: grid; gap: 0 1rem; }
@media (min-width: 560px) { .duo { grid-template-columns: 1fr 1fr; } }
.trappola { position: absolute; left: -9999px; }
.riga-spunta {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; font-size: .92rem;
}
.riga-spunta input { margin-block-start: 4px; }

/* -- azienda o privato ---------------------------------------------------- */
.scelta-tipo, .scelta-consegna {
  display: grid; gap: 9px;
  margin: 0 0 1.4rem;
  padding: 14px 18px 16px;
  border: 1px solid var(--riga); background: var(--banda-chiara);
}
.scelta-tipo legend, .scelta-consegna legend {
  padding-inline: 6px; font-size: .86rem; font-weight: 700;
}
.scelta-tipo label, .scelta-consegna label {
  display: flex; gap: 10px; align-items: center;
  margin: 0; font-size: .92rem; font-weight: 400;
}

.form [data-se] { display: grid; gap: 0; }

/* Si vedono solo i campi del tipo scelto. Dove :has() non arriva restano
   visibili tutti e due i blocchi: il modulo continua a funzionare, perché
   a decidere cosa è obbligatorio è comunque il server. */
.form:has(input[name="tipo"][value="azienda"]:checked) [data-se="privato"],
.form:has(input[name="tipo"][value="privato"]:checked) [data-se="azienda"] {
  display: none;
}

/* -- riquadri informativi ------------------------------------------------ */
.riquadro {
  padding: 18px 20px;
  background: var(--banda-chiara);
  border-left: 4px solid var(--scuro);
  font-size: .9rem;
}
.riquadro h3 {
  margin: 0 0 8px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--scuro);
}
.riquadro p { margin: 0 0 8px; }
.riquadro p:last-child { margin-block-end: 0; }
.riquadro--segnale { border-left-color: var(--rosso); }

/* -- cosa succede adesso, nella pagina di conferma ----------------------- */
.passi { margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passi li {
  position: relative;
  padding: 0 0 1.2rem 44px;
  counter-increment: passo;
}
.passi li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--scuro); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.passi h3 { margin: 2px 0 4px; font-size: .96rem; font-weight: 600; }
.passi p { margin: 0; font-size: .92rem; }

/* Il riepilogo dei soldi: etichetta a sinistra, numero a destra. */
.riepilogo {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 16px; margin: 10px 0 0;
}
.riepilogo dt { color: var(--tenue); }
.riepilogo dd { margin: 0; text-align: right; font-weight: 600; color: var(--scuro); }
.riquadro--largo { margin-block-end: 2.4rem; }

.storico { margin: 10px 0 0; padding: 0; list-style: none; font-size: .86rem; }
.storico li { display: flex; gap: 12px; padding-block: 4px; }
.storico time { color: var(--tenue); white-space: nowrap; }

/* -- avanzamento dell'ordine --------------------------------------------- */
.avanzamento { display: grid; gap: 0; margin-block: 2rem; }
@media (width >= 48rem) { .avanzamento { grid-template-columns: repeat(5, 1fr); } }
.avanzamento li {
  padding: 0.9rem 1rem 1.1rem 0;
  border-block-start: 4px solid var(--rule);
  color: var(--muted);
  font-size: var(--t-sm);
}
.avanzamento li strong { display: block; font-variation-settings: "wdth" 100; }
.avanzamento li.fatto { border-block-start-color: var(--graphite); color: var(--ink); }
.avanzamento li.adesso { border-block-start-color: var(--signal); color: var(--ink); }
.avanzamento li.adesso strong { color: var(--signal); }
.avanzamento li small { display: block; margin-block-start: 0.15rem; font-size: var(--t-xs); }


/* -- pannello ------------------------------------------------------------ */
/* Il back office non è un altro prodotto: stessi grigi, stesso rosso, stesso
   carattere del sito. Cambia la densità, non la lingua. */
.pannello-corpo { background: var(--banda-chiara); }

.pannello-head {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--scuro); color: #fff;
}
.pannello-head__in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  min-height: 64px; padding-block: 10px;
}
.pannello-head a { color: inherit; text-decoration: none; }
.pannello-head__marchio { display: flex; align-items: center; gap: 12px; }
.pannello-head__marchio img { width: 124px; height: auto; }
.pannello-head__marchio span {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #cfcfcf;
}
.pannello-head nav {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: .9rem; font-weight: 600;
}
.pannello-head nav a[aria-current="page"],
.pannello-head nav a:hover { color: var(--rosso); }
.pannello-head__io { font-size: .8rem; color: #aaa; }
.pannello-head__io a { text-decoration: underline; }

.pannello { padding-block: 32px 64px; }
.pannello__titolo { margin-block-end: 1.8rem; }
.pannello__titolo h1 {
  margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; color: var(--scuro);
}
.pannello__titolo p { margin: 0; color: var(--tenue); font-size: .92rem; }
.pannello__sotto {
  margin: 0 0 .9rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--scuro);
}
.pannello__sotto--staccato {
  margin-block-start: 2.6rem; padding-block-start: 1.8rem;
  border-top: 1px solid var(--riga);
}
.briciole-pannello { margin: 0 0 10px; font-size: .84rem; color: var(--tenue); }
.briciole-pannello a { color: var(--tenue); }

/* Le pagine del pannello stanno su carta bianca, come le sezioni del sito. */
.pannello > .shell > .tabella,
.pannello > .shell > form > .tabella { background: var(--carta); }

.ricerca { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 1.2rem; }
.ricerca input[type="search"] {
  flex: 1; min-width: 16rem; padding: 10px 12px;
  border: 1px solid #c9c9c9; background: var(--carta); font: inherit;
}

.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 1.5rem; }
.filtri a {
  padding: 7px 12px;
  background: var(--carta); border: 1px solid var(--riga);
  font-size: .8rem; font-weight: 600; color: var(--scuro); text-decoration: none;
}
.filtri a[aria-current="true"] {
  background: var(--scuro); border-color: var(--scuro); color: #fff;
}
.filtri a:hover { border-color: var(--scuro); }
.filtri a[aria-current="true"]:hover { color: #fff; }

.tabella--click tbody tr:hover { background: var(--banda-chiara); }
.tabella a { text-decoration: none; color: var(--scuro); }
.tabella a:hover { color: var(--rosso-cupo); }
.tabella .numero a { font-weight: 700; }
.in-riga { display: flex; align-items: center; gap: 8px; }
.campo-prezzo { width: 6rem; text-align: right; }
.campo-corto { width: 4.5rem; }
.form--stretto { max-width: 40rem; }
.spezza { word-break: break-all; }

.accesso {
  max-width: 25rem; margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.accesso h1 { margin: 0 0 1.4rem; font-size: 1.5rem; color: var(--scuro); }

/* -- segni e pillole ------------------------------------------------------ */
.segno-privato, .segno-allarme {
  display: inline-block; margin-inline-start: 8px; padding: 1px 6px;
  font-size: .72rem; font-weight: 600; vertical-align: .1em;
}
.segno-privato { background: var(--banda-chiara); color: var(--tenue); }
.segno-allarme { background: #f6d9dd; color: var(--rosso-cupo); font-weight: 700; }

.stato-pillola {
  display: inline-block; padding: 4px 9px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.stato-ricevuto    { background: #e8ebee; }
.stato-confermato  { background: #dbe7f5; }
.stato-pagato      { background: #d8efdf; }
.stato-in_consegna { background: #fdeccc; }
.stato-consegnato  { background: #cfe9d9; }
.stato-annullato   { background: #f6d9dd; color: var(--rosso-cupo); }
}

/* «+ IVA» accanto alla cifra: piccolo, ma non in grigio chiaro. Deve leggersi,
 perché distingue il prezzo di vendita da quello che il cliente pagherà. */
.articolo__iva {
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: 0.01em;
}

/* L'avviso della demo: deve interrompere la lettura, non decorare. Giallo da
 cartello di cantiere, testo scuro, niente angoli morbidi. */
.striscia-prova {
margin: 0;
padding: .7rem 1rem;
background: #ffd23f;
color: #22262c;
font-size: .95rem;
font-weight: 600;
text-align: center;
}

/* --- la fotografia nella griglia --------------------------------------- */
.articolo__foto {
display: block;
background: var(--carta);
border-bottom: 1px solid #e0e0e0;
line-height: 0;
}
.articolo__foto img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: contain;
background: #f5f5f5;
}
.articolo__senzafoto {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 4 / 3;
background: #f0f0f0; color: var(--tenue);
font-size: .82rem; letter-spacing: .03em; line-height: 1.4;
}
.articolo h3 a { color: inherit; text-decoration: none; }
.articolo h3 a:hover { color: var(--rosso-cupo); }

/* --- la scheda del singolo prodotto ------------------------------------ */
.scheda { display: grid; gap: 30px; align-items: start; }
@media (min-width: 820px) { .scheda { grid-template-columns: 1.1fr 1fr; gap: 46px; } }

/* Le viste del prodotto. `.galleria` del sito è una griglia di miniature
 ritagliate 4:3: qui la fotografia è una sola e grande, e non si ritaglia —
 una sedia tagliata sotto è esattamente il difetto da cui siamo partiti. */
.scheda__viste.galleria { display: block; }
.scheda__grande .scatto { border: 1px solid var(--riga); background: #f5f5f5; }
.scheda__grande .scatto img {
width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
background: #f5f5f5;
}
.scheda__altre {
display: grid; gap: 10px; margin-block-start: 10px;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.scheda__altre .scatto img {
aspect-ratio: 1 / 1; object-fit: contain; background: var(--carta);
padding: 6px;
}
.scheda__dati h1 { font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.scheda__testo { margin: 16px 0 22px; max-width: 54ch; }
.scheda__dati .articolo__prezzo { margin-block: 0 18px; }
.scheda__dati form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.scheda__dati input[type=number] {
width: 84px; padding: 11px 12px;
border: 1px solid #c9c9c9; font: inherit;
}

/* La riga che rimanda al carrello per IVA e spedizione: informativa, non un
 avviso. Piccola e grigia, sotto il prezzo. */
.scheda__nota {
margin: -8px 0 20px;
font-size: .85rem;
color: var(--tenue);
max-width: 44ch;
}


/* --- i campioni di tessuto, accanto al prezzo -------------------------- */
.finiture { margin-block-start: 26px; }
.finiture h2 {
margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--scuro);
}
.finiture__elenco {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 14px;
}
.finiture__elenco li {
display: flex; align-items: center; gap: 8px;
font-size: .82rem; color: var(--tenue);
}
.finiture__elenco img { border: 1px solid var(--riga); }

/* --- quello che il catalogo dice del prodotto -------------------------- */
.tecnica {
display: grid; gap: 10px 46px;
margin-block-start: 44px; padding-block-start: 30px;
border-top: 1px solid var(--riga);
}
@media (min-width: 820px) { .tecnica { grid-template-columns: 1fr 1fr; } }
.tecnica h2, .tecnica__titolo {
margin: 22px 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--scuro);
}
.tecnica__colonna > h2:first-child { margin-block-start: 0; }
.tecnica__elenco { margin: 0; padding-inline-start: 18px; }
.tecnica__elenco li { margin-block-end: 6px; }
.tecnica__voci { margin: 0; }
.tecnica__voci dt {
font-weight: 600; color: var(--scuro);
font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
}
.tecnica__voci dd { margin: 2px 0 14px; }
/* I dati secchi (volume, peso, conformità) stanno meglio in due colonne. */
@media (min-width: 560px) {
.tecnica__voci--dati { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; }
.tecnica__voci--dati dt { padding-block: 7px; }
.tecnica__voci--dati dd { margin: 0; padding-block: 7px; border-bottom: 1px solid var(--riga-tenue); }
.tecnica__voci--dati dt { border-bottom: 1px solid var(--riga-tenue); }
}

.tecnica__titolo { margin-block-start: 40px; }
.componenti {
display: grid; gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.componente__nome { margin: 0 0 6px; font-weight: 700; color: var(--scuro); }
.componente__nome span { display: block; font-weight: 400; color: var(--tenue); font-size: .88rem; }
.componente ul { margin: 0; padding-inline-start: 18px; font-size: .92rem; }

/* Le tavole delle finiture del foglio del cliente: sono immagini larghe con
 dentro nomi e codici, si mostrano intere. */
.tavole { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: start; }
.tavola { margin: 0; max-width: 100%; }
/* Larghezza naturale, non stirata: una tavola di quattro campioni allargata
 a tutta colonna diventa un muro di colore. */
.tavola img { width: auto; max-width: 100%; height: auto; }
.tavola figcaption { margin-block-start: 8px; font-size: .82rem; color: var(--tenue); }

.scheda__ritorno { margin-block-start: 40px; }

/* Il rosso è del bottone che manda l'ordine: gli altri sono di passaggio.
 Queste regole stanno FUORI da @layer components: `.bottone` lo definisce
 sito.css senza layer, e uno stile dentro un layer perderebbe comunque. */
.bottone--chiaro {
background: var(--carta); color: var(--scuro);
border: 1px solid #c9c9c9; cursor: pointer; font: inherit;
font-weight: 600; padding: 11px 22px;
.bottone--chiaro:hover { background: var(--banda-chiara); color: var(--scuro); }
.bottone[disabled] { background: #bbb; cursor: not-allowed; }