/*
  Struttura del sito, uguale per tutti i temi: usa solo le variabili definite in
  temi.css. Si parte dal telefono; le regole per schermi larghi sono in fondo.
*/

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: var(--carattere);
    font-size: 16px;
    line-height: 1.45;
    /* spazio per il menu fisso in basso */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

h1, h2 {
    font-family: var(--carattere-titoli);
    font-weight: var(--peso-titoli);
    text-transform: var(--maiuscole);
    letter-spacing: var(--spaziatura);
    line-height: 1.2;
    margin: 0;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
p { margin: 0; }
a { color: var(--primario); }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--azione); outline-offset: 2px; }

.contenitore { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.salta {
    position: absolute; left: -9999px; top: 0; z-index: 30;
    background: var(--superficie); color: var(--testo); padding: 12px 16px;
}
.salta:focus { left: 8px; top: 8px; }

/* ---------- testata ---------- */

.testata {
    background: var(--testata);
    color: var(--su-testata);
    /* sul telefono la testata scorre con la pagina: la ricerca resta nel menu in basso */
    padding: 10px 0 12px;
}
.testata-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

.marchio {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    color: inherit; text-decoration: none; min-width: 0; flex: 1 1 auto;
}
.logo {
    flex: none; background: #FFFFFF; border-radius: calc(var(--raggio) - 2px);
    padding: 4px 8px; display: flex; align-items: center;
}
.logo img { display: block; height: 30px; width: auto; }
.nome-negozio {
    font-family: var(--carattere-titoli); font-weight: var(--peso-titoli); font-size: 18px;
    text-transform: var(--maiuscole); letter-spacing: var(--spaziatura);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.menu-alto { display: none; }

.cerca {
    flex: 1 1 100%;
    display: flex; align-items: center; gap: 8px;
    background: var(--superficie); color: var(--tenue);
    border: var(--spessore-bordo) solid var(--bordo);
    border-radius: var(--raggio-pulsante);
    padding: 0 14px; height: 46px;
}
.cerca svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cerca input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
    color: var(--testo); font: inherit; outline: none; -webkit-appearance: none; appearance: none;
}
.cerca input::placeholder { color: var(--tenue); opacity: 1; }
.cerca:focus-within { outline: 3px solid var(--azione); outline-offset: 2px; }

/* ---------- menu in basso (telefono) ---------- */

.menu-basso {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--superficie);
    border-top: var(--spessore-bordo) solid var(--bordo);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.menu-basso a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 50px; font-size: 12px; color: var(--tenue); text-decoration: none;
    border-radius: var(--raggio);
}
.menu-basso svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-basso a.attiva { color: var(--primario); font-weight: 700; }

/* ---------- pulsanti ---------- */

.pulsante {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 22px;
    border-radius: var(--raggio-pulsante); border: var(--spessore-bordo) solid transparent;
    background: var(--azione); color: var(--su-azione);
    font: inherit; font-weight: 700; text-decoration: none;
    text-transform: var(--maiuscole); letter-spacing: var(--spaziatura);
    cursor: pointer;
}
.pulsante.chiaro { background: var(--superficie); color: var(--testo); border-color: var(--bordo); }
.pulsante.piccolo { min-height: 44px; padding: 0 12px; font-size: 15px; }
.pulsante.largo { display: flex; width: 100%; }
.pulsante[disabled] { opacity: .55; cursor: default; }
/* pulsante che si presenta come un collegamento (es. Rimuovi) */
.collegamento {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
    color: var(--primario); font: inherit; text-decoration: underline; cursor: pointer;
}
.collegamento.centrato { justify-content: center; width: 100%; }

/* contatore dei pezzi nel carrello */
.pallino {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--azione); color: var(--su-azione); font-size: 12px; font-weight: 700; line-height: 1;
}
.pallino[hidden] { display: none; }
.menu-basso a { position: relative; }
.menu-basso .pallino { position: absolute; top: 0; left: 50%; margin-left: 4px; }

/* ---------- vetrina (pagina iniziale) ---------- */

.vetrina { background: var(--testata); color: var(--su-testata); padding: 18px 0 28px; }
.vetrina h1 { font-size: 26px; }
.vetrina p { margin: 8px 0 18px; opacity: .9; }

.blocco { padding-top: 22px; padding-bottom: 8px; }

.intestazione { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.intestazione.secondaria { margin-top: 32px; }
.intestazione a { font-weight: 600; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.conteggio { color: var(--tenue); font-size: 14px; white-space: nowrap; }

.categorie-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.categoria {
    display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
    min-height: 88px; padding: 14px;
    background: var(--superficie); color: var(--testo); text-decoration: none;
    border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.categoria-nome { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.categoria-numero { color: var(--tenue); font-size: 13px; }

/* ---------- filtri del catalogo ed etichette ---------- */

.filtri { background: var(--superficie); border-bottom: var(--spessore-bordo) solid var(--bordo); }
.filtri-riga {
    display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filtri-riga::-webkit-scrollbar { display: none; }
.filtri-riga a, .etichette a {
    flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    border-radius: var(--raggio-pulsante); border: var(--spessore-bordo) solid var(--bordo);
    background: var(--sfondo); color: var(--testo); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.filtri-riga a.attiva { background: var(--primario); color: var(--su-primario); border-color: var(--primario); font-weight: 700; }
.etichette { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.etichette a { background: var(--superficie); white-space: normal; }

/* ---------- schede degli articoli ---------- */

.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.scheda {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px;
    background: var(--superficie); color: var(--testo);
    border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.scheda-collegamento { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.figura, .dettaglio-figura {
    display: flex; align-items: center; justify-content: center;
    background: var(--tinta); border-radius: calc(var(--raggio) - 2px); overflow: hidden;
}
.figura { height: 104px; }
/* le immagini del listino hanno misure e proporzioni diverse, quasi sempre su fondo bianco:
   si mostrano intere dentro un riquadro bianco, senza ritagli né deformazioni */
.figura img, .dettaglio-figura img {
    display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #FFFFFF;
}
/* le illustrazioni fatte per il sito sono quadrate, su un fondo uguale per tutte: il riquadro prende
   lo stesso colore (lo stesso di strumentiimmaginigenera.html), così a ogni proporzione non si vedono bordi */
.figura img.illustrazione, .dettaglio-figura img.illustrazione { padding: 0; background: #F3F5F9; }
.figura img[hidden], .dettaglio-figura img[hidden] { display: none; }
.segnaposto {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    color: var(--primario); font-weight: 800; font-size: 24px; letter-spacing: .04em;
}
/* il segnaposto resta nascosto finché l'immagine c'è */
img + .segnaposto { display: none; }
img[hidden] + .segnaposto { display: flex; }

.corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* nome breve dell'articolo, comune a più articoli della stessa famiglia */
.famiglia {
    margin: 0; color: var(--tenue); font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; overflow-wrap: anywhere;
}
/* le descrizioni del listino possono essere lunghe: al massimo quattro righe */
.nome {
    font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; color: inherit; text-decoration: none;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.fondo { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.fondo form { display: flex; }
.fondo .pulsante { flex: 1; }

.prezzo {
    font-family: var(--carattere-titoli); font-weight: var(--peso-titoli); font-size: 18px; white-space: nowrap;
}
.prezzo small { font-family: var(--carattere); font-weight: 500; font-size: 12px; color: var(--tenue); }
.nota { color: var(--tenue); font-size: 13px; }
.stato { font-size: 13px; font-weight: 600; }
.stato.si { color: var(--positivo); }
.stato.no { color: var(--attenzione); }
.scheda.spenta .prezzo { color: var(--tenue); }

/* ---------- dettaglio ---------- */

.briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--tenue); margin-bottom: 12px; }
.briciole a { min-height: 32px; display: inline-flex; align-items: center; }

.dettaglio { display: grid; gap: 18px; }
.dettaglio-figura { height: 180px; }
.dettaglio-figura .segnaposto { font-size: 44px; }
.dettaglio-testo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* il titolo è la descrizione del listino, spesso lunga e in maiuscolo */
.dettaglio h1 { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.dettaglio-testo .famiglia { font-size: 13px; margin-bottom: -8px; }
/* descrizione estesa del servizio */
.presentazione { margin-top: 6px; }
.presentazione > :last-child { margin-bottom: 0; }
.presentazione h2 { font-size: 18px; margin-bottom: 8px; }
.presentazione p { margin: 0 0 10px; line-height: 1.55; }
.presentazione ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.55; }
.presentazione li { margin-bottom: 4px; }
.dettaglio-prezzo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px;
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio);
}
.dettaglio-prezzo .prezzo { font-size: 26px; }
.dettaglio-prezzo .prezzo small { font-size: 14px; }
.scheda-dati { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; align-items: baseline; }
.scheda-dati dt { color: var(--tenue); font-size: 14px; }
.scheda-dati dd { margin: 0; }

/* ---------- messaggi e testi ---------- */

.vuoto { padding: 32px 0; text-align: center; color: var(--tenue); }
.vuoto h1 { color: var(--testo); margin-bottom: 8px; font-size: 22px; }
.vuoto .pulsante { margin-top: 18px; }
.suggerimento { color: var(--tenue); margin-bottom: 16px; }

.documento { max-width: 720px; }
.documento h1 { margin-bottom: 16px; }
.documento h2 { margin: 24px 0 8px; font-size: 18px; }
.documento p, .documento ul, .documento ol { margin: 0 0 12px; }
.provvisorio {
    padding: 14px; border: var(--spessore-bordo) dashed var(--attenzione); border-radius: var(--raggio);
    color: var(--attenzione); background: var(--superficie);
}

/* ---------- moduli ---------- */

.stretto { max-width: 520px; }
.stretto > h1 { margin-bottom: 14px; }
.stretto > h2 { margin: 28px 0 12px; }

.modulo { display: flex; flex-direction: column; gap: 6px; }
.modulo h2 { margin: 22px 0 6px; font-size: 18px; }
.modulo h2:first-child { margin-top: 0; }
.modulo label { font-weight: 600; font-size: 15px; margin-top: 10px; }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=password], .modulo input[type=tel], .modulo select {
    width: 100%; min-height: 48px; padding: 0 12px;
    border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio);
    background: var(--superficie); color: var(--testo); font: inherit;
}
.modulo input.corto { max-width: 140px; }
.modulo input:focus, .modulo select:focus { outline: 3px solid var(--azione); outline-offset: 1px; }
.modulo .pulsante { margin-top: 18px; }
.aiuto { color: var(--tenue); font-size: 13px; margin: 2px 0 0; }
.facoltativo { color: var(--tenue); font-weight: 400; }
/* sul telefono i campi stanno uno sotto l'altro; solo le coppie corto + lungo restano affiancate */
.affiancati { display: grid; grid-template-columns: 1fr; gap: 0 12px; align-items: end; }
.affiancati.stretto-largo { grid-template-columns: 110px 1fr; }
@media (min-width: 520px) {
    .affiancati { grid-template-columns: 1fr 1fr; }
}
.affiancati > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-per][hidden] { display: none; }

.scelta { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 8px; }
.scelta legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 8px; }
.scelta label, .opzione {
    display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px; font-weight: 400;
    border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); cursor: pointer;
}
.scelta input, .opzione input, .spunta input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--azione); }
.spunta { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-weight: 400; font-size: 15px; }
.opzioni { display: flex; flex-direction: column; gap: 8px; }
.opzione:has(input:checked) { border-color: var(--azione); }

.avviso {
    padding: 12px 14px; margin: 0 0 14px; border-radius: var(--raggio);
    border: var(--spessore-bordo) solid var(--bordo); background: var(--superficie);
}
.avviso.errore { border-color: var(--errore); color: var(--errore); }
.avviso.positivo { border-color: var(--positivo); color: var(--positivo); }

.riquadro {
    margin-top: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
    border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); background: var(--superficie);
}
.riquadro.evidenza { margin: 0 0 24px; border-color: var(--azione); }
.riquadro h2 { font-size: 18px; }
dl.riquadro { display: grid; margin-bottom: 16px; }
.coordinate { padding: 12px; border-radius: calc(var(--raggio) - 2px); background: var(--tinta); overflow-wrap: anywhere; }
.collegamenti { margin: 16px 0 0; }
.esito { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px 0; }
.uscita { margin-top: 28px; }
.informativa { color: var(--tenue); font-size: 13px; }

/* ---------- guida al sito ---------- */

.guida-cerca {
    width: 100%; min-height: 48px; padding: 0 14px; margin: 0 0 12px; font: inherit; color: var(--testo);
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio-pulsante);
}
.guida-sezione { margin-top: 24px; }
.guida-sezione h2 { font-size: 18px; margin: 0 0 10px; scroll-margin-top: 84px; }
.guida-sezione[hidden], .guida-voce[hidden] { display: none; }
.guida-voce {
    border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); background: var(--superficie);
    margin-bottom: 8px; scroll-margin-top: 84px;
}
.guida-voce summary { padding: 14px 16px; font-weight: 600; cursor: pointer; }
.guida-voce[open] summary { border-bottom: var(--spessore-bordo) solid var(--bordo); }
.guida-testo { padding: 14px 16px; line-height: 1.55; }
.guida-testo p { margin: 0 0 10px; }
.guida-testo ul { margin: 0 0 10px; padding-left: 20px; }
.guida-testo li { margin-bottom: 4px; }
.guida-testo > :last-child { margin-bottom: 0; }

/* ---------- credito prepagato (operatori) ---------- */

.riquadro-credito {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 14px 16px; margin: 0 0 18px;
    border: var(--spessore-bordo) solid var(--azione); border-radius: var(--raggio); background: var(--superficie);
    color: var(--testo); text-decoration: none;
}
.riquadro-credito strong { font-size: 22px; grid-row: span 2; align-self: center; white-space: nowrap; }
.riquadro-credito .collegamento { font-size: 14px; }
.saldo { font-size: 30px; font-weight: 700; margin: 0; }
.tagli { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tagli li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); }
.tagli .prezzo { font-size: 20px; }
.movimenti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.movimenti li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: var(--spessore-bordo) solid var(--bordo); }
.movimenti .quando { color: var(--tenue); font-size: 13px; grid-column: 1; }
.movimenti .valore { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 700; white-space: nowrap; }
.movimenti .valore.entrata { color: var(--positivo); }

/* ---------- pagamento online ---------- */

.pagamento { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pagamento > div { display: flex; flex-direction: column; gap: 14px; }
.pagamento h2 { font-size: 18px; margin: 0; }
.pagamento [hidden] { display: none; }
/* un pulsante per riga, tutti della stessa altezza: Apple Pay, Google Pay, PayPal */
.pulsanti-pagamento { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.pulsanti-paypal { min-height: 48px; }
#pulsante-googlepay { height: 48px; }
apple-pay-button {
    display: block; --apple-pay-button-width: 100%; --apple-pay-button-height: 48px;
    --apple-pay-button-border-radius: 4px; --apple-pay-button-padding: 0;
}
.campi-carta { display: flex; flex-direction: column; gap: 4px; max-width: 480px; }
/* i campi sono riquadri di PayPal che si dimensionano da soli: niente altezza fissa */
.campo-carta { min-height: 48px; }
/* scadenza e CVV restano affiancati anche sul telefono */
.campi-carta .affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.pagamento [data-paga-carta] { max-width: 480px; }

/* ---------- carrello, riepilogo, ordini ---------- */

.due-colonne { display: grid; gap: 24px; align-items: start; }
.due-colonne > div > h2 { margin: 24px 0 10px; font-size: 18px; }
.due-colonne > div > h2:first-child { margin-top: 0; }

.righe-carrello { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.riga-carrello {
    display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px;
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.figura.piccola { width: 64px; height: 64px; text-decoration: none; }
.figura.piccola .segnaposto { font-size: 18px; }
.riga-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prezzo-unitario { color: var(--tenue); font-size: 13px; }
.riga-azioni { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quantita { display: flex; align-items: center; border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio-pulsante); overflow: hidden; }
.quantita form { display: flex; }
.quantita button {
    width: 44px; height: 44px; border: 0; background: var(--superficie); color: var(--testo);
    font: inherit; font-size: 20px; font-weight: 700; cursor: pointer;
}
.quantita button[disabled] { opacity: .4; cursor: default; }
.quantita .numero { min-width: 36px; text-align: center; font-weight: 700; }
.quantita-libera { display: flex; align-items: center; gap: 8px; }
.quantita-libera input {
    width: 92px; min-height: 44px; padding: 0 10px; font: inherit; text-align: right; color: var(--testo);
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio-pulsante);
}

.riepilogo {
    display: flex; flex-direction: column; gap: 12px; padding: 16px;
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.riepilogo h2 { font-size: 18px; }
.riepilogo .spunta { margin-top: 0; }
.totali { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.totali div { display: flex; justify-content: space-between; gap: 12px; color: var(--tenue); }
.totali dd { margin: 0; white-space: nowrap; }
.totali .totale {
    color: var(--testo); font-weight: 700; font-size: 19px; padding-top: 10px; margin-top: 4px;
    border-top: var(--spessore-bordo) solid var(--bordo);
}
.righe-riepilogo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.righe-riepilogo li { display: flex; justify-content: space-between; gap: 12px; }
.righe-riepilogo li > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.righe-riepilogo li > span:last-child { white-space: nowrap; font-weight: 600; }
.righe-riepilogo.larghe { font-size: 15px; gap: 0; }
.righe-riepilogo.larghe li { padding: 12px 0; border-bottom: var(--spessore-bordo) solid var(--bordo); }
.righe-riepilogo small { color: var(--tenue); }
.indirizzo { line-height: 1.6; overflow-wrap: anywhere; }

.elenco-ordini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ordine {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px; color: var(--testo); text-decoration: none;
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.ordine-numero { font-weight: 700; }
.ordine-data { color: var(--tenue); font-size: 14px; grid-column: 1; }
.ordine-totale { font-weight: 700; grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
.ordine .etichetta-stato { grid-column: 2; grid-row: 2; justify-self: end; }
.etichetta-stato {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
    border: var(--spessore-bordo) solid currentColor; white-space: nowrap;
}
.etichetta-stato.positivo { color: var(--positivo); }
.etichetta-stato.negativo { color: var(--errore); }
.etichetta-stato.attesa { color: var(--attenzione); }

.acquisto { display: flex; }
.acquisto form { flex: 1; display: flex; }

/* messaggio breve dopo un'aggiunta al carrello */
.notifica {
    position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 30;
    padding: 12px 16px; border-radius: var(--raggio); background: var(--testo); color: var(--sfondo);
    font-weight: 600; text-align: center; box-shadow: var(--ombra-alta);
}
.notifica[hidden] { display: none; }
.notifica a { color: inherit; margin-left: 8px; }

/* ---------- assistente (chat) ---------- */

.assistente-apri {
    position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 25;
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
    border: 0; border-radius: 999px; background: var(--primario); color: var(--su-primario);
    cursor: pointer; box-shadow: var(--ombra-alta);
}
.assistente-apri[hidden], .assistente[hidden] { display: none; }
.assistente-apri svg, .assistente-azione svg {
    width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* sul telefono la chat occupa tutto lo schermo */
.assistente {
    position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 40;
    display: flex; flex-direction: column; background: var(--sfondo); color: var(--testo);
}
body.assistente-aperto { overflow: hidden; }
.assistente-testa {
    display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px;
    background: var(--testata); color: var(--su-testata);
}
.assistente-testa h2 { flex: 1; font-size: 18px; }
.assistente-azione {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px;
    border: 0; border-radius: var(--raggio-pulsante); background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer;
}
.assistente-messaggi {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px;
    display: flex; flex-direction: column; gap: 10px; outline: none;
}
.messaggio { max-width: 88%; padding: 10px 14px; border-radius: var(--raggio); line-height: 1.5; overflow-wrap: anywhere; }
.messaggio.utente { align-self: flex-end; background: var(--primario); color: var(--su-primario); white-space: pre-wrap; }
.messaggio.risposta { align-self: flex-start; background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); }
.messaggio.errore { border-color: var(--errore); color: var(--errore); }
.messaggio p { margin: 0 0 8px; }
.messaggio ul { margin: 0 0 8px; padding-left: 20px; }
.messaggio li { margin-bottom: 4px; }
.messaggio > :last-child { margin-bottom: 0; }
.messaggio.attesa {
    align-self: flex-start; display: flex; gap: 5px; padding: 14px;
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo);
}
.messaggio.attesa span { width: 7px; height: 7px; border-radius: 999px; background: var(--tenue); animation: assistente-attesa 1.2s infinite ease-in-out; }
.messaggio.attesa span:nth-child(2) { animation-delay: .2s; }
.messaggio.attesa span:nth-child(3) { animation-delay: .4s; }
@keyframes assistente-attesa { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.assistente-servizi { display: flex; flex-direction: column; gap: 8px; }
.servizio-citato {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; color: var(--testo); text-decoration: none;
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.servizio-citato img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: calc(var(--raggio) - 2px); background: var(--tinta); }
.servizio-citato-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.servizio-citato .nome { font-weight: 600; line-height: 1.3; }
.servizio-citato-prezzo { color: var(--tenue); font-size: 14px; }

.assistente-proposte { display: flex; flex-wrap: wrap; gap: 8px; }
.assistente-proposte button {
    min-height: 44px; padding: 8px 14px; text-align: left; font: inherit; font-size: 15px; color: var(--primario); cursor: pointer;
    background: var(--superficie); border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio-pulsante);
}

.assistente-modulo {
    display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px;
    background: var(--superficie); border-top: var(--spessore-bordo) solid var(--bordo);
}
.assistente-modulo textarea {
    flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 10px 12px; resize: none;
    font: inherit; line-height: 1.4; color: var(--testo); background: var(--sfondo);
    border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio-pulsante);
}
.assistente-nota {
    margin: 0; padding: 0 12px calc(8px + env(safe-area-inset-bottom)); background: var(--superficie);
    color: var(--tenue); font-size: 12px; line-height: 1.35; text-align: center;
}

/* ---------- piè di pagina ---------- */

.piede { margin-top: 36px; padding: 24px 0; border-top: var(--spessore-bordo) solid var(--bordo); color: var(--tenue); font-size: 14px; }
.piede-colonne { display: grid; gap: 20px; }
.piede p { margin: 0 0 6px; overflow-wrap: anywhere; }
.piede a { color: inherit; display: inline-block; padding: 4px 0; }
.piede-nome, .piede-titolo { color: var(--testo); font-weight: 700; }

/* ---------- schermi larghi ---------- */

@media (min-width: 640px) {
    .griglia { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .categorie-griglia { grid-template-columns: repeat(3, 1fr); }
    .piede-colonne { grid-template-columns: repeat(3, 1fr); }
    .dettaglio { grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
    .dettaglio-figura { height: 240px; }
}

@media (min-width: 900px) {
    body { padding-bottom: 0; }
    h1 { font-size: 30px; }
    .dettaglio h1 { font-size: 24px; }
    .menu-basso { display: none; }
    .testata { position: sticky; top: 0; z-index: 20; }
    .testata-riga { flex-wrap: nowrap; }
    .marchio { flex: 0 1 auto; }
    .menu-alto { display: flex; gap: 4px; margin-left: 8px; }
    .menu-alto a {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
        color: inherit; text-decoration: none; border-radius: var(--raggio-pulsante); opacity: .85;
    }
    .menu-alto a:hover, .menu-alto a.attiva { opacity: 1; background: rgba(127, 127, 127, .25); }
    .menu-alto a.attiva { font-weight: 700; }
    .cerca { flex: 1 1 320px; max-width: 420px; margin-left: auto; }
    .menu-utente { margin-left: 0; }
    .menu-utente a { gap: 8px; }
    .due-colonne { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
    .riepilogo { position: sticky; top: 84px; }
    .notifica { left: auto; right: 24px; bottom: 24px; max-width: 360px; }
    /* la chat diventa un riquadro nell'angolo e la pagina resta utilizzabile */
    .con-assistente .notifica { bottom: 92px; }
    .assistente-apri { right: 24px; bottom: 24px; }
    .assistente {
        left: auto; top: auto; right: 24px; bottom: 24px; width: 400px; height: min(640px, calc(100vh - 108px));
        border: var(--spessore-bordo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-alta); overflow: hidden;
    }
    body.assistente-aperto { overflow: visible; }
    .vetrina { padding: 36px 0 44px; }
    .vetrina h1 { font-size: 36px; }
    .vetrina p { font-size: 18px; }
    .griglia { grid-template-columns: repeat(4, 1fr); }
    .categorie-griglia { grid-template-columns: repeat(4, 1fr); }
    .filtri-riga { flex-wrap: wrap; overflow: visible; }
    .scheda, .categoria { transition: box-shadow .15s ease, transform .15s ease; }
    .scheda:hover, .categoria:hover { box-shadow: var(--ombra-alta); transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .scheda, .categoria { transition: none; }
    .messaggio.attesa span { animation: none; opacity: .6; }
    .scheda:hover, .categoria:hover { transform: none; }
}