/* ===========================================================================
   FLASHMAC — PATTERN DELLA HOME E DELLE PAGINE
   Ogni sezione dipinge la sua banda fino al bordo (Rule 1); il contenuto
   resta nello shell (Rule 2). Bande adiacenti sempre a un passo di distanza.
   =========================================================================== */

/* --- Hero ---------------------------------------------------------------
   La banda e' un gradiente (chiaro -> accento tenue) che dipinge fino al
   bordo viewport: e' l'apertura della pagina, non una banda a/b. In scuro
   resta --grad-ink, come tutte le superfici brand scure. */
.fm-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--bg-subtle) 0%,var(--accent-soft) 100%);padding-block:var(--space-8)}
.theme-dark .fm-hero{background:var(--grad-ink)}
.fm-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:var(--space-7);align-items:center}
/* Occhiello in font spec, maiuscolo e letterspaced come nella tavola. */
.fm-hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--border-subtle);font-family:var(--font-spec);font-size:var(--text-2xs);letter-spacing:var(--tracking-spec);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--text-body);box-shadow:var(--shadow-xs)}
.fm-hero__badge .fm-ico{color:var(--flash-orange);fill:var(--flash-orange)}
.fm-hero h1{margin:var(--space-4) 0 var(--space-4);font-size:var(--text-4xl)}
.fm-hero p{max-width:52ch;font-size:var(--text-lg);color:var(--text-body)}
.fm-hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
.fm-hero__pills{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5)}
/* Nel kit e' il gruppo che va a capo, non il testo dentro la pill: senza
   `nowrap` una pill stretta spezza la propria etichetta su due righe. */
.fm-hero__pills .fm-pill{white-space:nowrap}
.fm-hero__pills .fm-ico{color:var(--flash-pink)}
.fm-hero__media{position:relative;display:flex;align-items:center;justify-content:center}
.fm-hero__media::before{content:'';position:absolute;inset:6% 4%;background:var(--grad-violet);filter:blur(48px);opacity:.55;border-radius:50%}
/* Il render dell'hero: nel kit ha un tetto in altezza e sta dentro il suo box
   senza deformarsi (`maxHeight` 380 in largo, 240 stretto, `objectFit:contain`).
   Da noi cresceva fino a 358 quadrati sul telefono, mangiandosi mezza
   schermata sotto le pill. */
.fm-hero__media img{position:relative;width:100%;max-width:520px;max-height:380px;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(13,11,20,.35))}

/* --- Trust bar ---------------------------------------------------------- */
.fm-trust{display:grid;grid-template-columns:repeat(var(--cols-trust-desktop),minmax(0,1fr));gap:var(--space-4)}
.fm-trust__card{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs)}
/* L'icona sta in una piastrella --accent-soft, non nuda sul fondo card. */
/* --fintile-logo-size e non --control-md: la piastrella dell'icona non e' un
   controllo e non deve seguire la misura minima del tocco. Il token vale 40px
   ed e' nato proprio da qui — tokens/patterns.css lo documenta come "la misura
   della piastrella gia' usata nella TrustBar". */
.fm-trust__ico{flex:0 0 var(--fintile-logo-size);width:var(--fintile-logo-size);height:var(--fintile-logo-size);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--accent-soft)}
.fm-trust__card b{display:block;font-family:var(--font-display);font-size:var(--text-sm);color:var(--text-strong)}
/* --text-muted non e' tematizzato e resta sotto 4,5:1 su --surface-card in
   entrambi i temi (limite gia' annotato per il design system). Non si sale
   pero' fino a --text-body: --text-secondary e' AA su tutte e due le
   superfici (5,80 e 5,87:1) ed e' piu' vicino alla tavola. */
.fm-trust__card span{font-size:var(--text-xs);color:var(--text-secondary)}

/* --- Card categoria ------------------------------------------------------
   Card chiara bordata: piastra foto 4:3 con badge icona, titolo, numero di
   modelli e prezzo di partenza. L'ultima colonna e' la card gradiente che
   porta al catalogo intero: da qui il +1 sul numero di colonne del token.
   SCOSTAMENTO DALLA TAVOLA: la tavola tiene la foto in `object-fit:contain`
   con `mix-blend-mode:multiply` su una piastra letterale. L'invariante §1.5
   vieta il blend e la §1.2 il valore letterale: la piastra e' --surface-photo
   (bianca in entrambi i temi, lo stesso idioma delle foto prodotto) e la foto
   la riempie in `cover`, senza blend. */
.fm-tiles{display:grid;grid-template-columns:repeat(calc(var(--cols-category-desktop) + 1),minmax(0,1fr));gap:var(--space-4)}
.fm-tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);text-decoration:none;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.fm-tile__plate{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-photo)}
.fm-tile__plate img{width:100%;height:100%;object-fit:cover}
.fm-tile__icon{position:absolute;top:var(--space-2);left:var(--space-2);width:var(--space-6);height:var(--space-6);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--accent-soft)}
/* Interlinea stretta come gli altri titoli di card del tema — card del
   mega-menu in chrome.css (stesso font, corpo e peso) e card prodotto in
   woo.css (stesso font e corpo, peso semibold): qui mancava e il nome cadeva
   sull'1,5 del corpo, 22,5px contro i 19 della tavola. Cambia la line-box di
   tutti i nomi, ma si nota sui due che nel catalogo vero vanno a capo. */
.fm-tile__name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-bold);line-height:var(--leading-snug);color:var(--text-strong)}
/* La tavola usa --text-muted, che non e' AA (4,43:1 su bianco). Non si sale
   pero' fino a --text-body: esiste --text-secondary, che e' AA in entrambi i
   temi ed e' gia' il colore dei gemelli di questa etichetta — .fm-toolbar__count,
   .fm-rating__count, .fm-feature__text>span, .fm-review__product. E' il piu'
   vicino alla tavola fra quelli leggibili. */
.fm-tile__count{font-size:var(--text-2xs);color:var(--text-secondary)}
/* La tavola usa --flash-pink, che su superficie chiara da' 3,71:1 (limite
   noto del design system): si usa --accent-hover, che e' tematizzato e passa
   4,5:1 in entrambi i temi — la stessa scelta gia' fatta per "Azzera". */
.fm-tile__from{margin-top:auto;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--accent-hover)}
/* Il testo e' scuro, non bianco: il gradiente parte da --flash-orange, e li' il
   bianco non arriva a meta' del minimo — la stessa ragione per cui il CTA
   "Vendi o permuta usato" ha gia' l'etichetta scura, soluzione approvata dal
   cliente. Il gradiente non si tocca.
   Serie unica, misurata il 2026-09-18 sui pixel dipinti (40 campioni
   orizzontali sulla riga del testo, fondo = pixel a luminanza massima in
   +-6px), non sui token. Prima due serie diverse giravano nei commenti e in
   PROGRESS: ora una sola, con la larghezza accanto.

     larghezza  punto              bianco   --ink-950
     1280       sinistra/arancio   2,33     8,37
     1280       meta'              2,95     6,63
     1280       destra/rosa        3,56     5,48
      390       sinistra/arancio   2,25     8,70
      390       meta'              2,96     6,59
      390       destra/rosa        3,65     5,36   <- peggiore

   Nessun punto sotto 4,5:1. I numeri coincidono nei due temi perche'
   --grad-flash e --ink-950 sono gli stessi in entrambi. La freccia segue: usa
   currentColor. */
.fm-tile--all{justify-content:center;gap:var(--space-2);padding:var(--space-5) var(--space-4);background:var(--grad-flash);border-color:transparent;box-shadow:var(--glow-flash);color:var(--ink-950)}
.fm-tile--all .fm-tile__name{font-size:var(--text-md);color:var(--ink-950)}
/* Niente colore qui: lo eredita dalla card. Scritto sull'elemento varrebbe su
   qualunque tile, e alla prima tile non gradiente in tema scuro sarebbe testo
   quasi nero su card quasi nera (§1.9). */
.fm-tile__more{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs)}
@media(hover:hover){.fm-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);text-decoration:none}}

/* --- Promo cards -------------------------------------------------------- */
.fm-promos{display:grid;grid-template-columns:repeat(var(--cols-promo-desktop),minmax(0,1fr));gap:var(--space-5)}
/* Le due card sono speculari, non la stessa forma parametrizzata: la prima
   spinge col gradiente e chiude con una CTA scura, la seconda e' una
   superficie --ink-900 con alone viola e CTA a gradiente. Il contenuto
   scorre dall'alto (niente flex, niente min-height): il ritmo del kit e'
   14/8/20 e non e' esprimibile con un solo `gap`.
   LETTERALI del kit, riprodotti come tali perche' non esistono nella scala:
   14px sopra il titolo, 20px sotto il corpo, il fondo delle pill
   (rgba bianco .20 / .12), il loro padding 4px 11px e il gap 6px con
   l'icona, il tracking .1em (il token --tracking-spec vale .12em) e la
   geometria dell'alone (240px, offset -60/-40, blur 70px, opacity .45) e la
   misura del corpo (340px: il precedente 38ch valeva 340px a --text-md, ma
   a --text-sm scende a 319 e stringe la colonna rispetto alla tavola). */
.fm-promo{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:var(--space-6)}
.fm-promo--flash{background:var(--grad-flash);color:#fff;box-shadow:var(--glow-flash)}
/* Il bordo non e' decorativo: in dark --section-band-b vale --ink-900, lo
   stesso colore della card, e senza --ink-800 la card sparisce nella banda. */
.fm-promo--ink{background:var(--ink-900);border:1px solid var(--ink-800);color:#fff}
.fm-promo--ink::before{content:'';position:absolute;width:240px;height:240px;right:-40px;top:-60px;border-radius:50%;background:var(--grad-violet);filter:blur(70px);opacity:.45}
/* Non e' una .fm-badge: quella ha peso e padding della variante soft. */
.fm-promo__pill{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--radius-pill);font-family:var(--font-spec);font-size:var(--text-3xs);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.fm-promo--flash .fm-promo__pill{background:rgba(255,255,255,.20)}
.fm-promo--ink .fm-promo__pill{background:rgba(255,255,255,.12)}
.fm-promo h3{position:relative;margin:14px 0 var(--space-2);color:#fff;font-size:var(--text-2xl)}
.fm-promo p{position:relative;margin:0 0 20px;font-size:var(--text-sm);color:rgba(255,255,255,.94);max-width:340px}
.fm-promo--ink p{color:var(--ink-200)}
.fm-promo .fm-btn{position:relative;font-size:var(--text-md);border-radius:var(--radius-md)}

/* --- Rail ----------------------------------------------------------------
   Eccezione deliberata alla Rule 2: la testata resta sul bordo del contenuto,
   la track scorre oltre lo shell. */
.fm-rail{padding-block:var(--space-8)}
.fm-rail__head{max-width:calc(var(--content-default) + 2 * var(--gutter-shell));margin-inline:auto;padding-inline:var(--gutter-shell);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.fm-rail__head .fm-section__title{display:flex;align-items:center;gap:var(--space-2)}
/* Rosa pieno in entrambi i temi, come in tavola: --accent-hover usciva
   vinaccia in chiaro e slavato in scuro. --accent e' --flash-pink nei due
   temi, quindi riproduce il valore del kit senza un colore nuovo. */
.fm-rail__all{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--touch-min);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);color:var(--accent-text);white-space:nowrap}
.fm-rail__track{position:relative}
/* Le frecce galleggiano sopra la track e stanno nella gronda, non sopra la
   prima card: la track allarga il proprio inset quanto basta a liberarle
   (--space-4 di margine + il bottone + --space-2 di respiro). La testata
   resta sul bordo del contenuto, quindi non si muove. */
.fm-rail .wc-block-product-template{padding-inline:max(var(--rail-inset),calc(var(--space-4) + var(--control-lg) + var(--space-2)));scroll-padding-inline:max(var(--rail-inset),calc(var(--space-4) + var(--control-lg) + var(--space-2)))}
.fm-rail__nav{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-5)}
.fm-rail__nav button{width:var(--control-sm);height:var(--control-sm);border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-body);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fm-rail__nav button:disabled{opacity:.4;cursor:default}
@media(max-width:767.98px){ /* --bp-tablet */
  /* Sul telefono il kit tiene il render a 240: piu' in alto e la sezione
     diventa tutta immagine sotto le pill. */
  .fm-hero__media img{max-height:240px}
  /* Sotto il tablet le frecce che restano visibili sono un bersaglio
     come gli altri: --control-sm (36px) non basta. */
  .fm-rail__nav button{width:var(--touch-min);height:var(--touch-min)}
}
/* Full-bleed a --space-4 dal bordo viewport, come nel kit: ancorate allo
   shell finivano a 32px e a 1280 il bottone arrivava a 88px contro la prima
   card a 80, cioe' 8px sotto la card, che lo tagliava. Cosi' il bottone
   occupa 16→72 e l'inset della track (80px, riga sopra) lascia 8px d'aria.
   Conseguenza accettata: oltre i 1224px di contenuto le frecce restano sul
   bordo del viewport e si allontanano dalle card. E' quel che fa la tavola. */
.fm-rail__nav--float{position:absolute;inset-block:0;left:var(--space-4);right:var(--space-4);display:flex;align-items:center;justify-content:space-between;margin-top:0;pointer-events:none;z-index:2}
/* Forma dell'IconButton soft del kit: quadrato stondato su superficie
   incassata, non il cerchio bianco di prima. La misura resta --control-lg
   (56px): i 52px del kit sono un letterale. */
.fm-rail__nav--float button{width:var(--control-lg);height:var(--control-lg);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-sunken);color:var(--text-body);box-shadow:var(--shadow-md);pointer-events:auto}
.fm-rail__nav--float button:disabled{pointer-events:none}

/* --- Banner TikTok ------------------------------------------------------ */
/* Banner TikTok, forma della tavola: card scura con due aloni di marca, il
   testo a sinistra dentro una misura fissa e il logo grande a destra. Prima
   era una riga bassa con l'icona piccola e il pulsante spinto a destra. */
.fm-tiktok{position:relative;overflow:hidden;background:var(--grad-ink);color:#fff;border-radius:var(--radius-xl);padding:var(--space-7)}
.fm-tiktok::before,.fm-tiktok::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.fm-tiktok::before{inset-block-start:-60px;inset-inline-start:-40px;width:280px;height:280px;background:var(--grad-violet);filter:blur(90px);opacity:.35}
.fm-tiktok::after{inset-block-end:-80px;inset-inline-end:-20px;width:340px;height:340px;background:var(--grad-flash);filter:blur(100px);opacity:.45}
.fm-tiktok__testo{position:relative;max-width:560px}
.fm-tiktok__eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-spec);font-size:var(--text-3xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:var(--fw-bold);color:#fff;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:var(--radius-pill)}
.fm-tiktok h2{margin:16px 0 8px;font-size:var(--text-3xl);letter-spacing:var(--tracking-tight);color:#fff}
.fm-tiktok p{margin:0 0 22px;max-width:400px;font-size:var(--text-md);color:var(--ink-200)}
.fm-tiktok__logo{position:absolute;inset-inline-end:56px;inset-block-start:50%;transform:translateY(-50%);opacity:.9;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}

/* --- Perché flashmac ---------------------------------------------------- */
.fm-why{display:grid;grid-template-columns:repeat(var(--cols-why-desktop),minmax(0,1fr));gap:var(--space-5)}
.fm-why__item .fm-ico{color:var(--flash-pink);margin-bottom:var(--space-3)}
/* --text-lg e non --text-xl: la tavola scrive questi tre titoli a 19px, e da
   noi erano 24. --text-sm sul testo, per la stessa ragione. */
.fm-why__item h3{margin:0 0 var(--space-2);font-size:var(--text-lg)}
/* La tavola usa --text-muted, che non e' AA: --text-secondary e' il piu'
   vicino fra quelli leggibili, come sul conteggio delle tile categoria. */
.fm-why__item p{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}

/* --- Recensioni --------------------------------------------------------- */
/* La banda non e' piatta: due aloni sfocati la attraversano, violaceo in alto
   a sinistra e caldo in basso a destra. I gradienti e il fondo sono token;
   posizione, diametro, sfocatura e opacita' sono letterali del kit (il
   sistema non ha token per la geometria di un alone). Gli aloni sono
   posizionati, quindi il contenuto deve salirci sopra con lo z-index. */
.fm-reviews{position:relative;overflow:hidden;background:var(--section-band-accent);padding-block:var(--space-9)}
.fm-reviews::before,.fm-reviews::after{content:'';position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.fm-reviews::before{top:-40px;left:8%;width:300px;height:300px;background:var(--grad-violet);filter:blur(100px);opacity:.22}
.fm-reviews::after{bottom:-60px;right:10%;width:340px;height:340px;background:var(--grad-flash);filter:blur(110px);opacity:.2}
/* Vale per tutti e quattro gli stati: testata, track, frecce e i wrapper
   .fm-shell di empty/error sono figli diretti della banda. */
.fm-reviews > *{position:relative;z-index:1}
.fm-reviews__head{text-align:center;max-width:calc(var(--content-default) + 2 * var(--gutter-shell));margin-inline:auto;padding-inline:var(--gutter-shell);margin-bottom:var(--space-6)}
/* Fila di stelle: cinque sempre, base grigia con sopra il riempimento
   arancione ritagliato alla percentuale del voto — cosi' il 4,9 mostra la
   quinta stella quasi piena invece di arrotondare a 5/5. */
.fm-stars{position:relative;display:inline-flex}
.fm-stars__base,.fm-stars__fill{display:flex;gap:var(--space-1)}
.fm-stars__base{color:var(--ink-200)}
.fm-stars__fill{position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden;color:var(--flash-orange)}
.fm-stars .fm-ico{flex:none;fill:currentColor;stroke:currentColor}
/* Voto aggregato: fila di stelle, poi il numero grande in gradiente. */
.fm-reviews__stars{display:flex;justify-content:center;margin-bottom:var(--space-2)}
.fm-reviews__score{margin:var(--space-2) 0 0;font-size:var(--text-3xl);line-height:var(--leading-normal)}
/* scroll-padding: senza, lo snap mandatory allinea la prima card al bordo
   della scrollport (x=0) e si mangia l'inset del rail — la card finiva a
   filo schermo invece che sul bordo del contenuto, sotto al titolo.
   padding-block: e' lo spazio in cui vive l'ombra della card di vetro, che
   senza verrebbe ritagliata dallo scroll orizzontale. */
.fm-reviews__track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--review-card-width);gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-inset);scrollbar-width:none;padding-inline:var(--rail-inset);padding-block:var(--space-1) var(--space-3)}
.fm-reviews__track::-webkit-scrollbar{display:none}
/* Card di vetro: la superficie al 55% lascia passare la banda, la forma la
   fanno l'ombra e il filo chiaro del bordo. Colonna flex perche' i margini
   di stelle e testo non collassino: il ritmo della tavola e' 12+12 sopra il
   testo, non 12. */
.fm-review{display:flex;flex-direction:column;scroll-snap-align:start;padding:var(--space-5);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--surface-card) 55%,transparent);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);box-shadow:var(--shadow-sm),var(--glass-shadow)}
.fm-review__stars{display:flex;margin-bottom:var(--space-3)}
.fm-review p{margin:var(--space-3) 0 var(--space-4);font-size:var(--text-sm)}
/* La firma e' due righe distinte, non una stringa in mono: il monospace in
   questo sistema e' il ruolo del prezzo. Il prodotto sta su una riga sola e
   trabocca con i puntini, altrimenti allunga la card. */
.fm-review__author{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);color:var(--text-strong);font-style:normal}
.fm-review__product{font-family:var(--font-body);font-size:var(--text-xs);color:var(--text-secondary);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Le frecce delle recensioni sono deliberatamente diverse da quelle dei rail
   prodotto: pill trasparente col chevron rosa, non pill pieno col chevron
   scuro. Variante locale, .fm-rail__nav resta intatta.
   32px e' un letterale del kit: la scala controlli parte da --control-sm
   (36px) e manca un --control-xs. */
.fm-reviews .fm-rail__nav{margin-top:var(--space-4)}
.fm-reviews .fm-rail__nav button{width:32px;height:32px;background:transparent;color:var(--flash-pink)}
.fm-reviews .fm-rail__nav button:hover:not(:disabled){border-color:var(--flash-pink)}
.fm-skeleton{background:var(--surface-sunken);border-radius:var(--radius-lg);min-height:180px}

/* --- Pagine statiche / blog / contatti --------------------------------- */
.fm-page{padding-block:var(--space-7) var(--space-9)}
.fm-page__title{margin:0 0 var(--space-4);font-size:var(--text-3xl)}
.fm-prose{max-width:72ch}
/* La scala del testo corrente vale per TUTTO il testo scritto dal cliente: contenuto di
   pagine e articoli (.fm-prose), descrizione della categoria e descrizione del prodotto
   (.fm-testo). Un h1 dentro quel testo (le descrizioni SEO delle categorie ne hanno) sta
   alla scala dell'h2: l'H1 della pagina resta l'unico titolo a quella dimensione. */
:is(.fm-prose,.fm-testo) :is(h1,h2){margin:var(--space-7) 0 var(--space-3);font-size:var(--text-2xl)}
:is(.fm-prose,.fm-testo) h3{margin:var(--space-6) 0 var(--space-2);font-size:var(--text-xl)}
:is(.fm-prose,.fm-testo) :is(h4,h5,h6){margin:var(--space-5) 0 var(--space-2);font-size:var(--text-lg)}
:is(.fm-prose,.fm-testo) > :first-child{margin-block-start:0}
.fm-prose p,.fm-prose li{font-size:var(--text-md);line-height:var(--leading-relaxed)}
/* nella scheda prodotto l'H1 e' gia' --text-2xl: la descrizione scende di un gradino */
.fm-pdp__tabs.fm-testo :is(h1,h2){font-size:var(--text-xl)}
.fm-pdp__tabs.fm-testo h3{font-size:var(--text-lg)}
.fm-pdp__tabs.fm-testo :is(h4,h5,h6){font-size:var(--text-md)}
.fm-doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-7);align-items:start}
.fm-doc__index{position:sticky;top:calc(var(--header-offset) + var(--space-4));font-size:var(--text-sm)}
.fm-doc__index a{display:block;padding:5px 0;color:var(--text-muted)}
.fm-doc__index a:hover,.fm-doc__index a[aria-current]{color:var(--accent-text)}
.fm-blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.fm-postcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.fm-postcard img{aspect-ratio:16/10;object-fit:cover;width:100%}
.fm-postcard__body{padding:var(--space-4)}

/* --- Partner + slot Feedaty ---------------------------------------------
   Ultima sezione prima del footer: nessun titolo, nessuna eyebrow, una riga
   centrata di chip. I loghi sono asset di marchio e vanno usati come sono —
   niente recolor, niente grayscale (screens.jsx §PartnerLogos lo dice
   esplicitamente). Sono raster con fondi propri, quindi la leggibilita' in
   scuro la fa la piastra --surface-photo, bianca in entrambi i temi: lo
   stesso idioma delle foto prodotto (§1.5). */
.fm-partners-band{background:var(--bg-base);border-top:var(--border-hair) solid var(--border-subtle);padding-block:var(--space-5)}
.fm-partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4) var(--space-6)}
.fm-partners__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4) var(--space-6)}
.fm-partner{display:flex;align-items:center;justify-content:center;min-height:var(--space-8);padding-inline:var(--space-5);background:var(--surface-photo);border-radius:var(--radius-sm);text-decoration:none}
.fm-partner img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--space-7);object-fit:contain}
a.fm-partner:focus-visible{box-shadow:var(--ring-focus)}

/* Lo slot tiene il posto del widget di terze parti: se lo SDK non risponde
   resta un riquadro bianco vuoto, non una voragine. Le misure arrivano dalla
   variante Feedaty via custom property inline (vedi patterns/home-partners). */
.fm-partners__feedaty{flex:0 0 auto}
.fm-feedaty{width:var(--fm-feedaty-w);max-width:100%;min-height:var(--fm-feedaty-h);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface-photo);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-sm)}
.fm-feedaty .feedaty_widget{max-width:100%}

/* --- Il grado, spiegato in due righe ------------------------------------
   Pannello scuro dentro una banda chiara: e' `.theme-dark`, quindi gli alias
   dei token si invertono da soli e il glow di superficie si accende
   (--surface-glow-strength passa a 1). Le barrette usano --grade-a|b|c: da
   quando il badge condizione della card e' passato alla variante soft del
   Badge (fondi --success-bg/--orange-50/--warning-bg) i due non condividono
   piu' i colori, e questa resta l'unica lettura cromatica della scala. */
/* Pannello scuro con i token di superficie, non con la classe di tema:
   `theme-dark` puo' stare solo su <body> e sul footer (CLAUDE.md §1.4).
   Il bordo serve in tema scuro, dove il gradiente finisce sullo stesso
   colore della banda e il pannello perderebbe i suoi contorni. */
.fm-grades{position:relative;overflow:hidden;isolation:isolate;background:var(--grad-ink);border:var(--border-hair) solid var(--ink-800);border-radius:var(--radius-xl);padding:var(--space-7)}
.fm-grades::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--surface-glow);opacity:var(--surface-glow-strength)}
.fm-grades__intro{max-width:62ch;margin-bottom:var(--space-6)}
.fm-grades__intro h2{margin:0 0 var(--space-2);font-size:var(--text-2xl);color:var(--white)}
.fm-grades__intro p{margin:0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--ink-300)}
.fm-grades__cols{display:grid;grid-template-columns:repeat(var(--cols-why-desktop),minmax(0,1fr));gap:var(--space-5)}
.fm-grade__bar{display:block;width:var(--space-6);border-top:var(--border-bold) solid var(--border-subtle);border-radius:var(--radius-pill);margin-bottom:var(--space-3)}
.fm-grade__bar[data-grade=a]{border-top-color:var(--grade-a)}
.fm-grade__bar[data-grade=b]{border-top-color:var(--grade-b)}
.fm-grade__bar[data-grade=c]{border-top-color:var(--grade-c)}
.fm-grade__label{display:block;margin-bottom:var(--space-2);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-bold);color:var(--white)}
.fm-grade p{margin:0;font-size:var(--text-sm);color:var(--ink-300)}
/* La riga finale resta --ink-300, e non e' una svista. Nella tavola e'
   --ink-400 (4,20:1 sul fondo del pannello, sotto AA); --text-secondary qui
   **non** si puo' usare, perche' questo pannello non porta `theme-dark` (§1.4:
   la classe sta solo su <body> e sul footer) e l'alias resterebbe quello del
   tema chiaro, --ink-450: 3,21:1 su fondo scuro. Provato, misurato e
   rimesso. --ink-300 da' 7,12:1. */
.fm-grades__note{margin:var(--space-6) 0 0;padding-top:var(--space-5);border-top:var(--border-hair) solid var(--ink-800);font-size:var(--text-xs);color:var(--ink-300)}

@media(max-width:1023.98px){ /* --bp-desktop */
  /* Sotto il desktop il messaggio viene prima della foto, come nella tavola:
     nessun `order`, l'ordine e' quello del DOM. */
  .fm-hero__grid{grid-template-columns:1fr;gap:var(--space-6)}
  .fm-doc,.fm-blog{grid-template-columns:1fr}
  .fm-doc__index{position:static}
  .fm-tiles{grid-template-columns:repeat(var(--cols-category-desktop),minmax(0,1fr))}
  .fm-tile--all{grid-column:1 / -1}
  /* Sotto il desktop il kit stringe la card recensione: usa 300px, che non e'
     un token — si tiene --rail-card-min-review (320px), gia' in uso. */
  .fm-reviews__track{grid-auto-columns:var(--rail-card-min-review)}
}
@media(max-width:767.98px){ /* --bp-tablet */
  .fm-trust{grid-template-columns:repeat(var(--cols-trust-narrow),minmax(0,1fr))}
  .fm-trust__card{padding:var(--space-3)}
  .fm-trust__ico{flex-basis:var(--control-sm);width:var(--control-sm);height:var(--control-sm)}
  .fm-tiles{grid-template-columns:repeat(var(--cols-category-narrow),minmax(0,1fr))}
  .fm-promos{grid-template-columns:repeat(var(--cols-promo-narrow),minmax(0,1fr))}
  .fm-why{grid-template-columns:repeat(var(--cols-why-narrow),minmax(0,1fr))}
  .fm-grades{padding:var(--space-6)}
  .fm-grades__cols{grid-template-columns:repeat(var(--cols-why-narrow),minmax(0,1fr))}
  .fm-shell{padding-inline:var(--touch-inset)}
  .fm-hero,.fm-rail{padding-block:var(--space-6)}
  /* Sul telefono il kit toglie il logo e lascia solo il testo. */
  .fm-tiktok{padding:var(--space-6)}
  .fm-tiktok__logo{display:none}
  /* Sotto il tablet la track si scorre col dito: le frecce sparirebbero
     comunque sotto il pollice, e senza di loro l'inset torna quello del
     contenuto. */
  .fm-rail__nav--float{display:none}
  /* Stessa ragione per le recensioni: la tavola sotto il tablet non disegna
     nessuna freccia, il carosello si scorre col dito. */
  .fm-reviews .fm-rail__nav{display:none}
  .fm-rail .wc-block-product-template{padding-inline:var(--rail-inset);scroll-padding-inline:var(--rail-inset)}
  .fm-partners{flex-direction:column;align-items:center;gap:var(--space-4)}
  /* Lo slot Feedaty sale sopra i loghi e prende tutta la larghezza. */
  .fm-partners__feedaty{order:-1;width:100%}
  .fm-feedaty{margin-inline:auto}
}
@media(max-width:479.98px){ /* --bp-phone */
  .fm-hero__cta{flex-direction:column;align-items:stretch}
  .fm-hero__cta .fm-btn{width:100%}
  /* Come nel kit (`block={vp.belowPhone}`): sotto il telefono la CTA della
     promo prende tutta la larghezza del contenuto. */
  .fm-promo .fm-btn{display:flex;width:100%}
  /* La testata segue la track: sotto il telefono lo shell scende a
     --touch-inset (16px) e senza questo override il titolo restava a 28
     mentre la prima card partiva da 16. */
  .fm-rail__head{padding-inline:var(--touch-inset)}
  .fm-rail .wc-block-product-template{padding-inline:var(--touch-inset);scroll-padding-inline:var(--touch-inset)}
  .fm-reviews__head{padding-inline:var(--touch-inset)}
  .fm-reviews__track{padding-inline:var(--touch-inset);scroll-padding-inline:var(--touch-inset)}
}

/* Attribuzione del voto aggregato: sta accanto al dato, in tono minore. */
.fm-hero__badge-src{font-family:var(--font-mono);font-size:var(--text-3xs);color:var(--text-body);opacity:.85}
.fm-reviews__source{font-family:var(--font-body);font-size:var(--text-md);color:var(--text-secondary);margin-block-start:var(--space-1)}

/* --- Partner di marca (blocco flashmac/partner-marca) -------------------
   La scheda della partnership e, accanto, i prodotti della marca con la card
   del catalogo: per le card nessuna regola qui, sono quelle di woo.css. Il
   badge e' un asset di marchio raster (argento e nero) su piastra
   --surface-photo, bianca in entrambi i temi, come i loghi della striscia
   partner: niente invert, niente blend. A desktop scheda e prodotti stanno
   affiancati 5/7: nei 7/12 dello shell la griglia auto-fill a --card-min fa
   due colonne, quindi quattro prodotti sono 2x2 e una card sola resta a
   sinistra alla propria larghezza (auto-fill tiene le colonne vuote,
   auto-fit la stirerebbe). Senza prodotti la scheda prende tutta la riga
   (`--solo`, deciso dal server). Sotto il tablet una colonna sola, e i
   prodotti — se sono almeno due (`--track`) — diventano la track dei rail. */
.fm-partner-marca{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start}
.fm-partner-marca--con-prodotti{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.fm-partner-marca__scheda{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);background:var(--surface-card);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.fm-partner-marca__badge,.fm-partner-marca__chip{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-4);background:var(--surface-photo);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-md)}
.fm-partner-marca__badge img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--space-9);object-fit:contain}
/* Il chip e' testo su piastra bianca in entrambi i temi: --ink-950 e non
   --text-strong, che in scuro diventa bianco su bianco. */
.fm-partner-marca__chip{font-family:var(--font-spec);font-size:var(--text-2xs);letter-spacing:var(--tracking-spec);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--ink-950)}
.fm-partner-marca__titolo{max-width:24ch}
/* Sostegno e punti in --text-body, non --text-secondary: parlano di
   garanzia, cioe' servono a comprare (§6.6). */
.fm-partner-marca__testo{margin:0;max-width:52ch;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body)}
.fm-partner-marca__punti{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.fm-partner-marca__punti li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-body)}
.fm-partner-marca__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);color:var(--accent)}
.fm-partner-marca__cta{margin-top:var(--space-2)}
/* Il ring globale di base.css copre input e bottoni, non le ancore. */
.fm-partner-marca__cta:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.fm-partner-marca__titolo-prodotti{margin:0 0 var(--space-4);font-size:var(--text-lg)}
@media(max-width:1023.98px){ /* --bp-desktop */
  .fm-partner-marca--con-prodotti{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:767.98px){ /* --bp-tablet */
  .fm-partner-marca__scheda{padding:var(--space-5)}
  /* La track dei rail, a filo dei bordi: esce dallo shell di --touch-inset e
     rientra dello stesso valore, cosi' la prima card parte dove parte il
     testo. Sono le stesse dichiarazioni di `.fm-rail .wc-block-product-template`
     in woo.css, ripetute qui perche' quella e' legata alla classe del rail e
     varrebbe a ogni larghezza; specificita' (0,3,0) per battere la regola
     sotto il tablet di woo.css (0,2,0), che arriva dopo nel carico. */
  .fm-partner-marca--track .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;margin-inline:calc(-1 * var(--touch-inset));padding-inline:var(--touch-inset);scroll-padding-inline:var(--touch-inset);padding-bottom:var(--space-3)}
  .fm-partner-marca--track .wc-block-product-template>li{scroll-snap-align:start}
}

/* ============================================ Landing «Upgrade PC gaming» ===
   Pagina a blocchi core (patterns/upgrade-pc-gaming.php) col modello
   page-gaming: le classi qui sotto sono quelle che il pattern mette sui blocchi,
   e restano se Alessandro cambia i testi dall'editor. */
/* il block gap del tema aggiungerebbe un margine fra una banda e l'altra: lo
   sfondo della pagina si vedrebbe fra due sezioni (Regola 1) */
.fm-lp > *{margin-block-start:0}
.fm-lp-hero h1{margin:var(--space-2) 0 var(--space-4);font-family:var(--font-display);font-size:var(--text-4xl);line-height:var(--leading-tight);color:var(--text-strong)}
.fm-lp h2{font-family:var(--font-display);font-size:var(--text-2xl);line-height:var(--leading-snug);color:var(--text-strong)}
.fm-lp h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);color:var(--text-strong)}
.fm-lp p,
.fm-lp li{color:var(--text-body)}
.fm-lp p a[href]{text-decoration:underline;text-underline-offset:2px}
.fm-lp-lead{max-width:var(--container-sm);font-size:var(--text-lg);line-height:var(--leading-relaxed)}
.fm-lp .wp-block-buttons{margin-block-start:var(--space-5);gap:var(--space-3)}
.fm-lp .wp-block-button.is-style-outline > .wp-block-button__link{color:var(--text-strong);border-color:var(--border-strong)}
.fm-lp-griglia.wp-block-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin-block-start:var(--space-5)}
.fm-lp-griglia > .wp-block-column{margin:0}
.fm-lp-card,
.fm-lp-passo{padding:var(--space-5);background:var(--surface-card);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-lg)}
.fm-lp-card > *,
.fm-lp-passo > *{margin-block:0}
.fm-lp-card > * + *,
.fm-lp-passo > * + *{margin-block-start:var(--space-2)}
.fm-lp-passo__n{display:inline-flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);border-radius:var(--radius-pill);background:var(--grad-flash);font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--white)}
.fm-lp .fm-lp-passo__n{color:var(--white)}
.fm-lp-lista{margin:var(--space-4) 0 0;padding-inline-start:var(--space-5)}
.fm-lp-lista li + li{margin-block-start:var(--space-2)}
.fm-lp-stretta{max-width:calc(var(--container-md) + 2 * var(--gutter-shell))}
.fm-lp-faq{border-block-end:var(--border-hair) solid var(--border-subtle)}
.fm-lp-faq > summary{display:flex;align-items:center;min-height:var(--touch-min);padding-block:var(--space-3);font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-strong);cursor:pointer}
.fm-lp-faq > p{margin:0 0 var(--space-4)}
.fm-lp-cta{text-align:start}
/* Pagina Contatti (patterns/pagina-contatti.php): recapiti in card, modulo accanto. */
.fm-contatti-colonne.wp-block-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-block-start:var(--space-5)}
.fm-contatti-colonne > .wp-block-column{margin:0}
.fm-contatti-colonne .fm-lp-card > * + *{margin-block-start:var(--space-3)}
.fm-contatti-modulo > * + *{margin-block-start:var(--space-3)}
.fm-contatti-colonne > .fm-lp-card{align-self:start}
.fm-contatti-colonne .fm-lp-card a{color:var(--text-strong)}
/* La mappa dietro al consenso (blocks/mappa): segnaposto finche' non c'e' l'iframe. */
.fm-mappa{position:relative;min-height:calc(var(--control-md) * 7);margin-block-start:var(--space-5);overflow:hidden;border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-sunken)}
.fm-mappa__segnaposto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);min-height:inherit;padding:var(--space-5);text-align:center;color:var(--text-body)}
.fm-mappa__segnaposto p{margin:0;max-width:var(--container-sm)}
.fm-mappa__indirizzo{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--text-strong)}
.fm-mappa.is-caricata .fm-mappa__segnaposto{visibility:hidden}
.fm-mappa__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* a tutta larghezza (Contatti): banda da bordo a bordo, senza spazio sotto; il
   segnaposto ha l'altezza della mappa, l'iframe lo copre esatto: niente salto */
.fm-contatti-banda-mappa{padding-block-end:0}
.fm-mappa.fm-mappa--piena{min-height:calc(var(--control-md) * 9);border-inline:0;border-block-end:0;border-radius:0}
.fm-contatti-cover.wp-block-cover{margin:0}
.fm-contatti-badge{margin-block-start:var(--space-4)}
@media(min-width:768px){ /* --bp-tablet */
  .fm-lp-griglia.wp-block-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){ /* --bp-laptop */
  .fm-lp-griglia.wp-block-columns{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .fm-contatti-colonne.wp-block-columns{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
@media(max-width:767.98px){ /* --bp-tablet */
  .fm-lp-hero h1{font-size:var(--text-3xl)}
  .fm-lp .wp-block-button,
  .fm-lp .wp-block-button__link{width:100%}
  .fm-lp p a[href]{display:inline-flex;align-items:center;min-height:var(--touch-min)}
}

/* I miei preferiti (blocks/preferiti). Le card sono quelle del catalogo.
   I due stati escono sempre e uno e' `hidden`: senza questa regola il
   `display:flex` di `.fm-empty` batte l'attributo e il vuoto compare sotto le card. */
.fm-preferiti__pieno[hidden],.fm-preferiti__vuoto[hidden]{display:none}
.fm-preferiti__conteggio{margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--text-secondary)}
.fm-preferiti__nota{margin:var(--space-6) 0 0;font-size:var(--text-sm);color:var(--text-secondary)}