/* ===========================================================================
   FLASHMAC — WOOCOMMERCE
   Stile sull'output dei blocchi Woo (Product Collection, Product Filters,
   Mini-Cart, Add to Cart): nessun template PHP sostituito.
   =========================================================================== */

/* --- Griglia catalogo --------------------------------------------------- */
.fm-catalogue{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-6);align-items:start}
.fm-catalogue__side{position:sticky;top:calc(var(--header-offset) + var(--space-4))}
/* La griglia e' la nostra, non quella del blocco. Product Collection stampa
   `.wc-block-product-template__responsive.columns-N` (0,2,0): la nostra regola
   a una classe sola perdeva per specificita' e restavano 4 colonne da 228px
   con i titoli troncati a meta' parola. Il selettore ripetuto pareggia la
   specificita' e il nostro foglio, accodato dopo quello dei blocchi, vince.
   Per lo stesso motivo rail e correlati salgono a tre classi: altrimenti la
   media query qui sotto, che nel sorgente viene dopo, li riporterebbe a
   griglia. Il passo e' --space-5 come in tavola (griglia, rail e correlati
   usano lo stesso). */
.wc-block-product-template.wc-block-product-template,.wp-block-post-template.is-flex-container{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));gap:var(--space-5)}
/* La barra di scorrimento del rail e' VISIBILE e sempre, come nel kit
   (`fm-scroll-nice`): e' l'unico segnale che la track continua oltre il bordo
   dello schermo, e l'hover ne cambia solo il tono. Il rosa e' composto con
   color-mix sul token, la stessa tecnica dello scrim del drawer piu' sotto:
   `rgba(235,63,147,.45)` del kit non e' un token e --accent-soft non gli
   somiglia. I 6px di altezza sono un letterale del kit: la scala degli spazi
   non ha il 6 (4 e' troppo sottile, 8 diventa una barra da desktop).
   `x proximity` e non `mandatory`: con il passo largo delle frecce la track
   riagganciava sempre e il peek della card successiva spariva.
   La gronda e' --space-3 perche' con --space-2 la barra tocca l'ombra delle
   card. Il carosello recensioni (.fm-reviews__track) resta senza barra:
   la' il kit usa `fm-scroll-hide` e naviga con le frecce. */
.fm-rail .wc-block-product-template.wc-block-product-template{grid-auto-flow:column;grid-auto-columns:minmax(var(--rail-card-min),1fr);grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--flash-pink) 45%,transparent) transparent;padding-bottom:var(--space-3)}
.fm-rail .wc-block-product-template::-webkit-scrollbar{height:6px}
.fm-rail .wc-block-product-template::-webkit-scrollbar-track{background:transparent}
.fm-rail .wc-block-product-template::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--flash-pink) 45%,transparent);border-radius:var(--radius-pill)}
.fm-rail .wc-block-product-template::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--flash-pink) 70%,transparent)}
.fm-rail .wc-block-product-template>li{scroll-snap-align:start}

/* --- Card prodotto ------------------------------------------------------ */
.wc-block-product-template li.wc-block-product,.wp-block-post-template li.product{position:relative;display:flex;flex-direction:column;gap:0;background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}
/* PROPOSTA SFUMATURE IN SCURO (2026-09-17) — superficie 1 di 3.
   Lo scuro e' piatto perche' ogni superficie e' una tinta unita. Qui non si
   inventa niente: si estende --grad-ink, il gradiente che il design system ha
   gia' e che il tema usa su hero, banda TikTok, pannello gradi e testata
   categoria. Sulla card va dall'alto (--ink-800) al fondo (--ink-950): il
   fondo coincide con --surface-sunken di oggi, quindi la card non cambia
   peso, guadagna profondita' in cima. In chiaro non cambia nulla.
   Da guardare prima di estenderla al resto. */
.theme-dark .wc-block-product-template li.wc-block-product,
.theme-dark .wp-block-post-template li.product{background:var(--grad-ink)}
/* La superficie e' --surface-sunken, non --surface-card: e' il contratto del
   ProductCard del kit ed e' l'unico modo di rispettare il CLAUDE.md §1.5 in
   scuro (piastra foto bianca dentro una card --ink-950). In chiaro la card
   coincide col fondo della banda --a e resta definita da bordo + --shadow-sm.
   Vale solo per la card prodotto: .fm-card (pannelli, trust card) nel kit sta
   su --surface-card e non si tocca.
   Sotto --bp-tablet niente hover: press state (§6.5). */
@media(hover:hover){.wc-block-product-template li.wc-block-product:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}}
/* Piastra foto: rapporto 5/4 fisso, foto contenuta e mai ritagliata.
   Due cose la rompevano e allungavano la card di ~90px:
   - il contenitore e' un flex item, quindi `min-height:auto` lo faceva
     crescere fino all'immagine invece di rispettare l'aspect-ratio;
   - il blocco Product Image stampa `style="object-fit:cover"` **inline**
     sull'<img>, e uno stile inline si batte solo con !important (e' la
     stessa eccezione delle altre regole contro l'output dei blocchi Woo).
   Il link e' il vero figlio del contenitore: senza dargli l'altezza piena,
   `height:100%` sull'immagine non ha su cosa risolversi. */
.wc-block-product .wc-block-components-product-image{margin:0;min-height:0;background:var(--surface-photo);aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}
.wc-block-product .wc-block-components-product-image>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.wc-block-product .wc-block-components-product-image img{width:100%;height:100%;object-fit:contain!important;mix-blend-mode:normal}
.wc-block-product .wc-block-components-product-category-list,.wc-block-product .wc-block-components-product-sku{font-family:var(--font-spec);font-size:var(--text-3xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-spec);text-transform:uppercase;color:var(--text-brand-aa);margin:var(--space-4) var(--space-4) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* L'occhiello e' spec semibold anche quando degrada al link della categoria
   primaria: l'<a rel="tag"> prendeva la tipografia del link, non quella del
   contenitore. */
.wc-block-product .wc-block-components-product-category-list a,.wc-block-product .wc-block-components-product-category-list .fm-eyebrow__text{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
/* Titolo su due righe. Il clamp NON puo' stare sull'h3: la card e' un
   contenitore flex e il browser "blockifica" i suoi figli, trasformando
   display:-webkit-box in flow-root e annullando -webkit-line-clamp (era la
   causa dei titoli su 4-5 righe che sbilanciavano le card). Sul link interno,
   che flex item non e', il clamp funziona. Il min-height tiene allineate le
   righe di card anche quando un titolo sta su una riga sola. */
.wc-block-product .wp-block-post-title,.wc-block-product .wc-block-components-product-title{margin:var(--space-2) var(--space-4) 0;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold);line-height:var(--leading-snug);color:var(--text-strong);overflow:hidden}
/* Prefisso body e !important sono contro il CSS dei blocchi Woo, che si
   accoda dopo il nostro (§3): senza, il link torna a `flow-root` e il
   clamp non taglia piu', lasciando una terza riga mozzata a meta'. */
/* Il titolo e' figlio diretto della card, che e' un contenitore flex: i suoi
   figli vengono "blockificati" e `-webkit-box` diventa `flow-root`, quindi il
   clamp li' non puo' funzionare, con o senza !important. Il clamp sta percio'
   sul link, che flex item non e'; il contenitore tiene solo il limite di
   altezza, cosi' una terza riga non compare mai a meta'. */
/* La scatola vale ESATTAMENTE due interlinee (2 x --leading-snug), non un
   2.6em a occhio: cosi' le due righe la riempiono e il testo non balla. */
body .wc-block-product .wp-block-post-title,body .wc-block-product .wc-block-components-product-title{max-height:calc(var(--leading-snug) * 2em);min-height:calc(var(--leading-snug) * 2em);overflow:hidden}
body .wc-block-product .wp-block-post-title>a,body .wc-block-product .wc-block-components-product-title>a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:inherit}
.wc-block-product .wp-block-post-title a{color:inherit}
.wc-block-product .wc-block-components-product-price{margin:var(--space-3) var(--space-4) 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-family:var(--font-mono)}
/* Riga prezzo della card = PriceTag del design system: prezzo corrente,
   barrato e percentuale sono TRE fratelli di una sola riga flex, stesso gap.
   Nel markup di Woo pero' il prezzo sta dentro due contenitori e la pill,
   che e' un blocco a parte, resta fuori: con `display:contents` i due
   contenitori escono dal layout e i tre elementi tornano sulla stessa riga.
   L'ordine e' esplicito perche' Woo stampa il barrato prima del prezzo e
   perche' la pill, senza `order`, aprirebbe la riga. */
.fm-cardprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) var(--space-4) 0}
.fm-cardprice>*{margin:0}
.fm-cardprice .wp-block-woocommerce-product-price,.fm-cardprice .wc-block-components-product-price{display:contents}
.fm-cardprice ins{order:1}
.fm-cardprice del{order:2}
.fm-cardprice .fm-badge--discount{order:3}
.fm-cardprice ins,.fm-cardprice del{margin:0}
/* Il capo lo decide `flex-wrap`, come nel kit: quando i tre elementi non ci
   stanno scende la PILL, e prezzo corrente + barrato restano sulla stessa
   riga. Qui c'erano due regole che forzavano il capo opposto (prezzo da solo
   sulla prima riga) nei rail, nei correlati e sotto --bp-tablet: spezzavano
   la riga anche dove ci sarebbe stata — sui correlati a 1280 sono 27px di
   card in piu' della tavola. */
.wc-block-product .wc-block-components-product-price ins{text-decoration:none;font-weight:var(--fw-bold);font-size:var(--text-lg);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-strong)}
/* Il barrato del kit e' mono 400 con la barra rosa: e' un segno di marca. */
/* Nota: qui c'era anche `.fm-buybox .price`, che non corrispondeva a nulla —
   nella buy box il prezzo e' `.fm-priceline`, con le sue regole piu' sotto.
   Da quando `.fm-priceline` porta anche la classe `price` (serve al JS del
   configuratore per trovare il prezzo da aggiornare) quel selettore avrebbe
   iniziato a mordere davvero, rimpicciolendo l'interlinea del prezzo grande:
   e' stato tolto, non "vinto" con altra specificita'. */
/* Il barrato passa a --text-secondary (deciso il 2026-09-20). Prima era
   --text-muted, considerato decorativo perche' "e' un valore superato, non la
   lettura principale": il censimento dei gradienti ha misurato **4,00:1** su
   --grad-ink, cioe' sulle card in scuro, contro una soglia di 4,5 — il testo
   e' 13px peso 400, quindi la soglia bassa del testo grande non si applica.
   La decisione e' che **un prezzo barrato resta leggibile per scelta**, non
   perche' lo si consideri decorativo: e' un dato che il cliente confronta.
   Con --text-secondary sale a 5,59:1 nel punto peggiore del gradiente. */
.wc-block-product .wc-block-components-product-price del{color:var(--text-secondary);font-size:var(--text-xs);font-weight:var(--fw-regular);text-decoration-color:var(--flash-pink)}
/* --leading-normal e' l'interlinea del kit sulla riga rate; il colore resta
   --text-body perche' il --text-muted della tavola sta sotto 4,5:1. */
/* Una riga sola, piccola e secondaria, senza riquadro ne' importo in grassetto: chiusura della questione rate, 2026-09-21. */
.fm-installment{margin:var(--space-2) var(--space-4) 0;font-size:var(--text-2xs);line-height:var(--leading-normal);color:var(--text-secondary)}
/* Il pezzo con la cifra, «3 rate da 310,00€», in grassetto: stesso colore
   della riga nella card (5,3:1 chiaro, 6,2:1 scuro, misurati). */
.fm-installment__cifra{font-weight:var(--fw-bold)}
/* La barra fra le due meta' della riga rate. E' un SEPARATORE, non un segno
   grafico: quando una delle due meta' non c'e' non viene nemmeno stampata, e
   qui si occupa solo del respiro intorno. `aria-hidden` perche' a voce la
   pausa la fa gia' la struttura della frase. */
.fm-installment__sep{margin-inline:.4em;opacity:.45}
.wc-block-product .wp-block-button,.wc-block-product .wc-block-components-product-button{display:block;width:auto;margin:var(--space-4);margin-top:auto;padding-top:var(--space-4)}
/* CTA della card: contratto esplicito del kit (`ctaVariant={dark?'flash':'dark'}`).
   In tema chiaro il bottone e' --ink-950 pieno; il gradiente e' riservato al
   tema scuro, dove la superficie della card e' gia' scura e il nero non
   staccherebbe. Vale su catalogo, rail della home e correlati: la card e' la
   stessa ovunque. */
body .wc-block-product .wc-block-components-product-button a,body .wc-block-product .wc-block-components-product-button button{display:flex!important;width:100%!important;align-items:center;justify-content:center;width:100%;background:var(--ink-950);color:var(--on-accent);border:none;border-radius:var(--radius-sm);min-height:var(--control-md);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);text-align:center}
body.theme-dark .wc-block-product .wc-block-components-product-button a,body.theme-dark .wc-block-product .wc-block-components-product-button button{background:var(--grad-flash)}
/* --- Cuore preferiti ---------------------------------------------------- */
/* Il bottone e' l'area di tocco (--touch-min, 44px, §6.5); il disco che si
   vede e' il ::before (--control-sm). Cosi' il bersaglio cresce sotto il dito
   senza che il disegno cambi.
   Lo stato passa da tre custom property, perche' lo stesso stato "acceso" va
   applicato da tre parti: la classe .is-on (utente loggato, HTML dal server),
   la regola che lo snippet in <head> inietta per l'ospite prima del primo
   paint, e l'hover. Un solo punto da tenere allineato invece di tre.
   Senza JS il cuore non compare affatto: `fm-js` la mette lo stesso snippet.
   Un bottone che non fa nulla e' peggio dell'assenza. */
/* Le tre property stanno su `.fm-wish` da sole, non su `.fm-js .fm-wish`:
   la regola dello snippet in <head> viene appesa PRIMA che il browser
   incontri i <link> del tema, quindi a parita' di specificita' perderebbe per
   ordine di sorgente. Con i default a (0,1,0) il selettore per attributo
   (0,2,0) vince sempre, comunque siano ordinati i fogli. */
.fm-wish{
  display:none;
  --fm-wish-fill:none;
  --fm-wish-ink:var(--ink-400);
  --fm-wish-line:var(--border-subtle)
}
.fm-js .fm-wish{
  position:absolute;
  top:var(--space-2);
  right:var(--space-2);
  z-index:2;
  width:var(--touch-min);
  height:var(--touch-min);
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--radius-pill);
  background:none;
  color:var(--fm-wish-ink);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out)
}
.fm-wish::before{
  content:"";
  position:absolute;
  width:var(--control-sm);
  height:var(--control-sm);
  border-radius:var(--radius-md);
  background:var(--surface-sunken);
  border:1px solid var(--fm-wish-line);
  transition:border-color var(--dur-fast) var(--ease-out)
}
.fm-wish .fm-ico{position:relative;fill:var(--fm-wish-fill)}
.fm-wish.is-on{--fm-wish-fill:currentColor;--fm-wish-ink:var(--accent);--fm-wish-line:var(--border-brand)}
.fm-wish[aria-busy="true"]{opacity:var(--press-opacity);pointer-events:none}
/* Hover solo dove il puntatore esiste davvero; sul touch resta il press
   state, che e' la regola del design sotto --bp-tablet (§6.5). */
@media(hover:hover){.fm-wish:hover{--fm-wish-ink:var(--accent);--fm-wish-line:var(--border-brand)}}
.fm-wish:active{--fm-wish-ink:var(--accent-press);--fm-wish-line:var(--border-brand)}

/* Nella buybox della PDP il cuore non galleggia sulla foto: sta nel flusso,
   dentro la riga d'acquisto. La forma e' in fondo al file, con l'etichetta. */


/* --- Banner categoria --------------------------------------------------- */
/* Banda gradiente con un alone sfocato in alto a destra, lo stesso linguaggio
   dell'hero della home. Non e' decorazione: in tema scuro --grad-ink finisce
   su --ink-950, cioe' esattamente il fondo della banda del catalogo che segue,
   e senza l'alone l'intestazione non si legge come banda separata.
   Geometria in token (--space-9 e --space-7 per gli scostamenti, larghezza in
   percentuale della viewport); resta letterale il solo raggio di sfocatura,
   per cui nei token non esiste una scala — stessa eccezione gia' presente su
   .fm-hero__media::before. */
.fm-cat-banner{position:relative;overflow:hidden;padding-block:var(--space-7);background:linear-gradient(160deg,var(--bg-subtle) 0%,var(--accent-soft) 100%);border-bottom:1px solid var(--border-subtle)}
.fm-cat-banner::before{content:'';position:absolute;top:calc(var(--space-9) * -1);right:calc(var(--space-7) * -1);width:28%;aspect-ratio:1;border-radius:50%;background:var(--grad-surge);filter:blur(80px);opacity:.18;pointer-events:none}
.fm-cat-banner>*{position:relative}
/* Il bordo inferiore resta anche in scuro: --grad-ink finisce sullo stesso
   --ink-950 del corpo del catalogo e senza il filetto la banda sfumava nella
   pagina. Stesso trattamento del chiaro, con il token tematizzato. */
.theme-dark .fm-cat-banner{background:var(--grad-ink)}
.theme-dark .fm-cat-banner::before{background:var(--grad-violet);opacity:.5}
/* Corpo del catalogo: banda --a fra l'intestazione e "Perche' flashmac", che
   e' --b. Senza la banda il corpo restava sul fondo pagina e le due sezioni
   adiacenti non erano a un passo di distanza (Rule 1). */
.fm-catalogue-body{padding-block:var(--space-6) var(--space-8)}
/* Il blockGap fra i figli di <main> lascerebbe vedere il fondo pagina fra
   l'header e l'intestazione di categoria, e fra le bande: si toccano. */
.fm-catalogue-page>*{margin-block-start:0}
.fm-cat-banner h1{margin:0 0 var(--space-2);font-size:var(--text-3xl)}
.fm-cat-banner .term-description{max-width:62ch;color:var(--text-body)}

/* --- Filtri (blocchi Product Filters) ---------------------------------- */
/* Nella tavola il pannello e' PIATTO sullo sfondo pagina: nessuna card, i
   gruppi separati da filetti. Prima era `--surface-card` + bordo + raggio. */
.fm-filters{background:none;border:none;border-radius:0;padding:0}
/* Colore: `--text-muted` misura 4,46:1 in chiaro e 4,00:1 in scuro, sotto
   soglia in entrambi (limite del token, annotato in PROGRESS per il design
   system). Stessa scelta gia' fatta per `.fm-pill__count`: si tiene la
   tipografia spec e si porta il colore a `--text-body`. */
.fm-filters h2,.fm-filters h3,.fm-filters .wp-block-heading{font-family:var(--font-spec);font-size:var(--text-2xs);letter-spacing:var(--tracking-spec);text-transform:uppercase;color:var(--text-body);margin:0 0 var(--space-3)}
.fm-filters .wc-block-components-price-slider__range-input-progress{--range-color:var(--flash-pink)}
.fm-filters .wc-block-components-checkbox__input:checked{background:var(--grad-flash);border-color:transparent}
.fm-filters .wc-block-components-checkbox__label{font-size:var(--text-sm);color:var(--text-body)}
.fm-filters .wc-block-components-filter-reset-button{font-family:var(--font-display);font-size:var(--text-xs);color:var(--accent-text)}

/* I blocchi Product Filters di Woo 10.7 si pilotano dalle proprie custom
   property: qui si assegnano i token e il foglio del plugin segue da solo,
   senza doverne riscrivere le regole. Le classi `wc-block-components-*` qui
   sopra sono quelle dei filtri legacy e restano per compatibilita'. */
.fm-filters .wc-block-product-filters{
  display:block;
  --wc-product-filter-block-spacing:var(--space-5);
  --wc-product-filters-text-color:var(--text-body);
  --wc-product-filters-background-color:transparent;
  --wc-product-filter-checkbox-list-option-element:transparent;
  --wc-product-filter-checkbox-list-option-element-border:var(--border-strong);
  --wc-product-filter-checkbox-list-option-element-selected:var(--on-accent);
  --wc-product-filter-checkbox-list-label-element:var(--text-body);
  --wc-product-filter-price-slider:var(--flash-pink);
  --wc-product-filter-price-slider-handle:var(--flash-pink);
  --wc-product-filter-price-slider-handle-border:var(--flash-pink);
  --wc-product-filter-removable-chips-text:var(--text-body);
  --wc-product-filter-removable-chips-background:var(--accent-soft);
  --wc-product-filter-removable-chips-border:var(--border-brand);
}

/* Intestazione: "Filtri" a sinistra, "Azzera" a destra; il filetto sotto lo
   disegna il blocco che segue (regola `>*+*` piu' avanti).
   Woo appiattisce i gruppi nel proprio foglio (`display:block` e `margin:20px 0`
   sui figli): qui il gruppo torna una riga flex senza margini propri. */
.fm-filters .fm-filters__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.fm-filters .fm-filters__head>*{margin:0;padding:0}
.fm-filters .fm-filters__clear .wp-block-buttons{margin:0;padding:0}
/* Titolo del pannello: nel design e' l'unica intestazione in corpo grande,
   i gruppi restano etichette spec (regola generale qui sopra). */
.fm-filters .fm-filters__head h2.wp-block-heading{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-normal);
  text-transform:none;
  color:var(--text-strong);
}
/* Filetti fra i gruppi: il pannello non e' una card, la separazione la fanno
   le righe. */
.fm-filters .wc-block-product-filters__overlay-content>*+*{
  padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
}
/* Il filetto lo porta sempre l'elemento che segue, mai quello che precede:
   con due bordi (uno sotto e uno sopra) i gruppi nascosti da Woo lasciavano
   una riga doppia. Gli elementi `display:none` non disegnano il proprio bordo
   ma restano fratelli, quindi il primo visibile dopo di loro riceve comunque
   il suo — e uno solo. */
/* Un gruppo di filtri che Woo nasconde (attributo senza termini nel contesto
   corrente, chip senza filtri attivi) lascerebbe un filetto orfano. */
.fm-filters .wc-block-product-filters__overlay-content>[hidden],
.fm-filters .wc-block-product-filters__overlay-content>.wc-block-product-filter--hidden{
  display:none;
}

/* Opzioni: Woo non le distanzia (il `fieldset` e' `display:contents`), il
   ritmo verticale e la riga nome/conteggio sono nostri. */
.fm-filters .wc-block-product-filter-checkbox-list__items{display:flex;flex-direction:column;gap:var(--space-2)}
.fm-filters .wc-block-product-filter-checkbox-list__label{width:100%;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-body);cursor:pointer}
/* Nome a sinistra, conteggio a destra. Woo mette `display:contents` su
   `__text` e `__count`: i due testi finiscono in un unico elemento flex
   anonimo e `space-between` non ha nulla da distribuire — vanno riportati a
   scatole vere perche' diventino due elementi distinti. */
.fm-filters .wc-block-product-filter-checkbox-list__text-wrapper{flex:1;justify-content:space-between;gap:var(--space-3);font-size:inherit}
.fm-filters .wc-block-product-filter-checkbox-list__text{display:block;overflow-wrap:anywhere}
.fm-filters .wc-block-product-filter-checkbox-list__count{display:block;font-family:var(--font-mono);color:var(--text-body)}
/* La casella e' 1em: segue la dimensione dell'etichetta invece di fissare
   una misura. Il quadrato grigio del plugin sparisce, il bordo lo diamo noi. */
.fm-filters .wc-block-product-filter-checkbox-list__input-wrapper::before{content:none}
.fm-filters input[type=checkbox].wc-block-product-filter-checkbox-list__input{border-width:1.5px;border-radius:var(--radius-xs)}
.fm-filters input[type=checkbox].wc-block-product-filter-checkbox-list__input:checked{background:var(--grad-flash);border-color:transparent}
.fm-filters .wc-block-product-filter-checkbox-list__show-more{font-family:var(--font-display);font-size:var(--text-xs);color:var(--accent-text);text-decoration:none}

/* Fascia di prezzo: barra rosa (dalla custom property qui sopra), estremi in
   mono sotto la barra. */
.fm-filters .wc-block-product-filter-price-slider__range,
.fm-filters .wc-block-product-filter-price-slider__range .range-bar{border-radius:var(--radius-pill)}
.fm-filters .wc-block-product-filter-price-slider .text{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-body)}
.fm-filters .wc-block-product-filter-price-slider__right{text-align:right}

/* Chip dei filtri attivi. */
.fm-filters .wc-block-product-filter-removable-chips__items{gap:var(--space-2)}
.fm-filters .wc-block-product-filter-removable-chips__item{border-radius:var(--radius-pill);font-size:var(--text-xs)}

/* "Azzera": nella tavola e' un testo accento accanto al titolo, non un
   bottone. Colore `--accent-hover` e non `--accent`: `--accent` e' #EB3F93 in
   entrambi i temi e su superficie chiara misura 3,71:1. `--accent-hover` e'
   tematizzato (pink-600 in chiaro, pink-400 in scuro) e regge 5,1:1 e 6,9:1.
   Resta un limite del design system: manca un accento leggibile a riposo sul
   chiaro (annotato in PROGRESS). */
.fm-filters .fm-filters__clear .wp-block-buttons{gap:0}
.fm-filters .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-height:auto;padding:0;
  background:none;background-image:none;
  border:none;box-shadow:none;border-radius:0;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-xs);
  color:var(--accent-hover);text-decoration:none;cursor:pointer;
}
@media(hover:hover){
  .fm-filters .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link:hover{text-decoration:underline}
}
/* "Azzera" resta nella riga del titolo anche quando non c'e' nulla di
   attivo, come in tavola. Woo nasconde il blocco `product-filter-active` con
   l'attributo `hidden` e con una classe, entrambi pilotati dall'interactivity
   API: qui si scopre il solo bottone della testata. I chip restano legati
   allo stato — senza filtri non hanno nulla da mostrare. */
.fm-filters .fm-filters__head .fm-filters__clear[hidden],
.fm-filters .fm-filters__head .fm-filters__clear.wc-block-product-filter--hidden{display:block}

/* Collasso dei gruppi. Il bottone lo costruisce theme-mode.js spostando il
   contenuto dell'intestazione (markup nostro, non di Woo: nessun nodo del
   blocco viene mosso, quindi l'interactivity API continua a idratare).
   Il chevron e' stampato dal pattern con fm_icon() ma resta invisibile finche'
   il bottone non esiste: senza JS l'intestazione e' un titolo, non un comando
   che non risponde. */
.fm-filters .wp-block-heading>.fm-ico{display:none}
.fm-filters__toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:var(--touch-min);padding:0;background:none;border:0;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left}
.fm-filters__toggle>.fm-ico{flex:0 0 auto;color:var(--text-body);transition:transform var(--dur-fast) var(--ease-out)}
.fm-filters__toggle[aria-expanded=true]>.fm-ico{transform:rotate(180deg)}
/* Chiuso: resta la sola intestazione. `*+*` e non un :not(): l'intestazione e'
   il primo figlio del gruppo, tutto quel che segue e' il contenuto. */
.fm-filters .fm-filter-group--closed>*+*{display:none}
.fm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}
.fm-toolbar__count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)}
.fm-toolbar select,.woocommerce-ordering select{height:var(--control-sm);border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-strong);font-family:var(--font-body);font-size:var(--text-sm);padding:0 var(--space-3)}
.fm-filters-open{display:none}

/* --- Paginazione -------------------------------------------------------- */
/* Forma DERIVATA: il design system non ha un componente paginazione (nelle
   tavole il catalogo mostra tutti i prodotti). Non si inventa una forma
   nuova: si riusa l'idioma della pill gia' fissato nel tema (.fm-pill —
   superficie card, filetto sottile, raggio pill, tipografia display), col
   bersaglio a --touch-min e i distacchi a --touch-gap (§6.5). La pagina
   corrente prende la forma del chip attivo dei filtri (--accent-soft +
   --border-brand): l'accento come colore di testo non regge i 4,5:1 su
   --bg-subtle, quindi il testo resta sui token tematizzati.
   Il selettore del gap porta due classi perche' il gap del layout flex di
   core arriva dopo, con la stessa specificita'. */
.wp-block-query-pagination.wp-block-query-pagination-is-layout-flex{gap:var(--touch-gap);flex-wrap:wrap;margin-block-start:var(--space-6)}
.wp-block-query-pagination .wp-block-query-pagination-numbers{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--touch-gap)}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--touch-min);min-height:var(--touch-min);
  padding:0 var(--space-3);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);
  background:var(--surface-card);
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  color:var(--text-body);text-decoration:none
}
.wp-block-query-pagination .page-numbers.current{background:var(--accent-soft);border-color:var(--border-brand);color:var(--text-strong)}
/* I puntini di sospensione non sono un bersaglio: niente pill, solo lo spazio
   per non far collidere i due gruppi di numeri. */
.wp-block-query-pagination .page-numbers.dots{min-width:var(--space-5);padding:0;border-color:transparent;background:none;color:var(--text-body)}
@media(hover:hover){.wp-block-query-pagination a:hover{border-color:var(--border-brand);color:var(--text-strong)}}
.wp-block-query-pagination a:active{transform:scale(var(--press-scale,.97))}

/* --- PDP --------------------------------------------------------------- */
/* RULE 1 — la PDP e' fatta di tre bande (acquisto a / tab b / correlati a).
   Il blockGap del tema (--space-5) fra i figli di <main> lascerebbe vedere il
   fondo pagina fra una banda e l'altra: le bande si toccano. */
.fm-pdp-page>*{margin-block-start:0}
.fm-pdp__top{padding-block-end:var(--space-7)}
/* L'avviso di WooCommerce in cima alla scheda e' il **primo** figlio del suo
   contenitore, e il block gap di WordPress distanzia i figli **fra loro**: sopra
   al primo non mette niente. Misurato: l'avviso toccava il bordo inferiore della
   navigazione, distanza 0 in tutti e quattro gli stati.
   Il valore non e' scelto a occhio: --space-5 e' lo stesso passo che il block
   gap mette fra l'avviso e il breadcrumb che lo segue, quindi l'avviso resta
   centrato nel ritmo invece di aggiungerne uno nuovo. La regola sta sul
   contenitore del componente e vale per tutte le varianti — conferma, errore,
   avvertimento, informazione — perche' non nomina nessun modificatore. */
.fm-pdp__top>.wc-block-components-notice-banner{margin-block-start:var(--space-5)}
.fm-pdp__band-tabs{border-top:1px solid var(--border-subtle)}
.fm-pdp__band-tabs>.fm-shell{padding-block:var(--space-5) var(--space-7)}
.fm-pdp__band-related>.fm-shell{padding-block:var(--space-7) var(--space-6)}

/* Il breadcrumb e' un componente, non una pagina. La forma stava scritta su
   `.fm-pdp .woocommerce-breadcrumb`, cioe' su un contesto di pagina (§1.9), e
   la conseguenza era che sul catalogo — dove c'e' esattamente lo stesso blocco
   `woocommerce/breadcrumbs` — restava senza forma: 13px di corpo, minuscolo,
   senza tracking, in `display:block`, e col chevron del separatore inline
   invece che allineato. Ora la forma sta sulla classe del componente; i
   contenitori decidono solo lo spazio attorno, che e' l'unica cosa che
   dipende davvero da dove sta. */
.woocommerce-breadcrumb:where(nav){display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1);font-size:var(--text-3xs);font-family:var(--font-spec);letter-spacing:var(--tracking-spec);text-transform:uppercase;color:var(--text-body)}
/* `nav` e non la sola classe: WooCommerce 11 usa `woocommerce-breadcrumb`
   **anche come classe di servizio** su un `<p>` che non e' un percorso —
   i metadati dell'ordine in `customer-review-order.php`. Senza il tag quella
   riga diventerebbe maiuscola e in flex. `:where()` tiene la specificita' a
   (0,1,0), cosi' il tag non e' zavorra e le regole qui sotto restano leggibili. */
.woocommerce-breadcrumb .fm-ico{flex:none}
/* **Il clearfix di WooCommerce, la terza volta** (invariante §1.10).
   `.woocommerce .woocommerce-breadcrumb::before/::after{display:table}` era
   inerte finche' il contenitore era `display:block`; da quando il breadcrumb e'
   flex sono diventati due item veri, e sul catalogo spingevano il primo link a
   x=32 contro i 28 del titolo sotto. Non si vede nel markup e non si trova
   leggendo il CSS del tema. */
.woocommerce nav.woocommerce-breadcrumb::before,.woocommerce nav.woocommerce-breadcrumb::after{content:none}
/* `margin:0 0 1em` di WooCommerce (0,2,0) restava scoperto: sulla PDP erano
   11px non-token appesi sotto il breadcrumb. Qui si vince per **specificita'**
   (0,3,1) e non per ordine nel foglio; le briciole dell'area clienti hanno il
   loro spazio e restano fuori. */
.woocommerce nav.woocommerce-breadcrumb:not(.fm-account__crumbs){margin:0}
.fm-pdp nav.woocommerce-breadcrumb{padding-block:var(--space-4)}
.fm-cat-banner nav.woocommerce-breadcrumb{margin-block-end:var(--space-2)}
.fm-pdp__grid{display:grid;grid-template-columns:minmax(0,var(--pdp-media)) minmax(0,1fr);gap:var(--pdp-gap);align-items:start}
.fm-pdp__media{position:sticky;top:calc(var(--header-offset) + var(--space-4))}
/* Il blockGap del tema (--space-5) fra i figli del gruppo: con i badge davanti
   alla galleria la piastra scendeva di 24px e la colonna tornava a 484px. I
   badge sono assoluti, non hanno bisogno di passo. */
.fm-pdp__media>*{margin-block-start:0}
/* GALLERIA — riferimento: Gallery in design/ui_kits/storefront/pdp.jsx.
   Il blocco Woo stampa DUE contenitori annidati e `fm-photo-plate` sta su
   quello interno (lo aggiunge il filtro in inc/woocommerce.php); quello
   esterno e' un wrapper nudo.
   La piastra NON e' piu' la cornice bianca: e' la colonna. La cornice sta sul
   riquadro interno — il wrapper della galleria, o il `.flex-viewport` che
   flexslider gli mette intorno quando le foto sono piu' di una — cosi' la
   striscia di miniature resta FUORI dalla card, sulla banda, come in tavola.
   Il combinatore figlio e' obbligatorio: con flexslider il wrapper e' dentro
   il viewport e senza `>` uscirebbero due cornici concentriche. */
.fm-photo-plate{display:flex;flex-direction:column;gap:var(--space-3);background:none;box-shadow:none;padding:0;border-radius:0}
/* WooCommerce da' a `div.images` un `margin-bottom:2em`: erano 32px di spazio
   morto sotto la colonna (492px invece di 460). Quattro classi e due tipi per
   pareggiare `.woocommerce div.product div.images` — il nostro foglio si
   accoda dopo woocommerce.css. */
.fm-pdp div.fm-pdp__media div.fm-photo-plate{margin-bottom:0}
/* La superficie e' comune ai due casi; il LAYOUT no, ed e' li' che stava il
   difetto. Dare `display:flex` anche a `.flex-viewport` rendeva il wrapper di
   flexslider un flex item: il suo `width:800%` — che flexslider scrive proprio
   per mettere le slide in fila — veniva schiacciato dal `flex-shrink` alla
   larghezza del viewport, le quattro slide floatate non ci stavano piu' in
   riga e si impilavano una sotto l'altra (misurate tutte a x=48, wrapper alto
   1710px). Poi il clic su una miniatura traslava il wrapper di lato e non si
   vedeva piu' niente: nessuna slide dentro il viewport. Le miniature
   funzionavano — la slide attiva cambiava — ma il nastro non era un nastro.
   Quindi: la piastra dipinge, e quando flexslider c'e' non impagina. */
.fm-photo-plate>.woocommerce-product-gallery__wrapper,
.fm-photo-plate>.flex-viewport{width:100%;background:var(--surface-photo);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
/* Galleria con una foto sola: flexslider non si monta (`allowOneSlide:false`)
   e il wrapper resta figlio diretto della piastra. Li' il centraggio serve, e
   l'aspect-ratio anche, perche' nessuno scrive un'altezza. */
.fm-photo-plate>.woocommerce-product-gallery__wrapper{aspect-ratio:var(--gallery-image-ratio);display:flex;align-items:center;justify-content:center}
/* Galleria montata: l'altezza la scrive flexslider in linea e la anima con
   `smoothHeight`. Un `aspect-ratio` sul viewport litigherebbe con lui a ogni
   cambio di foto — senza, pero', la piastra cambiava altezza da una foto
   all'altra (misurata passare da 460 a 330) e la pagina saltava sotto il dito.
   La proporzione va percio' sulla SLIDE: cosi' ogni slide e' alta uguale,
   quello che `smoothHeight` misura e' sempre lo stesso numero, e la piastra
   resta ferma senza che nessuno debba vincere su nessuno. */
.fm-photo-plate>.flex-viewport{display:block}
.fm-photo-plate .woocommerce-product-gallery__image{aspect-ratio:var(--gallery-image-ratio)}
.fm-pdp__media .wp-block-woocommerce-product-image-gallery{background:none;border:0;padding:0;border-radius:var(--radius-lg)}
.fm-pdp__media img{object-fit:contain;width:100%;height:100%}
/* `7%` e' un LETTERALE del kit (pdp.jsx: `padding:'7%'` sull'<img>): a 460px
   fanno 32,2px per lato, il doppio dei --space-4 che stavano sulla piastra.
   Non e' un token e non si approssima al passo piu' vicino. */
.fm-photo-plate .woocommerce-product-gallery__image img{padding:7%}

/* Miniature: nel kit sono bottoni --gallery-thumb-size in fila sotto la card,
   raggio --radius-sm, cornice --flash-pink sull'attiva. Con flexslider il
   markup e' `ol.flex-control-thumbs` e il bersaglio cliccabile e' l'<img>,
   quindi la cornice sta li'. `2px` / `1.5px` di bordo e il `padding:4px`
   interno sono LETTERALI del kit.
   ATTENZIONE: oggi non e' verificabile — nessun prodotto in catalogo ha
   immagini di galleria, quindi la striscia non compare su nessuna PDP. */
.fm-pdp div.fm-pdp__media div.fm-photo-plate ol.flex-control-thumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;overflow:visible}
.fm-pdp div.fm-pdp__media div.fm-photo-plate ol.flex-control-thumbs li{float:none;width:var(--gallery-thumb-size);flex:0 0 var(--gallery-thumb-size);margin:0}
.fm-pdp div.fm-pdp__media div.fm-photo-plate ol.flex-control-thumbs li img{width:var(--gallery-thumb-size);height:var(--gallery-thumb-size);aspect-ratio:var(--gallery-image-ratio);object-fit:contain;padding:4px;background:var(--surface-photo);border:1.5px solid var(--border-subtle);border-radius:var(--radius-sm);opacity:1}
.fm-pdp div.fm-pdp__media div.fm-photo-plate ol.flex-control-thumbs li img.flex-active{border:2px solid var(--flash-pink)}

/* Zoom: il trigger del lightbox lo crea il JS di WooCommerce (photoswipe) e
   arriva con la forma di serie — cerchio bianco 36px con la lente disegnata
   in nero dai suoi due pseudo-elementi, che in tema scuro resta un cerchio
   bianco sulla piastra. Qui prende la forma dell'IconButton `md` `soft` del
   kit: --touch-min, --surface-sunken, filetto --border-subtle, --radius-md,
   inset --space-3.
   La lente resta quella disegnata da Woo, ricolorata a `currentColor`: nel
   kit l'icona e' `expand`, che NEL SET DI ICONE DEL KIT NON ESISTE (icons.jsx
   non ha quella chiave, il bottone della tavola e' vuoto). Il `4px` di
   traslazione non e' un valore di design: e' (44-36)/2, il ricentraggio della
   lente di Woo nel riquadro piu' grande. */
.fm-pdp div.fm-pdp__media div.fm-photo-plate .woocommerce-product-gallery__trigger{box-sizing:border-box;width:var(--touch-min);height:var(--touch-min);top:var(--space-3);right:var(--space-3);background:var(--surface-sunken);color:var(--text-body);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-md)}
.fm-pdp div.fm-pdp__media div.fm-photo-plate .woocommerce-product-gallery__trigger::before{border-color:currentColor;transform:translate(4px,4px)}
.fm-pdp div.fm-pdp__media div.fm-photo-plate .woocommerce-product-gallery__trigger::after{background:currentColor;transform:translate(4px,4px) rotate(-45deg)}
@media(hover:hover){.fm-pdp div.fm-pdp__media div.fm-photo-plate .woocommerce-product-gallery__trigger:hover{background:var(--accent-soft)}}

/* I badge stanno sopra la foto, in alto a sinistra, con la stessa forma della
   card (.fm-badges in base.css): il riquadro e' assoluto e si ancora alla
   colonna media, che e' sticky da --bp-desktop in su e `relative` sotto. */
.fm-pdp__media .fm-badges{right:calc(var(--space-3) + var(--touch-min) + var(--space-2))}
/* Il blockGap del tema (--space-5) fra i figli del gruppo non e' il ritmo
   della tavola: si azzera e ogni elemento dichiara il proprio passo. */
.fm-buybox>*{margin-block-start:0}
/* Il titolo prodotto si allinea al bordo alto della galleria. Lo scarto non e'
   dell'h1: e' il blockGap di WordPress, che `.fm-pdp__grid` applica come
   `margin-block-start` al SECONDO figlio — la buy box — mentre la galleria,
   essendo il primo, non lo prende. Da --bp-desktop in su le colonne sono
   affiancate e quel passo diventa uno scarto fra due cime che devono
   coincidere; sotto, le colonne si impilano e il passo serve, altrimenti il
   titolo si incolla alla foto. */
@media(min-width:1024px){ /* --bp-desktop */
  .fm-pdp__grid>.fm-buybox{margin-block-start:0}
}
.fm-buybox h1{margin:0 0 var(--space-4);font-size:var(--text-2xl)}
.fm-buybox .fm-meta{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4)}
.fm-stock{display:inline-flex;align-items:center;gap:7px}
.fm-stock::before{content:'';width:8px;height:8px;border-radius:var(--radius-pill);background:var(--success)}
.fm-stock.is-out::before{background:var(--danger)}
.fm-buybox .fm-stock{font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--text-body)}
/* Riga stelle: quattro stati (loaded / loading / empty / error).
   `empty` non ha regole perche' non ha markup — il pattern non stampa nulla e
   la riga collassa sul `gap` della .fm-meta, lasciando la sola disponibilita'.
   Conteggio in monospace come il componente Rating del kit; stelle a 14px
   (dimensione `sm` della tavola), disegnate da fm_stars_row(). */
.fm-rating{display:inline-flex;align-items:center;gap:var(--space-2)}
.fm-rating__count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap}
/* Skeleton: l'idioma .fm-skeleton ridotto all'ingombro della riga, cosi' il
   layout non salta quando il dato arriva.
   La superficie NON puo' essere --surface-sunken come nell'idioma di base: qui
   il fondo e' la banda della PDP, che vale esattamente --surface-sunken in
   entrambi i temi (misurato: #F5F3FA e #0D0B14) — lo skeleton sparirebbe. Si
   usa --border-subtle, il neutro a un passo da entrambe le superfici. Da
   riportare a monte: manca un token di skeleton indipendente dalla banda. */
.fm-rating__skeleton{min-height:0;width:calc(var(--control-lg) * 2);height:var(--space-4);background:var(--border-subtle);border-radius:var(--radius-sm)}
/* Errore: l'idioma .fm-error (banner --danger-bg + azione) in forma compatta —
   sta dentro una riga meta, non in una banda. */
.fm-error--inline{display:inline-flex;padding:var(--space-1) var(--space-3);font-size:var(--text-2xs);border-radius:var(--radius-pill)}
.fm-error--inline a{color:inherit;font-weight:var(--fw-bold);text-decoration:underline}
/* Riga prezzo: corrente per primo, poi il barrato, poi la pill sconto (che e'
   fuori dal blocco Woo e sta nella riga come fratello). L'ordine nel DOM lo
   decide Woo — <del> prima di <ins> — quindi si inverte con `order`. */
.fm-priceline{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-3);margin-bottom:0}
.fm-vat{font-family:var(--font-body);font-size:var(--text-xs);color:var(--text-body)}
.fm-buybox .fm-priceline .wc-block-components-product-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-3);font-family:var(--font-mono)}
.fm-buybox .fm-priceline ins{order:1;text-decoration:none;font-weight:var(--fw-bold);font-size:var(--text-2xl);color:var(--text-strong)}
/* Stessa decisione del barrato nelle card: --text-secondary, non --text-muted. */
.fm-buybox .fm-priceline del{order:2;color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--fw-regular)}
.fm-buybox .fm-priceline .amount{font-family:var(--font-mono)}

/* Riga d'acquisto: una riga sola, sempre — quantita', CTA, cuore.
   `nowrap` e' la garanzia: prima la CTA prendeva `flex:1 1 240px` e su misure
   strette occupava da sola tutta la riga, spingendo a capo il resto. */
/* Tile rate: nella tavola la riga rate e' un bersaglio, non un paragrafo.
   Fondo --surface-sunken, filetto, chevron a destra; apre il pannello. */
.fm-installment--tile{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:var(--touch-min);margin:var(--space-3) 0 var(--space-5);padding:0 var(--space-3);background:var(--surface-sunken);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-body);text-align:left;cursor:pointer}
.fm-installment--tile strong{font-weight:var(--fw-bold);color:var(--text-strong)}
.fm-installment--tile .fm-ico{flex:none}
@media(hover:hover){.fm-installment--tile:hover{border-color:var(--border-default)}}
.fm-installment--tile:active{transform:scale(var(--press-scale,.97))}
/* Senza gateway a rate attivi la riga resta, ma non e' un bersaglio: non c'e'
   nessuna modale da aprire. */
.fm-installment--tile.is-static{cursor:auto}

/* Modale "Paga a rate": nella tavola e' un DIALOGO CENTRATO, non il drawer
   laterale — correzione del cliente del 2026-09-10. Sotto --bp-tablet diventa
   il foglio dal basso, come nel kit e come i filtri del catalogo.
   Le due misure del dialogo (min(480px,92vw) e l'82% dell'altezza) sono
   geometria del componente, riprodotta dal kit: nei token non c'e' una scala
   di dimensioni di dialogo, ed e' lo stesso letterale gia' usato da
   `.fm-panel__sheet` in base.css (min(420px,92vw)). */
.fm-modal{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none}
/* Un guscio puo' essere un <dialog>, aperto con showModal(): serve a stare nel
   top layer, dove nessun z-index di un plugin arriva (il riepilogo appiccicato
   di Fluid Checkout sta a 300). Gli stili dell'agente utente vanno spenti tutti
   e sei, altrimenti il <dialog> porta con se' bordo, padding, sfondo `canvas` e
   un max-width di `calc(100% - 6px - 2em)` che stringerebbe la finestra. Il
   `::backdrop` lo lasciamo trasparente: lo scrim del tema c'e' gia' dentro, ed
   e' quello che porta la transizione e il clic per chiudere. */
dialog.fm-modal{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible}
dialog.fm-modal::backdrop{background:transparent}
.fm-modal.is-open{visibility:visible;pointer-events:auto}
/* Stesso scrim del drawer del mini-cart: --ink-950 al 50%, composto con
   color-mix perche' nei token non c'e' un colore di scrim. */
.fm-modal__scrim{position:absolute;inset:0;background-color:color-mix(in srgb,var(--ink-950) 50%,transparent);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.fm-modal.is-open .fm-modal__scrim{opacity:1}
.fm-modal__dialog{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:flex;flex-direction:column;width:min(480px,92vw);max-height:82vh;background:var(--surface-raised);color:var(--text-body);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);opacity:0;transform:translate(-50%,-50%) scale(.96);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.fm-modal.is-open .fm-modal__dialog{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* In scuro il pannello era --surface-card, cioe' --ink-900 come le card della
   pagina sotto lo scrim: «non si vede dove inizia e finisce» (Alessandro,
   2026-09-21). Superficie sollevata (--surface-raised: --ink-800 in scuro,
   bianco in chiaro, quindi in chiaro non cambia niente), un filo di bordo, e
   in scuro l'anello da 1px piu' il bagliore morbido del token --glow-violet
   sopra l'ombra. Misurato sui pixel dello scatto, non sui valori CSS. */
.theme-dark .fm-modal__dialog{box-shadow:var(--glow-violet),var(--shadow-xl)}
.fm-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--border-hair) solid var(--border-subtle)}
.fm-modal__head h2{margin:0;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-xl);color:var(--text-strong)}
.fm-modal__body{flex:1 1 auto;overflow-y:auto;padding:0 var(--space-5) var(--space-5)}

/* Una riga per provider: tile del logo, "N× rata" in monospace, didascalia.
   La tile e' --fintile-logo-size, che e' il token di QUESTO componente. */
.fm-finrow{display:flex;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:var(--border-hair) solid var(--border-subtle)}
.fm-finrow:last-of-type{border-bottom:none}
/* La piastra e' BIANCA nei due temi, come le foto prodotto (invariante 1.5) e
   come i loghi partner: `--surface-sunken` in scuro diventa una superficie
   ink, e i marchi dei provider — che sono SVG a colori scuri, disegnati per il
   bianco — ci sparivano sopra. La soluzione non e' cercare versioni in
   negativo da procurarsi e mantenere: e' dare al marchio il fondo per cui e'
   stato disegnato. Il bordo serve a staccare la piastra bianca dal pannello
   scuro, come nelle card di catalogo. */
.fm-finrow__logo{display:flex;align-items:center;justify-content:center;flex:0 0 var(--fintile-logo-size);width:var(--fintile-logo-size);height:var(--fintile-logo-size);padding:var(--space-1);background:var(--surface-photo);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}
.fm-finrow__logo svg{width:100%;height:auto;max-height:100%;display:block}
/* L'inchiostro dei marchi monocromatici passati a currentColor: e' la piastra
   a deciderlo, non il pannello, perche' la piastra e' bianca nei due temi. */
.fm-finrow__logo{color:var(--ink-950)}
/* Il ripiego a iniziali sta sulla stessa piastra bianca, quindi l'inchiostro
   non segue il tema: seguirebbe il pannello e non la piastra. */
.fm-finrow__logo.is-fallback{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-2xs);color:var(--ink-950)}
.fm-finrow__text{flex:1 1 auto;min-width:0}
.fm-finrow__name{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);color:var(--text-strong)}
.fm-finrow__rate{display:block;margin-block-start:var(--space-1);font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--text-md);color:var(--text-strong)}
.fm-finrow__note{margin:var(--space-1) 0 0;font-family:var(--font-body);font-size:var(--text-3xs);line-height:var(--leading-relaxed);color:var(--text-muted)}
/* Il link al simulatore del gateway (Findomestic): testo, sottolineato, in
   nuova scheda. Un po' di padding verticale per il dito, senza fare della
   riga un bottone. */
.fm-finrow__link{display:inline-block;margin-block-start:var(--space-1);padding-block:var(--space-1);font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--fw-bold);color:var(--link);text-decoration:underline;text-underline-offset:.15em}
.fm-finrow__link:hover{color:var(--link-hover)}
.fm-ratemodal__note{margin:var(--space-4) 0 0;font-size:var(--text-2xs);color:var(--text-body)}

/* Sotto --bp-tablet (768px, cfr. tokens/breakpoints.css) il dialogo diventa il
   foglio dal basso: e' la forma del kit e quella gia' usata dai filtri. */
@media(max-width:767.98px){
  .fm-modal__dialog{inset:auto 0 0 0;width:auto;max-height:86vh;transform:translateY(100%);border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .fm-modal.is-open .fm-modal__dialog{transform:none}
}

/* Riga d'acquisto: quantita', CTA e cuore su una riga sola e, quando c'e', il
   box del configuratore sopra, a tutta larghezza.

   La colonna della buy box ha UN SOLO bordo sinistro e UNA SOLA larghezza: la
   riga d'acquisto e' l'unico punto in cui questo si perdeva, per due motivi
   diversi, entrambi del markup di WooCommerce.

   1. Il cuore della wishlist era fratello del blocco add-to-cart-form dentro
      una .fm-buyrow flex: il blocco — e con lui il configuratore, che gli sta
      dentro — misurava percio' 68px in meno delle altre righe (i 56 del cuore
      piu' il gap).
   2. Il form portava scatole proprie: il `margin-bottom:2em` di
      `.woocommerce div.product form.cart` e il `padding:0 4px` che il blocco
      Woo mette con `:where(.wp-block-woocommerce-add-to-cart-form > * + *)`
      quando il form non e' il primo figlio (accade sui prodotti dove Woo
      stampa <p class="stock"> prima del form).

   Rimedio: ne' il wrapper del blocco ne' il form fanno piu' scatola. Con
   `display:contents` i loro figli diventano item della .fm-buyrow, che resta
   l'unico contenitore flex della riga: il configuratore prende la larghezza
   piena della colonna pur restando DENTRO form.cart nel DOM (le select devono
   viaggiare col POST del carrello), e quantita' + CTA + cuore ripartono dal
   bordo sinistro della colonna. Nessuno spazio riservato al cuore: dove il
   cuore non c'e' — prodotto non pubblicato, filtro spento — la riga si chiude
   da sola e la CTA prende tutta la larghezza. */
.fm-buybox .fm-buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-block:0 var(--space-5)}
.fm-buybox .fm-buyrow .wp-block-add-to-cart-form,
.fm-buybox .fm-buyrow form.cart{display:contents}
/* Il clearfix di WooCommerce (`form.cart::before/::after`, `display:table`) in
   un contenitore flex diventa DUE item larghi zero, e ognuno si porta dietro
   il suo `gap`: 12px di vuoto prima della quantita' — lo scarto per cui la
   riga partiva piu' a destra di tutte le altre — e altri 12 dopo la CTA.
   Quattro classi per battere `.woocommerce div.product form.cart::before`,
   che e' (0,3,2). */
.fm-pdp .fm-buybox .fm-buyrow form.cart::before,
.fm-pdp .fm-buybox .fm-buyrow form.cart::after{content:none}
.fm-buybox form.cart .fmc2-configurator{flex:1 0 100%;order:-1}
/* I messaggi dei gateway vanno a capo, non dentro la riga d'acquisto.

   PayPal Payments e Scalapay agganciano il proprio riquadro dentro `form.cart`,
   che qui e' `display:contents`: i loro div diventano percio' item della
   .fm-buyrow e si prendono la larghezza della CTA. Su poc — dove girano tutti
   i 59 plugin della produzione — `.ppcp-messages` misura 308px e "Aggiungi al
   carrello" scende da 612 a 280. Su poc2 i due plugin non sono attivi, quindi
   il difetto non si vedeva: e' un caso di Regola 1.10, un primo figlio che non
   e' nel nostro markup e non si trova leggendo il nostro CSS.

   Non si nascondono — sono informazioni di pagamento che il cliente vuole — e
   non si tocca il loro hook: prendono la riga intera e si mettono dopo il
   cuore con `order`, cosi' la riga d'acquisto torna CTA + cuore e i messaggi
   vanno sotto. Un gateway nuovo che faccia lo stesso va aggiunto qui.

   Il selettore e' a discendente e non a figlio diretto di proposito: i due
   plugin agganciano a due wrapper diversi — Scalapay dentro `form.cart`,
   PayPal dentro `.wp-block-add-to-cart-form` — e sono `display:contents`
   tutti e due, quindi in entrambi i casi il div e' item della .fm-buyrow ma
   il suo genitore nel DOM cambia. `flex` lo raccoglie solo chi e' davvero un
   item, percio' un discendente piu' profondo non rischia di prenderlo. */
.fm-buybox .fm-buyrow .ppcp-messages,
.fm-buybox .fm-buyrow .scalapay-widget-area-product{flex:1 0 100%;order:1}
/* Quando non stampano niente, non costano niente. Misurato su poc il
   2026-09-21: `.ppcp-messages` e' alto 24 (min-height inline dell'SDK) con
   dentro un iframe alto 0; il widget Scalapay e' alto 0; ognuno prende una
   riga intera piu' il gap, e sotto la CTA restano 84px invece di 24. Il CSS
   non puo' sapere se un iframe ha disegnato: lo misura sticky-buy-bar.js,
   che mette `is-vuoto` quando il contenuto e' alto 0 e lo toglie appena
   disegna. Fuori dal flusso e invisibile, NON display:none: PayPal deve
   poter disegnare dopo, e a quel punto l'osservatore rimette la riga.
   Il !important e' contro il min-height inline dell'SDK. */
.fm-buybox .fm-buyrow .ppcp-messages.is-vuoto,
.fm-buybox .fm-buyrow .scalapay-widget-area-product.is-vuoto{position:absolute;inset-inline:0;visibility:hidden;pointer-events:none;min-height:0!important}
/* Prodotti variabili: la tabella delle varianti e' una riga intera; il blocco
   della variante scelta (prezzo + quantita' + CTA) occupa il resto della riga
   accanto al cuore invece di stringersi sul proprio contenuto. */
.fm-buybox form.cart>table.variations{flex:1 0 100%}
.fm-buybox form.cart>.single_variation_wrap{flex:1 1 auto;min-width:0}
/* `display:contents` e non un box: quando il prodotto ha una sola unita' Woo
   stampa la quantita' come input hidden, e un contenitore vuoto lascerebbe
   comunque il suo `gap` — un buco di 12px prima della CTA. */
.fm-buybox form.cart .quantity{display:contents}
.fm-qty{display:flex;align-items:center;flex:0 0 auto;height:var(--control-lg);border:var(--border-thin) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden}
.fm-qty__btn{align-items:center;justify-content:center;width:var(--touch-min);height:100%;padding:0;background:none;border:0;color:var(--text-body);cursor:pointer}
@media(hover:hover){.fm-qty__btn:hover{color:var(--text-strong)}}
.fm-qty__btn:active{transform:scale(var(--press-scale,.97))}
.fm-qty__btn[disabled]{opacity:var(--press-opacity);cursor:default}
/* L'input resta quello di Woo (min/max/step veri): qui perde solo la cornice,
   che ora e' del gruppo. */
.fm-buybox .quantity .fm-qty input[type=number]{flex:0 0 var(--space-6);width:var(--space-6);height:100%;padding:0;text-align:center;border:0;background:none;color:var(--text-strong);font-family:var(--font-mono);font-weight:var(--fw-bold);-moz-appearance:textfield;appearance:textfield}
.fm-buybox .quantity .fm-qty input[type=number]::-webkit-outer-spin-button,
.fm-buybox .quantity .fm-qty input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Senza JS i due bottoni non farebbero niente: si mostrano solo se il JS c'e'
   (la classe fm-js la mette inc/wishlist.php sulla root, come per il cuore).
   In quel caso resta l'input, con la sua cornice di sempre. */
.fm-qty__btn{display:none}
.fm-js .fm-qty__btn{display:flex}
.fm-buybox .quantity input[type=number]{flex:0 0 auto;height:var(--control-lg);width:84px;text-align:center;border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-strong);font-family:var(--font-mono)}
/* Tre classi e non due: la regola generica sui bottoni Woo in fondo al file
   (`.woocommerce button.button`) e' (0,2,1) e vinceva su (0,2,0), tenendo la
   CTA a --control-md mentre stepper e cuore stanno a --control-lg: la riga
   risultava disallineata. */
.fm-buybox form.cart .single_add_to_cart_button{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex:1 1 auto;min-width:0;height:var(--control-lg);min-height:var(--control-lg);padding-inline:var(--space-4);background:var(--grad-flash);color:#fff;border:none;border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-md)}
.fm-buybox form.cart .single_add_to_cart_button .fm-ico{flex:none}
@media(hover:hover){.fm-buybox form.cart .single_add_to_cart_button:hover{transform:translateY(-2px);box-shadow:var(--glow-flash)}}
.fm-buybox .variations select,.fm-buybox .fm-config select{height:var(--control-md);width:100%;border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-strong);padding:0 var(--space-3)}
/* Le quattro promesse: righe nude dentro un riquadro con due soli filetti. */
.fm-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:0;padding-block:var(--space-4);border-block:1px solid var(--border-subtle)}
.fm-feature{display:flex;gap:var(--space-3);align-items:center;padding:0;border:0;background:none}
.fm-feature__ico{flex:0 0 var(--control-sm);width:var(--control-sm);height:var(--control-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--accent-soft)}
.fm-feature .fm-ico{color:var(--accent)}
.fm-feature b{display:block;font-family:var(--font-display);font-size:var(--text-xs);line-height:var(--leading-snug);color:var(--text-strong)}
.fm-feature__text>span{font-size:var(--text-2xs);color:var(--text-secondary)}

/* Bottone WhatsApp: i due colori sono i letterali del marchio WhatsApp presi
   dalla tavola (rgba(37,211,102,.12) e #1DA851). Nessun token del design
   system li copre — --success e' un altro verde — e un colore di marca non si
   approssima: sono l'unica eccezione hard-coded di questo blocco, da riportare
   a monte se il design vuole tokenizzarli. */
.fm-wa{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);min-height:var(--control-md);border-radius:var(--radius-md);background:rgba(37,211,102,.12);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);color:#1DA851;text-decoration:none}
.fm-wa .fm-ico{flex:none}
@media(hover:hover){.fm-wa:hover{background:rgba(37,211,102,.2)}}
.fm-wa:active{transform:scale(var(--press-scale,.97))}

/* Le due testimonianze: stessa card della home (.fm-review in patterns.css),
   affiancate. Sotto --bp-tablet si impilano. */
.fm-pdp-reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.fm-pdp-reviews .fm-review{padding:var(--space-3)}
.fm-pdp-reviews .fm-review p{margin:var(--space-2) 0 var(--space-1);font-size:var(--text-xs)}
.fm-pdp-reviews .fm-review__stars{margin-bottom:0}
.fm-pdp-reviews .fm-review__author{font-size:var(--text-2xs)}
.fm-pdp-reviews .fm-review__product{font-size:var(--text-2xs)}

/* Ultima riga della colonna: codice e categorie in mono, tono minore.
   --text-muted qui sarebbe sotto i 4,5:1 sulla banda --a: stessa medicina
   gia' applicata allo SKU piu' sotto nel file. */
.fm-pdp__code{margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-3xs);line-height:var(--leading-normal);color:var(--text-body)}

/* Tabs Descrizione / Informazioni aggiuntive.
   Le linguette non attive restavano il pannello grigio chiaro di Woo con testo
   #515151: in tema scuro, riquadro chiaro con testo scuro appoggiato sulla
   pagina scura. Le regole di Woo sono `.woocommerce div.product .woocommerce-tabs
   ul.tabs li` — (0,4,3) — e il body porta sia `.woocommerce` sia `.product`,
   quindi si applicano: qui si pareggia la specificita' con `div.fm-pdp__tabs`
   e vince il nostro foglio, che si accoda dopo woocommerce.css. */
/* La striscia porta il filetto per tutta la larghezza dello shell (il kit:
   `borderBottom:1px solid var(--border-subtle)` sul contenitore dei tab) e le
   linguette stanno a un passo minimo l'una dall'altra: gap --space-1 (4px nel
   kit), padding --space-3/--space-4 (12px 16px). */
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:var(--space-1);list-style:none;margin:0;padding:0;overflow:visible;border:none;border-bottom:var(--border-hair) solid var(--border-subtle)}
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs::before,
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li::before,
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li::after{content:none;display:none}
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li{background:none;background-color:transparent;border:none;border-radius:0;box-shadow:none;margin:0;padding:0;color:inherit}
/* Inattiva --text-secondary, attiva --text-strong: prima erano lo stesso
   colore e non si capiva quale scheda fosse aperta. Peso --fw-semibold come
   nel kit. L'inattiva era --text-muted e misurava **4,00:1** sulla banda in
   scuro (15px peso 600, soglia 4,5): e' il nome di una scheda, cioe' un
   controllo, non una decorazione. Con --text-secondary sta a 5,59:1. */
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li a{position:relative;display:block;padding:var(--space-3) var(--space-4);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-sm);color:var(--text-secondary);text-decoration:none}
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li.active{background:none;background-color:transparent}
/* Attiva: filetto sfumato sotto. Nel kit e' uno <span> assoluto alto 3px con
   --radius-pill, rientrato di 10px per lato e a `bottom:-1px`, cioe' sopra il
   filetto della striscia; qui e' un ::after sul link, che ha lo stesso box.
   `3px`, `10px` e `-1px` sono LETTERALI del kit: nei token non esiste una
   misura di filetto (prima era --space-1, 4px a spigolo vivo e largo quanto
   tutta l'etichetta). */
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li a::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:var(--radius-pill);background:transparent}
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li.active a{color:var(--text-strong)}
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li.active a::after{background:var(--grad-flash)}
@media(hover:hover){
  .fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li a:hover{color:var(--text-body)}
  .fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li.active a:hover{color:var(--text-strong)}
}
/* Touch (§6.5): la linguetta e' l'unico bersaglio della riga. */
@media(max-width:767.98px){ /* --bp-tablet */
  .fm-pdp div.fm-pdp__tabs .woocommerce-tabs ul.tabs li a{display:flex;align-items:center;min-height:var(--touch-min);padding-block:0}
}
/* Misura di riga del pannello: nel kit i due pannelli stanno in 820px e non
   nei 1184 dello shell, con 32px sopra e 48px sotto (i 48 li mette gia' la
   banda). `820px` e' un LETTERALE del kit (pdp.jsx: `maxWidth: 820`). */
/* Il pannello va a tutta larghezza, ma la MISURA DI RIGA resta: gli 820px del
   kit servono al testo, che oltre quella larghezza si legge male, non alle
   tabelle a due colonne — dove lasciavano un vuoto largo un terzo dello shell
   (segnalato dal cliente il 2026-09-13). Quindi il limite passa dal pannello
   ai suoi figli di testo, e le tabelle si prendono tutta la riga. */
.fm-pdp div.fm-pdp__tabs .woocommerce-tabs .woocommerce-Tabs-panel{max-width:none;margin:var(--space-6) 0 0}
.fm-pdp div.fm-pdp__tabs .woocommerce-Tabs-panel>p,
.fm-pdp div.fm-pdp__tabs .woocommerce-Tabs-panel>ul,
.fm-pdp div.fm-pdp__tabs .woocommerce-Tabs-panel>ol,
.fm-pdp div.fm-pdp__tabs .woocommerce-Tabs-panel>h2,
.fm-pdp div.fm-pdp__tabs .woocommerce-Tabs-panel>h3,
.fm-pdp div.fm-pdp__tabs .woocommerce-Tabs-panel>h4{max-width:820px}

/* Tabella specifiche: nel kit e' un box con filetto e raggio, righe alterne
   --surface-sunken / --surface-card, etichetta su colonna fissa in font di
   testo e valore in --font-spec.
   L'alternanza di serie di WooCommerce e' `rgba(0,0,0,.024)` hard-coded:
   sopra --ink-950 non si vede, quindi in tema scuro le righe alterne
   sparivano del tutto. LETTERALI del kit: colonna etichetta `200px`, padding
   di riga orizzontale `18px`, box `820px`. */
.fm-pdp .fm-pdp__tabs table.shop_attributes{width:100%;max-width:none;margin:0;border-collapse:separate;border-spacing:0;border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;font-size:var(--text-sm)}
.fm-pdp .fm-pdp__tabs table.shop_attributes th,
.fm-pdp .fm-pdp__tabs table.shop_attributes td{padding:var(--space-3) 18px;border:0;vertical-align:top;background:var(--surface-card)}
/* Il colore dell'etichetta non e' qui: --text-muted del kit non regge i
   4,5:1 e resta --text-body, vedi la regola "Contrasto della riga meta" in
   fondo al file. */
.fm-pdp .fm-pdp__tabs table.shop_attributes th{width:200px;text-align:left;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:normal;text-transform:none}
/* I valori uscivano in corsivo (default Woo) e spesso rosa, perche' sono link
   all'archivio dell'attributo: nella tavola sono testo. */
.fm-pdp .fm-pdp__tabs table.shop_attributes td{font-family:var(--font-spec);font-weight:var(--fw-semibold);font-style:normal;color:var(--text-strong)}
.fm-pdp .fm-pdp__tabs table.shop_attributes td a{color:inherit;text-decoration:none}
@media(hover:hover){.fm-pdp .fm-pdp__tabs table.shop_attributes td a:hover{color:var(--accent-text)}}
.fm-pdp .fm-pdp__tabs table.shop_attributes tr:nth-child(even) th,
.fm-pdp .fm-pdp__tabs table.shop_attributes tr:nth-child(even) td{background:var(--surface-sunken)}
.fm-pdp .fm-pdp__tabs table.shop_attributes td p{margin:0;padding:0}
/* Sotto --bp-tablet la riga impila: etichetta sopra, valore sotto a 2px (il
   `gap: 2` del kit). La striscia resta sulla coppia, non sulla mezza riga. */
@media(max-width:767.98px){ /* --bp-tablet */
  .fm-pdp .fm-pdp__tabs table.shop_attributes th,
  .fm-pdp .fm-pdp__tabs table.shop_attributes td{display:block;width:auto}
  .fm-pdp .fm-pdp__tabs table.shop_attributes th{padding-bottom:0}
  .fm-pdp .fm-pdp__tabs table.shop_attributes td{padding-top:2px}
}
/* Tabella specifiche dentro il tab Descrizione.
   Non e' la `shop_attributes` di Woo: e' una <table> incollata a mano nella
   scheda, e ce l'hanno 2.521 prodotti su 2.741. Finora non aveva **nessuna
   regola**: usciva con la tabella di default del browser — celle senza
   padding, colonne larghe quanto il contenuto — e la forma la decidevano le
   larghezze scritte inline, diverse prodotto per prodotto. Quelle ora le
   toglie `fm_strip_inline_paint()` in `inc/woocommerce.php`; la forma la da'
   qui il tema, uguale per tutti e uguale a "Informazioni aggiuntive".
   LETTERALI del kit, gli stessi gia' usati per la shop_attributes qui sopra:
   box `820px`, colonna etichetta `200px`, padding di riga orizzontale `18px`.
   `table-layout:fixed` e' cio' che tiene i valori lunghi nella loro cella
   invece di lasciarli allargare la colonna: sul DOPE le righe "Processore" e
   "Periferiche" portano piu' valori su piu' righe. */
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table{width:100%;max-width:none;margin:0 0 var(--space-5);table-layout:fixed;border-collapse:separate;border-spacing:0;border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;font-size:var(--text-sm);line-height:var(--leading-normal)}
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table th,
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table td{padding:var(--space-3) 18px;border:0;background:var(--surface-card);vertical-align:top;text-align:left;font-size:var(--text-sm);line-height:var(--leading-normal);overflow-wrap:break-word}
/* L'etichetta e' la **prima cella della riga**, non il `<th>`: nel contenuto
   reale il `<th>` compare anche in colonna valore (la riga "GPU dedicata" del
   MacBook Air M3 e' `<td>Etichetta</td><th>N/D</th>`), e legare lo stile al
   tag darebbe due righe di forma diversa nella stessa tabella. */
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table tr>:first-child{width:200px;font-family:var(--font-body);font-weight:var(--fw-semibold);color:var(--text-body);text-transform:none;letter-spacing:normal}
/* Meta' catalogo scrive l'etichetta dentro <strong> (700) e l'altra meta' no
   (600): stessa tabella, due pesi. Nella colonna etichetta il grassetto e'
   vernice, non significato, e viene pareggiato. Nella colonna valore no: li'
   il <b> distingue il dato dalla nota. */
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table tr>:first-child b,
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table tr>:first-child strong{font-weight:var(--fw-semibold)}
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table tr>*+*{font-family:var(--font-spec);font-weight:var(--fw-semibold);color:var(--text-strong)}
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table tr:nth-child(even)>*{background:var(--surface-sunken)}
/* Dentro le celle il contenuto incollato porta <p>, <div> e liste: wpautop
   aggiunge un <p> a ogni riga vuota, e con i margini di serie la stessa riga
   diventava alta il doppio su un prodotto e non sull'altro. */
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table p,
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table div,
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table ul,
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table ol{margin:0;padding:0}
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table p+p{margin-top:var(--space-2)}
.fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table li{margin-left:var(--space-4)}
/* Sotto --bp-tablet la riga impila come nella shop_attributes: etichetta
   sopra, valore sotto a 2px (il `gap: 2` del kit). Con la colonna etichetta a
   200px una tabella a due colonne lascerebbe al valore meno di 100px a 390. */
@media(max-width:767.98px){ /* --bp-tablet */
  .fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table th,
  .fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table td{display:block;width:auto}
  .fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table tr>:first-child{width:auto;padding-bottom:0}
  .fm-pdp .fm-pdp__tabs .woocommerce-Tabs-panel--description table tr>*+*{padding-top:2px}
}
/* Colori inline che arrivano dall'HTML incollato nella scheda prodotto (es.
   `style="color:#333333"`): in tema scuro rendono grigio scuro su fondo scuro,
   1,7:1, sotto qualunque soglia. Si neutralizzano solo in dark e solo dentro i
   tab, senza toccare il contenuto. Uno stile inline si batte solo con
   !important: e' la stessa eccezione delle altre regole contro markup non
   nostro (§3). */
body.theme-dark .fm-pdp__tabs [style*="color"]{color:var(--text-body)!important}

/* Buy bar sticky.
   Da --bp-tablet in su e' la mini bar che scende da sotto l'header: a riposo
   NON si vede. `translateY(-100%)` da solo non basta a nasconderla, perche'
   `top` vale --header-offset (l'altezza dell'header sticky) e alzarla di una
   sua altezza la lascia comunque dentro la viewport: e' l'opacita' a
   nasconderla, come nel kit, e visibility toglie anche il bersaglio. */
/* Impilamento, misurato il 2026-09-21: la barra sta FUORI di .fm-header, che e'
   sticky con --z-header (10) e percio' un contesto di impilamento chiuso — il
   mega menu (--z-dropdown, 20) e' un 20 *dentro* quel 10 e non ne esce mai.
   Con --z-sticky (30) la barra vinceva sempre e copriva le voci del menu
   aperto. Alzare il dropdown non serve; la barra scende un gradino sotto
   l'header: sopra il contenuto (badge e frecce dei rail arrivano a 2), sotto
   tutto cio' che l'header contiene. Stesso valore per la bolla della chat
   (chrome.css). Il calc() sul token e' l'idioma previsto dai token stessi. */
.fm-buybar{position:fixed;left:0;right:0;z-index:calc(var(--z-header) - 1);background:var(--surface-card);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-md);top:var(--header-offset);transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform var(--dur-slow,.28s) var(--ease-out,ease),opacity var(--dur-slow,.28s) var(--ease-out,ease),visibility 0s linear var(--dur-slow,.28s)}
.fm-buybar.is-visible{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.fm-buybar__inner{display:flex;align-items:center;gap:var(--space-4);max-width:calc(var(--content-pdp) + 2 * var(--gutter-shell));margin-inline:auto;padding:var(--space-3) var(--gutter-shell);min-height:var(--cta-bar-height)}
.fm-buybar__title{flex:1 1 auto;min-width:0;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-buybar__prices{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:var(--leading-snug)}
.fm-buybar__price{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--text-lg);color:var(--text-strong);white-space:nowrap}
.fm-buybar__rate{display:none;font-size:var(--text-2xs);color:var(--text-muted);white-space:nowrap}
/* La riga della barra e' --text-muted (4,43:1 chiaro, 4,20:1 scuro): il pezzo
   in grassetto sale da solo a --text-body, come deciso — non si ingrassa e
   basta un colore che non regge. */
.fm-buybar__rate .fm-installment__cifra{color:var(--text-body)}
.fm-buybar__cta{flex:0 0 auto}
@media(max-width:767.98px){ /* --bp-tablet */
  /* Sotto la soglia la barra e' ancorata in basso ed e' SEMPRE presente: e' la
     CTA raggiungibile col pollice, non una comparsa allo scorrimento. La
     pagina si riserva lo spazio in fondo, quindi non copre mai il contenuto. */
  .fm-buybar{top:auto;bottom:0;border-bottom:none;border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);transform:none;opacity:1;visibility:visible;padding-bottom:var(--safe-area-bottom)}
  .fm-buybar__inner{gap:var(--space-3);padding:0 var(--touch-inset);height:var(--cta-bar-height)}
  .fm-buybar__title{display:none}
  .fm-buybar__rate{display:block}
  .fm-buybar__cta{flex:1 1 auto;min-width:0}
  body.single-product{padding-bottom:calc(var(--cta-bar-height) + var(--safe-area-bottom))}
}

/* --- Mini-cart drawer (blocco Woo) -------------------------------------
   Riferimento: CartDrawer del kit (design/ui_kits/storefront/pdp.jsx 608-655).
   Il markup e' quello del blocco Mini-Cart: qui si stila, non si riscrive (§7).

   Il selettore precedente era `.wc-block-mini-cart__drawer .wc-block-components-drawer`,
   cioe' un DISCENDENTE. Nel DOM reale le due classi stanno sullo STESSO
   elemento (`class="wc-block-mini-cart__drawer wc-block-components-drawer is-mobile"`):
   la regola non ha mai fatto nulla e con lei tutto il blocco. Va scritto
   attaccato. Misure e superficie sono le stesse di `.fm-panel__sheet` in
   base.css — il drawer e' lo stesso idioma, non una forma nuova.
   `--fm-cart-thumb` e' la piastra foto della riga: 60px della tavola, che nei
   token non esiste, composta sulla griglia da 4px (56 + 4). */
.wc-block-mini-cart__drawer.wc-block-components-drawer{
  --fm-cart-thumb:calc(var(--control-lg) + var(--space-1));
  width:min(420px,92vw);
  background:var(--surface-card);
  box-shadow:var(--shadow-xl);
}
/* Lo scrim non e' ne' figlio ne' fratello del pannello: e' il suo GENITORE,
   quindi si prende da solo. Il grigio di serie di Woo (rgba(95,95,95,.35)) e'
   fuori palette; il valore della tavola e' --ink-950 al 50%, lo stesso di
   `.fm-panel__scrim`. Nei token non c'e' un colore di scrim: si compone dal
   nero della palette con color-mix, come fanno gia' i token stessi
   (--surface-glow). */
.wc-block-components-drawer__screen-overlay{
  background-color:color-mix(in srgb,var(--ink-950) 50%,transparent);
}
/* Il fondo del pannello lo scrive WooCommerce INLINE su
   `.wp-block-woocommerce-mini-cart-contents` (`data-wp-style--background-color`,
   calcolato in mini-cart.js copiando il background-color del <body>): in chiaro
   esce lavanda (--ink-50), in scuro --ink-950. Uno stile inline si batte solo
   con !important — stessa eccezione gia' documentata altrove in questo file
   contro il CSS e il markup dei blocchi Woo. */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents{
  background-color:var(--surface-card)!important;
}

/* Il contenitore dei notice non e' mai `:empty` (contiene spazi bianchi),
   quindi i suoi `margin:16px 48px -16px 16px` staccavano la testata dal bordo
   alto del pannello anche senza nessun notice. Lo spazio passa al notice
   vero: senza notice la testata e' a filo. */
body .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents .wc-block-components-notices{margin:0}
body .wc-block-mini-cart__drawer .wc-block-components-notices .wc-block-components-notices__notice{margin:var(--space-4) var(--space-4) 0}

/* Testata: titolo alla misura della tavola e filetto sotto. Woo separa titolo
   e lista con `mask-image` piu' margini negativi (la lista sfuma sotto il
   titolo): qui la separazione la fa il filetto, quindi la maschera va tolta o
   il titolo appare mangiato in basso. */
body .wc-block-mini-cart__drawer h2.wc-block-mini-cart__title{
  display:flex;
  align-items:center;
  margin:0;
  padding:var(--space-5);
  padding-right:calc(var(--space-5) + var(--control-md));
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-xl);
  line-height:var(--leading-snug);
  color:var(--text-strong);
  background:var(--surface-card);
  border-bottom:1px solid var(--border-subtle);
  mask-image:none;
  -webkit-mask-image:none;
}
/* La tavola ha il titolo secco. Il contatore "(articoli: 1)" mandava la riga
   su tre righe a 390: si nasconde da CSS, non dall'editor (§4). */
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block{display:none}
/* Chiudi: era 54x54 con `margin:-1em`, cioe' 3px SOPRA il bordo del pannello.
   Torna dentro e alla misura dei controlli. `padding` e `color` di Woo sono
   !important: qui serve rispondergli. */
body .wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close{
  display:flex;
  align-items:center;
  justify-content:center;
  top:var(--space-4);
  right:var(--space-4);
  width:var(--control-md);
  height:var(--control-md);
  margin:0;
  padding:0!important;
  border-radius:var(--radius-md);
  color:var(--text-body)!important;
  opacity:1;
}
@media(hover:hover){
  body .wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:hover{background:var(--surface-sunken)!important;color:var(--text-strong)!important}
}

/* La lista sta 18px dal bordo mentre testata e piede stanno a --space-5: la
   pill "Risparmia", che si allinea al bordo destro della riga, sporgeva di
   qualche pixel rispetto alla colonna del titolo. Un solo rientro per tutti. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__items{padding-inline:var(--space-5)}
/* La tabella aggiunge i 2px di `border-spacing` di serie, che sommati al
   rientro spostavano di nuovo la riga rispetto a testata e piede. */
.wc-block-mini-cart__drawer table.wc-block-mini-cart-items{border-collapse:collapse}

/* Riga prodotto. Woo rende la tabella come griglia `80px 132px`: si riscrivono
   le colonne, non il markup. Il prefisso `body` serve a superare la (0,3,1) di
   mini-cart-contents.css senza !important. */
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-items__row{
  grid-template-columns:var(--fm-cart-thumb) minmax(0,1fr) auto;
  gap:var(--space-3);
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--border-subtle);
}
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-items__row:last-child{border-bottom:none}
/* Piastra foto: le foto prodotto restano su bianco anche in dark (§1.5).
   `object-fit:contain` con un filo di padding: prima era `fill` su una cella
   80x126 trasparente, cioe' l'immagine stirata. */
/* Due regole di Woo vanno superate per avere la piastra:
   `.is-mobile table.wc-block-cart-items td{padding:0}` piu'
   `... .wc-block-cart-item__image{padding-right:16px}` (0,4,1) — si pareggia
   con la classe della riga in piu' (0,4,3), senza !important; e
   `table.wc-block-cart-items td{background:none!important}`, che invece si
   batte solo rispondendogli. */
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image{
  box-sizing:border-box;
  width:var(--fm-cart-thumb);
  height:var(--fm-cart-thumb);
  padding:var(--space-1);
  border-radius:var(--radius-sm);
  background:var(--surface-photo)!important;
  overflow:hidden;
}
body .wc-block-mini-cart__drawer .wc-block-cart-item__image a{display:block;width:100%;height:100%}
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-item__image img{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Il nome usciva 500/13px: e' il blocco che lo sovrascrive con (0,3,1). */
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-components-product-name{
  max-width:100%;
  font-family:var(--font-display);
  font-weight:var(--fw-semibold);
  font-size:var(--text-sm);
  line-height:var(--leading-snug);
  color:var(--text-strong);
  text-decoration:none;
}
/* L'estratto della descrizione e' rumore che la tavola non prevede. Prezzo
   barrato, badge "Risparmia" e stepper restano: sono valore commerciale. */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description{display:none}
.wc-block-mini-cart__drawer .wc-block-components-product-price{font-family:var(--font-mono)}
.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-product-price{color:var(--text-strong)}
/* Lo stepper era alto 27px, sotto i 44 del §6.5, e i suoi bottoni uscivano in
   Arial (font-family di serie del blocco) con un "+" a larghezza piena. */
body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector{
  width:auto;
  max-width:100%;
  height:var(--touch-min);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
}
body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  flex:0 0 auto;
  width:var(--control-sm);
  min-width:0;
  height:var(--touch-min);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--text-strong);
}
body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{
  flex:0 0 auto;
  min-width:var(--touch-min);
  height:var(--touch-min);
  font-family:var(--font-body);
  font-size:var(--text-md);
  color:var(--text-body);
  opacity:1;
}
/* Un controllo disabilitato e' esente dalla soglia di contrasto: il segnale
   torna a essere il colore, non un'opacita' che sbiadisce anche il bordo. */
body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled{color:var(--text-muted)}
/* Stepper e cestino sulla stessa riga, per decisione e non per fortuna.
   Woo tiene la cella a `flex-wrap:wrap` e la larghezza gliela da' la colonna
   della tabella: misurato, la cella e' 178px e il contenuto ne chiede
   esattamente 178 — **zero** pixel di margine. Finche' i conti tornano al
   pixel il cestino resta in linea; basta un arrotondamento diverso su una riga
   sola — un prezzo piu' largo, una metrica di font, la barra di scorrimento —
   e quella riga sola manda il cestino a capo, mentre le altre no. E' il difetto
   segnalato: due articoli, il primo allineato e il secondo no.
   Con `nowrap` la larghezza che serve diventa la larghezza **minima** della
   colonna, e la tabella e' obbligata a dargliela (la toglie al nome, che e' gia'
   troncato a due righe). Gli elementi non si comprimono, altrimenti la tabella
   rientrerebbe dalla finestra. */
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{flex-wrap:nowrap;gap:var(--space-2);padding-right:0}
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity>*{flex:0 0 auto}
/* Il cestino era 24px, sotto i 44 del §6.5. Woo lo tiene a `display:inline` e
   `height:24px` con (0,4,1): serve una classe in piu'. */
body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--touch-min);
  height:var(--touch-min);
  color:var(--text-body);
}

/* A 390 la colonna del prodotto si stringe quando la riga porta anche la pill
   "Risparmia": in quella riga il cestino andava a capo, nelle altre no, e le
   due righe risultavano allineate in modo diverso. Sotto --bp-tablet il
   cestino sta sempre sulla riga sotto lo stepper, allineato a destra come il
   resto della colonna: un allineamento solo, indipendente dal badge. */
@media(max-width:767.98px){ /* --bp-tablet */
  body .wc-block-mini-cart__drawer table.wc-block-mini-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{
    display:grid;
    grid-template-columns:max-content;
    justify-content:start;
    gap:var(--touch-gap);
  }
}

/* Piede: totale con etichetta in corpo 600 e importo in mono 700 --text-2xl. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer{
  padding:var(--space-5);
  border-top:1px solid var(--border-subtle);
  background:var(--surface-card);
}
body .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal{
  align-items:baseline;
  margin-bottom:var(--space-4);
}
.wc-block-mini-cart__footer .wc-block-components-totals-item__label{
  font-family:var(--font-body);
  font-weight:var(--fw-semibold);
  font-size:var(--text-md);
  color:var(--text-body);
}
.wc-block-mini-cart__footer .wc-block-components-totals-item__value{
  font-family:var(--font-mono);
  font-weight:var(--fw-bold);
  font-size:var(--text-2xl);
  color:var(--text-strong);
}
/* La riga fiscale resta — e' informazione dovuta — ma scende a fine print. */
body .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description{
  width:100%;
  margin-top:var(--space-1);
  font-family:var(--font-body);
  font-weight:var(--fw-regular);
  font-size:var(--text-2xs);
  color:var(--text-body);
}
/* Woo rende due bottoni: si tengono entrambi, ma gerarchizzati. Il checkout
   resta il primario a gradiente alto --control-lg; "Visualizza il mio
   carrello" scende a ghost. La colonna segue l'ordine del DOM, quindi ordine
   visivo e ordine di tabulazione restano gli stessi. */
body .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions{
  flex-direction:column;
  gap:var(--space-3);
}
body .wc-block-mini-cart__footer a.wc-block-components-button.wc-block-mini-cart__footer-cart.is-style-outline,
body .wc-block-mini-cart__footer a.wc-block-mini-cart__footer-cart{
  min-height:var(--control-md);
  padding:0;
  border:none;
  box-shadow:none;
  background:none;
  background-color:transparent;
  color:var(--text-body)!important;
  font-family:var(--font-display);
  font-weight:var(--fw-semibold);
  font-size:var(--text-sm);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media(hover:hover){
  body .wc-block-mini-cart__footer a.wc-block-components-button.wc-block-mini-cart__footer-cart.is-style-outline:hover,
  body .wc-block-mini-cart__footer a.wc-block-mini-cart__footer-cart:hover{background:none;background-color:transparent;box-shadow:none;color:var(--text-strong)!important}
}
body .wc-block-mini-cart__footer a.wc-block-mini-cart__footer-checkout{
  width:100%;
  min-height:var(--control-lg);
  border:none!important;
  border-radius:var(--radius-lg)!important;
  background:var(--grad-surge)!important;
  color:var(--on-accent)!important;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-md);
}

/* Stato vuoto del drawer: stesso idioma del carrello pagina (`.fm-empty`),
   icona muta piu' messaggio breve. L'icona la inserisce `inc/woocommerce.php`
   nel render del blocco, perche' nel markup di Woo non ce n'e' nessuna. */
/* Con la testata rimessa (la inserisce `inc/woocommerce.php`), il blocco vuoto
   non puo' piu' centrare tutto: il titolo sta in alto come nello stato pieno e
   l'icona col messaggio si centra nello spazio che resta. */
body .wc-block-mini-cart__drawer .wp-block-woocommerce-empty-mini-cart-contents-block{justify-content:flex-start}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper{
  margin-block:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-8) var(--space-5);
  text-align:center;
  color:var(--text-body);
}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper .fm-ico{color:var(--border-strong)}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper p{margin:0;font-size:var(--text-md)}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper p strong{font-weight:var(--fw-regular)}
body .wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a{
  min-height:var(--control-md);
  padding:0 var(--space-5);
  border:none;
  border-radius:var(--radius-lg);
  background:var(--grad-flash);
  color:var(--on-accent);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-sm);
}
@media(hover:hover){
  body .wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a:hover{background:var(--grad-flash);border-color:transparent;color:var(--on-accent);box-shadow:var(--glow-flash)}
}

/* --- Prodotti correlati -------------------------------------------------
   NESSUNA regola di griglia propria, ed e' la correzione del 2026-09-20: le
   card dei correlati devono essere IDENTICHE a quelle del catalogo, non una
   variante. Qui c'era `grid-template-columns` con `--rail-card-min` (240)
   invece di `--card-min`, e bastava quella a farle uscire 278px contro 301 —
   una divergenza che poi si portava dietro il bottone. Card, filetto, fondo e
   bottone erano gia' identici in tutti e due i temi: l'unica cosa che
   divergeva era la griglia, e si toglie invece di compensarla. */

@media(max-width:1023.98px){
  .fm-catalogue{grid-template-columns:1fr}
  .fm-catalogue__side{position:static;display:none}
  .fm-filters-open{display:inline-flex}
  .fm-catalogue.is-filters-open .fm-catalogue__side{display:block}
  .fm-pdp__grid{grid-template-columns:1fr;gap:var(--space-6)}
  /* `relative` e non `static`: la colonna smette di essere sticky ma resta
     l'ancoraggio dei badge e del bottone zoom, che sono assoluti. */
  .fm-pdp__media{position:relative;top:auto}
}
@media(max-width:767.98px){ /* --bp-tablet */
  .wc-block-product-template.wc-block-product-template,.wp-block-post-template.is-flex-container{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-phone),1fr));gap:var(--space-4)}
  /* La griglia stringe il passo sul telefono, il rail no: nel kit la track
     tiene --space-5 a ogni larghezza (20px alla curva fluida di 390) e il
     peek della card successiva dipende da quel respiro. */
  .fm-rail .wc-block-product-template.wc-block-product-template{gap:var(--space-5)}
  /* Niente regola per i correlati nemmeno qui: senza l'eccezione di sopra
     prendono `--card-min-phone` come il catalogo, che a 390 fa gia' due
     colonne. L'eccezione serviva a rimediare all'eccezione. */
  /* Riga d'acquisto a 390: il campo quantita' scende alla larghezza di un
     bersaglio e la CTA prende il gradino di tipo sotto, cosi' l'etichetta sta
     su una riga sola invece di spezzarsi in due dentro il bottone. */
  .fm-buybox .quantity input[type=number]{width:var(--control-lg)}
  /* Dentro il gruppo −/1/+ il campo resta stretto: la cornice e i due
     bersagli sono del gruppo, l'input e' solo il numero. */
  .fm-buybox .quantity .fm-qty input[type=number]{width:var(--space-6)}
  .fm-pdp-reviews{grid-template-columns:1fr}
  .fm-buybox form.cart .single_add_to_cart_button{font-size:var(--text-sm);padding-inline:var(--space-3)}
  .fm-features{grid-template-columns:1fr}
}
@media(max-width:479.98px){ /* --bp-phone */
  /* Sotto --bp-phone la riga non tiene quantita' + CTA + cuore affiancati: la
     larghezza intrinseca del bottone e quella del cuore sommate sfondano di
     pochi pixel e il cuore scendeva da solo sotto la CTA. La CTA prende
     percio' la riga meno il cuore, cosi' va a capo INSIEME a lui: quantita'
     sopra, CTA e cuore sotto sulla stessa linea. */
  .fm-buybox form.cart .single_add_to_cart_button{flex-basis:calc(100% - var(--control-lg) - var(--space-3))}
}

/* --- Revisione visiva 2026-09-08 -------------------------------------- */

/* Il pannello filtri finche' e' vuoto non si mostra: lo toglie del tutto
   fm_hide_empty_filters() in inc/woocommerce.php, qui resta solo la rete di
   sicurezza per il contenitore senza figli. */
.fm-filters:empty{display:none}

/* Il foglio filtri e' un idioma mobile: da 768px in su non compare mai. */
@media(min-width:768px){
  .fm-filters.is-open,.fm-filters__sheet,.fm-filters__actions{display:none}
  /* Rete di sicurezza sulle classi del blocco Woo: sopra i 601px le nasconde
     gia' il plugin, ma il suo selettore e' in `:where()` e cede a chiunque. */
  .fm-filters .wc-block-product-filters__open-overlay,
  .fm-filters .wc-block-product-filters__overlay-header,
  .fm-filters .wc-block-product-filters__overlay-footer{display:none}
}

/* Sotto i 601px il blocco Woo passa da solo a foglio modale: bottone "Filtra
   prodotti" dentro la colonna, dialogo `fixed`, intestazione "Chiudi" e piede
   "Applica". Sono i pulsanti orfani rilevati in QA, e sono un secondo modo di
   aprire i filtri accanto a quello del tema (`.fm-filters-open` nella
   toolbar, che scopre `.fm-catalogue__side`). Qui il foglio del plugin viene
   riportato in linea a tutte le larghezze, cosi' l'idioma resta uno solo.
   Le regole di Woo sono in `:where()`, quindi non serve alzare la specificita'
   piu' di cosi'. */
/* Nessuna media query: il foglio modale di Woo non deve comparire a nessuna
   larghezza, quindi le regole valgono sempre. Evita anche un breakpoint fuori
   dalla lista ammessa dall'invariante 2. */
.fm-filters .wc-block-product-filters__open-overlay,
  .fm-filters .wc-block-product-filters__overlay-header,
  .fm-filters .wc-block-product-filters__overlay-footer{display:none}
  .fm-filters .wc-block-product-filters__overlay{position:relative;inset:auto;top:auto;pointer-events:auto;background:inherit;transition:none}
  .fm-filters .wc-block-product-filters__overlay-wrapper{width:auto;height:auto;background:inherit}
  .fm-filters .wc-block-product-filters__overlay-dialog{position:relative;inset:auto;transform:none;background:inherit;color:inherit;max-height:none}
  .fm-filters .wc-block-product-filters__overlay-content{overflow:visible;padding:0;background:inherit;color:inherit}
/* Woo appiattisce i gruppi a display:block nel suo foglio: il ritmo delle
   opzioni tornerebbe a zero. */
.fm-filters .wc-block-product-filters__overlay-content .wp-block-group{display:flex}

/* Touch target: l'etichetta e' la superficie cliccabile della casella. */
@media(max-width:767.98px){
  .fm-filters .wc-block-product-filter-checkbox-list__label{min-height:var(--touch-min)}
  .fm-filters .wc-block-product-filter-checkbox-list__items{gap:var(--touch-gap)}
  /* Anche la "x" che toglie un chip e' un bersaglio, non una decorazione. */
  .fm-filters .wc-block-product-filter-removable-chips__remove{
    min-width:var(--touch-min);min-height:var(--touch-min);
    display:inline-flex;align-items:center;justify-content:center;
  }
  .fm-filters .wc-block-product-filter-removable-chips__item{gap:var(--touch-gap)}
  /* "Azzera" e' un testo alto 17px: il bersaglio sale a --touch-min con del
     padding, l'aspetto resta quello. */
  .fm-filters .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link{
    min-height:var(--touch-min);padding-inline:var(--space-3);
  }
}

/* Il maiuscolo del breadcrumb era stato tolto qui perche' il titolo del
   prodotto, intero, occupava tre righe. La tavola risolve lo stesso problema
   troncando le voci a 28 caratteri (`fm_breadcrumb_chars` in
   inc/woocommerce.php): con il troncamento il maiuscolo del kit torna
   sostenibile, e la regola che lo annullava e' stata rimossa. */

/* Disponibilita' stampata due volte: una nella riga meta e una dal blocco
   add-to-cart-form. Il <p class="stock"> e' fratello del form, non dentro:
   si tiene quella della riga meta, che e' nel design. */
.fm-buybox .wp-block-add-to-cart-form > p.stock,
.fm-buybox .wp-block-add-to-cart-form > .stock{display:none}

/* Senza filtri configurati la colonna laterale non deve restare prenotata:
   la classe la mette fm_hide_empty_filters() in inc/woocommerce.php. */
.fm-catalogue--nofilters{grid-template-columns:minmax(0,1fr)}
.fm-catalogue--nofilters .fm-catalogue__side{display:none}

/* "IVA Incl." e' un'impostazione del negozio, non del design: resta fine print
   muto accanto al prezzo, e non va mai a capo — quando andava a capo aggiungeva
   una riga alla sola card che lo mostrava, disallineando i blocchi prezzo.
   Quali card lo mostrano lo decide fm_price_suffix_mode() in inc/woocommerce.php:
   o tutte o nessuna. */
.woocommerce-price-suffix{font-family:var(--font-mono);font-size:var(--text-3xs);font-weight:var(--fw-regular);color:var(--text-muted);margin-left:.35em;white-space:nowrap}

/* Configuratore PC — plugin flashmac-configurator, prefisso fmc2-.
   Il plugin NON si tocca: qui si veste il suo markup con la forma del box
   "Personalizza il tuo PC" della tavola — cornice --border-subtle, --radius-lg,
   --shadow-xs, righe alte --touch-min separate da un filetto.
   La POSIZIONE nella colonna non e' CSS: il box viene ri-agganciato a
   `woocommerce_before_add_to_cart_quantity` in inc/woocommerce.php, cosi' cade
   fra la tile del finanziamento e la riga quantita' + CTA come nel kit,
   restando dentro `form.cart` (le select devono viaggiare col POST).
   Dalla 1.1.3 il plugin espone tre agganci per l'intestazione
   (`fmc2_icona_box`, `fmc2_titolo_box`, `fmc2_slot_intestazione`): l'icona
   `cpu` e lo stato della configurazione arrivano da li', via
   inc/woocommerce.php. Qui restano solo colore e corpo.
   NB: woocommerce-tm-extra-product-options e' dismesso, non va riattivato. */
/* Le select della buy box (varianti Woo) restano controlli con cornice. Quella
   del configuratore no: nel kit la riga di gruppo mostra il valore corrente
   come testo, con un chevron accanto, senza chrome — percio' e' esclusa qui e
   vestita nel blocco della riga, piu' sotto. */
.fm-buybox select:not(.fmc2-select),
.fm-buybox .variations select{
  width:100%;
  min-height:var(--control-md);
  padding:0 var(--space-6) 0 var(--space-3);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  background-color:var(--surface-card);
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-md);
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
/* La select del configuratore e' il valore corrente della riga di gruppo:
   testo a destra, non un controllo con cornice. `width:auto` la fa
   dimensionare al suo contenuto invece che alla riga intera; `text-align`
   (con `text-align-last` per i motori che leggono solo quello) tiene il
   valore appoggiato al chevron. */
.fmc2-select{
  flex:0 1 auto;
  width:auto;
  max-width:100%;
  min-width:0;
  min-height:var(--touch-min);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  appearance:none;
  -webkit-appearance:none;
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:var(--fw-regular);
  color:var(--text-muted);
  text-align:right;
  text-align-last:right;
  text-overflow:ellipsis;
  cursor:pointer;
}
.fmc2-select option{background-color:var(--surface-card);color:var(--text-strong)}
.fmc2-select:focus-visible,.fm-buybox select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
/* Gruppo di destra della riga: valore, chevron e — solo quando c'e' — il
   prezzo dell'opzione scelta. Non cresce: la riga finisce dove finisce il suo
   contenuto, a --space-4 dal bordo come nel kit, senza la gronda che lo span
   prezzo vuoto lasciava con `min-width:65px`.
   `nowrap` e' contro la regola del plugin (`flex-wrap:wrap` sotto 480px): col
   prezzo dell'opzione scelta il gruppo sforava di meno di un pixel e andava a
   capo, portando la riga da 44 a 75px. A cedere e' il valore, che ha
   `min-width:0` e tronca. */
/* Il gap fra valore e chevron e' --space-2: il kit disegna 10px, che non e'
   un token e non si introduce — --space-2 (8px) e' il passo piu' vicino. */
.fmc2-select-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0;gap:var(--space-2);margin-block:0}
/* Chevron Lucide (chevron-down, viewBox 24, stroke 2, capi tondi) al posto del
   triangolino fatto con due gradienti 5x5. E' un pseudo-elemento della riga e
   non un background della select perche' il colore deve restare un token: un
   data-URI non puo' contenere var(), una maschera si' — l'SVG ritaglia, il
   token dipinge, e il dark segue da solo. Sta subito dopo il valore, dove
   stava il chevron della select.
   Dove il componente ha preso il posto del select nativo il chevron lo disegna
   gia' il bottone, e due sarebbero due: la riga lo dichiara con
   `fmc2-select-row--combo` e questa regola si tira indietro. Niente `:has()`
   (CLAUDE.md §9): la classe la mette il JS del plugin quando costruisce il
   componente. */
.fmc2-select-row:not(.fmc2-select-row--combo)::after{
  content:"";
  flex:none;
  /* 16x16 come nel kit: manca un token di misura icona, --space-4 vale 16px */
  width:var(--space-4);
  height:var(--space-4);
  background-color:var(--text-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  pointer-events:none;
}
/* Il prezzo dell'opzione scelta chiude la riga a destra (order 1: il chevron
   resta attaccato al valore). La colonna e' SEMPRE riservata, anche quando lo
   span e' vuoto — deciso dal cliente il 2026-09-20: prima lo span vuoto spariva
   dal flusso e, comparendo col sovrapprezzo, si prendeva spazio dall'etichetta
   (che troncava) e al telefono andava a capo su una terza riga (la riga da 74,5
   a 102px). Ora niente si muove: la gronda vuota a destra e' voluta. La misura
   e' `--fmc2-prezzo`, 10ch: e' la larghezza di "+1.230,00€" nel mono della riga,
   il prezzo piu' lungo che il configuratore scrive, e in `ch` segue il font e
   la sua misura invece di essere un numero di pixel. Allineato a destra perche'
   i numeri si leggono dal bordo. */
.fmc2-configurator{--fmc2-prezzo:10ch}
.fmc2-select-price{order:1;flex:0 0 var(--fmc2-prezzo);min-width:0;text-align:right;font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--text-xs);color:var(--text-strong)}
.fmc2-select-price--sub{color:var(--success)}

/* --- La tendina disegnata ha una larghezza FISSA ---------------------------
   Misurato su poc, prima: il bottone seguiva il testo scelto e andava da
   141,33px con "Default (incluso)" a 450,48 col dissipatore a doppia torre —
   quattro larghezze diverse per quattro scelte, e le righe di gruppo
   disallineate fra loro. La causa e' nostra: `.fmc2-category` e' una flexbox
   (la riga del kit, etichetta a sinistra e valore a destra) e la riga del
   controllo ci sta dentro con `flex:0 1 auto`, cioe' larga quanto il contenuto.
   Sotto Flatsome il difetto non c'e': li' `.fmc2-category` e' un blocco e la
   riga occupa tutta la larghezza.

   Il campo prende percio' una frazione fissa della riga, la stessa in ogni
   gruppo e in ogni stato, e il valore lungo tronca.

   Perche' la riga sparisce come scatola (`display:contents`): il prezzo
   dell'opzione scelta sta DENTRO la riga, e comparendo si porterebbe via 56px
   del campo — il salto tornerebbe, piu' piccolo. Promuovendo i due figli a item
   della riga di gruppo (e' l'idioma del CLAUDE.md §1.10, qui voluto) il prezzo
   toglie spazio all'ETICHETTA, che tronca, e il campo non si muove. */
.fmc2-select-row--combo{display:contents}
.fmc2-select-row--combo>.fmc2-combo{flex:0 0 var(--fmc2-campo,55%);min-width:0}
/* L'etichetta cede: e' il testo che sappiamo corto ("Dissipatore", "RAM"), e
   cedere qui e' cio' che tiene ferma la larghezza del campo. */
.fmc2-category__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Il contenitore del plugin ha un bordo a gradiente fatto con due
   background-image sovrapposte e un alone rosa in hover: entrambi vanno
   spenti, non "corretti", perche' nella tavola il box e' una card sobria. */
.fmc2-configurator{
  margin:0 0 var(--space-5);
  background:var(--surface-card);
  background-image:none;
  border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  color:var(--text-body);
  overflow:hidden;
}
.fmc2-configurator:hover{filter:none}
.fmc2-accordion-header{
  gap:var(--space-2);
  padding:var(--space-4);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-sm);
  color:var(--text-strong);
  border-radius:0;
  box-shadow:none;
  min-height:var(--touch-min);
  /* Come nel kit: sotto una certa larghezza titolo e stato vanno a capo
     invece di allargare la colonna. Senza, la riga piu' lunga dell'header
     dettava la larghezza minima della buy box e a 390 la colonna sfondava
     il margine destro dello shell. */
  flex-wrap:wrap;
}
.fmc2-accordion-header.fmc2-title:hover,
.fmc2-accordion-header:hover{background:var(--surface-sunken);box-shadow:none}
.fmc2-open .fmc2-accordion-header{box-shadow:none}
/* Icona + titolo sono un blocco solo a sinistra: nel markup del plugin stanno
   nello stesso <span>, qui diventa la riga icona-testo della tavola. */
.fmc2-accordion-header>span:first-child{display:inline-flex;align-items:center;gap:var(--space-2)}
.fmc2-accordion-header .fm-ico{flex:none;stroke:var(--flash-pink)}
/* A destra, al posto del chevron `▼`, lo stato della configurazione: "di
   serie" in muto, il totale della configurazione in rosa appena si cambia un
   componente — e' l'unico posto dove il totale si legge, il riepilogo in fondo
   alla card non c'e' piu' (lo scrive assets/js/sticky-buy-bar.js sull'evento
   `fmc2:priceUpdated`). */
.fmc2-accordion-chevron{display:none}
.fmc2-accordion-slot{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--text-sm);color:var(--text-muted)}
.fmc2-accordion-slot.is-changed{color:var(--accent-text)}
.fmc2-accordion-body{background:var(--surface-card);color:var(--text-body)}
/* Nel kit le righe sono separate da un filetto **in alto**, non in basso: la
   prima riga si stacca cosi' dall'intestazione e l'ultima non lascia un
   filetto orfano sopra il riepilogo. */
.fmc2-group{border-bottom:0;border-top:var(--border-hair) solid var(--border-subtle)}
.fmc2-category+.fmc2-category{border-top:var(--border-hair) solid var(--border-subtle)}
.fmc2-group__header{
  padding:var(--space-3) var(--space-4) var(--space-1);
  font-family:var(--font-spec);
  font-size:var(--text-3xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-spec);
  color:var(--text-muted);
}
/* Occhiello di gruppo: sparisce quando il gruppo e' uno solo — il caso
   normale, e il kit non prevede quel livello sopra la riga — e resta quando i
   gruppi sono due o piu', altrimenti si perderebbe il nome del gruppo.

   Perche' non `:only-child` ne' `:only-of-type`: i figli di
   `#fmc2-accordion-body` sono i gruppi **piu'** `.fmc2-reset-bar` e
   `.fmc2-summary`, che il plugin stampa sempre (nascosti inline). Il gruppo ha
   quindi sempre fratelli, e sono `div` come lui: nessuna delle due
   pseudo-classi scatta. `:has()` e' vietato per la struttura (CLAUDE.md §9).

   Si contano percio' i fratelli dal fondo: l'ultimo gruppo e' il terzo da
   destra (gruppo, reset-bar, summary). Prima regola: nascondi l'occhiello
   dell'ultimo gruppo. Seconda: rimettilo a ogni gruppo preceduto da un altro
   gruppo — con un gruppo solo la seconda non tocca niente, con due o piu' il
   primo non e' mai l'ultimo e l'ultimo viene ripristinato. Stessa specificita'
   (0,4,0), vince la seconda perche' viene dopo.
   Se il plugin cambiasse i blocchi in coda, la prima regola smette di
   corrispondere e l'occhiello ricompare: si degrada mostrando, non
   nascondendo. */
.fmc2-accordion-body > .fmc2-group:nth-last-child(3) .fmc2-group__header{display:none}
.fmc2-accordion-body > .fmc2-group ~ .fmc2-group .fmc2-group__header{display:block}
/* La riga di gruppo del kit: etichetta a sinistra, valore corrente e chevron a
   destra, tutto su una riga sola alta --touch-min. Prima erano tre pezzi
   impilati (etichetta, poi una select larga quanto la card) per 98,5px. */
.fmc2-category{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-height:var(--touch-min);
  padding:0 var(--space-4);
  border-bottom:0;
}
/* Etichetta della riga: nel kit e' il titolo del gruppo — display, 700,
   --text-sm, --text-strong — non un occhiello muto. */
.fmc2-category__label{margin:0;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:normal;text-transform:none;color:var(--text-strong)}
/* Sotto --bp-tablet la riga va a capo: etichetta sopra, controllo sotto a tutta
   larghezza.
   Perche' serve, misurato sulla scheda di un PC configurabile con i dati veri:
   la riga e' una flexbox orizzontale — l'ha resa tale questo foglio, il plugin
   mette solo padding e bordo — e una `<select>` non va a capo, quindi la sua
   larghezza minima e' quella dell'opzione piu' lunga. Con "Dissipatore a torre
   DeepCool AG400V2 RGB" la riga misura **525px di min-content** dentro un
   viewport da 390. Da li' risale tutto: la griglia della PDP a colonna singola
   ha traccia `auto`, si dimensiona sul figlio piu' largo, e .fm-pdp__media —
   che di suo ha min-content 0 — viene trascinata a 527px insieme alla galleria.
   Il documento restava a 390 solo perche' `overflow-x:clip` ritagliava: nessuno
   scroll orizzontale, e nessuno se ne accorgeva.
   Non si corregge con `overflow:hidden` ne' con una larghezza fissa: quello
   nasconde il sintomo, ed e' esattamente il motivo per cui il difetto e'
   arrivato fin qui. Si lascia andare a capo il contenuto, che resta tutto
   visibile su due righe. Provati quattro rimedi: solo questo porta la traccia
   da 527 a 358 (flex-wrap da solo si ferma a 438, con la riga della select a
   capo a 414). Il plugin la stessa cosa l'aveva gia' fatta per la propria riga
   a max-width 480: il caso era prevedibile.
   Sopra --bp-tablet non cambia nulla: li' la colonna d'acquisto ha 680px e la
   riga orizzontale del kit ci sta. */
@media(max-width:767.98px){ /* --bp-tablet */
  .fmc2-category{flex-wrap:wrap}
  .fmc2-select-row{flex:1 1 100%;justify-content:flex-start}
  .fmc2-select{width:100%}
  /* Col componente la riga non e' piu' una scatola: la larghezza intera la
     prende il campo, che qui e' l'unico modo di essere "fisso". */
  /* Etichetta sopra a tutta riga; sotto, il campo cede e la colonna del prezzo
     resta riservata accanto (stessa `--fmc2-prezzo` del desktop): cosi' il
     sovrapprezzo non aggiunge una terza riga. */
  .fmc2-category__label{flex:1 1 100%}
  .fmc2-select-row--combo>.fmc2-combo{flex:1 1 0}
  /* E il valore va A CAPO invece di troncare. Misurato a 390 col dissipatore a
     doppia torre: su una riga sola il campo portava la colonna d'acquisto a
     482,5px dentro una traccia da 358 — e' la stessa trappola del select
     nativo chiusa il 2026-09-19, perche' una flexbox che va a capo porta nel
     proprio min-content la larghezza INTERA del figlio piu' largo, e
     `text-overflow` non abbassa il min-content: tronca quello che si vede, non
     quello che l'elemento chiede. A capo, il min-content torna quello della
     parola piu' lunga e la card sta dentro i 358. */
  .fmc2-combo__bottone{height:auto;min-height:var(--touch-min);padding-block:var(--space-2);align-items:flex-start}
  .fmc2-combo__valore{white-space:normal;overflow:visible;text-overflow:clip}
}
.fmc2-badge{font-family:var(--font-mono);font-size:var(--text-3xs);color:var(--text-muted)}
/* Riepilogo: via. Nel kit il totale della configurazione vive **solo** nello
   slot dell'intestazione (lo scrive assets/js/sticky-buy-bar.js), e un secondo
   conto in fondo alla card ripeterebbe lo stesso numero.
   Spariscono le tre righe (Prezzo base / Upgrade selezionati / Totale), non il
   contenitore: dentro ci sta anche `.fmc2-summary__forced`, che e' il messaggio
   sulle dipendenze fra componenti — quello e' funzione, non riepilogo, e resta.
   Il contenitore perde percio' il margine, che pagherebbe 16px anche da vuoto,
   e il margine passa al solo avviso.
   `!important` e' l'unica strada: il display delle righe non arriva da un
   foglio di stile ma da `$('#fmc2-summary').show()` del plugin, che scrive
   inline sul contenitore, e `#fmc2-upgrades-row` viene mostrata e nascosta
   sempre inline. */
.fmc2-summary{margin:0;font-size:var(--text-sm)}
.fmc2-summary__row{display:none!important}
.fmc2-summary__forced{margin:0 var(--space-4) var(--space-4);background:var(--success-bg);color:var(--text-body);border-radius:var(--radius-md);font-size:var(--text-2xs)}
/* Ripristino: non piu' una barra centrata ma un link di testo piccolo,
   allineato al bordo del contenuto della card come le righe. Chi lo mostra e
   lo nasconde resta il plugin, che lo tira fuori solo quando la configurazione
   differisce da quella base: a configurazione di serie la card non paga questi
   pixel.
   Il bersaglio resta alto --touch-min: e' un comando, e la garanzia sui 44px
   (CLAUDE.md §6) vale anche per un link. */
.fmc2-reset-bar{padding:0 var(--space-4) var(--space-2);text-align:left}
.fmc2-reset-btn{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0;font-family:var(--font-display);font-size:var(--text-2xs);font-weight:var(--fw-regular);color:var(--text-muted);text-decoration:underline}
.fmc2-reset-btn:hover{color:var(--accent-text)}
.fmc2-edit-notice{background:var(--info-bg);border:var(--border-hair) solid var(--info);border-radius:var(--radius-md);color:var(--text-body);font-size:var(--text-2xs)}
.fmc2-edit-link{color:var(--accent-text)!important;font-family:var(--font-display);font-size:var(--text-2xs);font-weight:var(--fw-bold)}
.fmc2-body{scrollbar-color:var(--accent) var(--surface-sunken)}
.fmc2-body::-webkit-scrollbar-track{background:var(--surface-sunken)}
.fmc2-body::-webkit-scrollbar-thumb{background:var(--accent)}

/* I bottoni di WooCommerce che non passano da wp-element-button ("Ritorna al
   negozio" del carrello vuoto, azioni dell'account) prendono la superficie
   del bottone del design: senza, restano testo chiaro su banda chiara. */
.woocommerce a.button,.woocommerce button.button,.wc-block-components-button,
a.wc-backward,.wp-block-woocommerce-cart .wc-block-cart__submit-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--control-md);padding:0 20px;border:none;
  border-radius:var(--radius-lg);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);
  background:var(--grad-flash);color:var(--on-accent);text-decoration:none;cursor:pointer;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.wc-block-components-button:hover,a.wc-backward:hover{color:var(--on-accent)}

/* --- Rifiniture carrello (gruppo A, 2026-09-09) ------------------------- */

/* Notice di WooCommerce (blocchi): il verde/azzurro di serie e' fuori palette
   in entrambi i temi. Le superfici restano i tint dei token, che NON si
   invertono col tema (`--success-bg` e compagnia sono valori fissi): il testo
   va quindi su `--ink-950`, che e' anch'esso fisso — stessa scelta gia' fatta
   per il badge condizione "buono". Cosi' il banner e' leggibile in chiaro e in
   scuro senza dipendere dagli alias tematizzati. */
/* Il prefisso `body` non e' decorativo: sul checkout WooCommerce accoda
   `store-notices.css` DOPO il nostro foglio, e a parita' di specificita' (0,2,0)
   vinceva lui. Con l'elemento in piu' (0,2,1) la regola passa ovunque senza
   ricorrere a !important. */
body .wc-block-components-notice-banner{
  background-color:var(--surface-card);
  border-color:var(--border-default);
  border-radius:var(--radius-md);
  color:var(--text-body);
  font-size:var(--text-sm);
}
body .wc-block-components-notice-banner>svg{fill:var(--on-accent);background-color:var(--text-body)}
/* Il testo era fissato a `--ink-950` per tutte e quattro le varianti. In
   chiaro va bene, perche' i fondi sono tinte chiare; in **scuro** i token
   diventano la stessa tinta a bassa opacita' sopra ink-950, e un testo
   ink-950 li' misura **1,2:1** — invisibile. Si vedeva sul banner "conferma
   il tuo indirizzo email" della pagina Ordini.
   `--text-body` e' quello che il design system prevede — lo dice il commento
   accanto ai token scuri: "so WooCommerce's three system messages keep
   --text-body legible in dark" — e misura 12-13:1 in scuro, oltre 14:1 in
   chiaro. */
body .wc-block-components-notice-banner.is-success{background-color:var(--success-bg);border-color:var(--success);color:var(--text-body)}
body .wc-block-components-notice-banner.is-success>svg{background-color:var(--success)}
body .wc-block-components-notice-banner.is-error{background-color:var(--danger-bg);border-color:var(--danger);color:var(--text-body)}
body .wc-block-components-notice-banner.is-error>svg{background-color:var(--danger)}
body .wc-block-components-notice-banner.is-warning{background-color:var(--warning-bg);border-color:var(--warning);color:var(--text-body)}
body .wc-block-components-notice-banner.is-warning>svg{background-color:var(--warning)}
body .wc-block-components-notice-banner.is-info{background-color:var(--info-bg);border-color:var(--info);color:var(--text-body)}
body .wc-block-components-notice-banner.is-info>svg{background-color:var(--info)}
/* Woo marca il link dentro il banner con !important: qui serve rispondergli. */
body .wc-block-components-notice-banner>.wc-block-components-notice-banner__content .wc-forward{color:var(--text-body)!important}

/* Carrello vuoto: idioma `.fm-empty` (icona muta + messaggio breve), non il
   riquadro informativo di serie. Il markup lo stampa `wc_empty_cart_message()`
   come notice: qui il notice viene spogliato e ricomposto nell'idioma, senza
   sostituire il template PHP di WooCommerce. */
.woocommerce .wc-empty-cart-message{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-3);
  padding:var(--space-8) var(--space-4) var(--space-4);
  text-align:center;
  color:var(--text-body);
}
body .woocommerce .wc-empty-cart-message .wc-block-components-notice-banner,
body .woocommerce .wc-empty-cart-message .woocommerce-info{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  margin:0;padding:0;
  background:none;background-color:transparent;border:none;box-shadow:none;
  color:inherit;font-size:var(--text-md);
}
.woocommerce .wc-empty-cart-message .wc-block-components-notice-banner::before,
.woocommerce .wc-empty-cart-message .woocommerce-info::before{content:none}
/* L'icona e' muta come in `.fm-empty`: nessuna pastiglia colorata, solo il
   tratto su `--border-strong`. Misura `--control-sm`: nei token non c'e' una
   scala per le icone, e' il valore piu' vicino ai 40px dell'idioma. */
body .woocommerce .wc-empty-cart-message .wc-block-components-notice-banner>svg{
  width:var(--control-sm);height:var(--control-sm);
  padding:0;border-radius:0;
  background:none;background-color:transparent;
  fill:var(--border-strong);
}
.woocommerce .wc-empty-cart-message .wc-block-components-notice-banner__content{padding:0;color:var(--text-body)}
.woocommerce p.return-to-shop{display:flex;justify-content:center;margin:0;padding-bottom:var(--space-8)}

/* Nome prodotto nella tabella carrello: e' il titolo della riga, non un link
   qualsiasi — va a `--text-strong` come i titoli delle card. */
.woocommerce table.cart td.product-name a,
.woocommerce table.shop_table td.product-name a{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  color:var(--text-strong);text-decoration:none;
}
@media(hover:hover){
  .woocommerce table.cart td.product-name a:hover,
  .woocommerce table.shop_table td.product-name a:hover{color:var(--accent-text)}
}

/* Touch (§6.5): il link di categoria nell'occhiello della card era alto 14px.
   Il bersaglio sale a --touch-min sul LINK. Prima lo si otteneva azzerando i
   margini di occhiello e titolo, e a 390 il testo finiva incollato alla foto:
   l'altezza sta sul bersaglio, il ritmo resta quello di sopra --bp-tablet. */
@media(max-width:767.98px){ /* --bp-tablet */
  .wc-block-product .wc-block-components-product-category-list{display:flex;align-items:center}
  .wc-block-product .wc-block-components-product-category-list a{display:inline-flex;align-items:center;min-height:var(--touch-min);min-width:var(--touch-min)}
  /* Qui c'era un min-height di --touch-min sul link del titolo, per farne un
     bersaglio da 44px. Ma `-webkit-line-clamp` limita l'ALTEZZA del box, non
     il numero di righe rese: portare la scatola a 44px le fa stare 2,48 righe
     e la terza si vede tagliata a meta'. Il titolo torna alla sua altezza
     naturale di due righe (39px): e' un link di testo dentro una card che e'
     gia' cliccabile per intero, quindi non e' un bersaglio isolato, e il
     testo mozzato era il difetto piu' visibile dei due.
     L'occhiello sopra resta a --touch-min, quello e' un link a se'. */
  .wc-block-product .wp-block-post-title>a,
  .wc-block-product .wc-block-components-product-title>a{min-height:0}
}

/* --- Area account (stock WooCommerce, solo token) --------------------- */

/* I campi restavano bianchi con testo nero anche in tema scuro: il markup
   dell'account non passa dai blocchi, quindi non eredita nulla. */
body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce form input.input-text,
body.woocommerce-account .woocommerce input[type=text],body.woocommerce-account .woocommerce input[type=email],
body.woocommerce-account .woocommerce input[type=password],body.woocommerce-account .woocommerce input[type=tel],
body.woocommerce-account .woocommerce input[type=number],body.woocommerce-account .woocommerce select,
body.woocommerce-account .woocommerce textarea{
  width:100%;
  min-height:var(--control-md);
  padding:0 var(--space-3);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  color:var(--text-strong);
  background:var(--surface-card);
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-md);
}
body.woocommerce-account .woocommerce textarea{padding:var(--space-3);min-height:calc(var(--control-md) * 3)}
body.woocommerce-account .woocommerce input:focus-visible,body.woocommerce-account .woocommerce select:focus-visible,
body.woocommerce-account .woocommerce textarea:focus-visible{box-shadow:var(--ring-focus);outline:none;border-color:var(--accent)}
body.woocommerce-account .woocommerce label{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-body)}


/* --- Perche' `.woocommerce` e non solo `body.woocommerce-account` ---------
   Le regole qui sopra vestono i controlli della pagina account: campi,
   etichette, bottoni. Scritte sul solo body colpivano OGNI controllo della
   pagina — header compreso. Il bottone della ricerca in alto e' un
   `button[type=submit]`, quindi prendeva il `padding:0 var(--space-5)` dei
   bottoni dell'account e passava da 40 a 72px di larghezza: stesse classi
   della home, larghezza diversa, e nessun indizio nel markup.
   Legandole al contenitore `.woocommerce`, che Woo mette intorno al contenuto
   dell'account e al modulo di accesso, valgono dove devono e l'header resta
   quello di tutte le altre pagine. (Trovato il 2026-09-13.) */

/* Il bottone di accesso era testo nero su fondo trasparente in Arial: in
   tema scuro dava 1,08:1, cioe' invisibile. */
body.woocommerce-account .woocommerce button.button,body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce button[type=submit],body.woocommerce-account .woocommerce .woocommerce-Button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--control-md);padding:0 var(--space-5);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);
  color:var(--on-accent);background:var(--grad-flash);
  border:none;border-radius:var(--radius-lg);cursor:pointer;
}

/* Navigazione dell'account, forma **precedente** al rifacimento a card.
   Resta come ripiego per il caso in cui `fm_account_navigazione()` non sia in
   piedi (un plugin che sostituisca la callback, il tema in un contesto senza
   le nostre classi), ma vale solo li': scritta senza `:not(.fm-accnav)` la
   regola `…-navigation a{display:flex}` batteva con (0,2,1) il `display:none`
   della riga "Ultimo ordine", che da 768 in su restava dentro la colonna di
   264px e andava a capo tre volte. */
body.woocommerce-account .woocommerce-MyAccount-navigation:not(.fm-accnav) ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
/* Le misure dell'area clienti vengono dai token --account-* del design
   system (in breakpoints.css): navigazione 264, voce 48, contenuto 920,
   distanza 40, padding card 28, blocco di accesso 1000. Prima erano scelte
   nostre fatte quando quei token non esistevano — la voce, per esempio, era
   60px. */
body.woocommerce-account .woocommerce-MyAccount-navigation:not(.fm-accnav) li a{min-height:var(--account-nav-item)}
body.woocommerce-account .woocommerce-MyAccount-navigation:not(.fm-accnav) a{
  display:flex;align-items:center;
  min-height:var(--touch-min);
  padding:0 var(--space-3);
  border-radius:var(--radius-md);
  font-family:var(--font-display);font-size:var(--text-sm);
  color:var(--text-body);text-decoration:none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation:not(.fm-accnav) li.is-active a{background:var(--surface-sunken);color:var(--text-strong)}
@media(hover:hover){body.woocommerce-account .woocommerce-MyAccount-navigation:not(.fm-accnav) a:hover{color:var(--text-strong)}}

/* Tabelle di ordini e indirizzi. */
body.woocommerce-account table{width:100%;border-collapse:collapse}
body.woocommerce-account table th,body.woocommerce-account table td{
  padding:var(--space-3);
  border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-sm);color:var(--text-body);text-align:left;
}
/* Due correzioni in una riga. Il colore era `--text-muted`, che il design
   system dichiara "NOT AA — never informative copy": l'intestazione di una
   tabella dice cosa c'e' nella colonna, quindi e' informativa, e misurava
   4,02:1 in chiaro e 4,41:1 in scuro. Con `--text-secondary`, che si
   tematizza (ink-450 / ink-350), sale a 5,27 e 5,77.
   E la regola era legata a `body.woocommerce-account`, cioe' al contesto:
   avrebbe vestito qualunque `th` della pagina, header e footer compresi
   (§1.9). Ora sta sul contenitore del componente. */
body.woocommerce-account .woocommerce table th{font-family:var(--font-spec);font-size:var(--text-2xs);letter-spacing:var(--tracking-spec);text-transform:uppercase;color:var(--text-secondary)}
body.woocommerce-account .woocommerce-Address address{font-style:normal;color:var(--text-body)}

/* Cuore della wishlist nella buybox: quadrato --control-lg, solo icona, come
   nella tavola (IconButton 56x56). Il nome accessibile e' su aria-label.

   Due cose che qui vanno tenute insieme:
   - il selettore deve essere `.fm-js .fm-wish--buybox` (0,2,0) e non
     `.fm-wish--buybox` (0,1,0), altrimenti perde contro `.fm-js .fm-wish`,
     che impone 44x44;
   - niente ::before. Sulla card la piastra e' un quadrato assoluto centrato;
     nella buybox la superficie e' il bottone stesso. */
.fm-js .fm-wish--buybox{
  position:relative;top:auto;right:auto;flex:0 0 auto;
  width:var(--control-lg);min-width:var(--control-lg);height:var(--control-lg);
  margin-block-start:0;padding:0;gap:var(--space-2);
  border:1px solid var(--fm-wish-line);border-radius:var(--radius-md);
  background:var(--surface-card);
}
.fm-wish--buybox::before{content:none}
/* L'etichetta "Salva" non c'e' piu' a nessuna larghezza: nella tavola il cuore
   e' un quadrato --control-lg accanto alla CTA, e con la scritta si mangiava
   34px di CTA. Il nome accessibile resta su aria-label; il testo non e' tolto
   dal markup, e' nascosto qui, come gia' faceva sotto --bp-tablet. */
.fm-wish__label{display:none;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm)}

/* --- Contrasto della riga meta in PDP ---------------------------------- */
/* `--text-muted` e' lo stesso colore nei due temi e non regge i 4,5:1: sulla
   banda `--a` introdotta con le tre bande scende a 4,02:1 in chiaro e 4,41:1
   in scuro. Stessa medicina gia' applicata a .fm-empty e .fm-pill__count.
   Il limite del token muted resta annotato per il design system. */
body .fm-pdp .wc-block-components-product-stock-indicator,
body .fm-pdp .wp-block-post-terms__prefix,
body .fm-pdp .sku_wrapper,
body .fm-pdp .sku,
body .fm-pdp__tabs .shop_attributes th{color:var(--text-body)}

/* I link del breadcrumb si distinguevano solo per colore (3,37:1): serve un
   segnale non cromatico, e il colore va a un valore che regge. */
body nav.woocommerce-breadcrumb a{color:var(--text-body);text-decoration:underline;text-underline-offset:2px}
@media(hover:hover){body nav.woocommerce-breadcrumb a:hover{color:var(--text-strong)}}

/* CTA della buy box: l'icona carrello accanto al testo, non sopra.
   `display:flex` sulla regola principale non basta — WooCommerce dichiara
   `.woocommerce div.product form.cart button.single_add_to_cart_button`
   (0,4,3) in un foglio che si accoda DOPO il nostro, quindi vince e il
   bottone torna inline-block, con l'icona (che e' `display:block`) su una
   riga sua. Qui si pareggia con un livello in piu': `body.woocommerce`. */
body.woocommerce .fm-pdp .fm-buybox form.cart button.single_add_to_cart_button{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
}

/* L'input quantita' era 58px contro i 56 di CTA e cuore: il bordo si sommava
   all'altezza invece di starci dentro. */
body .fm-pdp .fm-buyrow input.qty,body .fm-pdp .quantity input.qty{box-sizing:border-box;height:var(--control-lg);min-height:var(--control-lg)}

/* --- Pagina carrello ---------------------------------------------------
   `templates/page-cart.html` monta lo shortcode [woocommerce_cart]: tabella
   `shop_table` piu' `.cart_totals`, non i blocchi Cart. */

/* RULE 2 — H1 a 1224px ma notice, tabella e totali a 1000px con 224px di
   vuoto a destra: la misura la impone `woocommerce-blocktheme.css` con
   `.woocommerce-cart main .woocommerce{max-width:1000px}` (0,2,1), che si
   accoda dopo il nostro foglio. Si supera con il prefisso `body` (0,2,2),
   senza !important: il contenuto rientra nello shell del tema. */
body.woocommerce-cart main .woocommerce{max-width:none}

/* Il carrello classico vuole due colonne. Tabella e pannello totali sono
   fratelli dentro `.woocommerce`: da --bp-desktop in su stanno affiancati,
   sotto restano impilati. Woo li dispone a float (`.cart_totals` 48% a
   destra): i float vanno azzerati o la griglia eredita il vuoto.
   Nota: il design system non ha una tavola del carrello ne' una misura di
   colonna laterale, quindi la ripartizione e' un rapporto, non una
   lunghezza. */
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart-collaterals .cart_totals{width:auto;float:none}
body.woocommerce-cart .cart_totals{
  padding:var(--space-5);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  box-shadow:var(--shadow-xs);
}
body.woocommerce-cart .cart_totals>h2{margin-block:0 var(--space-4);font-size:var(--text-lg)}

/* Totali del carrello: righe flex invece che celle di tabella.
   La riga della spedizione non si poteva sistemare da sola — rendendo `block`
   una sola `tr` dentro una tabella, quella riga esce dal table layout e la
   cella si stringe al contenuto (147px invece di 224, con i nomi dei corrieri
   a capo ancora piu' spesso). Si ricompone quindi tutta la tabella: le righe
   corte (Subtotale, Totale) restano etichetta a sinistra e valore a destra,
   la spedizione impila l'etichetta sopra e le opzioni sotto, a sinistra.
   Il motivo: la colonna di destra e' larga 224px, i nomi dei corrieri ci
   vanno a capo tre volte e la cella "Spedizione" restava alta 267px con
   dentro una parola sola.
   Il filetto passa dalla cella alla riga: con le celle a flex i due bordi
   affiancati non formerebbero una linea continua. */
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table tbody{display:block;width:100%}
body.woocommerce-cart .cart_totals table.shop_table tr{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);border-block-start:1px solid var(--border-subtle)}
body.woocommerce-cart .cart_totals table.shop_table tr:first-child{border-block-start:0}
body.woocommerce-cart .cart_totals table.shop_table tr>th,
body.woocommerce-cart .cart_totals table.shop_table tr>td{display:block;width:auto;border:0;text-align:start}
body.woocommerce-cart .cart_totals table.shop_table tr>td{text-align:end}

body.woocommerce-cart .cart_totals table.shop_table tr.shipping{flex-direction:column;align-items:stretch;gap:0}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping>th{padding-block-end:0}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping>td{padding-block-start:var(--space-2);text-align:start}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method li{display:flex;align-items:baseline;gap:var(--space-2)}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method li input{flex:none}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method li label{flex:1;min-width:0}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination{margin-block:var(--space-2) 0}
/* Sotto i 768 WooCommerce ripete l'etichetta della colonna dentro la cella
   (`td::before{content:attr(data-title)}`), perche' nel suo layout responsive
   i `th` spariscono. Qui i `th` restano, quindi l'etichetta usciva due volte:
   "Subtotale | Subtotale:449,00€". */
body.woocommerce-cart .cart_totals table.shop_table tr>td::before{content:none}
/* Il `text-align:end` della colonna valori non deve scendere nelle opzioni. */
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method,
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method li,
body.woocommerce-cart .cart_totals table.shop_table tr.shipping ul#shipping_method label,
body.woocommerce-cart .cart_totals table.shop_table tr.shipping .woocommerce-shipping-destination{text-align:start}
/* Le due colonne sono flex e non griglia: dentro `.woocommerce` non ci sono
   solo il form e i totali, ma anche lo stato vuoto (`.wc-empty-cart-message`
   piu' `p.return-to-shop`), che con `grid-template-columns` finiva spaccato
   in due — il messaggio a sinistra e "Ritorna al negozio" nella colonna dei
   totali, centrato in una colonna che sta dall'altra parte. Riconoscere "il
   contenitore che contiene il form" vorrebbe `:has()`, vietato dal §9; con
   flex la distinzione la fanno i figli: form e totali sono due colonne
   (`flex:2` e `flex:1`, lo stesso rapporto della griglia), tutto il resto
   prende la riga intera e resta centrato. */
@media(min-width:1024px){ /* --bp-desktop */
  body.woocommerce-cart main .woocommerce{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:var(--space-6);
  }
  body.woocommerce-cart main .woocommerce>form.woocommerce-cart-form{flex:2 1 0;min-width:0}
  body.woocommerce-cart main .woocommerce>.cart-collaterals{flex:1 1 0;min-width:0}
  body.woocommerce-cart main .woocommerce>.woocommerce-notices-wrapper,
  body.woocommerce-cart main .woocommerce>.wc-empty-cart-message,
  body.woocommerce-cart main .woocommerce>p.return-to-shop{flex:1 0 100%}
}

/* Il nome prodotto non aveva troncamento: la cella e' larga ~530px e con i
   titoli reali del catalogo la riga cresce a 3-4 righe, sfasando prezzo,
   quantita' e subtotale. Clamp a due righe come sulle card.
   Il clamp va sull'elemento che PORTA il testo — qui l'`a` dentro la cella,
   che e' un table-cell e non un flex container: non viene "blockificato"
   come era successo al titolo delle card. */
body.woocommerce-cart table.cart td.product-name a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
/* Piastra foto della riga carrello: le foto prodotto stanno su bianco a
   qualsiasi larghezza e in entrambi i temi (§1.5). Prima il fondo era dipinto
   solo sotto --bp-tablet: con un JPEG a fondo bianco non si notava, un PNG
   con alpha sarebbe finito su --ink-900. Qui la piastra veste l'immagine
   senza imporle una misura, che da 768 in su la decide gia' WooCommerce. */
body.woocommerce-cart table.cart td.product-thumbnail a{
  display:inline-block;
  padding:var(--space-1);
  border-radius:var(--radius-sm);
  background:var(--surface-photo);
}
body.woocommerce-cart table.cart td.product-thumbnail img{display:block;object-fit:contain}

/* Sotto --bp-tablet la tabella passa in modalita' etichetta e
   `woocommerce-smallscreen.css` nasconde la miniatura
   (`.woocommerce table.cart .product-thumbnail{display:none}`, 0,2,1).
   Con la foto la riga e' riconoscibile a colpo d'occhio: si rimette.
   Il confine e' `max-width:768px` e non i 767.98 dell'invariante 2 perche'
   questa media query NON introduce un breakpoint: ricalca quella con cui il
   plugin accoda il foglio (`only screen and (max-width: 768px)`, inclusiva).
   Con 767.98 restava scoperta esattamente la larghezza 768 — una delle cinque
   di verifica — e li' la miniatura spariva. */
@media(max-width:768px){ /* confine di woocommerce-smallscreen.css, non --bp-tablet */
  /* `text-align:right!important` arriva da `shop_table_responsive` e vale per
     ogni cella: sulla foto e' l'unico caso in cui va risposto, perche' la
     miniatura apre la riga e sta a sinistra come il resto della scheda. */
  body.woocommerce-cart table.cart td.product-thumbnail{display:block;width:auto;padding-bottom:var(--space-2);text-align:left!important}
  /* `shop_table_responsive` antepone a ogni cella l'etichetta `data-title`:
     la miniatura non ne ha una, quindi restava un ": " orfano. */
  body.woocommerce-cart table.cart td.product-thumbnail::before{content:none}
  /* In modalita' etichetta la foto apre la riga: qui la piastra prende una
     misura fissa, mentre sopra 768 la decide la cella di WooCommerce. */
  body.woocommerce-cart table.cart td.product-thumbnail a{
    width:var(--control-lg);
    height:var(--control-lg);
  }
  body.woocommerce-cart table.cart td.product-thumbnail img{width:100%;height:100%}
}

/* Campi del carrello: le regole tokenizzate esistevano solo per
   `body.woocommerce-account`, quindi l'input del coupon restava bianco con
   testo nero anche su pagina --ink-950. Stesse regole, stesso corpo.
   `#coupon_code` e' preso da Woo con un selettore che contiene un id
   (`.woocommerce-page .woocommerce-cart-form #coupon_code`, 1-2-0): per
   superarlo serve un id piu' una classe in piu', non !important. */
body.woocommerce-cart input.input-text,
body.woocommerce-cart input[type=text],
body.woocommerce-cart input[type=number],
body.woocommerce-cart select,
body.woocommerce-cart textarea{
  min-height:var(--control-md);
  padding:0 var(--space-3);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  color:var(--text-strong);
  background:var(--surface-card);
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-md);
}
body.woocommerce-cart input:focus-visible,
body.woocommerce-cart select:focus-visible,
body.woocommerce-cart textarea:focus-visible{box-shadow:var(--ring-focus);outline:none;border-color:var(--accent)}
/* La quantita' e' un campo stretto e centrato: il padding orizzontale dei
   campi lunghi le mangerebbe le cifre. */
body.woocommerce-cart table.cart .quantity input.qty{
  padding-inline:var(--space-1);
  text-align:center;
  font-family:var(--font-mono);
}
body.woocommerce-cart table.cart td.actions .coupon .input-text,
body.woocommerce-cart .woocommerce-cart-form #coupon_code{
  box-sizing:border-box;
  float:none;
  height:var(--control-md);
  min-height:var(--control-md);
  margin:0;
  padding:0 var(--space-3);
  font-family:var(--font-body);
  font-size:var(--text-sm);
  color:var(--text-strong);
  background:var(--surface-card);
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-md);
}
body.woocommerce-cart .woocommerce-cart-form #coupon_code::placeholder{color:var(--text-muted)}
body.woocommerce-cart .woocommerce-cart-form #coupon_code:focus-visible{box-shadow:var(--ring-focus);outline:none;border-color:var(--accent)}
body.woocommerce-cart table.cart td.actions .coupon{gap:var(--space-2)}

/* A 390 "Applica codice promozionale" stava dentro la riga dell'input, che si
   stringeva a ~150px, e "Aggiorna carrello" finiva sotto a tutta larghezza:
   sotto --bp-tablet input a tutta larghezza e bottoni impilati, tutti ai
   bersagli del §6.5. */
@media(max-width:767.98px){ /* --bp-tablet */
  body.woocommerce-cart table.cart td.actions .coupon{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    padding-bottom:var(--space-2);
  }
  body.woocommerce-cart .woocommerce-cart-form #coupon_code{width:100%}
  /* `woocommerce-smallscreen.css` mette i due controlli del coupon a meta'
     riga (`.woocommerce table.cart td.actions .coupon .button{width:48%}`,
     0-5-2): e' quello che stringeva "Applica codice promozionale" a 159px.
     Si supera con la classe del body (0-5-3), senza !important. */
  body.woocommerce-cart table.cart td.actions .coupon .button,
  body.woocommerce-cart table.cart td.actions .button,
  body.woocommerce-cart table.cart td.actions button.button{
    width:100%;
    min-height:var(--control-md);
    margin:0;
  }
  body.woocommerce-cart table.cart td.actions>button.button{margin-top:var(--space-2)}
}

/* "Aggiorna carrello" nasce disabilitato e resta un primario a gradiente con
   `opacity:.5` da `woocommerce-blocktheme.css`: si legge come un CTA rotto
   invece che come un controllo spento. Da spento prende la superficie
   affossata e il testo muto, senza opacita'. */
body.woocommerce-cart table.cart td.actions button.button:disabled,
body.woocommerce-cart table.cart td.actions button.button[disabled]{
  background:var(--surface-sunken);
  color:var(--text-muted);
  border:1px solid var(--border-subtle);
  box-shadow:none;
  opacity:1;
}

/* Il fine print del pannello totali ("(inclusi 1,08 EUR IVA 22%)") e' #767676
   fisso di WooCommerce: in chiaro passa, su --ink-900 da' 4,09:1 e resta sotto
   i 4,5:1. Va a `--text-body`, che e' tematizzato — stessa medicina gia' usata
   per `.fm-pill__count` e per la riga meta della PDP; il limite del token
   muted resta annotato per il design system.
   Woo lo tiene con (0,4,1): serve una classe in piu' della sua. */
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table small,
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals p small{color:var(--text-body)}

/* I radio della spedizione non erano tokenizzati: senza `accent-color` il
   pallino resta il blu di sistema, l'unico colore fuori palette della
   pagina. */
body.woocommerce-cart ul#shipping_method input[type=radio],
body.woocommerce-cart .woocommerce-shipping-methods input[type=radio]{accent-color:var(--accent)}

/* Touch (§6.5) sul carrello pieno. Due bersagli non erano mai dimensionati:
   la "x" che rimuove la riga (24x24) e il radio della spedizione (13x13, con
   la label piu' corta alta 21px). Le opzioni sono scelte esclusive: il
   bersaglio deve essere l'intera riga, non il solo pallino.
   Sul radio la scatola sale a --touch-min ma il controllo resta disegnato
   nella content box, che il padding tiene alla sua misura: nessun pallino
   gigante, nessun `appearance:none` e quindi nessun componente reinventato. */
body.woocommerce-cart table.cart td.product-remove a.remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--touch-min);
  height:var(--touch-min);
  line-height:1;
}
body.woocommerce-cart ul#shipping_method{display:flex;flex-direction:column;gap:var(--touch-gap)}
body.woocommerce-cart ul#shipping_method li{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:var(--touch-min);
  margin:0;
}
/* Il bersaglio dell'opzione e' la RIGA, non il pallino: la `<label>` e'
   associata all'input, quindi il tocco vale su tutto il testo, ed e' alta
   --touch-min. Il radio resta alla sua misura nativa.
   Perche' non ingrandire il radio: `padding` su un `input[type=radio]` non
   allarga l'area attorno al controllo — Chromium disegna il pallino su tutta
   la border box, quindi width/height a --touch-min producono un dischetto da
   44px, fuori scala rispetto al testo e a qualunque controllo del design
   system (dove il piu' piccolo, --control-sm, e' 36px per un BOTTONE). E una
   misura propria per il radio nei token non esiste: §10. */
body.woocommerce-cart ul#shipping_method li input[type=radio]{
  flex:0 0 auto;
  margin:0;
}
/* La label del metodo diventa flex per reggere il min-height del bersaglio, e
   cosi' il nome del metodo e `.woocommerce-Price-amount` sono due flex item
   fratelli: senza `gap` l'importo resta incollato al nome
   ("...Standard:5,99EUR"). Il testo puo' andare a capo, quindi anche wrap. */
body.woocommerce-cart ul#shipping_method li label{
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  gap:0 var(--space-2);
  min-height:var(--touch-min);
  margin:0;
  color:var(--text-body);
  cursor:pointer;
}

/* Badge della stima FPS sulle card di catalogo (plugin flashmac-fps).
   Il plugin lo stampa come figlio diretto della card, fuori dal contenitore
   che porta il padding del contenuto: partiva dal bordo della card, 16px piu'
   a sinistra del titolo, e l'emoji sembrava uscire dal riquadro. Qui prende
   lo stesso incolonnamento delle altre righe. */
.wc-block-product .fm-fps-badge{padding-inline:var(--space-4)}

/* --- Banda "Prestazioni stimate in gioco" --------------------------------
   Il markup e' del tema (blocks/fps-table/render.php), i dati del plugin
   flashmac-fps. Tutte e tre le risoluzioni sono in pagina: il selettore
   commuta i pannelli, senza richieste al server. */
.fm-fpsband{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs)}
.fm-fpsband__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.fm-fpsband__title{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--text-lg);letter-spacing:var(--tracking-tight)}
.fm-fpsband__title .fm-ico{color:var(--text-brand);flex:none}
/* --text-secondary e non --text-muted su tutto il testo di questa banda:
   qui dentro non c'e' niente di decorativo. La coppia hardware dice a quale
   macchina si riferisce la stima, le etichette delle risoluzioni sono
   controlli, e le note sul metodo sono le condizioni sotto cui i numeri
   valgono. --text-muted misurava fra 4,02 e 4,43:1 a seconda della superficie,
   sotto AA in tutte e quattro. */
.fm-fpsband__hw{margin:0;font-family:var(--font-mono);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-secondary)}

/* Selettore di risoluzione */
.fm-fpsband__seg{display:inline-flex;gap:2px;padding:2px;background:var(--surface-sunken);border-radius:var(--radius-md);margin-bottom:var(--space-4)}
.fm-fpsband__segbtn{border:none;cursor:pointer;padding:var(--space-2) var(--space-4);min-height:var(--touch-min);border-radius:var(--radius-sm);background:none;color:var(--text-secondary);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-xs);transition:color var(--dur-base) var(--ease-out)}
.fm-fpsband__segbtn.is-active{background:var(--grad-flash);color:var(--white)}

/* Verdetto */
.fm-fpsband__verdict{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md);margin-bottom:var(--space-4)}
.fm-fpsband__avg{margin:0;text-align:center;flex:none;padding-inline-end:var(--space-4);border-inline-end:1px solid var(--border-subtle)}
.fm-fpsband__avgnum{display:block;font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--text-3xl);line-height:1;background:var(--grad-flash);-webkit-background-clip:text;background-clip:text;color:transparent}
.fm-fpsband__avglabel{display:block;margin-top:var(--space-1);font-family:var(--font-mono);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-secondary)}
.fm-fpsband__say1{margin:0;font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-strong)}
.fm-fpsband__say2{margin:2px 0 0;font-size:var(--text-xs);color:var(--text-body)}

/* Righe */
.fm-fpsband__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--border-subtle)}
.fm-fpsband__row:first-of-type{border-top:none}
.fm-fpsband__game{font-size:var(--text-sm);color:var(--text-body);overflow-wrap:anywhere}
.fm-fpsband__bar{height:6px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
.fm-fpsband__bar i{display:block;height:100%;background:var(--grad-flash)}
.fm-fpsband__val{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--text-sm);text-align:end;font-variant-numeric:tabular-nums}
.fm-fpsband__val.is-ok{color:var(--success-text)}
.fm-fpsband__val.is-warn{color:var(--warning-text)}
.fm-fpsband__val abbr{text-decoration:none;font-weight:var(--fw-regular);opacity:.75}

/* Righe oltre le prime quattro, e note di metodo */
.fm-fpsband__more>summary,.fm-fpsband__method>summary{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;list-style:none;padding:var(--space-3) 0;color:var(--link);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-xs)}
.fm-fpsband__more>summary::-webkit-details-marker,.fm-fpsband__method>summary::-webkit-details-marker{display:none}
.fm-fpsband__more>summary .fm-ico,.fm-fpsband__method>summary .fm-ico{transition:transform var(--dur-base) var(--ease-out)}
.fm-fpsband__more[open]>summary .fm-ico,.fm-fpsband__method[open]>summary .fm-ico{transform:rotate(180deg)}
.fm-fpsband__more[open]>summary .fm-fpsband__more-apri,.fm-fpsband__more>summary .fm-fpsband__more-chiudi{display:none}
.fm-fpsband__more[open]>summary .fm-fpsband__more-chiudi{display:inline}
/* I due `summary` della banda hanno colori diversi ed e' una gerarchia,
   non una svista: "Mostra tutti gli N titoli" e' l'azione principale e usa
   --link, il token che il design system tiene apposta per il testo
   cliccabile (--text-brand valeva 3,71:1 su card bianca, sotto AA su un
   controllo); "Come calcoliamo le stime" e' la nota a margine e resta sul
   testo secondario. */
.fm-fpsband__method{border-top:1px solid var(--border-subtle);margin-top:var(--space-3)}
.fm-fpsband__method>summary{color:var(--text-secondary)}
.fm-fpsband__method p{margin:0 0 var(--space-2);font-size:var(--text-2xs);color:var(--text-secondary);max-width:72ch}

@media(max-width:759.98px){ /* la barra sparisce: restano gioco e valore */
  .fm-fpsband__row{grid-template-columns:minmax(0,1fr) auto}
  .fm-fpsband__bar{display:none}
  .fm-fpsband__verdict{flex-wrap:wrap}
  .fm-fpsband__avg{border-inline-end:none;padding-inline-end:0;text-align:start}
}

/* La banda FPS e quella delle schede erano attaccate (bordo condiviso a
   1520px, misurato): un passo di distanza le separa senza rompere la Rule 1,
   perche' e' spazio DENTRO la banda, non fra le bande. */
.fm-pdp__band-fps{padding-block-end:var(--space-7)}

/* --- Area clienti: impaginazione -----------------------------------------
   La pagina puntava a `page-my-account.php`, un template PHP del tema
   precedente che qui non esiste: WordPress ricadeva sul default e lo
   shortcode `[woocommerce_my_account]` finiva fuori dallo shell — misurato
   left 0 e larghezza 1357 invece di 1184, senza centratura.
   Ora c'e' `templates/page-my-account.html`, che mette il contenuto nello
   shell; qui si fa il resto: navigazione a colonna e contenuto accanto.

   Il layout e' `grid` e non `flex` perche' le due colonne devono restare
   allineate in alto anche quando la navigazione e' piu' corta del contenuto,
   che e' il caso normale. */
/* Stessa storia del carrello: `woocommerce-blocktheme.css` limita il
   contenuto dell'account a 1000px con (0,2,1), e si accoda dopo il nostro
   foglio. Si supera col prefisso `body` (0,2,2), senza !important. */
body.woocommerce-account main .woocommerce{max-width:none}
body.woocommerce-account.fm-account--utente .fm-account .woocommerce{display:grid;gap:var(--account-gap);align-items:start}
/* Il clearfix di WooCommerce (`.woocommerce::before/::after`, `display:table`)
   in un contenitore a griglia diventa un ITEM: si prendeva la prima cella e
   spingeva la navigazione nella seconda, larga, col contenuto a capo nella
   stretta — nav 952px e contenuto 240px, cioe' le colonne scambiate.
   E' lo stesso meccanismo gia' visto sulla riga d'acquisto della PDP, dove i
   due pseudo si portavano dietro il proprio `gap`. */
body.woocommerce-account .fm-account .woocommerce::before,
body.woocommerce-account .fm-account .woocommerce::after{content:none}
@media(min-width:768px){ /* --bp-tablet */
  body.woocommerce-account.fm-account--utente .fm-account .woocommerce{grid-template-columns:var(--account-nav) minmax(0,var(--account-content))}
}
/* Woo dispone le due colonne a float con larghezze in percentuale
   (`.woocommerce-MyAccount-navigation{float:left;width:25%}` e il contenuto
   al 75%). Dentro una griglia i float si ignorano, ma le percentuali no: si
   applicavano alla cella, e il contenuto finiva a 163px su 1224. Vanno
   azzerate entrambe. */
body.woocommerce-account .fm-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .fm-account .woocommerce-MyAccount-content{width:auto;float:none;min-width:0}

/* Da sloggato Woo stampa due riquadri, accesso e registrazione: nel tema
   restano affiancati sopra 768px e diventano uno sotto l'altro sotto, ma
   soprattutto smettono di appoggiarsi al bordo sinistro. */
body.woocommerce-account #customer_login{display:grid;gap:var(--auth-gap);align-items:stretch;max-width:var(--auth-content);margin-inline:auto}
@media(min-width:768px){ /* --bp-tablet */
  body.woocommerce-account #customer_login{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Woo mette `.u-column1{float:left;width:47%}` e `.u-column2{float:right}`:
   dentro una cella di griglia i float si ignorano ma le percentuali no, e i
   due riquadri finivano a 225px invece di 468 — con i form a 175px e il testo
   della privacy che andava a capo ogni due parole. Peggio: i float
   scambiavano l'ordine, "Accedi" a destra e "Registrati" a sinistra.
   Stesso caso delle colonne dell'area clienti loggata: le percentuali di Woo
   vanno azzerate e l'ordine dichiarato, non lasciato al float. */
body.woocommerce-account #customer_login>div{min-width:0;width:auto;float:none;padding:var(--account-card-pad);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
@media(min-width:768px){ /* --bp-tablet — sotto le due colonne si impilano e
   un `grid-column:2` creerebbe una colonna implicita vuota. */
  body.woocommerce-account #customer_login .u-column1{grid-column:1}
  body.woocommerce-account #customer_login .u-column2{grid-column:2}
}
/* Doppio riquadro: Woo disegna un bordo anche sul form
   (`.woocommerce form.login{border:1px solid #cfc8d8;padding:20px}`, con un
   grigio fisso che in tema scuro stonava), e la colonna ne ha gia' uno. Il
   riquadro logico e' la colonna: il form dentro non ne ha bisogno. */
body.woocommerce-account #customer_login form{width:auto;float:none;border:none;padding:0;margin:0;border-radius:0}
/* Il clearfix, di nuovo: in griglia diventa un item e sposta le colonne. */
body.woocommerce-account #customer_login::before,
body.woocommerce-account #customer_login::after{content:none}
body.woocommerce-account #customer_login h2{margin-top:0}

/* Le due card erano alte 439 e 511 a 1280 (413 e 509 a 390): `align-items:start`
   le lasciava alte quanto il loro contenuto, e affiancate si vedeva. Sono due
   riquadri della stessa cosa: si allungano insieme (`stretch`, qui sopra). */

/* I due pulsanti erano di due misure — 97px "Accedi" e 119px "Registrati" —
   perche' la larghezza gliela dava la parola. In ciascuna card il pulsante e'
   l'azione unica: prende tutta la larghezza, come `.fm-btn--block` nel resto
   del tema. Cosi' sono uguali per costruzione e non per caso, a ogni larghezza
   e con qualunque traduzione. */
body.woocommerce-account #customer_login form button[type=submit]{width:100%}

/* La riga del pulsante di accesso teneva "Ricordami" a fianco, con la spunta
   incastrata fra il pulsante e il bordo. Con il pulsante a tutta larghezza la
   spunta sale sopra, su una riga sua. */
body.woocommerce-account #customer_login .woocommerce-form-login>.form-row:not(.woocommerce-form-row){
  display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);
}
/* E qui il clearfix di WooCommerce, per la terza volta nel progetto (§1.10).
   Woo mette `::before` e `::after` con `content:" "; display:table` su
   `.form-row`: dentro un contenitore flex diventano **item veri** e si portano
   dietro due `gap`. Misurato: la riga era alta 130px per 100px di contenuto —
   44 di etichetta, 12 di gap, 44 di pulsante — cioe' 24px di vuoto che nessuno
   ha scritto, e la card di accesso 519,3 invece di 511,3. Il presidio esisteva
   gia' due regole piu' su, sul contenitore delle due colonne: mancava sul
   contenitore flex nuovo. Trovato dalla revisione indipendente. */
body.woocommerce-account #customer_login .woocommerce-form-login>.form-row::before,
body.woocommerce-account #customer_login .woocommerce-form-login>.form-row::after{content:none}

/* "Ricordami": la spunta di serie misurava 13x13 con l'aspetto di sistema,
   accanto a campi alti 44 e a un pulsante in gradiente. Prende la stessa forma
   delle spunte dei filtri catalogo — bordo sottile su --border-strong, angolo
   --radius-xs, spunta accesa in --grad-flash — e la riga guadagna l'area di
   tocco che le mancava (§6.5: era alta 30px).
   La geometria del segno di spunta e' un disegno, non un valore di design: e'
   in percentuale sulla casella, e lo spessore del tratto e' 2 come nel set di
   icone del tema. */
body.woocommerce-account #customer_login .woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:var(--space-2);
  min-height:var(--touch-min);margin:0;
  font-size:var(--text-sm);color:var(--text-body);cursor:pointer;
}
body.woocommerce-account #customer_login input[type=checkbox].woocommerce-form__input-checkbox{
  appearance:none;-webkit-appearance:none;
  flex:none;width:var(--space-4);height:var(--space-4);margin:0;
  border:var(--border-hair) solid var(--border-strong);border-radius:var(--radius-xs);
  background:transparent;cursor:pointer;
}
body.woocommerce-account #customer_login input[type=checkbox].woocommerce-form__input-checkbox:checked{
  background:var(--grad-flash);border-color:transparent;
}
body.woocommerce-account #customer_login input[type=checkbox].woocommerce-form__input-checkbox::after{
  content:'';display:block;width:30%;height:55%;margin:5% auto 0;
  border:2px solid var(--on-accent);border-top:0;border-left:0;
  transform:rotate(45deg);opacity:0;
}
body.woocommerce-account #customer_login input[type=checkbox].woocommerce-form__input-checkbox:checked::after{opacity:1}

/* Recupero password e reimpostazione: un solo modulo, che senza trattamento
   si stendeva su tutta la riga (1224px) mentre accanto i riquadri di accesso
   sono larghi 468. Stessa forma degli altri due, ma su una colonna sola e
   piu' stretto, perche' contiene un campo solo. */
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account form.lost_reset_password{
  max-width:32rem;margin-inline:auto;padding:var(--space-5);
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
}
body.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row{margin-bottom:var(--space-3)}

/* Tabelle di ordini e download: non devono sfondare a 390. */
body.woocommerce-account .woocommerce-MyAccount-content table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell{padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--border-subtle)}

/* --- Area clienti: navigazione e bacheca secondo il kit ------------------
   Misure dai token --account-*; il resto sono le primitive del tema. */
.fm-accnav{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-3);align-self:start}
.fm-accnav__utente{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-4)}
.fm-accnav__iniziali{flex:none;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm)}
.fm-accnav__chi{min-width:0;display:flex;flex-direction:column;line-height:var(--leading-tight)}
.fm-accnav__chi b{font-family:var(--font-display);font-size:var(--text-sm);color:var(--text-strong);overflow-wrap:anywhere}
.fm-accnav__chi>span{font-family:var(--font-mono);font-size:var(--text-3xs);color:var(--text-secondary);overflow-wrap:anywhere}
/* `.woocommerce ul li` porta un `margin-bottom` suo: senza azzerarlo il passo
   fra le voci era 68px con la voce alta 48, cioe' venti pixel di aria che
   nessuno aveva scritto. */
.fm-accnav__gruppo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
body.woocommerce-account .fm-accnav__gruppo li{margin:0;padding:0;list-style:none}
.fm-accnav__gruppo+.fm-accnav__gruppo{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}
body.woocommerce-account .woocommerce-MyAccount-navigation.fm-accnav .fm-accnav__gruppo a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--account-nav-item);padding:0 var(--space-3);border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--text-sm);color:var(--text-body);text-decoration:none}
body.woocommerce-account .woocommerce-MyAccount-navigation.fm-accnav .fm-accnav__gruppo a .fm-ico{flex:none;color:var(--text-secondary)}
/* Testo e icona della voce attiva in `--link`, non in `--accent`: il rosa
   pieno su `--accent-soft` sta a 3,2:1 in chiaro. `--link` e' il rosa che il
   design system tiene leggibile come testo (pink-650 / pink-400): 5,1:1 e
   6,1:1 sullo stesso fondo. */
body.woocommerce-account .woocommerce-MyAccount-navigation.fm-accnav .fm-accnav__gruppo li.is-active a{background:var(--accent-soft);color:var(--link)}
body.woocommerce-account .fm-accnav li.is-active a .fm-ico{color:var(--link)}
@media(hover:hover){body.woocommerce-account .fm-accnav a:hover{background:var(--surface-sunken);color:var(--text-strong)}}

/* Bacheca */
/* Il link della privacy nel modulo di registrazione e' dentro un blocco di
   prosa e si distingueva solo per colore: axe lo segna `link-in-text-block`.
   Vale la stessa regola dei link in prosa altrove — sottolineato sempre. */
.woocommerce-privacy-policy-text a{text-decoration:underline;text-underline-offset:2px}

/* Briciole dell'area clienti. Stessa forma di quelle della PDP, che pero'
   erano scritte dentro `.fm-pdp`: qui la regola sta sul componente. */
/* Le briciole dell'area clienti sono lo stesso componente con due scostamenti
   voluti (tracking piu' stretto, spazio sotto invece che attorno): il
   selettore porta anche la classe del componente cosi' vincono per
   specificita' e non per ordine nel file. */
.woocommerce-breadcrumb.fm-account__crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1);margin-block-end:var(--space-2);font-family:var(--font-spec);font-size:var(--text-3xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary)}
.woocommerce-breadcrumb.fm-account__crumbs a{color:var(--text-body);text-decoration:underline;text-underline-offset:2px}
.woocommerce-breadcrumb.fm-account__crumbs [aria-current="page"]{color:var(--text-secondary)}
.fm-account__crumbsep{color:var(--text-muted)}

/* Il paragrafo esplicativo di WooCommerce torna vuoto da un filtro: il `<p>`
   che resta non deve occupare una riga. Vale solo dentro il contenuto
   dell'account, non su tutti i paragrafi vuoti del sito. */
body.woocommerce-account .woocommerce-MyAccount-content>p:empty{display:none}

/* Il saluto e la nota "Non sei tu?" sono i due `<p>` che WooCommerce stampa in
   testa a `dashboard.php`, senza classi: si prendono per posizione, perche'
   copiare il template e' vietato (§7). Non `:first-child`: il primo figlio del
   contenuto e' il contenitore degli avvisi di WooCommerce, sempre presente
   anche quando e' vuoto. Il secondo paragrafo, quello che spiega
   cosa si puo' fare dalla bacheca, resta testo di WooCommerce. */
body.fm-account--bacheca .woocommerce-MyAccount-content>p:first-of-type{margin:0;font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--fw-bold);color:var(--text-strong)}
body.fm-account--bacheca .woocommerce-MyAccount-content>p:first-of-type a{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--fw-regular);color:var(--text-secondary)}
@media(hover:hover){body.fm-account--bacheca .woocommerce-MyAccount-content>p:first-of-type a:hover{color:var(--link-hover)}}
.fm-accdash{display:flex;flex-direction:column;gap:var(--account-block-gap);margin-top:var(--account-block-gap)}
.fm-accdash__stats{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
/* In tema scuro `--surface-sunken` coincide col fondo della pagina (ink-950):
   le tessere sparivano. Servono la superficie della card e un bordo, come
   tutte le altre scatole dell'area clienti. */
.fm-accdash__stats li{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4)}
.fm-accdash__num{display:block;font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--text-2xl);line-height:1;color:var(--text-strong)}
.fm-accdash__lab{display:block;margin-top:var(--space-1);font-family:var(--font-mono);font-size:var(--text-3xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-secondary)}
.fm-accdash__ordine{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--account-card-pad)}
.fm-accdash__ordine-testa{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.fm-accdash__ordine-testa h3{margin:0;font-size:var(--text-lg)}
.fm-accdash__ordine-riga{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--text-body)}
.fm-accdash__num-ordine{font-family:var(--font-mono);color:var(--text-secondary)}
.fm-accdash__tot{margin-inline-start:auto;font-family:var(--font-mono);font-weight:var(--fw-bold);color:var(--text-strong)}
.fm-badge--stato{background:var(--accent-soft);color:var(--link);border-radius:var(--radius-pill);padding:2px var(--space-2);font-family:var(--font-display);font-size:var(--text-2xs);font-weight:var(--fw-semibold)}
.fm-accdash__tessere{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fm-accdash__tessera{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);text-decoration:none;color:var(--text-body)}
.fm-accdash__tessera-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent)}
.fm-accdash__tessera-testo{min-width:0;display:flex;flex-direction:column;line-height:var(--leading-tight)}
.fm-accdash__tessera-testo b{font-family:var(--font-display);color:var(--text-strong);font-size:var(--text-sm)}
.fm-accdash__tessera-testo>span{font-size:var(--text-xs);color:var(--text-secondary)}
.fm-accdash__tessera>.fm-ico:last-child{margin-inline-start:auto;flex:none;color:var(--text-secondary)}

/* Stato vuoto dell'area clienti: il notice viene spogliato e lascia vedere
   l'idioma `.fm-empty` che il filtro gli ha messo dentro. Stesso trattamento
   gia' usato per il carrello vuoto. Vale **solo** dove c'e' `.fm-empty`,
   quindi gli altri avvisi della stessa pagina restano avvisi. */
/* Non `:has(.fm-empty)`: `:has()` e' vietato per la struttura (§9), ed e' gia'
   stato evitato due volte in questo file. La schermata dichiara dal server di
   essere vuota, e lo stato vuoto e' l'ultimo avviso della pagina — su Ordini
   puo' precederlo quello della conferma email, che deve restare un avviso. */
body.fm-account--vuoto .woocommerce-MyAccount-content>.wc-block-components-notice-banner:last-of-type,
body.fm-account--vuoto .woocommerce-MyAccount-content>.woocommerce-info:last-of-type{display:block;padding:0;background:none;border:0;box-shadow:none}
body.fm-account--vuoto .woocommerce-MyAccount-content>.wc-block-components-notice-banner:last-of-type>svg{display:none}
body.fm-account--vuoto .woocommerce-MyAccount-content .fm-empty{width:100%}
body.fm-account--vuoto .woocommerce-MyAccount-content .fm-empty .fm-btn{margin-block-start:var(--space-2)}

/* Indirizzi: due card, come nella tavola. Il markup di WooCommerce regge da
   solo — `.woocommerce-Address` con dentro l'intestazione e l'`<address>` —
   quindi niente template copiato (§7), solo la forma.
   Il titolo era un `<h2>`, cioe' la misura dei titoli di pagina: qui e' il
   titolo di una card e scende a `--text-lg`. */
/* Stessa trappola della griglia dell'area clienti, §1.10: `.col2-set` porta
   i suoi `::before/::after` in `display:table`, che dentro una griglia
   diventano ITEM veri — si prendevano le prime celle e spingevano le due card
   nella meta' destra, lasciando un vuoto a sinistra. */
body.woocommerce-account .woocommerce .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce .woocommerce-Addresses::after{content:none}
body.woocommerce-account .woocommerce .woocommerce-Addresses{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
body.woocommerce-account .woocommerce .woocommerce-Address{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--account-card-pad);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:auto;float:none}
body.woocommerce-account .woocommerce .woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
body.woocommerce-account .woocommerce .woocommerce-Address-title h2{flex:1;margin:0;min-width:0;font-size:var(--text-lg);text-align:start}
/* L'azione e' un bottone, non un link di prosa: nel kit e' la sola cosa
   cliccabile della card. */
body.woocommerce-account .woocommerce .woocommerce-Address-title a.edit{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-sm);padding-inline:var(--space-3);border-radius:var(--radius-sm);background:transparent;box-shadow:inset 0 0 0 1.5px var(--border-default);color:var(--text-strong);font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--fw-semibold);text-decoration:none}
@media(hover:hover){body.woocommerce-account .woocommerce .woocommerce-Address-title a.edit:hover{box-shadow:inset 0 0 0 1.5px var(--border-strong)}}
body.woocommerce-account .woocommerce .woocommerce-Address address{margin:0;font-style:normal;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}

/* La riga "Ultimo ordine": sul telefono e' la prima cosa dentro la card di
   navigazione, da 768 in su non serve perche' c'e' la scheda intera.
   Il `display:none` qui sotto veniva battuto dalla forma delle voci, che era
   scritta su **ogni** `a` della card (0,3,1) invece che sulle voci: da 768 in
   su la riga restava, dentro una colonna di 264px, e andava a capo tre volte.
   La forma ora e' legata a `.fm-accnav__gruppo` — la regola sul componente,
   non sul contenitore (§1.9). */
.fm-accnav__ultimo{display:none}
.fm-accnav__vai{display:none}
.fm-accnav__ultimo-eyebrow{display:block;font-family:var(--font-spec);font-size:var(--text-3xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}
.fm-accnav__ultimo-dati{display:block;margin-block-start:4px;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-strong)}

@media(max-width:767.98px){ /* --bp-tablet */
  /* Sul telefono la bacheca del kit E' la navigazione: card utente, ultimo
     ordine, elenco delle voci. Contatori, saluto e tessere sono la forma da
     768 in su — a telefono il contenuto cambia, non si impila soltanto. */
  .fm-accnav__ultimo{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-2);margin-block-end:var(--space-2);border-block:1px solid var(--border-subtle);text-decoration:none;color:var(--text-body)}
  .fm-accnav__ultimo-testo{flex:1;min-width:0}
  .fm-accnav__ultimo>.fm-ico{flex:none;color:var(--text-muted)}
  .fm-accnav__ultimo .fm-badge{flex:none}
  .fm-accnav__iniziali{width:48px;height:48px;background:var(--grad-flash);color:var(--white)}
  /* "Bacheca" non si elenca sulla bacheca: nel kit l'elenco sono le schermate
     dove puoi andare, e qui ci sei gia'. */
  body.fm-account--bacheca .woocommerce-MyAccount-navigation-link--dashboard{display:none}
  .fm-accnav__vai{display:inline-flex;margin-inline-start:auto;color:var(--text-muted)}
  .fm-accnav__ultimo-dati{white-space:nowrap}
  /* Con "IN LAVORAZIONE" accanto, numero e totale non ci stavano e il totale
     veniva troncato: il badge stringe il suo corpo e la riga si chiude. */
  .fm-accnav__ultimo{gap:var(--space-2);padding-inline:var(--space-2)}
  .fm-accnav__ultimo .fm-badge{font-size:var(--text-3xs);padding-inline:var(--space-1)}
  /* Due card, come nella tavola: l'utente sopra, l'elenco sotto. */
  body.fm-account--bacheca .fm-accnav{background:none;border:0;padding:0}
  body.fm-account--bacheca .fm-accnav__utente,
  body.fm-account--bacheca .fm-accnav__liste{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
  body.fm-account--bacheca .fm-accnav__utente{padding:var(--account-card-pad-narrow);margin-block-end:var(--space-3)}
  body.fm-account--bacheca .fm-accnav__liste{padding:var(--space-2);overflow:hidden}
  body.fm-account--bacheca .fm-accnav__ultimo{margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-2);border-block-start:0}
  body.fm-account--bacheca .fm-accdash__stats,
  body.fm-account--bacheca .fm-accdash__tessere,
  body.fm-account--bacheca .fm-accdash__ordine,
  body.fm-account--bacheca .woocommerce-MyAccount-content>p:first-of-type{display:none}
}
@media(hover:hover){.fm-accdash__tessera:hover{border-color:var(--border-default)}}

/* --- Tendine alte come i campi di testo ---------------------------------- */
/* Le tendine di paese e provincia sono select2: l'elemento che si vede non e'
   il `<select>` — quello e' alto 1px dietro le quinte — ma
   `.select2-selection__rendered`. Su quell'elemento si sommavano **due**
   meccanismi di altezza, di due autori diversi:

     WooCommerce (woocommerce-blocktheme.css)  padding:.9rem 1.1rem  -> 14,4px sopra e sotto
     Fluid Checkout                            line-height e min-height pari all'altezza del campo

   Nessuno dei due e' sbagliato da solo: il primo dimensiona come un campo di
   testo, il secondo affida tutta l'altezza al `line-height` e per questo azzera
   il padding. Insieme facevano **71,8px** al checkout contro i 47,8 dei campi,
   e **74,4 contro 44** sulla pagina indirizzi dell'area clienti. Misurato.

   Si tiene **un meccanismo solo**, quello dei campi di testo — padding piu'
   `line-height:normal` — cosi' i due controlli sono uguali per costruzione e
   non per coincidenza, e l'altezza continua a seguire il corpo del testo invece
   di essere scritta a mano.

   Sta in woo.css e non in fluid-checkout.css: quel foglio si carica **solo sul
   checkout**, ed e' il motivo per cui la prima versione di questa correzione
   lasciava fuori la pagina indirizzi, che ha lo stesso difetto per la stessa
   causa. Una causa, un posto.

   Specificita': quella di Fluid Checkout e' (0,4,2); questa e' (0,5,1) e vince
   sul numero di classi, senza `!important`. */
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered{
  line-height:normal;
  min-height:0;
}
.woocommerce form .form-row .select2-container .select2-selection--single{
  min-height:0;
}

/* Sul corpo del testo non serve niente per il desktop: WooCommerce da' gia' lo
   stesso `--wp--preset--font-size--small` al campo e al contenitore select2. Un
   primo tentativo aggiungeva una regola e faceva danno — portava la tendina a
   16px mentre i campi restavano a 13, cioe' lo stesso difetto con un altro
   numero.

   Serve invece sul telefono: Fluid Checkout alza i campi a 16px sotto i 999px
   per impedire lo zoom automatico di iOS, ma la sua regola parla di
   `input, select, textarea` e il controllo visibile di select2 e' un `div`.
   Qui si rispecchia la **stessa** condizione — stessa media query, stesse
   classi sul body, stesso `!important` che l'originale ha — estesa al
   contenitore. Le due meta' della regola del plugin sono checkout e pagina
   indirizzi: tutte e due. */
/* 999px **non e' un nostro breakpoint** e non e' nella lista dell'invariante 2:
   e' il numero che Fluid Checkout usa nella regola che questa rispecchia. Qui
   ricopiarlo e' il punto — una soglia diversa dalla sua farebbe accendere le
   due regole in momenti diversi, che e' il difetto che stiamo togliendo. Stesso
   discorso per il 16px: e' la soglia oltre la quale iOS non ingrandisce il
   modulo, non una misura di design. Se un giorno il plugin cambia quel numero,
   va cambiato anche qui: e' scritto perche' si trovi. */
@media (max-width:999px){
  body.woocommerce-checkout.has-form-field-font-size-fix .select2-container,
  body.woocommerce-checkout.has-form-field-font-size-fix .select2-container .select2-selection__rendered,
  body.woocommerce-checkout.has-form-field-font-size-fix .select2-container .select2-search__field,
  body.woocommerce-edit-address.has-form-field-font-size-fix .select2-container,
  body.woocommerce-edit-address.has-form-field-font-size-fix .select2-container .select2-selection__rendered,
  body.woocommerce-edit-address.has-form-field-font-size-fix .select2-container .select2-search__field{
    font-size:16px!important;
  }
}

/* Nell'area clienti i campi non si dimensionano come al checkout: li' l'altezza
   viene da padding piu' contenuto, qui da `min-height:var(--control-md)` con
   padding verticale zero (vedi il blocco dei campi dell'account piu' sopra).
   Sono due modi diversi di dimensionare lo stesso tipo di controllo, ed e' una
   differenza che viene da prima di questa correzione: annotata, non sanata qui,
   perche' unificarla tocca tutti i moduli del sito.
   La tendina deve assomigliare ai campi **che le stanno accanto**, quindi in
   quest'area prende la stessa misura fissa. Il testo si centra con `line-height`
   perche' un `div` non centra da solo come fa un `input`. */
body.woocommerce-account .woocommerce .select2-container .select2-selection--single{
  min-height:var(--control-md);
}
body.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__rendered{
  padding-block:0;
  line-height:calc(var(--control-md) - 2 * var(--border-thin)); /* l'altezza meno i due bordi dei campi accanto */
}
/* E lo stesso corpo del testo dei campi accanto: WooCommerce da' al contenitore
   select2 il suo `--wp--preset--font-size--small`, che qui non e' la misura dei
   campi dell'area clienti. */
body.woocommerce-account .woocommerce .select2-container,
body.woocommerce-account .woocommerce .select2-container .select2-selection__rendered{
  font-size:var(--text-sm);
}
/* La tendina **aperta** non sta dentro `.woocommerce`: select2 appende il
   pannello direttamente al `<body>`, quindi la regola qui sopra non lo
   raggiunge e l'elenco restava a 13px mentre il controllo chiuso ne aveva 15.
   Trovato dalla revisione indipendente. Il pannello si riconosce dalla propria
   classe, che select2 mette solo li'. */
body.woocommerce-account .select2-container--open .select2-results__option,
body.woocommerce-account .select2-container--open .select2-search__field,
body.woocommerce-account .select2-container--open .select2-search--dropdown .select2-search__field{
  font-size:var(--text-sm);
}