/* ==========================================================================
   Utensileria & Ferramenta: foglio di stile del nuovo front end (T24.1, versione 2; sul sito reale da T27)

   Un solo foglio, nessuna libreria, nessun !important, nessuno stile inline.
   Prefisso di tutte le classi: uf-  (nomi stabili, pensati per diventare il foglio del sito reale).
   T27: e' il foglio delle pagine migrate (master MasterV2.master); sezioni 1-12 come la guida di stile approvata
   (_design/v2/sito-v2.css), tolta la sezione della sola guida; la sezione 13 aggiunge i pezzi del sito vero.
   Il carattere Poppins e' in Content/font/poppins/poppins.css (ospitato sul sito, caricato dalla master).

   Indice
     1. Token (variabili): colori, testo, spazi, raggi, ombre, misure
     2. Base: box-sizing, corpo, titoli, link, fuoco da tastiera, utilita'
     3. Impaginazione: scatola 1400 px, corpo a due colonne, sezioni, griglie, carosello
     4. Testata: fascia di servizio, marchio, ricerca, azioni, barra di navigazione
     5. Menu categorie verticale e cassetto (telefono e tablet)
     6. Comandi: bottoni, campi, selettore quantita', spunte
     7. Elementi: badge, disponibilita', prezzi, avvisi, tabelle, briciole, paginazione, chip
     8. Scheda prodotto (griglie e caroselli)
     9. Tendina dei suggerimenti della ricerca (coerente con T16.2)
    10. Pagine: elenco con filtri, scheda articolo, carrello, novita', home
    11. Piede pagina
    12. Movimento ridotto, stampa
    13. Sito reale (T27): attesa, mini-carrello, accesso, "aggiunto al carrello", banner, pagine di testo e d'errore,
        tendina della ricerca di T16.2 ricolorata

   Punti di rottura (mobile first: le regole di base valgono per il telefono, ogni @media aggiunge):
     base   0-479    telefono (riferimento 375 px)
     480    telefono grande, 2 colonne comode
     768    tablet: testata su una riga, barra di navigazione orizzontale
     992    desktop: colonna sinistra fissa con il menu delle categorie (sotto e' un cassetto)
     1400   scatola chiusa a 1400 px, centrata (sopra si vede il fondo grigio tenue); griglie a 4 colonne,
            caroselli a 4 schede, griglie della home a 5 (richiesta del committente: prima la scatola era di 1200 px)

   Ogni @media di questo foglio si apre e si chiude nello stesso blocco di poche righe, accanto al componente
   che modifica: nessuna regola puo' finire "dentro" una media query per errore (vedi il difetto di custom.css,
   dove una @media (min-width: 768px) mai chiusa rendeva desktop-only circa 1.700 righe).
   ========================================================================== */


/* 1. TOKEN ================================================================== */
:root {
    /* colori del marchio (stessa radice dei token dell'admin: --giallo -> --colore-giallo, ...) */
    --colore-giallo:            #fcc605;   /* giallo del logo: barra di navigazione, bottone primario, badge promo. Solo con testo nero */
    --colore-giallo-scuro:      #e3b100;   /* giallo al passaggio / premuto (testo nero 8,75:1) */
    --colore-giallo-bordo:      #b08d00;   /* bordo dei comandi gialli su bianco (3,16:1, contrasto dei componenti) */
    --colore-giallo-velo:       #fff8d6;   /* fondo di evidenza tenue (voce di menu al passaggio, riepiloghi) */
    --colore-nero:              #1a1a1a;   /* testo, fascia di servizio, piede, voce attiva */
    --colore-grafite:           #4c4c48;   /* grafite dell'admin e del piede di oggi */
    --colore-grafite-scuro:     #3a3a37;   /* grafite premuta (bottone scuro) */

    /* superfici e testo */
    --colore-carta:             #ffffff;   /* fondo dei contenuti */
    --colore-fondo:             #f0f2f5;   /* grigio tenue dell'admin: fuori dalla scatola, fasce, testate di tabella */
    --colore-fondo-chiaro:      #f7f8fa;   /* fasce della home, riquadro di acquisto, intestazioni di riga */
    --colore-bordo:             #e3e6ea;   /* separatori decorativi */
    --colore-bordo-campo:       #8d939a;   /* bordo di campi e comandi (3,1:1 su bianco) */
    --colore-testo:             #1a1a1a;   /* testo corrente (come --testo dell'admin) */
    --colore-testo-2:           #4a4f55;   /* etichette, marca, codice */
    --colore-testo-3:           #5f656c;   /* note; piu' scuro del --testo-3 dell'admin (#6b7178 = 4,4:1 sul grigio, sotto AA) */
    --colore-testo-su-scuro:    #ffffff;   /* testo forte su nero e grafite */
    --colore-testo-su-scuro-2:  #d6d6d2;   /* testo corrente su nero (piede, fascia) */

    /* colori funzionali (solo per il loro significato) */
    --colore-verde:             #1a7340;   /* disponibile, conferme */
    --colore-verde-velo:        #e8f6ee;   /* fondo di avviso di conferma */
    --colore-rosso:             #b03a2e;   /* esaurito, errori */
    --colore-rosso-velo:        #fdecea;   /* fondo di avviso di errore */
    --colore-arancio:           #b84a00;   /* avvisi (testo) */
    --colore-arancio-velo:      #fff5eb;   /* fondo di avviso di attenzione */

    --colore-fuoco:             var(--colore-nero);   /* anello del fuoco da tastiera; giallo nelle zone scure */

    /* carattere e scala tipografica (base 16 px; rem per rispettare lo zoom del browser) */
    --carattere:   'Poppins', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --testo-xs:    0.75rem;    /* 12 px: badge in maiuscoletto */
    --testo-s:     0.875rem;   /* 14 px: codice, marca, note, menu */
    --testo-m:     1rem;       /* 16 px: testo corrente, nomi dei prodotti */
    --testo-l:     1.125rem;   /* 18 px: h4, testo introduttivo */
    --testo-xl:    1.25rem;    /* 20 px: h3, prezzo nella scheda in griglia */
    --testo-2xl:   1.5rem;     /* 24 px: h2 (h1 sul telefono) */
    --testo-3xl:   1.875rem;   /* 30 px: h1, prezzo della scheda articolo */
    --interlinea:          1.55;
    --interlinea-titoli:   1.25;
    --peso-normale: 400;
    --peso-medio:   500;
    --peso-forte:   600;
    --peso-titolo:  700;

    /* spaziatura: multipli di 4 px */
    --spazio-1: 0.25rem;   /*  4 */
    --spazio-2: 0.5rem;    /*  8 */
    --spazio-3: 0.75rem;   /* 12 */
    --spazio-4: 1rem;      /* 16: margine laterale sul telefono */
    --spazio-5: 1.5rem;    /* 24: margine laterale da 768 px, distanza tra colonne */
    --spazio-6: 2rem;      /* 32: distanza tra sezioni */
    --spazio-7: 3rem;      /* 48 */
    --spazio-8: 4rem;      /* 64 */

    /* raggi e ombre */
    --raggio-s:     4px;
    --raggio-m:     8px;
    --raggio-l:     12px;
    --raggio-tondo: 999px;
    --ombra-1: 0 1px 2px rgba(26, 26, 26, .06), 0 1px 1px rgba(26, 26, 26, .04);   /* come l'admin: schede ferme */
    --ombra-2: 0 4px 14px rgba(26, 26, 26, .10);                                  /* scheda al passaggio, tendina */
    --ombra-3: 0 12px 32px rgba(26, 26, 26, .22);                                 /* cassetto */

    /* misure */
    --largo-scatola:   1400px;   /* sito "boxed" (1200 px fino a T27.3; il sito di prima era 1170) */
    --largo-colonna:   260px;    /* menu delle categorie da 992 px */
    --alto-comando:    44px;     /* area di tocco minima di ogni comando */
    --alto-campo-ricerca: 48px;
    --durata:          150ms;
}


/* 2. BASE =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--colore-fondo);
    color: var(--colore-testo);
    font-family: var(--carattere);
    font-size: var(--testo-m);
    line-height: var(--interlinea);
}
img, svg { max-width: 100%; }
img { height: auto; border: 0; }
h1, h2, h3, h4 { margin: 0 0 var(--spazio-3); font-weight: var(--peso-titolo); line-height: var(--interlinea-titoli); color: var(--colore-testo); }
h1 { font-size: var(--testo-2xl); }
h2 { font-size: var(--testo-xl); }
h3 { font-size: var(--testo-l); }
h4 { font-size: var(--testo-m); }
@media (min-width: 768px) {
    h1 { font-size: var(--testo-3xl); }
    h2 { font-size: var(--testo-2xl); }
    h3 { font-size: var(--testo-xl); }
    h4 { font-size: var(--testo-l); }
}
p { margin: 0 0 var(--spazio-3); }
ul, ol { margin: 0; padding: 0; }
small { font-size: var(--testo-s); }
code { overflow-wrap: break-word; font-family: Consolas, 'Courier New', monospace; font-size: .9em; background: var(--colore-fondo); padding: 0 var(--spazio-1); border-radius: var(--raggio-s); }
mark { background: var(--colore-giallo-velo); color: inherit; box-shadow: inset 0 -2px 0 var(--colore-giallo-bordo); padding: 0; }
hr { border: 0; border-top: 1px solid var(--colore-bordo); margin: var(--spazio-5) 0; }

/* link: niente blu. Nero sottolineato; al passaggio fondo giallo tenue e sottolineatura piena */
a { color: var(--colore-testo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { background-color: var(--colore-giallo-velo); text-decoration-thickness: 2px; }
a:active { background-color: var(--colore-giallo); }

/* fuoco da tastiera visibile ovunque: anello di 3 px nero (giallo nelle zone scure), staccato di 2 px */
:focus-visible { outline: 3px solid var(--colore-fuoco); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.uf-scuro { --colore-fuoco: var(--colore-giallo); }

.uf-nascosto {   /* nascosto alla vista, letto dagli screen reader */
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.uf-salta {      /* "Vai al contenuto": primo tasto Tab */
    position: absolute; left: var(--spazio-2); top: -100px; z-index: 100;
    padding: var(--spazio-3) var(--spazio-4); background: var(--colore-giallo); color: var(--colore-nero); font-weight: var(--peso-forte);
    border-radius: var(--raggio-m); text-decoration: none;
}
.uf-salta:focus { top: var(--spazio-2); }
.uf-icona { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
.uf-icona--piena { fill: currentColor; stroke: none; }
.uf-sprite { display: none; }
.uf-nota { color: var(--colore-testo-3); font-size: var(--testo-s); }
.uf-testo-corrente { max-width: 72ch; }


/* 3. IMPAGINAZIONE ========================================================== */
/* La scatola: 1400 px centrata; sotto i 1400 px e' fluida e occupa tutta la larghezza */
.uf-pagina { max-width: var(--largo-scatola); margin: 0 auto; background: var(--colore-carta); min-height: 100vh; }
@media (min-width: 1400px) {
    .uf-pagina { box-shadow: 0 0 0 1px var(--colore-bordo), var(--ombra-1); }
}
.uf-corpo { display: block; padding: var(--spazio-4); }
.uf-principale { min-width: 0; }
@media (min-width: 768px) {
    .uf-corpo { padding: var(--spazio-5); }
}
@media (min-width: 992px) {
    .uf-corpo { display: grid; grid-template-columns: var(--largo-colonna) minmax(0, 1fr); gap: var(--spazio-5); align-items: start; }
}

.uf-sezione { margin: 0 0 var(--spazio-6); }
.uf-sezione--fascia { margin-left: calc(-1 * var(--spazio-4)); margin-right: calc(-1 * var(--spazio-4)); padding: var(--spazio-5) var(--spazio-4); background: var(--colore-fondo-chiaro); border-block: 1px solid var(--colore-bordo); }
@media (min-width: 768px) {
    .uf-sezione--fascia { margin-left: 0; margin-right: 0; padding: var(--spazio-5); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-l); }
}
.uf-titolo-sezione { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-3); flex-wrap: wrap; margin-bottom: var(--spazio-4); }
.uf-titolo-sezione h2 { margin: 0; display: flex; align-items: center; gap: var(--spazio-2); }
.uf-titolo-sezione h2::before { content: ""; width: 6px; height: 1.1em; border-radius: 3px; background: var(--colore-giallo); box-shadow: inset 0 0 0 1px var(--colore-giallo-bordo); }
.uf-titolo-sezione a { font-weight: var(--peso-forte); font-size: var(--testo-s); display: inline-flex; align-items: center; min-height: var(--alto-comando); }
.uf-introduzione { font-size: var(--testo-l); color: var(--colore-testo-2); max-width: 60ch; }

/* griglia dei prodotti: 2 colonne sul telefono, 3 da 768 px; la scheda si adatta alla larghezza */
.uf-griglia { --colonne: 2; display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--spazio-3); list-style: none; margin: 0 0 var(--spazio-5); padding: 0; }
@media (min-width: 768px) {
    .uf-griglia { --colonne: 3; gap: var(--spazio-3); }
}
.uf-griglia--4 { --colonne: 2; }
@media (min-width: 768px) {
    .uf-griglia--4 { --colonne: 4; }
}
@media (min-width: 1400px) {   /* scatola di 1400 px: una scheda in piu' per riga */
    .uf-griglia { --colonne: 4; }
    .uf-griglia--4 { --colonne: 5; }
}

/* carosello: una riga che scorre in orizzontale (scroll-snap), senza autoplay; frecce aggiunte da sito-v2.js.
   T27.7 (committente): schede piu' compatte, 5 per riga a 1400 px (4 da 1200, 3 da 768, 2,5 da 480, 1,6 sul telefono),
   fino a 10 schede per carosello */
.uf-carosello { position: relative; margin-bottom: var(--spazio-5); }
.uf-carosello__binario {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--spazio-3)) / 1.6);
    gap: var(--spazio-3); list-style: none; margin: 0; padding: 2px 2px var(--spazio-3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
    scrollbar-width: thin; scrollbar-color: var(--colore-bordo-campo) transparent;
}
.uf-carosello__binario > li { scroll-snap-align: start; display: flex; }
.uf-carosello__binario > li > * { flex: 1; }
@media (min-width: 480px) {
    .uf-carosello__binario { grid-auto-columns: calc((100% - 2 * var(--spazio-3)) / 2.5); }
}
@media (min-width: 768px) {
    .uf-carosello__binario { grid-auto-columns: calc((100% - 2 * var(--spazio-4)) / 3); gap: var(--spazio-4); }
}
@media (min-width: 1200px) {
    .uf-carosello__binario { grid-auto-columns: calc((100% - 3 * var(--spazio-4)) / 4); }
}
@media (min-width: 1400px) {
    .uf-carosello__binario { grid-auto-columns: calc((100% - 4 * var(--spazio-4)) / 5); }
}
.uf-carosello__frecce { display: none; justify-content: flex-end; gap: var(--spazio-2); }
.uf-js .uf-carosello__frecce { display: flex; }

.uf-due-colonne { display: grid; gap: var(--spazio-5); }
@media (min-width: 768px) {
    .uf-due-colonne { grid-template-columns: 1fr 1fr; }
}


/* 4. TESTATA ================================================================ */
/* fascia di servizio: nera, una riga */
.uf-fascia { background: var(--colore-nero); color: var(--colore-testo-su-scuro-2); font-size: var(--testo-s); }
.uf-fascia__dentro { display: flex; justify-content: center; gap: 0 var(--spazio-5); flex-wrap: wrap; padding: 0 var(--spazio-4); }
.uf-fascia a { display: inline-flex; align-items: center; min-height: var(--alto-comando); color: var(--colore-testo-su-scuro); font-weight: var(--peso-forte); }
.uf-fascia a:hover { background: none; color: var(--colore-giallo); }
.uf-fascia__voce { display: inline-flex; align-items: center; gap: var(--spazio-2); min-height: var(--alto-comando); }
.uf-fascia__voce .uf-icona { color: var(--colore-giallo); }
.uf-fascia__voce--tablet, .uf-fascia__voce--desktop { display: none; }
@media (min-width: 768px) {
    .uf-fascia__dentro { justify-content: space-between; padding: 0 var(--spazio-5); }
    .uf-fascia__voce--tablet { display: inline-flex; }
}
@media (min-width: 992px) {
    .uf-fascia__voce--desktop { display: inline-flex; }
}

/* testata bianca: marchio, ricerca, azioni */
.uf-testata { background: var(--colore-carta); border-bottom: 1px solid var(--colore-bordo); }
.uf-testata__dentro {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "menu marchio azioni" "ricerca ricerca ricerca";
    align-items: center; gap: var(--spazio-2) var(--spazio-2); padding: var(--spazio-2) var(--spazio-4) var(--spazio-3);
}
.uf-apri-menu { grid-area: menu; }
.uf-marchio { grid-area: marchio; display: inline-flex; align-items: center; justify-self: start; min-height: var(--alto-comando); text-decoration: none; }
.uf-marchio:hover { background: none; }
.uf-marchio img { display: block; width: 140px; max-width: none; height: auto; }
.uf-ricerca { grid-area: ricerca; position: relative; }
.uf-azioni { grid-area: azioni; display: flex; gap: var(--spazio-1); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
    .uf-testata__dentro { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "menu marchio ricerca azioni"; gap: var(--spazio-4); padding: var(--spazio-3) var(--spazio-5); }
    .uf-marchio img { width: 160px; }
}
@media (min-width: 992px) {
    .uf-testata__dentro { grid-template-columns: var(--largo-colonna) minmax(0, 1fr) auto; grid-template-areas: "marchio ricerca azioni"; gap: var(--spazio-5); }
    .uf-testata .uf-apri-menu { display: none; }
    .uf-marchio img { width: 216px; }
}

/* casella di ricerca: bordo nero di 2 px, bottone giallo attaccato */
.uf-ricerca__gruppo { display: flex; border: 2px solid var(--colore-nero); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-ricerca__gruppo:focus-within { outline: 3px solid var(--colore-giallo); outline-offset: 0; }
.uf-ricerca__campo {
    flex: 1; min-width: 0; height: var(--alto-campo-ricerca); padding: 0 var(--spazio-3); border: 0; border-radius: var(--raggio-m) 0 0 var(--raggio-m);
    font: inherit; font-size: var(--testo-m); color: var(--colore-testo); background: transparent;
}
.uf-ricerca__campo::placeholder { color: var(--colore-testo-3); opacity: 1; }
.uf-ricerca__campo:focus { outline: none; }
.uf-ricerca__campo::-webkit-search-cancel-button { cursor: pointer; }
.uf-ricerca__bottone {
    display: inline-flex; align-items: center; gap: var(--spazio-2); padding: 0 var(--spazio-4); min-width: var(--alto-campo-ricerca); height: var(--alto-campo-ricerca);
    border: 0; border-left: 2px solid var(--colore-nero); border-radius: 0 6px 6px 0; background: var(--colore-giallo); color: var(--colore-nero);
    font: inherit; font-weight: var(--peso-forte); cursor: pointer;
}
.uf-ricerca__bottone:hover { background: var(--colore-giallo-scuro); }
.uf-ricerca__bottone:active { background: var(--colore-giallo-bordo); }
.uf-ricerca__bottone:focus-visible { outline-offset: -5px; }
.uf-ricerca__testo-bottone { display: none; }
@media (min-width: 480px) {
    .uf-ricerca__testo-bottone { display: inline; }
}

/* azioni: account, desideri, carrello (icona e parola; il numero nel cerchio giallo) */
.uf-azione {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: var(--alto-comando); min-height: var(--alto-comando); padding: var(--spazio-1); border-radius: var(--raggio-m);
    color: var(--colore-testo); text-decoration: none; font-size: var(--testo-xs); font-weight: var(--peso-forte); line-height: 1.2;
}
.uf-azione .uf-icona { width: 26px; height: 26px; }
.uf-azione:hover { background: var(--colore-giallo-velo); }
.uf-azione__parola { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.uf-conta {
    position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--raggio-tondo);
    background: var(--colore-giallo); color: var(--colore-nero); box-shadow: 0 0 0 2px var(--colore-carta), inset 0 0 0 1px var(--colore-giallo-bordo);
    font-size: var(--testo-xs); font-weight: var(--peso-titolo); line-height: 20px; text-align: center;
}
@media (min-width: 768px) {
    .uf-azione { min-width: 64px; }
    .uf-azione__parola { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .uf-conta { right: 8px; }
}

/* barra di navigazione gialla: Home, Novita', Promozioni, Contattaci, Chi Siamo.
   Telefono: 5 colonne uguali con icona sopra la parola (tutte visibili, niente scorrimento); da 768 px una riga
   centrata nella barra (T27.7, richiesta del committente: prima era allineata alla colonna del contenuto) */
.uf-barra { background: var(--colore-giallo); border-bottom: 1px solid var(--colore-giallo-bordo); }
.uf-barra ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.uf-barra a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: var(--spazio-1) 2px;
    color: var(--colore-nero); text-decoration: none; font-size: var(--testo-xs); font-weight: var(--peso-forte); line-height: 1.15; text-align: center;
}
.uf-barra .uf-icona { width: 22px; height: 22px; }
.uf-barra a:hover { background: var(--colore-giallo-scuro); }
.uf-barra a:active { background: var(--colore-giallo-bordo); }
.uf-barra a[aria-current="page"] { background: var(--colore-nero); color: var(--colore-giallo); }
.uf-barra a[aria-current="page"]:focus-visible { outline-color: var(--colore-giallo); outline-offset: -5px; }
@media (min-width: 768px) {
    .uf-barra ul { display: flex; justify-content: center; flex-wrap: wrap; padding: 0 var(--spazio-5); }
    .uf-barra a { flex-direction: row; gap: var(--spazio-2); min-height: 48px; padding: 0 var(--spazio-4); font-size: var(--testo-m); }
    .uf-barra .uf-icona { width: 18px; height: 18px; }
}


/* 5. MENU CATEGORIE VERTICALE E CASSETTO ===================================== */
/* Sotto i 992 px la colonna sinistra e' un cassetto che entra da sinistra:
   senza JavaScript si apre con il link #menu-categorie (o #filtri) grazie a :target, si chiude con "Chiudi";
   con sito-v2.js si apre con la classe uf-aperta (Esc, clic sul velo, fuoco trattenuto, nessun cambio di indirizzo). */
.uf-colonna {
    position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(88vw, 360px);
    overflow-y: auto; overscroll-behavior: contain; background: var(--colore-carta); box-shadow: var(--ombra-3);
    transform: translateX(-105%); visibility: hidden; transition: transform var(--durata) ease-out, visibility 0s linear var(--durata);
}
.uf-colonna:target, .uf-colonna:has(:target), .uf-colonna.uf-aperta { transform: none; visibility: visible; transition: transform var(--durata) ease-out; }
.uf-velo { display: none; position: fixed; z-index: 59; inset: 0; background: rgba(26, 26, 26, .55); }
.uf-velo:hover { background: rgba(26, 26, 26, .55); }
.uf-colonna:target + .uf-velo, .uf-colonna:has(:target) + .uf-velo, .uf-colonna.uf-aperta + .uf-velo { display: block; }
body:has(.uf-colonna:target), body:has(.uf-colonna :target), body.uf-cassetto-aperto { overflow: hidden; }
.uf-v2 { min-height: 100vh; }
.uf-cassetto-testa {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    padding: var(--spazio-1) var(--spazio-1) var(--spazio-1) var(--spazio-4); background: var(--colore-nero); color: var(--colore-testo-su-scuro);
    font-weight: var(--peso-titolo);
}
.uf-colonna__dentro { padding: var(--spazio-4); display: grid; gap: var(--spazio-5); }
@media (min-width: 992px) {
    .uf-colonna { position: static; z-index: auto; width: auto; overflow: visible; box-shadow: none; transform: none; visibility: visible; transition: none; background: transparent; }
    .uf-velo, .uf-colonna:target + .uf-velo, .uf-colonna:has(:target) + .uf-velo, .uf-colonna.uf-aperta + .uf-velo { display: none; }
    .uf-cassetto-testa { display: none; }
    .uf-colonna__dentro { padding: 0; }
    body:has(.uf-colonna:target), body:has(.uf-colonna :target), body.uf-cassetto-aperto { overflow: visible; }
}

/* il menu: titolo nero, voci in ordine alfabetico, ramo aperto della categoria corrente */
.uf-menu { border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); overflow: hidden; background: var(--colore-carta); }
.uf-menu__titolo {
    display: flex; align-items: center; gap: var(--spazio-2); margin: 0; padding: var(--spazio-3) var(--spazio-4);
    background: var(--colore-nero); color: var(--colore-testo-su-scuro); font-size: var(--testo-l);
}
.uf-menu__titolo .uf-icona { color: var(--colore-giallo); }
.uf-menu__elenco { list-style: none; margin: 0; padding: 0; }
.uf-menu__elenco > li + li { border-top: 1px solid var(--colore-bordo); }
.uf-menu a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-2); min-height: var(--alto-comando);
    padding: var(--spazio-2) var(--spazio-3) var(--spazio-2) var(--spazio-4); color: var(--colore-testo); text-decoration: none;
    font-size: var(--testo-m); line-height: 1.3; box-shadow: inset 0 0 0 transparent; transition: box-shadow var(--durata), background-color var(--durata);
}
.uf-menu a:hover { background: var(--colore-giallo-velo); box-shadow: inset 4px 0 0 var(--colore-giallo); }
.uf-menu a:active { background: var(--colore-giallo); }
.uf-menu a:focus-visible { outline-offset: -3px; }
.uf-menu__freccia { width: 16px; height: 16px; color: var(--colore-testo-3); }
.uf-menu a[aria-current="page"], .uf-menu__aperta > a { background: var(--colore-giallo); font-weight: var(--peso-forte); box-shadow: inset 4px 0 0 var(--colore-nero); }
.uf-menu__aperta > a .uf-menu__freccia { transform: rotate(90deg); color: var(--colore-nero); }
.uf-menu__figlie { list-style: none; margin: 0; padding: var(--spazio-1) 0 var(--spazio-2); background: var(--colore-fondo-chiaro); }
.uf-menu__figlie a { padding-left: var(--spazio-6); font-size: var(--testo-s); }
.uf-menu__figlie a[aria-current="page"] { background: var(--colore-giallo-velo); box-shadow: inset 4px 0 0 var(--colore-nero); }
.uf-menu__piede { padding: var(--spazio-2) var(--spazio-4); border-top: 1px solid var(--colore-bordo); font-size: var(--testo-s); color: var(--colore-testo-3); }
@media (min-width: 992px) and (pointer: fine) {
    .uf-menu a { min-height: 36px; padding-top: var(--spazio-1); padding-bottom: var(--spazio-1); font-size: var(--testo-s); }
}

/* riquadri di servizio sotto il menu (assistenza, spedizioni, recensioni) */
.uf-riquadro { padding: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); font-size: var(--testo-s); }
.uf-riquadro h2 { display: flex; align-items: center; gap: var(--spazio-2); margin-bottom: var(--spazio-2); font-size: var(--testo-m); }
.uf-riquadro h2 .uf-icona { color: var(--colore-nero); background: var(--colore-giallo); border-radius: var(--raggio-s); padding: 3px; width: 26px; height: 26px; }
.uf-riquadro p { margin-bottom: var(--spazio-2); }
.uf-riquadro__telefono { display: inline-flex; align-items: center; min-height: var(--alto-comando); font-size: var(--testo-2xl); font-weight: var(--peso-titolo); text-decoration: none; letter-spacing: .01em; }
.uf-riquadro--giallo { background: var(--colore-giallo-velo); border-color: var(--colore-giallo-bordo); }


/* 6. COMANDI ================================================================ */
.uf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-2);
    min-height: var(--alto-comando); min-width: var(--alto-comando); padding: 0 var(--spazio-4);
    border: 1px solid transparent; border-radius: var(--raggio-m); background: var(--colore-carta); color: var(--colore-nero);
    font: inherit; font-size: var(--testo-m); font-weight: var(--peso-forte); line-height: 1.2; text-align: center; text-decoration: none;
    cursor: pointer; transition: background-color var(--durata), border-color var(--durata), box-shadow var(--durata);
}
.uf-btn:hover { text-decoration: none; }
/* primario: giallo, testo nero, bordo senape per staccarsi dal bianco */
.uf-btn--primario { background: var(--colore-giallo); border-color: var(--colore-giallo-bordo); color: var(--colore-nero); }
.uf-btn--primario:hover { background: var(--colore-giallo-scuro); }
.uf-btn--primario:active { background: var(--colore-giallo-bordo); box-shadow: inset 0 2px 0 rgba(26, 26, 26, .25); }
/* secondario: bianco con bordo nero */
.uf-btn--secondario { background: var(--colore-carta); border: 2px solid var(--colore-nero); }
.uf-btn--secondario:hover { background: var(--colore-giallo-velo); }
.uf-btn--secondario:active { background: var(--colore-giallo); }
/* scuro: per le azioni forti su fondo chiaro (procedi all'ordine sul telefono, voce attiva) */
.uf-btn--scuro { background: var(--colore-nero); border-color: var(--colore-nero); color: var(--colore-testo-su-scuro); }
.uf-btn--scuro:hover { background: var(--colore-grafite); }
.uf-btn--scuro:active { background: var(--colore-grafite-scuro); }
/* pericolo: rimuovere, svuotare (contorno rosso, mai pieno) */
.uf-btn--pericolo { background: var(--colore-carta); border: 2px solid var(--colore-rosso); color: var(--colore-rosso); }
.uf-btn--pericolo:hover { background: var(--colore-rosso-velo); }
.uf-btn--pericolo:active { background: var(--colore-rosso); color: var(--colore-testo-su-scuro); }
/* testo: comando discreto con l'aspetto di un link ma l'area di tocco piena */
.uf-btn--testo { background: transparent; color: var(--colore-testo); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--peso-medio); padding: 0 var(--spazio-2); }
.uf-btn--testo:hover { background: var(--colore-giallo-velo); }
.uf-btn--grande { min-height: 52px; font-size: var(--testo-l); padding: 0 var(--spazio-5); }
.uf-btn--largo { width: 100%; }
.uf-btn--icona { padding: 0; width: var(--alto-comando); }
.uf-btn:disabled, .uf-btn[aria-disabled="true"] {
    background: var(--colore-fondo); border-color: var(--colore-bordo); color: var(--colore-testo-3); box-shadow: none; cursor: not-allowed;
}
.uf-scuro .uf-btn--testo { color: var(--colore-testo-su-scuro); }

/* campi */
.uf-campo { display: grid; gap: var(--spazio-1); margin-bottom: var(--spazio-4); }
.uf-etichetta { font-size: var(--testo-s); font-weight: var(--peso-forte); color: var(--colore-testo); }
.uf-input, .uf-select, .uf-textarea {
    width: 100%; min-height: var(--alto-comando); padding: var(--spazio-2) var(--spazio-3);
    border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); background: var(--colore-carta); color: var(--colore-testo);
    font: inherit; font-size: var(--testo-m); transition: border-color var(--durata), box-shadow var(--durata);
}
.uf-select { appearance: none; padding-right: var(--spazio-7); background-image: linear-gradient(45deg, transparent 50%, var(--colore-nero) 50%), linear-gradient(135deg, var(--colore-nero) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.uf-textarea { min-height: 96px; resize: vertical; }
.uf-input::placeholder, .uf-textarea::placeholder { color: var(--colore-testo-3); opacity: 1; }
.uf-input:hover, .uf-select:hover, .uf-textarea:hover { border-color: var(--colore-nero); }
.uf-input:focus, .uf-select:focus, .uf-textarea:focus { outline: none; border-color: var(--colore-nero); box-shadow: 0 0 0 3px var(--colore-giallo); }
.uf-input:disabled, .uf-select:disabled, .uf-textarea:disabled { background: var(--colore-fondo); border-color: var(--colore-bordo); color: var(--colore-testo-3); cursor: not-allowed; }
.uf-input[aria-invalid="true"], .uf-campo--errore .uf-input { border-color: var(--colore-rosso); border-width: 2px; }
.uf-aiuto { font-size: var(--testo-s); color: var(--colore-testo-3); }
.uf-errore { display: flex; align-items: center; gap: var(--spazio-1); font-size: var(--testo-s); font-weight: var(--peso-forte); color: var(--colore-rosso); }
.uf-campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-3); }

/* spunte e scelte: l'etichetta intera e' l'area di tocco (44 px) */
.uf-spunta { display: flex; align-items: center; gap: var(--spazio-3); min-height: var(--alto-comando); cursor: pointer; font-size: var(--testo-m); }
.uf-spunta input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--colore-nero); cursor: pointer; }
.uf-spunta small { color: var(--colore-testo-3); margin-left: auto; }
.uf-spunta:hover { color: var(--colore-nero); }

/* selettore quantita': meno, campo, piu' (44 px ciascuno); unita' di misura dopo il campo se non e' "pezzi" */
.uf-qta { display: inline-flex; align-items: stretch; border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); background: var(--colore-carta); flex: none; }
.uf-qta:focus-within { border-color: var(--colore-nero); box-shadow: 0 0 0 3px var(--colore-giallo); }
.uf-qta__bottone {
    display: inline-flex; align-items: center; justify-content: center; width: var(--alto-comando); min-height: var(--alto-comando);
    padding: 0; border: 0; background: var(--colore-fondo-chiaro); color: var(--colore-nero); font: inherit; font-size: var(--testo-xl); font-weight: var(--peso-forte); cursor: pointer;
}
.uf-qta__bottone:first-child { border-radius: 7px 0 0 7px; border-right: 1px solid var(--colore-bordo); }
.uf-qta__bottone:last-child { border-radius: 0 7px 7px 0; border-left: 1px solid var(--colore-bordo); }
.uf-qta__bottone:hover { background: var(--colore-giallo-velo); }
.uf-qta__bottone:active { background: var(--colore-giallo); }
.uf-qta__bottone:focus-visible { outline-offset: -3px; }
.uf-qta__bottone:disabled { color: var(--colore-bordo-campo); background: var(--colore-fondo-chiaro); cursor: not-allowed; }
.uf-qta__campo {
    width: 48px; min-height: var(--alto-comando); padding: 0 2px; border: 0; background: transparent; color: var(--colore-testo);
    font: inherit; font-size: var(--testo-m); font-weight: var(--peso-forte); text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.uf-qta__campo::-webkit-outer-spin-button, .uf-qta__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.uf-qta__campo:focus { outline: none; }
.uf-qta__unita { display: inline-flex; align-items: center; padding-right: var(--spazio-2); font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-qta--errore { border-color: var(--colore-rosso); border-width: 2px; }
.uf-qta--grande .uf-qta__campo { width: 64px; font-size: var(--testo-l); }


/* 7. ELEMENTI =============================================================== */
/* badge: promo (giallo, testo nero), novita' (nero, testo bianco), stati */
.uf-badge {
    display: inline-flex; align-items: center; gap: var(--spazio-1); padding: 2px var(--spazio-2); border-radius: var(--raggio-s);
    font-size: var(--testo-xs); font-weight: var(--peso-titolo); letter-spacing: .04em; text-transform: uppercase; line-height: 1.6; white-space: nowrap;
}
.uf-badge--promo { background: var(--colore-giallo); color: var(--colore-nero); box-shadow: inset 0 0 0 1px var(--colore-giallo-bordo); }
.uf-badge--novita { background: var(--colore-nero); color: var(--colore-testo-su-scuro); }
.uf-badge--disponibile { background: var(--colore-verde-velo); color: var(--colore-verde); }
.uf-badge--esaurito { background: var(--colore-rosso-velo); color: var(--colore-rosso); }
.uf-badge--neutro { background: var(--colore-fondo); color: var(--colore-testo-2); }

/* disponibilita': pallino colorato + parola (il colore non e' mai l'unica informazione) */
.uf-disp { display: inline-flex; align-items: center; gap: var(--spazio-2); font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-disp::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--colore-bordo-campo); }
.uf-disp--si::before { background: var(--colore-verde); }
.uf-disp--si { color: var(--colore-verde); font-weight: var(--peso-forte); }
.uf-disp--no::before { background: var(--colore-rosso); }
.uf-disp--no { color: var(--colore-rosso); font-weight: var(--peso-forte); }

/* prezzi: formato del sito ("795,08 €+iva"). Promozioni: il prezzo e' gia' scontato a monte (indicazione del committente),
   quindi niente prezzo barrato ne' percentuale nelle schede, solo il badge "Promo" */
.uf-prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--spazio-2); margin: 0; }
.uf-prezzo__valore { font-size: var(--testo-xl); font-weight: var(--peso-titolo); letter-spacing: -.01em; white-space: nowrap; }
.uf-prezzo__iva { font-size: var(--testo-s); font-weight: var(--peso-medio); color: var(--colore-testo-2); letter-spacing: 0; }
.uf-prezzo__da { font-size: var(--testo-s); font-weight: var(--peso-medio); color: var(--colore-testo-2); }
.uf-prezzo--grande .uf-prezzo__valore { font-size: var(--testo-3xl); }
.uf-prezzo--grande .uf-prezzo__iva { font-size: var(--testo-m); }
.uf-prezzo-nota { margin: 0; font-size: var(--testo-s); color: var(--colore-testo-2); }

/* avvisi */
.uf-avviso {
    display: flex; gap: var(--spazio-3); align-items: flex-start; margin: 0 0 var(--spazio-4); padding: var(--spazio-3) var(--spazio-4);
    border: 1px solid var(--colore-bordo); border-left-width: 4px; border-radius: var(--raggio-m); background: var(--colore-fondo-chiaro); color: var(--colore-testo);
}
.uf-avviso > .uf-icona { margin-top: 2px; width: 22px; height: 22px; }
.uf-avviso p:last-child { margin-bottom: 0; }
.uf-avviso--info { border-left-color: var(--colore-grafite); }
.uf-avviso--ok { background: var(--colore-verde-velo); border-color: #b9dfc8; border-left-color: var(--colore-verde); }
.uf-avviso--ok > .uf-icona { color: var(--colore-verde); }
.uf-avviso--attenzione { background: var(--colore-arancio-velo); border-color: #f3cfb0; border-left-color: var(--colore-arancio); }
.uf-avviso--attenzione > .uf-icona { color: var(--colore-arancio); }
.uf-avviso--errore { background: var(--colore-rosso-velo); border-color: #f1c3be; border-left-color: var(--colore-rosso); }
.uf-avviso--errore > .uf-icona { color: var(--colore-rosso); }
.uf-avviso--promo { background: var(--colore-giallo-velo); border-color: var(--colore-giallo-bordo); border-left-color: var(--colore-giallo-bordo); }

/* tabelle */
.uf-tabella-scorre { overflow-x: auto; margin-bottom: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); }
.uf-tabella { width: 100%; border-collapse: collapse; font-size: var(--testo-s); background: var(--colore-carta); }
.uf-tabella th, .uf-tabella td { padding: var(--spazio-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--colore-bordo); }
.uf-tabella tr:last-child > * { border-bottom: 0; }
.uf-tabella thead th { background: var(--colore-fondo); font-weight: var(--peso-forte); white-space: nowrap; }
.uf-tabella tbody th { width: 38%; background: var(--colore-fondo-chiaro); font-weight: var(--peso-forte); color: var(--colore-testo-2); }
.uf-tabella .uf-numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uf-tabella code { white-space: nowrap; }

/* briciole: una riga; sul telefono scorre in orizzontale (come T16.2), mai su piu' righe */
.uf-briciole { margin: 0 0 var(--spazio-3); }
.uf-briciole ol { display: flex; align-items: center; list-style: none; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: var(--testo-s); }
.uf-briciole ol::-webkit-scrollbar { display: none; }
.uf-briciole li { display: inline-flex; align-items: center; flex: none; }
.uf-briciole li + li::before { content: ""; width: 7px; height: 7px; margin: 0 var(--spazio-3) 0 var(--spazio-2); border-top: 2px solid var(--colore-testo-3); border-right: 2px solid var(--colore-testo-3); transform: rotate(45deg); }
.uf-briciole a { display: inline-flex; align-items: center; min-height: var(--alto-comando); color: var(--colore-testo-2); }
.uf-briciole [aria-current="page"] { font-weight: var(--peso-forte); color: var(--colore-testo); }
@media (min-width: 768px) {
    .uf-briciole ol { flex-wrap: wrap; white-space: normal; overflow: visible; }
}

/* paginazione: quadrati da 44 px; la pagina corrente gialla */
.uf-paginazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spazio-2); list-style: none; margin: var(--spazio-5) 0; padding: 0; }
.uf-paginazione > li > a, .uf-paginazione > li > span {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-1); min-width: var(--alto-comando); min-height: var(--alto-comando); padding: 0 var(--spazio-3);
    border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); background: var(--colore-carta); color: var(--colore-testo); text-decoration: none; font-weight: var(--peso-forte);
}
.uf-paginazione > li > a:hover { background: var(--colore-giallo-velo); border-color: var(--colore-nero); }
.uf-paginazione > li > [aria-current="page"] { background: var(--colore-giallo); border-color: var(--colore-giallo-bordo); }
.uf-paginazione > li > .uf-paginazione__salto { border-color: transparent; background: transparent; min-width: 24px; padding: 0; }
.uf-paginazione > li > [aria-disabled="true"] { color: var(--colore-testo-3); border-color: var(--colore-bordo); background: var(--colore-fondo-chiaro); }
.uf-paginazione__parola { display: none; }
@media (min-width: 480px) {
    .uf-paginazione__parola { display: inline; }
}
.uf-paginazione-nota { text-align: center; color: var(--colore-testo-2); font-size: var(--testo-s); margin-top: calc(-1 * var(--spazio-3)); }

/* chip: scorciatoie e filtri attivi */
.uf-chip-elenco { display: flex; flex-wrap: wrap; gap: var(--spazio-2); list-style: none; margin: 0 0 var(--spazio-4); padding: 0; }
.uf-chip {
    display: inline-flex; align-items: center; gap: var(--spazio-2); min-height: var(--alto-comando); padding: 0 var(--spazio-3);
    border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-tondo); background: var(--colore-carta); color: var(--colore-testo);
    font-size: var(--testo-s); font-weight: var(--peso-medio); text-decoration: none;
}
.uf-chip small { color: var(--colore-testo-3); font-weight: var(--peso-normale); }
.uf-chip:hover { background: var(--colore-giallo-velo); border-color: var(--colore-nero); }
.uf-chip[aria-current="true"], .uf-chip[aria-pressed="true"] { background: var(--colore-nero); border-color: var(--colore-nero); color: var(--colore-testo-su-scuro); }
.uf-chip[aria-current="true"] small, .uf-chip[aria-pressed="true"] small { color: var(--colore-testo-su-scuro-2); }
.uf-chip--togli { background: var(--colore-giallo-velo); border-color: var(--colore-giallo-bordo); }
.uf-chip--togli .uf-icona { width: 16px; height: 16px; }

/* stelle delle recensioni */
.uf-stelle { display: inline-flex; gap: 1px; color: var(--colore-nero); }
.uf-stelle .uf-icona { width: 18px; height: 18px; }
.uf-stelle__vuota { color: var(--colore-bordo-campo); }


/* 8. SCHEDA PRODOTTO ======================================================== */
/* foto, codice, nome (2 righe fisse), marca, disponibilita', prezzo, quantita' + Aggiungi sempre nello stesso punto */
.uf-scheda {
    position: relative; display: flex; flex-direction: column; gap: var(--spazio-1); height: 100%; padding: var(--spazio-3);
    border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta);
    transition: border-color var(--durata), box-shadow var(--durata);
}
.uf-scheda:hover { border-color: var(--colore-bordo-campo); box-shadow: var(--ombra-2); }
/* T27.8: foto sempre intere, centrate, su fondo bianco. Riquadro quadrato e foto in posizione assoluta: con
   "height: 100%" dentro una griglia che prende l'altezza da aspect-ratio, Safari (iPhone) non risolve la percentuale,
   la foto prende l'altezza naturale e overflow:hidden la taglia (segnalazione del committente in produzione). */
.uf-scheda__foto {
    position: relative; display: block; aspect-ratio: 1 / 1; margin-bottom: var(--spazio-2);
    border-radius: var(--raggio-s); background: var(--colore-carta); overflow: hidden; text-decoration: none;
}
@supports not (aspect-ratio: 1 / 1) {
    .uf-scheda__foto::before { content: ""; display: block; padding-top: 100%; }   /* iOS < 15: quadrato col padding */
}
.uf-scheda__foto:hover { background: var(--colore-carta); }
.uf-scheda__foto img, .uf-scheda__foto .uf-segnaposto {
    position: absolute; top: var(--spazio-2); left: var(--spazio-2);
    width: calc(100% - 2 * var(--spazio-2)); height: calc(100% - 2 * var(--spazio-2));
    max-width: none; min-height: 0; margin: 0; object-fit: contain; object-position: center;
}
.uf-scheda__badge { position: absolute; top: var(--spazio-2); left: var(--spazio-2); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spazio-1); }
.uf-scheda__codice { font-size: var(--testo-s); color: var(--colore-testo-2); overflow-wrap: anywhere; }
.uf-scheda__nome { margin: 0; font-size: var(--testo-m); font-weight: var(--peso-forte); line-height: 1.35; min-height: calc(3 * 1.35em); }
.uf-scheda__nome a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-decoration: none; color: var(--colore-testo); }
.uf-scheda__nome a:hover { background: none; text-decoration: underline; }
.uf-scheda__nome a::after { content: ""; position: absolute; inset: 0; z-index: 0; }   /* tutta la scheda porta alla scheda articolo */
.uf-scheda__marca { margin: 0; font-size: var(--testo-s); font-weight: var(--peso-forte); color: var(--colore-testo-2); text-transform: uppercase; letter-spacing: .03em; }
.uf-scheda__piede { margin-top: auto; display: grid; gap: var(--spazio-2); padding-top: var(--spazio-2); }
.uf-scheda__acquisto { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.uf-scheda__acquisto .uf-btn { flex: 1 1 112px; gap: 6px; padding: 0 var(--spazio-2); }
.uf-scheda__acquisto .uf-qta { flex: 0 0 auto; }
.uf-scheda__acquisto .uf-qta__campo { width: 44px; }
.uf-scheda__varianti { position: relative; z-index: 1; display: grid; gap: var(--spazio-2); }
.uf-scheda__varianti p { margin: 0; font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-scheda__varianti .uf-btn { padding-left: var(--spazio-2); padding-right: var(--spazio-2); }
@media (min-width: 768px) {
    .uf-scheda__nome { min-height: calc(2 * 1.35em); }
    .uf-scheda__nome a { -webkit-line-clamp: 2; }
}
/* segnaposto quando la foto manca o non si carica */
.uf-segnaposto {
    display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px; border-radius: var(--raggio-s);
    background: repeating-linear-gradient(-45deg, var(--colore-fondo-chiaro) 0 10px, var(--colore-fondo) 10px 20px);
    color: var(--colore-testo-3); font-size: var(--testo-s); text-align: center; padding: var(--spazio-2);
}

/* tessera di categoria (home, sottocategorie) */
.uf-tessere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-3); list-style: none; margin: 0 0 var(--spazio-5); padding: 0; }
@media (min-width: 768px) {
    .uf-tessere { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spazio-4); }
}
.uf-tessera {
    display: flex; flex-direction: column; align-items: center; gap: var(--spazio-2); height: 100%; padding: var(--spazio-3);
    border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); text-align: center; text-decoration: none; color: var(--colore-testo);
}
.uf-tessera:hover { background: var(--colore-giallo-velo); border-color: var(--colore-giallo-bordo); }
.uf-tessera__foto { display: grid; place-items: center; width: 88px; height: 88px; }
.uf-tessera__foto img { max-width: 88px; max-height: 88px; object-fit: contain; }
.uf-tessera__nome { font-weight: var(--peso-forte); line-height: 1.3; overflow-wrap: anywhere; }
.uf-tessera__conta { font-size: var(--testo-s); color: var(--colore-testo-2); }


/* 9. TENDINA DELLA RICERCA (struttura di T16.2: sotto la casella, mai a tutto schermo) ===================== */
.uf-tendina {
    position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0;
    max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--spazio-2) var(--spazio-3) var(--spazio-3);
    background: var(--colore-carta); border: 1px solid var(--colore-bordo-campo); border-top: 4px solid var(--colore-giallo);
    border-radius: 0 0 var(--raggio-m) var(--raggio-m); box-shadow: var(--ombra-2); text-align: left;
}
.uf-tendina[hidden] { display: none; }
@media (min-width: 768px) {
    .uf-tendina { max-height: 70vh; left: auto; min-width: 100%; width: min(720px, calc(100vw - 2 * var(--spazio-5))); }
}
.uf-tendina--esempio { position: relative; top: auto; z-index: auto; max-height: none; width: auto; min-width: 0; }
.uf-tendina__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-2); margin-bottom: var(--spazio-2); }
.uf-tendina__conteggio { margin: 0; font-size: var(--testo-s); font-weight: var(--peso-titolo); text-transform: uppercase; letter-spacing: .03em; color: var(--colore-testo-2); }
.uf-tendina__forse { margin: 0 0 var(--spazio-2); padding: var(--spazio-2) var(--spazio-3); border-radius: var(--raggio-s); background: var(--colore-giallo-velo); font-size: var(--testo-s); }
.uf-tendina .uf-chip-elenco { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--spazio-2); }
.uf-tendina .uf-chip-elenco > li { flex: none; }
.uf-tendina .uf-chip { white-space: nowrap; }
@media (min-width: 768px) {
    .uf-tendina .uf-chip-elenco { flex-wrap: wrap; }
}
.uf-tendina__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio-2); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
    .uf-tendina__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.uf-mini {
    display: flex; gap: var(--spazio-3); height: 100%; padding: var(--spazio-2); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m);
    color: var(--colore-testo); text-decoration: none; background: var(--colore-carta);
}
.uf-mini:hover { border-color: var(--colore-nero); background: var(--colore-giallo-velo); }
.uf-mini:focus-visible { outline-offset: -3px; }
.uf-mini__foto { flex: none; display: grid; place-items: center; width: 64px; height: 64px; }
.uf-mini__foto img { max-width: 64px; max-height: 64px; object-fit: contain; }
.uf-mini__testo { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.uf-mini__codice { font-size: var(--testo-xs); color: var(--colore-testo-2); }
.uf-mini__nome { font-size: var(--testo-s); font-weight: var(--peso-forte); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.uf-mini__marca { font-size: var(--testo-xs); font-weight: var(--peso-forte); color: var(--colore-testo-2); text-transform: uppercase; }
.uf-mini__piede { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--spazio-1) var(--spazio-2); margin-top: auto; }
.uf-mini__piede .uf-disp { font-size: var(--testo-xs); }
.uf-mini__prezzo { font-weight: var(--peso-titolo); white-space: nowrap; }
.uf-mini__prezzo small { font-size: var(--testo-xs); font-weight: var(--peso-medio); color: var(--colore-testo-2); }
.uf-tendina__tutti { margin-top: var(--spazio-3); }


/* 10. PAGINE ================================================================= */
/* intestazione di pagina: titolo e conteggio */
.uf-intestazione { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spazio-1) var(--spazio-3); margin-bottom: var(--spazio-4); }
.uf-intestazione h1 { margin: 0; }
.uf-intestazione__conta { color: var(--colore-testo-2); font-weight: var(--peso-medio); }

/* barra sopra la griglia: risultati, ordinamento, bottone Filtri (sotto i 992 px) */
.uf-barra-elenco { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-3); margin-bottom: var(--spazio-4); padding: var(--spazio-2) 0; border-block: 1px solid var(--colore-bordo); }
.uf-barra-elenco p { margin: 0; font-weight: var(--peso-forte); }
.uf-ordina { display: flex; align-items: center; gap: var(--spazio-2); }
.uf-ordina .uf-select { width: auto; min-width: 180px; }
.uf-ordina--perpagina .uf-select { min-width: 150px; }
@media (max-width: 575.98px) {
    .uf-barra-elenco .uf-ordina { flex: 1 1 100%; justify-content: space-between; }
    .uf-barra-elenco .uf-ordina .uf-select { flex: 1; min-width: 0; }
}
.uf-js .uf-ordina__applica { display: none; }
.uf-apri-filtri { display: inline-flex; margin-right: auto; }
@media (min-width: 992px) {
    .uf-apri-filtri { display: none; }
}

/* filtri nella colonna sinistra */
.uf-filtri { border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-filtri__titolo { display: flex; align-items: center; gap: var(--spazio-2); margin: 0; padding: var(--spazio-3) var(--spazio-4); background: var(--colore-nero); color: var(--colore-testo-su-scuro); font-size: var(--testo-l); border-radius: 7px 7px 0 0; }
.uf-filtri__titolo .uf-icona { color: var(--colore-giallo); }
.uf-filtri fieldset { margin: 0; padding: var(--spazio-3) var(--spazio-4); border: 0; border-top: 1px solid var(--colore-bordo); min-width: 0; }
.uf-filtri fieldset:first-of-type { border-top: 0; }
.uf-filtri legend { float: left; width: 100%; padding: 0; margin-bottom: var(--spazio-1); font-weight: var(--peso-titolo); font-size: var(--testo-m); }
.uf-filtri legend + * { clear: left; }
.uf-filtri__voci { list-style: none; margin: 0; padding: 0; }
.uf-filtri__voci a { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-2); min-height: var(--alto-comando); padding: 0 var(--spazio-2); margin: 0 calc(-1 * var(--spazio-2)); border-radius: var(--raggio-s); text-decoration: none; font-size: var(--testo-s); }
.uf-filtri__voci a small { color: var(--colore-testo-3); }
.uf-filtri__voci a[aria-current="true"] { background: var(--colore-giallo); font-weight: var(--peso-forte); }
.uf-filtri .uf-spunta { font-size: var(--testo-s); }
.uf-filtri__altre summary { display: flex; align-items: center; min-height: var(--alto-comando); cursor: pointer; font-size: var(--testo-s); font-weight: var(--peso-forte); text-decoration: underline; text-underline-offset: 3px; }
.uf-filtri__azioni { display: grid; gap: var(--spazio-2); padding: var(--spazio-3) var(--spazio-4) var(--spazio-4); border-top: 1px solid var(--colore-bordo); }
@media (min-width: 992px) and (pointer: fine) {
    .uf-filtri__voci a, .uf-filtri .uf-spunta { min-height: 36px; }
}

/* viste delle novita' (per marchio / per categoria): due link con l'aspetto di un selettore */
.uf-viste { display: inline-flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--spazio-4); padding: 3px; border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); background: var(--colore-fondo-chiaro); }
.uf-viste a { display: inline-flex; align-items: center; gap: var(--spazio-2); min-height: var(--alto-comando); padding: 0 var(--spazio-4); border-radius: 6px; text-decoration: none; font-weight: var(--peso-forte); }
.uf-viste a[aria-current="page"] { background: var(--colore-nero); color: var(--colore-testo-su-scuro); }
.uf-viste a[aria-current="page"]:hover { background: var(--colore-grafite); }
.uf-gruppo { margin-bottom: var(--spazio-6); scroll-margin-top: var(--spazio-4); }
.uf-gruppo__titolo { display: flex; align-items: baseline; gap: var(--spazio-2); padding-bottom: var(--spazio-2); margin-bottom: var(--spazio-4); border-bottom: 2px solid var(--colore-nero); }
.uf-gruppo__titolo h2 { margin: 0; font-size: var(--testo-xl); }
.uf-gruppo__titolo span { color: var(--colore-testo-2); font-size: var(--testo-s); font-weight: var(--peso-forte); }

/* scheda articolo: foto a sinistra, acquisto a destra (sotto i 768 px uno sopra l'altro) */
.uf-articolo { display: grid; gap: var(--spazio-5); margin-bottom: var(--spazio-6); }
@media (min-width: 768px) {
    .uf-articolo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}
.uf-galleria { min-width: 0; }
/* T27.8: come .uf-scheda__foto, foto in posizione assoluta (Safari) e quadrato col padding dove manca aspect-ratio */
.uf-galleria__grande { position: relative; display: block; aspect-ratio: 1 / 1; border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
@supports not (aspect-ratio: 1 / 1) { .uf-galleria__grande::before { content: ""; display: block; padding-top: 100%; } }
.uf-galleria__grande img, .uf-galleria__grande .uf-segnaposto {
    position: absolute; top: var(--spazio-4); left: var(--spazio-4); width: calc(100% - 2 * var(--spazio-4)); height: calc(100% - 2 * var(--spazio-4));
    max-width: none; margin: 0; object-fit: contain; object-position: center;
}
.uf-galleria__badge { position: absolute; top: var(--spazio-3); left: var(--spazio-3); display: flex; gap: var(--spazio-1); }
.uf-galleria__miniature { display: flex; gap: var(--spazio-2); list-style: none; margin: var(--spazio-3) 0 0; padding: 0; }
.uf-galleria__miniature button { display: grid; place-items: center; width: 64px; height: 64px; padding: 4px; border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-s); background: var(--colore-carta); cursor: pointer; }
.uf-galleria__miniature button[aria-pressed="true"] { border: 2px solid var(--colore-nero); }
.uf-galleria__miniature img { max-width: 100%; max-height: 100%; object-fit: contain; }
.uf-acquisto { display: grid; gap: var(--spazio-3); }
.uf-acquisto h1 { margin: 0; font-size: var(--testo-2xl); overflow-wrap: anywhere; }
@media (min-width: 992px) {
    .uf-acquisto h1 { font-size: var(--testo-3xl); }
}
.uf-acquisto__marca { margin: 0; font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: .03em; color: var(--colore-testo-2); font-size: var(--testo-s); }
.uf-acquisto__dati { display: flex; flex-wrap: wrap; gap: var(--spazio-1) var(--spazio-4); margin: 0; font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-acquisto__dati dt { display: inline; font-weight: var(--peso-normale); }
.uf-acquisto__dati dd { display: inline; margin: 0 0 0 var(--spazio-1); font-weight: var(--peso-forte); color: var(--colore-testo); }
.uf-acquisto__dati a, .uf-fiducia a { display: inline-flex; align-items: center; min-height: var(--alto-comando); }
.uf-acquisto__riquadro { display: grid; gap: var(--spazio-3); padding: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-fondo-chiaro); }
.uf-acquisto__carrello { display: flex; flex-wrap: wrap; gap: var(--spazio-3); align-items: stretch; }
.uf-acquisto__carrello .uf-btn--primario { flex: 1 1 200px; }
.uf-fiducia { display: grid; gap: var(--spazio-3); list-style: none; margin: 0; padding: 0; font-size: var(--testo-s); }
.uf-fiducia li { display: flex; gap: var(--spazio-3); align-items: flex-start; }
.uf-fiducia .uf-icona { width: 24px; height: 24px; margin-top: 2px; color: var(--colore-nero); }
.uf-fiducia strong { display: block; font-size: var(--testo-m); }
@media (min-width: 480px) {
    .uf-fiducia { grid-template-columns: 1fr 1fr; }
}
.uf-schede-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--spazio-1); margin: 0 0 var(--spazio-5); padding: var(--spazio-1) 0; overflow-x: auto; scrollbar-width: none; background: var(--colore-carta); border-bottom: 2px solid var(--colore-nero); list-style: none; }
.uf-schede-nav a { display: inline-flex; align-items: center; flex: none; min-height: var(--alto-comando); padding: 0 var(--spazio-3); border-radius: var(--raggio-s); font-weight: var(--peso-forte); text-decoration: none; white-space: nowrap; }
.uf-schede-nav a:hover { background: var(--colore-giallo-velo); }
.uf-scheda-sezione { margin-bottom: var(--spazio-6); scroll-margin-top: 64px; }
.uf-scheda-sezione > h2 { padding-bottom: var(--spazio-2); border-bottom: 1px solid var(--colore-bordo); }
.uf-descrizione p { max-width: 75ch; }
.uf-elenco-puntato { list-style: none; margin: 0 0 var(--spazio-4); padding: 0; display: grid; gap: var(--spazio-1); }
.uf-elenco-puntato li { position: relative; min-width: 0; padding-left: var(--spazio-5); }
.uf-elenco-puntato li::before { content: ""; position: absolute; left: 6px; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--colore-giallo); box-shadow: inset 0 0 0 1px var(--colore-giallo-bordo); }
.uf-domanda { padding: var(--spazio-3) 0; border-bottom: 1px solid var(--colore-bordo); }
.uf-domanda__d { font-weight: var(--peso-forte); margin-bottom: var(--spazio-1); }
.uf-domanda__r { margin: 0; color: var(--colore-testo-2); }

/* recensioni */
.uf-recensioni { display: grid; gap: var(--spazio-4); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
    .uf-recensioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.uf-recensione { height: 100%; margin: 0; padding: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); display: flex; flex-direction: column; gap: var(--spazio-2); }
.uf-recensione blockquote { margin: 0; }
.uf-recensione blockquote p { margin: 0 0 var(--spazio-2); }
.uf-recensione figcaption { margin-top: auto; font-size: var(--testo-s); color: var(--colore-testo-2); }
/* home: recensioni in carosello (1 per vista sul telefono, 2 da 768 px, 3 da 1200 px) */
.uf-carosello--recensioni .uf-carosello__binario { grid-auto-columns: 100%; }
@media (min-width: 768px) {
    .uf-carosello--recensioni .uf-carosello__binario { grid-auto-columns: calc((100% - var(--spazio-4)) / 2); }
}
@media (min-width: 1200px) {
    .uf-carosello--recensioni .uf-carosello__binario { grid-auto-columns: calc((100% - 2 * var(--spazio-4)) / 3); }
}

/* home: apertura e numeri */
.uf-apertura { display: grid; gap: var(--spazio-4); margin-bottom: var(--spazio-6); }
.uf-apertura h1 { margin: 0; }
.uf-servizi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-2); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
    .uf-servizi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spazio-3); }
}
.uf-servizi li { display: flex; gap: var(--spazio-2); align-items: flex-start; padding: var(--spazio-3); border-radius: var(--raggio-m); background: var(--colore-giallo-velo); border: 1px solid var(--colore-giallo-bordo); font-size: var(--testo-s); line-height: 1.35; }
.uf-servizi .uf-icona { width: 24px; height: 24px; }
.uf-servizi strong { display: block; font-size: var(--testo-m); }
.uf-storia { display: grid; gap: var(--spazio-4); }
@media (min-width: 768px) {
    .uf-storia { grid-template-columns: 3fr 2fr; align-items: center; }
}
.uf-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spazio-2); margin: 0; }
.uf-cifra { padding: var(--spazio-3) var(--spazio-2); border-radius: var(--raggio-m); background: var(--colore-nero); color: var(--colore-testo-su-scuro-2); text-align: center; font-size: var(--testo-s); }
.uf-cifra dt { color: var(--colore-giallo); font-size: var(--testo-xl); font-weight: var(--peso-titolo); line-height: 1.2; }
.uf-cifra dd { margin: 0; }

/* carrello: passi dell'ordine, righe, riepilogo */
.uf-passi { display: flex; gap: var(--spazio-2); list-style: none; margin: 0 0 var(--spazio-5); padding: 0; counter-reset: passo; }
.uf-passi li { counter-increment: passo; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spazio-1); font-size: var(--testo-xs); font-weight: var(--peso-forte); color: var(--colore-testo-3); text-align: center; }
.uf-passi li::before { content: counter(passo); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--colore-bordo-campo); background: var(--colore-carta); color: var(--colore-testo-2); font-size: var(--testo-s); }
.uf-passi [aria-current="step"] { color: var(--colore-testo); }
.uf-passi [aria-current="step"]::before { background: var(--colore-giallo); border-color: var(--colore-nero); color: var(--colore-nero); }
@media (min-width: 768px) {
    .uf-passi li { flex-direction: row; justify-content: center; font-size: var(--testo-s); }
}
.uf-righe { width: 100%; border-collapse: collapse; margin-bottom: var(--spazio-4); }
.uf-righe thead { display: none; }
.uf-righe tr { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "foto articolo" "foto prezzo" "qta qta" "totale togli"; gap: var(--spazio-2) var(--spazio-3); padding: var(--spazio-3) 0; border-bottom: 1px solid var(--colore-bordo); }
.uf-righe td { padding: 0; }
.uf-righe__foto { grid-area: foto; }
.uf-righe__foto img, .uf-righe__foto .uf-segnaposto { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--colore-bordo); border-radius: var(--raggio-s); }
.uf-righe__articolo { grid-area: articolo; }
.uf-righe__articolo a { display: inline-flex; align-items: center; min-height: var(--alto-comando); font-weight: var(--peso-forte); text-decoration: none; overflow-wrap: anywhere; }
.uf-righe__articolo a:hover { text-decoration: underline; }
.uf-righe__articolo small { display: block; color: var(--colore-testo-2); }
.uf-righe__prezzo { grid-area: prezzo; font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-righe__qta { grid-area: qta; }
.uf-righe__totale { grid-area: totale; align-self: center; font-weight: var(--peso-titolo); font-size: var(--testo-l); }
.uf-righe__togli { grid-area: togli; justify-self: end; }
.uf-righe__etichetta { font-size: var(--testo-s); font-weight: var(--peso-normale); color: var(--colore-testo-2); margin-right: var(--spazio-1); }
@media (min-width: 480px) {
    .uf-righe tr { grid-template-columns: 72px auto auto minmax(0, 1fr); grid-template-areas: "foto articolo articolo articolo" "foto prezzo prezzo prezzo" "foto qta totale togli"; column-gap: var(--spazio-4); }
}
@media (min-width: 1200px) {   /* la tabella vera serve 760 px: sotto, ogni riga e' una scheda */
    .uf-righe thead { display: table-header-group; }
    .uf-righe tr { display: table-row; border-bottom: 1px solid var(--colore-bordo); }
    .uf-righe th { padding: var(--spazio-2) var(--spazio-3); background: var(--colore-fondo); text-align: left; font-size: var(--testo-s); }
    .uf-righe td { display: table-cell; padding: var(--spazio-3); vertical-align: middle; border-bottom: 1px solid var(--colore-bordo); }
    .uf-righe .uf-numero-cella { text-align: right; white-space: nowrap; }
    .uf-righe__etichetta { display: none; }
}
.uf-carrello-azioni { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spazio-3); margin-bottom: var(--spazio-5); }
.uf-riepilogo { margin-left: auto; max-width: 420px; padding: var(--spazio-4); border: 2px solid var(--colore-nero); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-riepilogo h2 { font-size: var(--testo-xl); }
.uf-riepilogo dl { display: grid; grid-template-columns: 1fr auto; gap: var(--spazio-2) 0; margin: 0 0 var(--spazio-4); }
.uf-riepilogo dt { color: var(--colore-testo-2); }
.uf-riepilogo dd { margin: 0; padding-left: var(--spazio-3); text-align: right; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.uf-riepilogo__totale { padding-top: var(--spazio-2); border-top: 2px solid var(--colore-nero); font-size: var(--testo-xl); font-weight: var(--peso-titolo); }
.uf-riepilogo dt.uf-riepilogo__totale { color: var(--colore-testo); }
.uf-riepilogo .uf-btn { margin-bottom: var(--spazio-2); }
.uf-pagamenti { display: flex; flex-wrap: wrap; gap: var(--spazio-2); list-style: none; margin: 0; padding: 0; }
.uf-pagamenti li { padding: 2px var(--spazio-2); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-s); font-size: var(--testo-xs); font-weight: var(--peso-forte); color: var(--colore-testo-2); background: var(--colore-carta); }

/* conferma "aggiunto al carrello" (avviso che compare in basso, annunciato agli screen reader) */
.uf-conferma {
    position: fixed; z-index: 80; left: var(--spazio-4); right: var(--spazio-4); bottom: var(--spazio-4);
    display: grid; gap: var(--spazio-2); padding: var(--spazio-4); border-radius: var(--raggio-m); background: var(--colore-nero); color: var(--colore-testo-su-scuro);
    box-shadow: var(--ombra-3);
}
.uf-conferma[hidden] { display: none; }
.uf-conferma__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.uf-conferma a { color: var(--colore-testo-su-scuro); }
@media (min-width: 768px) {
    .uf-conferma { left: auto; width: 380px; right: var(--spazio-5); }
}
.uf-conferma--esempio { position: static; width: auto; max-width: 380px; }


/* 11. PIEDE PAGINA =========================================================== */
.uf-piede { background: var(--colore-nero); color: var(--colore-testo-su-scuro-2); font-size: var(--testo-s); }
.uf-piede__colonne { display: grid; gap: var(--spazio-5); padding: var(--spazio-6) var(--spazio-4); }
@media (min-width: 480px) {
    .uf-piede__colonne { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
    .uf-piede__colonne { grid-template-columns: 1.3fr 1fr 1fr 1fr; padding: var(--spazio-6) var(--spazio-5); }
}
.uf-piede h2 { margin-bottom: var(--spazio-3); color: var(--colore-giallo); font-size: var(--testo-m); text-transform: uppercase; letter-spacing: .05em; }
.uf-piede p { margin-bottom: var(--spazio-2); }
.uf-piede ul { list-style: none; }
.uf-piede a { display: inline-flex; align-items: center; min-height: var(--alto-comando); color: var(--colore-testo-su-scuro); }
.uf-piede a:hover { background: none; color: var(--colore-giallo); }
.uf-piede .uf-pagamenti li { border-color: var(--colore-grafite); background: transparent; color: var(--colore-testo-su-scuro-2); }
.uf-piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spazio-2) var(--spazio-4); padding: var(--spazio-3) var(--spazio-4); border-top: 1px solid var(--colore-grafite); font-size: var(--testo-xs); }
@media (min-width: 768px) {
    .uf-piede__fondo { padding: var(--spazio-3) var(--spazio-5); }
}
@media (min-width: 992px) and (pointer: fine) {
    .uf-piede a { min-height: 32px; }
}


/* 12. MOVIMENTO RIDOTTO, STAMPA ============================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s; animation-duration: 0s; animation-iteration-count: 1; scroll-behavior: auto; }
}
@media print {
    body { background: #fff; }
    .uf-fascia, .uf-barra, .uf-colonna, .uf-velo, .uf-ricerca, .uf-azioni, .uf-piede, .uf-carosello__frecce, .uf-scheda__acquisto, .uf-schede-nav, .uf-salta { display: none; }
    .uf-corpo { display: block; padding: 0; }
    .uf-pagina { box-shadow: none; }
    a { text-decoration: none; }
}


/* 13. SITO REALE (T27) ======================================================
   Componenti che il sito vero ha in piu' dei bozzetti: attesa, invio della ricerca (asp:Button), mini-carrello e menu
   dell'account (<details>), pannello di accesso, avviso "Aggiunto al carrello" con i campi di AddToCart, banner,
   pagine di testo (chi siamo, contatti, condizioni), pagine d'errore, tendina della ricerca di T16.2 (Content/ricerca.css,
   qui solo ricolorata con i token). Stesse regole del resto del foglio: token, niente !important, @media chiuse. */

/* attesa durante l'invio (#wait, mostrata da jQuery con display: block): velo chiaro e cursore di attesa, una barra gialla in alto */
.uf-attesa { display: none; position: fixed; z-index: 120; inset: 0; background: rgba(255, 255, 255, .6); cursor: progress; border-top: 4px solid var(--colore-giallo); }

/* orari nella fascia: dal tablet */
.uf-fascia__orari { display: none; }
@media (min-width: 480px) {
    .uf-fascia__orari { display: inline; }
}

/* invio della ricerca: un asp:Button (input) con l'icona accanto, dentro lo stesso bordo nero */
.uf-ricerca__invio { position: relative; display: flex; }
.uf-ricerca__invio .uf-icona { position: absolute; left: var(--spazio-3); top: 50%; margin-top: -0.625em; color: var(--colore-nero); pointer-events: none; }
.uf-ricerca__invio .uf-ricerca__bottone { padding-left: calc(var(--spazio-3) + 1.25em + var(--spazio-2)); }

/* numero nel cerchio: vuoto = nascosto (AddToCart lo riempie senza ricaricare la pagina) */
.uf-conta:empty { display: none; }

/* mini-carrello e menu dell'account: <details> nella testata, pannello sotto l'icona */
.uf-tendina-menu { position: relative; }
details[data-menu-azione] > summary { list-style: none; cursor: pointer; }
details[data-menu-azione] > summary::-webkit-details-marker { display: none; }
details[data-menu-azione][open] > summary { background: var(--colore-giallo-velo); }
.uf-pannello-azione {
    position: absolute; z-index: 70; top: calc(100% + var(--spazio-1)); right: 0; width: min(340px, calc(100vw - 2 * var(--spazio-4)));
    padding: var(--spazio-3); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); box-shadow: var(--ombra-2);
    font-size: var(--testo-s);
}
.uf-pannello-azione__voci { list-style: none; }
.uf-pannello-azione__voci a { display: flex; align-items: center; gap: var(--spazio-2); min-height: var(--alto-comando); padding: 0 var(--spazio-2); border-radius: var(--raggio-s); text-decoration: none; font-weight: var(--peso-medio); }
.uf-pannello-azione__voci li + li { border-top: 1px solid var(--colore-bordo); }
.uf-minicarrello { margin: 0; }
.uf-minicarrello__pannello { width: min(360px, calc(100vw - 2 * var(--spazio-4))); }
.uf-minicarrello__titolo { margin-bottom: var(--spazio-2); font-weight: var(--peso-titolo); font-size: var(--testo-m); }
.uf-minicarrello__righe { list-style: none; max-height: 50vh; overflow-y: auto; margin-bottom: var(--spazio-3); }
.uf-minicarrello__righe > li:not(.divider):not(.uf-minicarrello__vuoto) { display: flex; gap: var(--spazio-3); align-items: center; padding: var(--spazio-2) 0; }
.uf-minicarrello__righe .divider { height: 0; border-top: 1px solid var(--colore-bordo); }
.uf-minicarrello__righe .imgCart { display: grid; place-items: center; width: 50px; height: 50px; }
.uf-minicarrello__righe .imgCart img { max-width: 50px; max-height: 50px; object-fit: contain; }
.uf-minicarrello__righe .media-body { min-width: 0; line-height: 1.35; }
.uf-minicarrello__righe .media-body a { display: inline-flex; align-items: center; min-height: var(--alto-comando); font-weight: var(--peso-forte); text-decoration: none; overflow-wrap: anywhere; }
.uf-minicarrello__righe .media-body a:hover { text-decoration: underline; }
.uf-minicarrello__righe .qtaCart { color: var(--colore-testo-2); font-size: var(--testo-xs); }
.uf-minicarrello__vuoto { padding: var(--spazio-2) 0; color: var(--colore-testo-3); }
.uf-minicarrello__vuoto:not(:only-child) { display: none; }
.uf-minicarrello__righe > li:only-child ~ * { display: none; }
.uf-minicarrello__azioni { display: flex; gap: var(--spazio-2); }
.uf-minicarrello__azioni .uf-btn--primario { flex: 1; }
.uf-minicarrello__conta:has(#lblRec:empty) { display: none; }

/* pannello di accesso: #accedi con :target (senza JavaScript), classe uf-aperta (sito-v2.js o dal server) */
.uf-accesso { display: none; }
.uf-accesso:target, .uf-accesso.uf-aperta { display: block; }
.uf-accesso .uf-accesso__velo { display: block; z-index: 90; }
.uf-accesso__finestra {
    position: fixed; z-index: 91; top: var(--spazio-4); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 2 * var(--spazio-4)));
    max-height: calc(100vh - 2 * var(--spazio-4)); overflow-y: auto; padding: var(--spazio-5); border-radius: var(--raggio-l); background: var(--colore-carta); box-shadow: var(--ombra-3);
}
@media (min-width: 768px) {
    .uf-accesso__finestra { top: 12vh; }
}
.uf-accesso__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spazio-3); }
.uf-accesso__testa h2 { margin: 0; }
.uf-accesso .uf-spunta { margin-bottom: var(--spazio-3); }
.uf-accesso__recupera { margin-top: var(--spazio-4); font-size: var(--testo-s); }
.uf-accesso__recupera > summary { display: flex; align-items: center; min-height: var(--alto-comando); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.uf-accesso__recupera[open] > summary { margin-bottom: var(--spazio-2); }
.uf-accesso__nuovo { margin: var(--spazio-4) 0 0; font-size: var(--testo-s); }
/* ValidateInputForm (my_script.js) segna i campi con le classi good_input / error_input */
.uf-input.error_input, .uf-ricerca__campo.error_input { border-color: var(--colore-rosso); box-shadow: inset 0 0 0 1px var(--colore-rosso); }

/* "Aggiunto al carrello": i campi che AddToCart riempie (foto, nome, prezzo, quantita', subtotale) */
.uf-conferma__riga { display: flex; gap: var(--spazio-3); align-items: flex-start; }
.uf-conferma__riga p { margin: 0 0 var(--spazio-1); }
.uf-conferma__titolo { color: var(--colore-giallo); }
.uf-conferma__foto { flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: var(--raggio-s); background: var(--colore-carta); }
.uf-conferma__nome { font-weight: var(--peso-forte); color: var(--colore-testo-su-scuro); }
.uf-conferma__dati { font-size: var(--testo-s); color: var(--colore-testo-su-scuro-2); }
.uf-conferma .uf-conferma__secondario { background: transparent; border-color: var(--colore-testo-su-scuro); color: var(--colore-testo-su-scuro); }
.uf-conferma .uf-conferma__secondario:hover { background: var(--colore-grafite); }
/* T27.7: stati dei pulsanti sul fondo nero dell'avviso, tutti con contrasto AA. Prima "Continua gli acquisti" al passaggio
   diventava bianco su giallo chiarissimo (invisibile) e "Procedi all'acquisto" aveva il testo bianco dei link dell'avviso */
.uf-conferma .uf-btn--primario, .uf-conferma .uf-btn--primario:hover, .uf-conferma .uf-btn--primario:active { color: var(--colore-nero); }
.uf-conferma .uf-conferma__secondario:active { background: var(--colore-grafite-scuro); }
.uf-scuro .uf-btn--testo:hover, .uf-scuro .uf-btn--testo:focus-visible { background: var(--colore-grafite); color: var(--colore-testo-su-scuro); }
.uf-scuro .uf-btn--testo:active { background: var(--colore-grafite-scuro); color: var(--colore-testo-su-scuro); }

/* banner dell'admin (colonna e home) */
.uf-banner { display: grid; gap: var(--spazio-3); }
.uf-banner a { display: block; border-radius: var(--raggio-m); overflow: hidden; }
.uf-banner a:hover { background: none; }
.uf-banner img { display: block; width: 100%; }
.uf-banner--centro { margin-bottom: var(--spazio-6); }

/* pagine di testo: chi siamo, contatti, condizioni di vendita, pagine d'errore */
.uf-pagina-testo { max-width: 76ch; overflow-wrap: anywhere; }
.uf-pagina-testo h2 { margin-top: var(--spazio-6); }
.uf-pagina-testo h3 { margin-top: var(--spazio-5); }
.uf-pagina-testo ul, .uf-pagina-testo ol { margin: 0 0 var(--spazio-3); padding-left: var(--spazio-5); }
.uf-pagina-testo li { margin-bottom: var(--spazio-1); }
.uf-pagina-testo .uf-torna-su { font-size: var(--testo-s); }
.uf-indice { list-style: none; margin: 0 0 var(--spazio-5); padding: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-fondo-chiaro); columns: 1; }
@media (min-width: 768px) {
    .uf-indice { columns: 2; column-gap: var(--spazio-6); }
}
.uf-pagina-testo .uf-indice { padding-left: var(--spazio-4); }
.uf-indice li { break-inside: avoid; }
.uf-indice a { display: inline-flex; align-items: center; min-height: var(--alto-comando); min-width: var(--alto-comando); }
.uf-foto-destra { float: none; display: block; margin: 0 0 var(--spazio-4); border-radius: var(--raggio-m); }
@media (min-width: 768px) {
    .uf-foto-destra { float: right; max-width: 40%; margin: 0 0 var(--spazio-4) var(--spazio-5); }
}
.uf-galleria-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-3); list-style: none; margin: 0 0 var(--spazio-5); padding: 0; clear: both; }
@media (min-width: 768px) {
    .uf-galleria-foto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.uf-galleria-foto a { display: block; border-radius: var(--raggio-m); overflow: hidden; border: 1px solid var(--colore-bordo); }
.uf-galleria-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* T29: pagine di contenuto modificabili dall'admin (Chi siamo): galleria con didascalie, citazioni, tabelle, immagini */
.uf-pagina-testo .uf-galleria-foto { padding-left: 0; }
.uf-galleria-foto li { margin: 0; }
.uf-galleria-foto figure { margin: 0; }
.uf-galleria-foto figcaption { margin-top: var(--spazio-1); font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-contenuto-pagina img { border-radius: var(--raggio-m); }
.uf-contenuto-pagina blockquote { margin: 0 0 var(--spazio-4); padding: var(--spazio-2) var(--spazio-4); border-left: 4px solid var(--colore-giallo); background: var(--colore-fondo-chiaro); }
.uf-contenuto-pagina table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--spazio-4); }
.uf-contenuto-pagina th, .uf-contenuto-pagina td { border: 1px solid var(--colore-bordo); padding: var(--spazio-1) var(--spazio-2); text-align: left; vertical-align: top; }
.uf-recapiti { display: grid; gap: var(--spazio-5); margin-bottom: var(--spazio-6); }
@media (min-width: 992px) {
    .uf-recapiti { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.uf-mappa { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--raggio-m); background: var(--colore-fondo); }
.uf-dati { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--spazio-2) var(--spazio-4); margin: 0 0 var(--spazio-4); }
.uf-dati dt { font-weight: var(--peso-forte); color: var(--colore-testo-2); }
.uf-dati dd { margin: 0; overflow-wrap: anywhere; }
.uf-dati dd a { display: inline-flex; align-items: center; min-height: var(--alto-comando); }
.uf-dati dt, .uf-dati dd { align-self: center; }
.uf-persone { display: grid; gap: var(--spazio-3); list-style: none; margin: 0; padding: 0; }
.uf-persona { display: flex; gap: var(--spazio-3); align-items: center; padding: var(--spazio-3); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); }
.uf-persona img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 50%; background: var(--colore-fondo); }
.uf-persona p { margin: 0; }
.uf-persona__ruolo { font-size: var(--testo-s); color: var(--colore-testo-2); }

/* pagine d'errore (page_not_found, errore): senza master, stessa testata ridotta */
.uf-errore-pagina { padding: var(--spazio-7) var(--spazio-4); text-align: center; }
.uf-errore-pagina h1 { margin-bottom: var(--spazio-4); }
.uf-errore-pagina .uf-introduzione { margin: 0 auto var(--spazio-5); }
.uf-errore-pagina__ricerca { max-width: 560px; margin: 0 auto var(--spazio-5); text-align: left; }
.uf-errore-pagina__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spazio-3); }
.uf-testata--ridotta .uf-testata__dentro { grid-template-columns: auto; grid-template-areas: "marchio"; }

/* tendina della ricerca di T16.2 (Content/ricerca.css, Scripts/ricerca.js): stessa struttura e gesti, colori v2.
   ricerca.css usa le variabili di custom.css (con valori di riserva): qui le stesse variabili prendono i token v2 */
.rc-tendina {
    --bg-white: var(--colore-carta); --text-primary: var(--colore-testo); --text-secondary: var(--colore-testo-2); --text-muted: var(--colore-testo-3);
    --text-light: var(--colore-bordo-campo); --border-medium: var(--colore-bordo-campo); --border-light: var(--colore-bordo);
    --orange-primary: var(--colore-giallo); --orange-dark: var(--colore-giallo-scuro); --orange-bg: var(--colore-giallo-velo); --orange-light: var(--colore-giallo-bordo);
    --blue-primary: var(--colore-nero); --blue-dark: var(--colore-nero); --blue-bg: var(--colore-giallo-velo); --green-primary: var(--colore-verde);
    --radius-md: var(--raggio-m); --radius-sm: var(--raggio-s); --shadow-lg: var(--ombra-2);
    border-top-color: var(--colore-nero); font-family: var(--carattere);
}
.rc-tendina .rc-t-chiudi { width: var(--alto-comando); height: var(--alto-comando); color: var(--colore-nero); }
.rc-tendina .rc-t-chiudi::before { content: "\00d7"; font-size: 28px; line-height: 1; }
.rc-tendina .rc-chip .fa { display: none; }
.rc-tendina .rc-chip a { min-height: var(--alto-comando); border-color: var(--colore-bordo-campo); }
.rc-tendina .rc-marca { text-transform: uppercase; letter-spacing: .03em; color: var(--colore-testo-2); }
.rc-tendina .rc-disp.ok { color: var(--colore-verde); font-weight: var(--peso-forte); }
.rc-tendina .rc-t-tutti, .rc-tendina .rc-t-tutti:hover, .rc-tendina .rc-t-tutti:focus-visible { color: var(--colore-nero); border: 1px solid var(--colore-giallo-bordo); min-height: var(--alto-comando); }

/* T27.2: filtri delle pagine elenco come link (GET, niente moduli annidati nel form della pagina WebForms) */
.uf-filtri__blocco { padding: var(--spazio-3) var(--spazio-4); border-top: 1px solid var(--colore-bordo); }
.uf-filtri__titolo + .uf-filtri__blocco { border-top: 0; }
.uf-filtri__gruppo { margin: 0 0 var(--spazio-1); font-size: var(--testo-m); }
.uf-filtri .uf-filtri__azioni { display: block; margin: 0; padding: var(--spazio-2) var(--spazio-4) var(--spazio-3); }
/* ordinamento: con JavaScript la tendina porta all'indirizzo scelto; senza, l'elenco di link */
.uf-ordina__link { display: flex; flex-wrap: wrap; gap: var(--spazio-1) var(--spazio-3); list-style: none; margin: 0; padding: 0; font-size: var(--testo-s); }
.uf-ordina__link a { display: inline-flex; align-items: center; min-height: var(--alto-comando); }
.uf-ordina__link a[aria-current="true"] { font-weight: var(--peso-titolo); }
.uf-ordina [data-vai] { display: none; }
.uf-js .uf-ordina [data-vai] { display: block; }

/* T27.3: scheda articolo del sito vero (articolo.aspx). Stessi controlli di prima (ID e handler), aspetto del bozzetto. */
/* galleria: miniature come link alla foto grande (senza JavaScript la aprono), lente al passaggio del mouse (sito-v2.js) */
.uf-galleria__grande img { display: block; }
.uf-galleria__grande img[hidden] { display: none; }
.uf-galleria__lente { display: none; position: absolute; inset: 0; z-index: 1; border-radius: var(--raggio-m); background-color: var(--colore-carta); background-repeat: no-repeat; }
.uf-galleria__grande--lente { cursor: crosshair; }
.uf-galleria__grande--lente .uf-galleria__lente { display: block; }
.uf-galleria__badge { z-index: 2; }
.uf-galleria__miniature a { display: grid; place-items: center; width: 64px; height: 64px; padding: 4px; border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-s); background: var(--colore-carta); }
.uf-galleria__miniature a:hover { border-color: var(--colore-nero); background: var(--colore-carta); }
.uf-galleria__miniature a[aria-current="true"] { border: 2px solid var(--colore-nero); }

/* riquadro di acquisto: prezzo, disponibilita', varianti, misure del taglio, quantita' e bottoni */
.uf-acquisto__dati { align-items: center; }
.uf-acquisto__dati dd { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--spazio-3); }
.uf-acquisto__dati a { min-width: var(--alto-comando); }
.uf-acquisto__carrello .uf-btn--primario { white-space: nowrap; }
.uf-acquisto__dati .uf-stelle { vertical-align: -3px; }
.uf-acquisto__prezzo, .uf-acquisto__zona { display: grid; gap: var(--spazio-3); }
.uf-acquisto__disp { margin: 0; font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-acquisto__variante { margin: 0; }
.uf-acquisto__riquadro > .uf-avviso { margin: 0; }
.uf-acquisto__qta { display: grid; gap: var(--spazio-1); }
.uf-acquisto__carrello { align-items: flex-end; }
.uf-acquisto__zona > .uf-btn--secondario { justify-self: start; }
.uf-qta-calcolata { display: inline-flex; align-items: center; gap: var(--spazio-2); }
.uf-qta-calcolata .uf-input { width: 128px; font-weight: var(--peso-forte); text-align: center; }
.uf-qta-calcolata .uf-qta__unita { padding: 0; }
.uf-input[readonly] { background: var(--colore-fondo-chiaro); border-color: var(--colore-bordo); }
.uf-qta:has(.error_input) { border-color: var(--colore-rosso); border-width: 2px; }
.uf-misure fieldset { margin: 0; padding: var(--spazio-3) var(--spazio-4) var(--spazio-4); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); background: var(--colore-carta); min-width: 0; }
.uf-misure legend { padding: 0 var(--spazio-1); font-weight: var(--peso-titolo); }
.uf-misure .uf-aiuto { margin: 0 0 var(--spazio-3); }
.uf-misure__campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0 var(--spazio-3); }
.uf-misure__campi .uf-campo { margin-bottom: var(--spazio-3); }

/* sezioni: descrizione (in minuscolo solo se il testo e' quasi tutto maiuscolo, come la scheda di prima), allegati, garanzia */
.uf-descrizione__testo { max-width: 75ch; overflow-wrap: anywhere; }
.uf-descrizione__testo--maiuscolo { text-transform: lowercase; }
.uf-descrizione__testo--maiuscolo::first-letter { text-transform: uppercase; }
.uf-allegati { margin-bottom: var(--spazio-4); padding: var(--spazio-3) var(--spazio-4); border: 1px solid var(--colore-bordo); border-left: 4px solid var(--colore-giallo-bordo); border-radius: var(--raggio-m); background: var(--colore-giallo-velo); }
.uf-allegati h3 { margin-bottom: var(--spazio-1); font-size: var(--testo-m); }
.uf-allegati__elenco { list-style: none; }
.uf-allegati__elenco a { display: inline-flex; align-items: center; gap: var(--spazio-2); min-height: var(--alto-comando); font-weight: var(--peso-forte); }
.uf-garanzia { margin-top: var(--spazio-4); font-size: var(--testo-s); }
.uf-garanzia > summary { display: flex; align-items: center; min-height: var(--alto-comando); cursor: pointer; font-weight: var(--peso-forte); text-decoration: underline; text-underline-offset: 3px; }
.uf-garanzia[open] > summary { margin-bottom: var(--spazio-2); }

/* domande e risposte */
.uf-domanda__d .uf-icona { margin-right: var(--spazio-1); }
.uf-domanda__d .uf-icona, .uf-domanda__d .uf-btn { vertical-align: middle; }
.uf-domanda__d .uf-icona { color: var(--colore-testo-2); }
.uf-domande { margin-bottom: var(--spazio-2); }
.uf-domanda .uf-btn--testo { font-size: var(--testo-s); }
.uf-domanda-nuova { margin-top: var(--spazio-5); padding: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-fondo-chiaro); }
.uf-domanda-nuova h3 { font-size: var(--testo-l); }
.uf-captcha { display: inline-block; height: 20px; width: auto; vertical-align: middle; background: var(--colore-carta); border-radius: var(--raggio-s); }
.uf-input--corto { max-width: 140px; }
@media (max-width: 479px) {
    .uf-domanda-nuova .uf-campo-fila { grid-template-columns: 1fr; }
}

/* recensioni: media con le stelle, distribuzione per stelle (le barre le scrive il code-behind con la larghezza), schede */
.uf-recensioni-testa { display: grid; gap: var(--spazio-4); margin-bottom: var(--spazio-5); padding-bottom: var(--spazio-4); border-bottom: 1px solid var(--colore-bordo); }
@media (min-width: 768px) {
    .uf-recensioni-testa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.uf-recensioni-media p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-1) var(--spazio-2); }
.uf-distribuzione { border-collapse: collapse; font-size: var(--testo-s); }
.uf-distribuzione th { padding: 2px var(--spazio-3) 2px 0; text-align: left; font-weight: var(--peso-normale); white-space: nowrap; color: var(--colore-testo-2); }
.uf-distribuzione td { width: 100%; padding: 2px 3em 2px 0; }
.uf-distribuzione__barra { position: relative; width: min(220px, 100%); height: 10px; border-radius: var(--raggio-tondo); background: var(--colore-fondo); box-shadow: inset 0 0 0 1px var(--colore-bordo); }
.uf-distribuzione__pieno { height: 100%; border-radius: var(--raggio-tondo); background: var(--colore-giallo); box-shadow: inset 0 0 0 1px var(--colore-giallo-bordo); }
.uf-distribuzione__pieno span { position: absolute; left: calc(100% + var(--spazio-2)); top: 50%; transform: translateY(-50%); font-weight: var(--peso-forte); color: var(--colore-testo); }
.uf-recensioni-scrivi p { margin-bottom: var(--spazio-2); }
.uf-recensione__utili { display: block; }
.uf-recensione__utile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); font-size: var(--testo-s); color: var(--colore-testo-2); }

/* paginazione dei DataPager (domande, recensioni, correlati): numeri da 44 px, la pagina corrente gialla */
.uf-pager > span { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spazio-2); margin: var(--spazio-4) 0; }
.uf-pager__numero, .uf-pager__corrente { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alto-comando); min-height: var(--alto-comando); padding: 0 var(--spazio-3); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); background: var(--colore-carta); color: var(--colore-testo); font-weight: var(--peso-forte); text-decoration: none; }
.uf-pager__numero:hover { background: var(--colore-giallo-velo); border-color: var(--colore-nero); }
.uf-pager__corrente { background: var(--colore-giallo); border-color: var(--colore-giallo-bordo); }

/* finestre (risposta a una domanda, tutte le risposte): velo scuro, finestra bianca; [hidden] le chiude */
.uf-finestra { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-start; justify-content: center; padding: var(--spazio-4); overflow-y: auto; background: rgba(26, 26, 26, .55); }
.uf-finestra[hidden] { display: none; }
.uf-finestra__dentro { width: min(560px, 100%); margin-top: 8vh; padding: var(--spazio-5); border-radius: var(--raggio-l); background: var(--colore-carta); box-shadow: var(--ombra-3); }
.uf-finestra__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-3); margin-bottom: var(--spazio-3); }
.uf-finestra__testa h2 { margin: 0; font-size: var(--testo-xl); }
.uf-finestra__domanda { font-weight: var(--peso-forte); }
.uf-finestra__elenco { max-height: 50vh; overflow-y: auto; margin-bottom: var(--spazio-4); }
.uf-risposta { padding: var(--spazio-3) 0; border-bottom: 1px solid var(--colore-bordo); }
.uf-risposta p { margin-bottom: var(--spazio-1); }
body.uf-finestra-aperta { overflow: hidden; }

/* articolo non trovato */
.uf-articolo-assente h1 { margin-bottom: var(--spazio-2); font-size: var(--testo-2xl); }

/* T27.5: area cliente (registrazione, profilo e ordini, lista desideri, recensioni, password). Stessi controlli di prima. */
/* moduli: due colonne di riquadri da 992 px; etichette collegate ai campi; asterisco dei campi obbligatori */
.uf-obbligatorio { color: var(--colore-rosso); font-weight: var(--peso-titolo); text-decoration: none; cursor: help; }
.uf-modulo { display: grid; gap: var(--spazio-5); align-items: start; margin-bottom: var(--spazio-6); }
@media (min-width: 992px) {
    .uf-modulo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.uf-modulo__colonna { display: grid; gap: var(--spazio-5); align-content: start; min-width: 0; }
.uf-riquadro-modulo { min-width: 0; padding: var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-riquadro-modulo h2 { font-size: var(--testo-l); }
.uf-riquadro-modulo > .uf-campo:last-child, .uf-riquadro-modulo .uf-spunta:last-child { margin-bottom: 0; }
.uf-dati--modulo > div { display: contents; }
.uf-dati--modulo dd:empty::after { content: "—"; color: var(--colore-testo-3); }
.uf-apribile > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spazio-2); min-height: var(--alto-comando); cursor: pointer; list-style: none; }
.uf-apribile > summary::-webkit-details-marker { display: none; }
.uf-apribile > summary::before { content: ""; align-self: center; width: 8px; height: 8px; margin-right: var(--spazio-1); border-right: 2px solid var(--colore-nero); border-bottom: 2px solid var(--colore-nero); transform: rotate(-45deg); transition: transform var(--durata); }
.uf-apribile[open] > summary::before { transform: rotate(45deg); }
.uf-apribile > summary h2 { display: inline; margin: 0; }
.uf-apribile[open] > summary { margin-bottom: var(--spazio-3); }
.uf-azioni-modulo { display: flex; flex-wrap: wrap; gap: var(--spazio-3); }
.uf-campo--in-linea { grid-template-columns: auto minmax(0, 240px); align-items: center; gap: var(--spazio-3); }
.uf-modulo-breve { max-width: 560px; }
.uf-registrazione-intro { max-width: 76ch; margin-bottom: var(--spazio-5); }
/* suggerimenti di comune e CAP del Toolkit (AutoCompleteExtender): solo i colori e le misure, il comportamento e' quello di prima */
.autocomplete_completionListElement { z-index: 80; margin: 0; padding: var(--spazio-1); list-style: none; max-height: 260px; overflow-y: auto; background: var(--colore-carta); color: var(--colore-testo); border: 1px solid var(--colore-bordo-campo); border-top: 3px solid var(--colore-giallo); border-radius: 0 0 var(--raggio-m) var(--raggio-m); box-shadow: var(--ombra-2); font-family: var(--carattere); font-size: var(--testo-s); cursor: pointer; }
.autocomplete_listItem, .autocomplete_highlightedListItem { padding: var(--spazio-2) var(--spazio-3); border-radius: var(--raggio-s); }
.autocomplete_listItem { background: var(--colore-carta); color: var(--colore-testo); }
.autocomplete_highlightedListItem, .autocomplete_listItem:hover { background: var(--colore-giallo-velo); color: var(--colore-nero); }

/* profilo e ordini: schede Profilo / Ordini (LinkButton: quella attiva e' disabilitata), elenco degli ordini, dettaglio */
.uf-viste .uf-vista { display: inline-flex; align-items: center; min-height: var(--alto-comando); padding: 0 var(--spazio-4); border-radius: 6px; text-decoration: none; font-weight: var(--peso-forte); color: var(--colore-testo); }
.uf-viste .uf-vista--attiva { background: var(--colore-nero); color: var(--colore-testo-su-scuro); }
.uf-ordini { margin-bottom: var(--spazio-6); }
.uf-tabella--ordini td a { display: inline-flex; align-items: center; min-height: var(--alto-comando); font-weight: var(--peso-forte); }
/* jquery.dataTables (cerca, quante righe, pagine): righe generate dal plugin, qui solo impaginazione e colori del foglio */
.uf-ordini .dataTables_wrapper { margin-bottom: var(--spazio-4); }
.uf-ordini .dataTables_wrapper .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--spazio-2) var(--spazio-4); margin: var(--spazio-2) 0; }
.uf-ordini .dataTables_wrapper label { display: inline-flex; align-items: center; gap: var(--spazio-2); font-size: var(--testo-s); }
.uf-ordini .dataTables_wrapper input, .uf-ordini .dataTables_wrapper select { min-height: var(--alto-comando); padding: 0 var(--spazio-2); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); font: inherit; background: var(--colore-carta); }
.uf-ordini .dataTables_info { font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-ordini .pagination { display: flex; flex-wrap: wrap; gap: var(--spazio-1); list-style: none; margin: 0; padding: 0; }
.uf-ordini .pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alto-comando); min-height: var(--alto-comando); padding: 0 var(--spazio-2); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-m); text-decoration: none; font-weight: var(--peso-forte); font-size: var(--testo-s); }
.uf-ordini .pagination .active a { background: var(--colore-giallo); border-color: var(--colore-giallo-bordo); }
.uf-ordini .pagination .disabled a { color: var(--colore-testo-3); border-color: var(--colore-bordo); }
.uf-ordini .sorting, .uf-ordini .sorting_asc, .uf-ordini .sorting_desc { cursor: pointer; }
.uf-ordini .sorting_asc::after { content: " ▲"; font-size: var(--testo-xs); }
.uf-ordini .sorting_desc::after { content: " ▼"; font-size: var(--testo-xs); }
.uf-finestra__dentro--largo { width: min(860px, 100%); }
.uf-dettaglio-ordine { display: grid; gap: var(--spazio-4); margin-bottom: var(--spazio-4); }
@media (min-width: 768px) {
    .uf-dettaglio-ordine { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.uf-dettaglio-ordine__negozio { font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-finestra h3 { font-size: var(--testo-m); margin-top: var(--spazio-4); }
.uf-riepilogo-ordine { display: grid; grid-template-columns: 1fr auto; gap: var(--spazio-1) var(--spazio-4); max-width: 420px; margin: 0 0 0 auto; }
.uf-riepilogo-ordine dt { color: var(--colore-testo-2); }
.uf-riepilogo-ordine dd { margin: 0; text-align: right; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.uf-riepilogo-ordine .uf-riepilogo-ordine__totale { padding-top: var(--spazio-2); border-top: 2px solid var(--colore-nero); font-size: var(--testo-l); font-weight: var(--peso-titolo); color: var(--colore-testo); }
.uf-finestra .uf-btn--primario + .uf-dettaglio-ordine { margin-top: var(--spazio-3); }

/* lista desideri: righe come il carrello, totale, azioni */
.uf-righe__foto a { display: block; }
.uf-righe__foto a:hover { background: none; }
.uf-input--qta { width: 88px; text-align: center; }
.uf-carrello-azioni__destra { display: inline-flex; flex-wrap: wrap; gap: var(--spazio-2); }
.uf-desideri-totale { text-align: right; font-size: var(--testo-l); font-weight: var(--peso-titolo); }

/* recensioni del cliente: articolo con la foto, voto con 5 stelle (radio), elenco degli acquisti */
.uf-recensione-modulo { display: grid; gap: var(--spazio-5); margin-bottom: var(--spazio-6); }
@media (min-width: 768px) {
    .uf-recensione-modulo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}
.uf-recensione-modulo__foto { position: relative; display: block; aspect-ratio: 1 / 1; border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
@supports not (aspect-ratio: 1 / 1) { .uf-recensione-modulo__foto::before { content: ""; display: block; padding-top: 100%; } }
.uf-recensione-modulo__foto img, .uf-recensione-modulo__foto .uf-segnaposto {
    position: absolute; top: var(--spazio-3); left: var(--spazio-3); width: calc(100% - 2 * var(--spazio-3)); height: calc(100% - 2 * var(--spazio-3));
    max-width: none; margin: 0; object-fit: contain; object-position: center;
}
.uf-recensione-modulo__articolo { font-size: var(--testo-l); overflow-wrap: anywhere; }
.uf-voto { margin: 0 0 var(--spazio-4); padding: 0; border: 0; min-width: 0; }
.uf-voto legend { padding: 0; margin-bottom: var(--spazio-1); font-size: var(--testo-s); font-weight: var(--peso-forte); }
.uf-voto__stelle { display: inline-flex; gap: 2px; }
.uf-voto__stelle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.uf-voto__stelle label { position: relative; display: grid; place-items: center; width: var(--alto-comando); height: var(--alto-comando); border-radius: var(--raggio-s); color: var(--colore-bordo-campo); cursor: pointer; }
.uf-voto__stelle label .uf-icona { width: 30px; height: 30px; }
.uf-voto__stelle label:hover { background: var(--colore-giallo-velo); }
.uf-voto__stelle label:has(input:focus-visible) { outline: 3px solid var(--colore-fuoco); outline-offset: 2px; }
.uf-voto__stelle .uf-voto__piena { color: var(--colore-nero); }
.uf-voto__giudizio { margin-left: var(--spazio-2); font-weight: var(--peso-forte); }
.uf-menu-filtro { position: relative; }
.uf-menu-filtro > summary { list-style: none; }
.uf-menu-filtro > summary::-webkit-details-marker { display: none; }
.uf-menu-filtro__scelta { margin-left: var(--spazio-1); text-decoration: none; color: inherit; }
.uf-menu-filtro .uf-pannello-azione { list-style: none; left: 0; right: auto; width: min(260px, calc(100vw - 2 * var(--spazio-4))); }
@media (min-width: 768px) {
    .uf-menu-filtro .uf-pannello-azione { left: auto; right: 0; }
}
.uf-acquistati { display: grid; gap: var(--spazio-3); list-style: none; margin: 0 0 var(--spazio-4); padding: 0; }
.uf-acquistato { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--spazio-2) var(--spazio-3); padding: var(--spazio-3); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-acquistato--scelto { border: 2px solid var(--colore-nero); background: var(--colore-giallo-velo); }
.uf-acquistato__foto { display: grid; place-items: center; width: 72px; height: 72px; }
.uf-acquistato__foto img { max-width: 72px; max-height: 72px; object-fit: contain; }
.uf-acquistato__testo h3 { margin-bottom: var(--spazio-1); font-size: var(--testo-m); overflow-wrap: anywhere; }
.uf-acquistato__testo p { margin-bottom: var(--spazio-1); font-size: var(--testo-s); overflow-wrap: anywhere; }
.uf-acquistato__azioni { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--spazio-2) var(--spazio-3); }
@media (min-width: 768px) {
    .uf-acquistato { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; }
    .uf-acquistato__azioni { grid-column: auto; }
}

/* recensioni dei clienti (feedback.aspx): schede in due colonne con foto e stelle */
@media (min-width: 768px) {
    .uf-recensioni--elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.uf-recensione__testa { display: flex; align-items: center; gap: var(--spazio-3); }
.uf-recensione__foto { flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: var(--raggio-s); }
.uf-recensione__testo { overflow-wrap: anywhere; }
.uf-recensione a.aspNetDisabled { text-decoration: none; color: inherit; }

/* elementi nascosti con l'attributo hidden che hanno una classe con display (my_script.js e i pagamenti li mostrano con style.display) */
.uf-avviso[hidden], .uf-errore[hidden] { display: none; }

/* T27.5: link e comandi piccoli dell'area cliente portati a 44 px; menu dell'account sul telefono dentro lo schermo */
.uf-elenco-puntato a, .uf-recensione-modulo__articolo a, .uf-recensione__testa a, .uf-recensione figcaption a, .uf-acquistato__testo h3 a, .uf-acquistato__azioni a { display: inline-flex; align-items: center; min-height: var(--alto-comando); }
/* il pannello del menu dell'account si allinea al bordo destro della testata (dopo Desideri e Carrello), non all'icona */
.uf-menu-account .uf-pannello-azione { right: calc(-2 * (var(--alto-comando) + var(--spazio-1))); }
@media (min-width: 768px) {
    .uf-menu-account .uf-pannello-azione { right: 0; }
}/* una tabella che scorre trattiene anche i testi .uf-nascosto (position: absolute) delle sue celle: senza, sul telefono allargavano la pagina */
.uf-tabella-scorre { position: relative; }

/* T27.4: carrello (bozzetto _design\v2\carrello.aspx; quantita', importi e regole restano nel code-behind e in Carrello) */
.uf-righe--carrello .uf-righe__articolo .uf-disp, .uf-righe__misure { display: flex; margin-top: var(--spazio-1); }
.uf-righe__misure { font-size: var(--testo-s); color: var(--colore-testo-2); }
.uf-righe__foto a, .uf-righe__foto img { display: block; }
.uf-righe__foto img[hidden] { display: none; }   /* foto mancante: sito-v2.js mette il segnaposto e nasconde l'immagine */
.uf-righe__foto a.aspNetDisabled { pointer-events: none; }
.uf-righe__articolo a.aspNetDisabled { color: var(--colore-testo-2); text-decoration: none; }
.uf-righe--carrello .uf-qta__campo { width: 72px; }
.uf-righe--carrello .uf-righe__totale { white-space: nowrap; }
@media (max-width: 479.98px) {   /* telefono: il totale della riga prende la larghezza della foto e del nome */
    .uf-righe--carrello tr { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "foto articolo articolo" "foto prezzo prezzo" "qta qta qta" "totale totale togli"; }
}
.uf-righe--carrello .uf-qta-calcolata .uf-input { width: 96px; }
.uf-righe--carrello .uf-righe__togli .uf-btn { min-height: var(--alto-comando); }
.uf-carrello-azioni__destra { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.uf-riepilogo--carrello { margin-bottom: var(--spazio-6); }
.uf-riepilogo--carrello .uf-nota { margin-bottom: var(--spazio-3); }
.uf-riepilogo--carrello .uf-riepilogo__opzioni { display: block; font-size: var(--testo-xs); color: var(--colore-testo-3); }
.uf-riepilogo__mancano { margin: 0 0 var(--spazio-3); padding: var(--spazio-2) var(--spazio-3); border-radius: var(--raggio-s); background: var(--colore-giallo-velo); font-size: var(--testo-s); }
.uf-carrello-vuoto { display: grid; justify-items: center; gap: var(--spazio-2); margin: var(--spazio-5) 0 var(--spazio-6); padding: var(--spazio-6) var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); text-align: center; }
.uf-carrello-vuoto p { margin: 0; }
.uf-carrello-vuoto__icona { width: 56px; height: 56px; color: var(--colore-testo-3); }
.uf-carrello-vuoto .uf-carrello-vuoto__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spazio-2); margin-top: var(--spazio-3); }

/* T27.4: ordine e pagamenti (solo aspetto: calcoli e registrazione restano nel code-behind) */
/* passi dell'ordine: il code-behind segna le voci con ord_path (fatte) e ord_sel (corrente); le icone ord1-5 non si mostrano */
.uf-passi--ordine .uf-passi__icona { display: none; }
.uf-passi--ordine .ord_path { color: var(--colore-testo-2); }
.uf-passi--ordine .ord_path::before { background: var(--colore-nero); border-color: var(--colore-nero); color: var(--colore-testo-su-scuro); }
.uf-passi--ordine .ord_sel { color: var(--colore-testo); }
.uf-passi--ordine .ord_sel::before { background: var(--colore-giallo); border-color: var(--colore-nero); color: var(--colore-nero); }
/* pannelli dei passi */
.uf-passo { margin-bottom: var(--spazio-6); }
.uf-passo__testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spazio-2) var(--spazio-4); margin-bottom: var(--spazio-4); padding-bottom: var(--spazio-2); border-bottom: 2px solid var(--colore-nero); }
.uf-passo__testa h2 { margin: 0; }
.uf-passo__frecce { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.uf-passo__piede { display: flex; justify-content: flex-end; margin-top: var(--spazio-5); padding-top: var(--spazio-4); border-top: 1px solid var(--colore-bordo); }
.uf-passo h3 { font-size: var(--testo-m); }
.uf-indirizzo { line-height: 1.6; }
/* scelte (corriere, opzioni, pagamento): RadioButtonList e CheckBoxList come elenchi, l'etichetta intera e' l'area di tocco */
.uf-scelte { margin: 0; padding: 0; border: 0; min-width: 0; }
.uf-scelte legend { padding: 0; margin-bottom: var(--spazio-2); font-weight: var(--peso-forte); }
.uf-scelte__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-1); }
.uf-scelte__elenco li { display: flex; align-items: center; gap: var(--spazio-3); min-height: var(--alto-comando); padding: 0 var(--spazio-3); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-scelte__elenco li:has(input:checked) { border: 2px solid var(--colore-nero); background: var(--colore-giallo-velo); }
.uf-scelte__elenco li:has(input:disabled) { color: var(--colore-testo-3); background: var(--colore-fondo-chiaro); }
/* radio e caselle: input veri con l'area di tocco di 44 px; cerchio e quadrato disegnati con gli sfondi (22 px visibili) */
.uf-scelte__elenco input { appearance: none; flex: none; width: var(--alto-comando); height: var(--alto-comando); margin: 0 calc(-1 * var(--spazio-2)); border: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle, var(--colore-carta) 0 9px, var(--colore-nero) 9px 11px, transparent 11.5px); }
.uf-scelte__elenco input:checked { background: radial-gradient(circle, var(--colore-nero) 0 5px, var(--colore-carta) 5.5px 9px, var(--colore-nero) 9px 11px, transparent 11.5px); }
.uf-scelte__elenco input[type="checkbox"] { border-radius: var(--raggio-s);
    background: linear-gradient(var(--colore-carta), var(--colore-carta)) center / 18px 18px no-repeat, linear-gradient(var(--colore-nero), var(--colore-nero)) center / 22px 22px no-repeat; }
.uf-scelte__elenco input[type="checkbox"]:checked { background: linear-gradient(var(--colore-nero), var(--colore-nero)) center / 10px 10px no-repeat, linear-gradient(var(--colore-carta), var(--colore-carta)) center / 18px 18px no-repeat, linear-gradient(var(--colore-nero), var(--colore-nero)) center / 22px 22px no-repeat; }
.uf-scelte__elenco input:disabled { cursor: not-allowed; opacity: .45; }
.uf-scelte__elenco li > span { display: contents; }   /* voci con Enabled o disattivate: ASP.NET le avvolge in uno span */
.uf-scelte__elenco label { flex: 1; display: flex; align-items: center; min-height: var(--alto-comando); cursor: pointer; }
.uf-loghi-pagamento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-3); list-style: none; margin: 0; padding: 0; }
.uf-loghi-pagamento li { display: grid; place-items: center; min-height: 80px; padding: var(--spazio-2); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-loghi-pagamento img { max-height: 64px; width: auto; }
.uf-logo-pagamento { max-height: 60px; width: auto; }
/* conferma: indirizzo, pagamento, codice promozionale; riepilogo con i totali che scrive il code-behind */
.uf-conferma-dati { display: grid; gap: var(--spazio-4); margin-bottom: var(--spazio-5); }
@media (min-width: 768px) {
    .uf-conferma-dati { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.uf-codice-promo { display: flex; gap: var(--spazio-2); }
.uf-codice-promo .uf-input { flex: 1; min-width: 0; }
.uf-riepilogo--ordine { margin-top: var(--spazio-4); }
.uf-riepilogo--ordine dl + dl { margin-top: var(--spazio-2); }
.uf-riepilogo__opzioni { display: block; font-size: var(--testo-xs); font-weight: var(--peso-normale); color: var(--colore-testo-2); }
/* IVA per aliquota: righe "Iva (22%): € x" scritte dal code-behind (span text-label3 + text-field) */
.uf-riepilogo__iva > span { display: grid; grid-template-columns: 1fr auto; gap: var(--spazio-2) var(--spazio-3); }
.uf-riepilogo__iva br { display: none; }
.uf-riepilogo__iva .text-label3 { color: var(--colore-testo-2); }
.uf-riepilogo__iva .text-field { text-align: right; font-variant-numeric: tabular-nums; }
.uf-riepilogo-lato h2 { font-size: var(--testo-m); }
.uf-riepilogo-lato .uf-riepilogo__iva { font-size: var(--testo-s); }
/* messaggi del passo finale (testo con i dati di pagamento scritto dal code-behind) e richiesta di accesso */
.uf-ordine-messaggio { min-width: 0; overflow-wrap: anywhere; }
.uf-ordine-messaggio a { font-weight: var(--peso-forte); }
.uf-ordine-messaggio a:not(.uf-btn) { display: inline-flex; align-items: center; min-height: var(--alto-comando); }
.uf-ordine-messaggio p { margin-bottom: var(--spazio-2); }
.uf-ordine-messaggio__titolo { font-size: var(--testo-l); }
.uf-ordine-pagamento { display: block; margin-top: var(--spazio-3); padding: var(--spazio-3) var(--spazio-4); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-m); background: var(--colore-carta); }
.uf-ordine-accesso .uf-accesso__recupera { margin: var(--spazio-2) 0 var(--spazio-3); }
/* pagine di pagamento (PayPal, carta) */
.uf-pagamento { display: grid; gap: var(--spazio-5); }
@media (min-width: 992px) {
    .uf-pagamento { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
}
.uf-pagamento__riquadro { margin: 0; max-width: none; display: grid; gap: var(--spazio-3); }
.uf-pagamento__riquadro dl { margin: 0; }
#paypal-button-container { min-height: var(--alto-comando); }

/* T27.6: notizie (news.aspx: stesse schede delle recensioni pubbliche) */
.uf-notizia__titolo { margin: 0; font-size: var(--testo-m); }
.uf-notizia__titolo a, .uf-notizia__titolo .aspNetDisabled { display: inline-flex; align-items: center; min-height: var(--alto-comando); color: inherit; }
.uf-notizia__titolo .aspNetDisabled { text-decoration: none; }
.uf-notizia__link { display: flex; flex-wrap: wrap; gap: var(--spazio-1) var(--spazio-4); margin: 0; }
.uf-notizia__link a { display: inline-flex; align-items: center; min-height: var(--alto-comando); font-weight: var(--peso-forte); }