/* ===========================================================================
   FLASHMAC — CHROME
   Un solo header, un solo footer: parts/header.html e parts/footer.html.
   Header e utility bar sono FLUIDI (unica eccezione alla Rule 2).
   =========================================================================== */

/* --- Utility bar --------------------------------------------------------- */
.fm-utility{background:var(--section-band-ink);color:var(--ink-200)}
.fm-utility__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:7px var(--gutter-fluid);font-family:var(--font-spec);font-size:var(--text-3xs);letter-spacing:.08em;text-transform:uppercase}
.fm-utility__promises{display:flex;gap:22px;flex-wrap:wrap}
.fm-utility__contacts{display:flex;gap:18px}
/* SCOSTAMENTO CONSAPEVOLE DAL KIT (2026-09-19): il kit tiene la voce su una
   riga sola, qui no. Il testo delle tre promesse lo scrive il cliente dalla
   pagina opzioni, e con `white-space:nowrap` la larghezza minima della voce e'
   l'intera frase: misurata a 577px con una promessa di 84 caratteri, contro i
   768px del viewport piu' stretto in cui le promesse si vedono. Reggeva per
   venti pixel, cioe' per coincidenza — nessuno dira' mai al cliente qual e' il
   limite. Senza `nowrap` la larghezza minima scende alla parola piu' lunga, ed
   e' la stessa ragione per cui la fascia di rassicurazione del checkout e'
   sicura per costruzione invece che per fortuna.
   Il prezzo, misurato col testo di oggi: nessuno. La barra resta 30,5px a 768 e
   1280 e 44px a 390 — le promesse non vanno a capo finche' non serve. */
.fm-utility__item{display:flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.fm-utility__item:hover{color:#fff;text-decoration:none}
/* La promessa che apre una finestra e' un <button> (modal.js apre da
   [data-fm-modal] e riporta il fuoco qui): senza cornice, stessa riga delle
   altre; il fuoco visibile lo da' gia' :where(button):focus-visible in base.css. */
button.fm-utility__item{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.fm-utility__promises .fm-ico{color:inherit}

/* --- Header ------------------------------------------------------------- */
.fm-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle)}
.theme-dark .fm-header{background:rgba(13,11,20,.88)}
/* PROPOSTA SFUMATURE IN SCURO (2026-09-17) — superficie 3 di 3.
   Attenzione, questa ha un prezzo: --grad-ink e' opaco, quindi la testata
   smette di lasciar trasparire il contenuto che le scorre sotto (il
   `backdrop-filter` resta ma non ha piu' niente da sfocare). Il guadagno e' che
   la barra non e' piu' una fascia piatta; la perdita e' l'effetto vetro. E' la
   superficie su cui ho piu' dubbi delle tre: se il vetro conta, questa si
   scarta e restano le altre due. In chiaro non cambia nulla. */
.theme-dark .fm-header{background:var(--grad-ink)}
.fm-header__row{display:flex;align-items:center;gap:20px;padding:13px var(--gutter-fluid)}
.fm-header__logo img,.fm-header__logo .custom-logo{height:40px;width:auto;display:block}
/* --- Il logo: una silhouette bianca su fondo scuro ------------------------
   Il marchio e' un PNG col gradiente arancio→rosa, e il blocco Site Logo lo
   rende come <img>: il CSS puo' solo filtrare l'immagine intera, non seguire
   l'inchiostro tracciato per tracciato. Su fondo scuro diventa percio' una
   silhouette bianca piena — misurata a 16,71:1 contro il fondo della testata.

   E' una SCELTA, non un limite tecnico: la silhouette bianca e' stata
   approvata come versione scura del marchio (Alessandro, 20/09/2026). Il
   giorno in cui esistera' un SVG del logo — oggi in libreria non c'e' — si
   potra' incorporarlo e portare l'inchiostro a `currentColor`, come gia'
   fanno le icone. Resta possibile, non e' un lavoro in sospeso.

   Un trattamento solo per le tre superfici che mostrano il logo: testata,
   piede e modale di ricerca. Prima testata e piede invertivano e il modale
   no, e l'incoerenza non aveva ragione. Il piede non passa dalla classe
   perche' e' scuro sempre. */
.theme-dark .fm-header__logo img,
.theme-dark .fss-overlay .fss-logo-img,
.fm-footer__brand img{filter:brightness(0) invert(1)}
.fm-header__logo a{display:block;line-height:0}
.fm-header__search{flex:1;min-width:0}
.fm-header__search .wp-block-search__inside-wrapper{height:var(--control-md);background:var(--surface-card);border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:0 6px 0 14px}
.fm-header__search .wp-block-search__input{border:none;background:none;font-family:var(--font-body);font-size:var(--text-md);color:var(--text-strong)}
.fm-header__search .wp-block-search__input::placeholder{color:var(--text-muted)}
.fm-header__search .wp-block-search__button{background:none;border:none;color:var(--ink-400);padding:0 8px;min-height:auto}
.fm-header__rating{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto}
.fm-header__rating .fm-ico{color:var(--flash-orange);fill:var(--flash-orange)}
.fm-header__rating b{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-strong)}
.fm-header__actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.fm-header__actions .fm-icon-btn{color:var(--text-body)}
.fm-theme-toggle__sun{display:none}
.theme-dark .fm-theme-toggle__sun{display:block}
.theme-dark .fm-theme-toggle__moon{display:none}

/* WordPress separa i figli di un gruppo a flusso con --wp--style--block-gap
   (qui --space-5, 24px a 1280): fra la riga logo/ricerca e la barra nav
   diventavano 24px di vuoto che nella tavola non ci sono — header 146,5px
   contro i 122,5px del kit. Stessa medicina gia' usata su .wp-site-blocks in
   base.css e sui contenitori del footer piu' sotto. Il selettore e' (0,1,0):
   la regola di core e' in :where(), quindi passa senza !important. */
.fm-header>*{margin-block-start:0}

/* Nav row */
.fm-header__nav{border-top:1px solid var(--border-subtle)}
/* Niente `overflow-x` qui. Se un asse e' `visible` e l'altro no, il `visible`
   calcola ad `auto`: la barra diventava uno scroller su ENTRAMBI gli assi e
   ritagliava il sottomenu, che e' `position:absolute; top:100%` e cade fuori
   dal box alto 51px (clientHeight 51 contro scrollHeight 290 a menu aperto).
   Non serviva a niente: da --bp-desktop in su `scrollWidth === clientWidth` a
   ogni larghezza (misurato a 1024/1100/1280/1920), e sotto ci pensa il
   flex-wrap della media query piu' in basso. */
.fm-header__nav-inner{display:flex;align-items:center;gap:2px;padding:0 var(--gutter-fluid)}
.fm-header__nav .wp-block-navigation{flex:0 1 auto;min-width:0}
.fm-header__nav .wp-block-navigation__container{gap:0}
.fm-header__nav .wp-block-navigation-item__content{display:flex;align-items:center;gap:4px;padding:13px 14px;white-space:nowrap;border-bottom:2px solid transparent;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--text-body);text-decoration:none}
.fm-header__nav .wp-block-navigation-item__content:hover{color:var(--text-strong);text-decoration:none}
.fm-header__nav .current-menu-item>.wp-block-navigation-item__content,.fm-header__nav .current-menu-ancestor>.wp-block-navigation-item__content{color:var(--text-strong);border-bottom-color:var(--flash-pink)}
/* OFFERTE: primo item in rosa. Aggiungere la classe fm-nav-accent alla voce
   di menu se l'ordine cambia. */
.fm-header__nav .wp-block-navigation__container>li:first-child>.wp-block-navigation-item__content,.fm-header__nav .fm-nav-accent>.wp-block-navigation-item__content{color:var(--accent-text)}

/* Sottomenu della barra nav --------------------------------------------------
   Il tema non stilava affatto `.wp-block-navigation__submenu-container`: la
   tendina era quella di serie di core, cioe' `background-color:#fff` e
   `color:#000` fissi (wp-includes/blocks/navigation/style.min.css), bordo
   rgba su quattro lati, nessuna ombra — in tema scuro una lastra bianca con
   testo nero dentro un header nero, contro §1.4 e §6.6.
   Qui diventa la banda del kit: --surface-card, filetto --border-subtle solo
   in basso, --shadow-lg, righe a --touch-min con hover --accent-soft. Niente
   raggio e niente bordi laterali — a tutta larghezza non ci sono lati.
   I selettori ripetono la profondita' di quelli di core — la sua regola e'
   (0,3,0) sul contenitore — perche' l'alternativa sarebbe !important. Non si
   toccano width/height/overflow/visibility: sono il meccanismo di apertura di
   core. */
/* Il pannello e' una BANDA larga quanto l'header, non una tendina agganciata
   alla voce: il blocco contenitore deve quindi essere la riga nav. Core mette
   `position:relative` sia su `.wp-block-navigation` sia su ogni
   `.wp-block-navigation-item`; con quei due statici il `top:100%` di core
   misura dalla riga e `inset-inline:0` la porta da bordo a bordo. */
.fm-header__nav{position:relative}
.fm-header__nav .wp-block-navigation{position:static}
.fm-header__nav .wp-block-navigation .wp-block-navigation-item.has-child{position:static}
.fm-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:var(--space-7);
  inset-inline:0;
  padding:var(--space-6) var(--gutter-fluid);
  background:var(--surface-card);
  color:var(--text-strong);
  border:0;
  border-bottom:var(--border-hair) solid var(--border-subtle);
  border-radius:0;
  box-shadow:var(--shadow-lg);
  z-index:var(--z-dropdown);
}

/* La freccia e' un <button> FUORI dal link: fra etichetta e freccia restavano
   il padding destro della voce (14px) piu' il margine di core, cioe' 18px —
   la freccia sembrava della voce successiva. Il padding orizzontale passa al
   bottone: la freccia resta a --space-1 dall'etichetta (come nel kit) e il
   bersaglio copre l'altezza della riga invece dei 10x10 di core. */
.fm-header__nav .wp-block-navigation .wp-block-navigation-item.has-child>.wp-block-navigation-item__content{padding-inline-end:var(--space-1)}
.fm-header__nav .wp-block-navigation .wp-block-navigation-submenu__toggle{
  display:flex;
  align-items:center;
  width:auto;
  height:auto;
  min-height:var(--touch-min);
  margin:0;
  padding:0 var(--space-4) 0 0;
  color:var(--text-body);
}
.fm-header__nav .wp-block-navigation .wp-block-navigation-submenu__toggle svg{
  width:var(--text-xs);
  height:var(--text-xs);
  margin-top:0;
  transition:transform var(--dur-fast) var(--ease-out);
}

/* Contenuto della banda ------------------------------------------------------
   Righe = voci figlie del menu, icona = thumbnail della categoria, card in
   evidenza = un prodotto vero (vedi `inc/header.php`). Le colonne sono
   impaginazione: `--fm-mega-rows` arriva dal PHP ed e' il numero di righe per
   colonna, non un valore di design. */
.fm-mega__cols{display:flex;gap:var(--space-7);min-width:0}
.fm-mega__col{display:flex;flex-direction:column;gap:var(--space-3)}
/* Intestazione di colonna: esiste solo se il menu prende un terzo livello.
   Oggi il menu e' profondo due livelli e non ne stampa nessuna. */
.fm-mega__heading{font-family:var(--role-eyebrow-font);font-size:var(--role-eyebrow-size);font-weight:var(--fw-bold);letter-spacing:var(--role-eyebrow-tracking);text-transform:uppercase;color:var(--text-muted)}
.fm-mega__list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--fm-mega-rows,1),auto);grid-auto-columns:max-content;gap:var(--space-1) var(--space-7);margin:0;padding:0;list-style:none}
.fm-mega__row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-min);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--text-strong);text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out)}
@media(hover:hover){.fm-mega__row:hover{background:var(--accent-soft);color:var(--text-strong);text-decoration:none}}
.fm-mega__row:active{background:var(--accent-soft)}
.fm-mega__item.current-menu-item .fm-mega__row{color:var(--accent-text)}
/* La foto di categoria resta su bianco anche in tema scuro (invariante §1.5):
   piastra --surface-photo, immagine `contain`, mai ritagliata. */
.fm-mega__plate{display:flex;align-items:center;justify-content:center;flex:0 0 var(--control-sm);width:var(--control-sm);height:var(--control-sm);overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-photo)}
.fm-mega__img{width:100%;height:100%;object-fit:contain}
.fm-mega__label{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm)}

/* Card in evidenza.
   `--fm-mega-card` e' composta dalla scala degli spazi invece di scrivere il
   260px della tavola: nei token non esiste una misura per la card del mega
   menu (tokens/patterns.css nomina il mega menu ma non lo copre). 2x --space-10
   = 256px, quattro pixel meno della tavola. Se il design system aggiungera' il
   token, questa riga sparisce. */
.fm-mega__feat{flex:0 0 auto;margin-inline-start:auto;--fm-mega-card:calc(var(--space-10) * 2)}
.fm-mega__card{display:flex;flex-direction:column;gap:var(--space-2);width:var(--fm-mega-card);padding:var(--space-4);border:var(--glass-border);border-radius:var(--radius-lg);background:var(--grad-flash);box-shadow:var(--shadow-md),var(--glass-shadow);color:var(--white);text-decoration:none;transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-base) var(--ease-out)}
.fm-mega__card--violet{background:var(--grad-violet)}
@media(hover:hover){.fm-mega__card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--glass-shadow);color:var(--white);text-decoration:none}}
/* Piastra piu' bassa del quadrato: con la foto vera una piastra 1:1 faceva
   una card alta il doppio della colonna di righe e una banda da 427px. 16/10
   e' lo stesso rapporto delle card editoriali (patterns.css), e con
   `contain` la foto non viene mai ritagliata. */
.fm-mega__card-plate{display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:16/10;border-radius:var(--radius-md);background:var(--surface-photo)}
.fm-mega__card-img{width:100%;height:100%;object-fit:contain}
/* La pill sul gradiente usa lo scrim di vetro: e' l'unico fondo traslucido
   nei token, e il testo bianco ci sta sopra in entrambi i gradienti. */
.fm-mega__card-flag{align-self:flex-start;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--glass-scrim);font-family:var(--font-spec);font-size:var(--text-3xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.fm-mega__card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);line-height:var(--leading-snug)}
.fm-mega__card-price{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--fw-bold)}
.fm-mega__card-price del{opacity:.7;font-weight:var(--fw-regular)}
.fm-mega__card-price ins{text-decoration:none}
.fm-mega__card-price .woocommerce-Price-amount{color:inherit}

.fm-header__ctawrap{margin:7px 0 7px auto;flex:0 0 auto}
/* Il CTA sta al bordo destro della barra, come nella tavola. Il `margin-left:auto`
   della regola qui sopra non arrivava mai: il foglio dei layout di core dichiara
   `body .is-layout-flex>*{margin:0}` — (0,1,1) contro (0,1,0) — e vinceva. Con
   due classi la nostra regola passa. Serve anche a barra andata a capo: il CTA
   resta a destra invece di infilarsi sotto la prima voce. */
.fm-header__nav-inner .fm-header__ctawrap{margin-inline-start:auto}
/* `line-height:normal` e' il valore del kit: il bottone della tavola non ne
   dichiara nessuno, mentre qui il link ereditava --leading-normal (1.5) e la
   pill usciva 35,5px invece di 33. Non e' un token perche' nel kit non c'e'. */
/* L'etichetta e' scura, non bianca: bianco su --orange-500 misurava 2,23:1 in
   tutti e quattro gli stati. Il fondo arancio non si tocca — e' una decisione
   del cliente, come il bianco sul gradiente di "Aggiungi al carrello" — cambia
   solo il testo, che su questo arancio arriva a 8,75:1. Nessuno stato riporta
   il bianco: hover e' solo traslazione e alone, focus e' l'anello globale. */
.fm-header__cta .wp-block-button__link{display:flex;align-items:center;gap:7px;white-space:nowrap;background:var(--flash-orange)!important;color:var(--ink-950)!important;border-radius:var(--radius-sm);padding:8px 14px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13px;line-height:normal}
@media(hover:hover){.fm-header__cta .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:var(--glow-orange);text-decoration:none}}
.fm-header__burger,.fm-header__searchbtn{display:none}

/* Fra --bp-tablet e --bp-desktop la barra nav va a capo.
   In quella banda la nav chiede 722px e il CTA 170: la nav si comprime
   (`min-width:0`) ma il suo `<ul>` e' `no-wrap` e sborda, quindi le ultime
   voci ("Componenti", "B2B") finivano DIETRO il CTA — testo su testo. Con il
   wrap il CTA scende sulla riga sotto invece di sparire (il contratto
   responsive vuole la nav orizzontale fino a 768) e le voci possono impilarsi
   se il menu cresce, senza mai produrre scroll orizzontale. */
@media(max-width:1023.98px){ /* --bp-desktop */
  .fm-header__nav-inner{flex-wrap:wrap;row-gap:var(--space-1)}
  .fm-header__nav .wp-block-navigation__container.no-wrap{flex-wrap:wrap}
}

/* Carrello: contatore del blocco Mini-Cart di Woo, ricolorato */
.fm-header__actions .wc-block-mini-cart__button{width:var(--control-md);height:var(--control-md);display:flex;align-items:center;justify-content:center;padding:0;color:var(--flash-pink)}
/* Il numero dei preferiti porta lo stesso distintivo del carrello: una regola sola. */
.fm-header__actions .wc-block-mini-cart__badge,.fm-wish-count{background:var(--grad-flash);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:var(--fw-bold);border-radius:var(--radius-pill);min-width:16px;height:16px;line-height:16px;padding:0 4px}
.fm-header__actions .wc-block-mini-cart__quantity-badge{margin:0}
.fm-header__wish{position:relative}
.fm-wish-count{display:inline-block;text-align:center}
.fm-wish-count[hidden]{display:none}
.fm-header__wish .fm-wish-count{position:absolute;top:var(--space-1);inset-inline-end:var(--space-1)}
.fm-navpanel__riga .fm-wish-count{margin-inline-start:auto}
/* Sul carrello e sul checkout WooCommerce nasconde il Mini-Cart da se'
   (`MiniCart.php`: `if ( is_cart() || is_checkout() )`), e fa bene: sei gia'
   li'. Lo fa pero' con `visibility:hidden`, che **occupa ancora il suo box**:
   restava un vuoto di 44px fra l'icona account e il bordo. Qui si toglie anche
   lo spazio, cosi' le icone rimaste arrivano al gutter. */
.fm-header__actions .wc-block-mini-cart[aria-hidden="true"]{display:none}

/* Nella tavola i due contatti a destra sono solo testo da 768 in su, mentre
   sul telefono — dove le promesse spariscono e restano loro soli — portano
   l'icona. Misurato sul kit: a 1280 `icona:false`, a 390 `icona:true`. */
@media(min-width:768px){ /* --bp-tablet */
  .fm-utility__contacts .fm-ico{display:none}
}

@media(max-width:767.98px){
  .fm-utility__promises{display:none}
  .fm-utility__inner{justify-content:center}
  .fm-utility__contacts{gap:14px}
  /* Touch (§6.5): "Email" e "WhatsApp" erano alti 17px. Il bersaglio sale a
     --touch-min assorbendo il padding verticale della barra, cosi' la banda
     cresce di poco e le due voci restano dove sono. */
  .fm-utility__inner{padding-block:0}
  .fm-utility__item{min-height:var(--touch-min)}
  .fm-header__row{gap:var(--touch-gap)}
  .fm-header__logo img,.fm-header__logo .custom-logo{height:32px}
  .fm-header__search,.fm-header__rating,.fm-header__nav{display:none}
  .fm-header__burger,.fm-header__searchbtn{display:inline-flex}
  /* Con il solo `.fm-header__actions` (0,1,0) il margine perdeva contro la
     regola di layout dei blocchi `…is-layout-flex>:is(*,div){margin:0}`
     (0,1,1): le tre icone restavano attaccate al logo e l'hamburger si fermava
     a meta' riga. Legandolo alla riga (0,2,0) passa. */
  .fm-header__row .fm-header__actions{margin-inline-start:auto}
  /* Il kit tiene tre icone nella barra stretta: cerca, carrello, menu. Tema e
     account non spariscono, si spostano dentro il pannello. */
  .fm-header__actions>.fm-theme-toggle,.fm-header__actions>a[aria-label="Account"],.fm-header__actions>.fm-header__wish{display:none}
}

/* Nav off-canvas (mobile) — la tavola del kit, non piu' la nav clonata.
   Il pannello arriva da destra come nel kit; le misure sono sue: foglio
   min(340px, 88vw), testa e piede separati da un filetto, corpo che scorre. */
.fm-navpanel__sheet{width:min(340px,88vw);max-width:none;padding:0;gap:0;display:flex;flex-direction:column;background:var(--surface-card)}
.fm-navpanel__testa{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-block-end:1px solid var(--border-subtle)}
.fm-navpanel__eyebrow{font-family:var(--font-spec);font-size:var(--text-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}
.fm-navpanel__corpo{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--touch-gap);padding:var(--space-2) var(--space-4)}

/* Voce di primo livello: link diretto o testa di un gruppo. Stessa forma,
   cambia solo il verso del chevron — che e' l'informazione. */
.fm-navpanel__voce{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--touch-min);padding-inline:var(--space-2);border-radius:var(--radius-sm);background:none;border:0;width:100%;cursor:pointer;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-md);color:var(--text-strong);text-decoration:none;list-style:none}
.fm-navpanel__voce::-webkit-details-marker{display:none}
.fm-navpanel__voce.is-accent{color:var(--accent-text)}
.fm-navpanel__voce .fm-ico{flex:none;color:var(--ink-400)}
.fm-navpanel__gruppo[open]>.fm-navpanel__voce{background:var(--accent-soft)}
.fm-navpanel__gruppo[open]>.fm-navpanel__voce .fm-ico{transform:rotate(180deg)}
.fm-navpanel__voce .fm-ico{transition:transform var(--dur-fast) var(--ease-out)}
.fm-navpanel__figli{display:flex;flex-direction:column;gap:2px;padding:2px 0 var(--space-2) var(--space-4)}
.fm-navpanel__tutto{display:flex;align-items:center;min-height:var(--touch-min);font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--text-sm);color:var(--link);text-decoration:none}
.fm-navpanel__figlio{display:flex;align-items:center;min-height:var(--touch-min);font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-body);text-decoration:none}
.fm-navpanel__sep{height:1px;border:0;margin:var(--space-2) 0;background:var(--border-subtle)}

/* La permuta e' un pulsante pieno, non una voce di elenco: nel kit e' l'unica
   azione del pannello e si vede. */
/* Stesso pulsante della testata, nel pannello mobile: stessa etichetta scura,
   per la stessa ragione. L'icona segue il testo, altrimenti resterebbe un
   segno bianco accanto a una parola scura sullo stesso fondo. */
.fm-navpanel__permuta{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch-min);width:100%;background:var(--flash-orange);color:var(--ink-950);border:0;border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);text-decoration:none}
.fm-navpanel__permuta .fm-ico{color:var(--ink-950)}

/* Il tasto dell'hamburger mostra una sola delle due icone. */
.fm-header__burger-chiudi{display:none}
.fm-header__burger[aria-expanded="true"] .fm-header__burger-apri{display:none}
.fm-header__burger[aria-expanded="true"] .fm-header__burger-chiudi{display:inline-flex}
.fm-navpanel__riga{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-min);padding-inline:var(--space-2);width:100%;background:none;border:0;cursor:pointer;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--text-md);color:var(--text-body);text-decoration:none;text-align:start}
.fm-navpanel__riga .fm-ico{flex:none;color:var(--ink-400)}
.fm-navpanel__piede{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4);border-block-start:1px solid var(--border-subtle)}
.fm-navpanel__piede b{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--text-strong)}
/* Non `.fm-navpanel__piede span`: con (0,1,1) batteva `.fm-stars__fill`
   (0,1,0) e spegneva l'arancione delle stelle — la regola va sul componente,
   non sul contenitore (§1.9). */
.fm-navpanel__recensioni{font-size:var(--text-2xs);color:var(--text-secondary)}

/* --- Footer ------------------------------------------------------------- */
.fm-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--section-band-ink);color:var(--ink-200)}
.fm-footer::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--surface-glow);opacity:.5}
.fm-footer__hairline{height:3px;background:var(--grad-surge)}
.fm-footer__inner{max-width:calc(var(--content-default) + 2 * var(--gutter-shell));margin-inline:auto;padding-inline:var(--gutter-shell)}
/* Il footer prende le sue distanze dai padding e dalle griglie qui sotto: il
   block gap che WordPress mette fra i figli dei gruppi (24px) si somma e
   basta. Misurato a 1280: alzava i canali di 24px, staccava la fila colonne
   di altri 24 e — poiche' le colonne sono celle di griglia — faceva scendere
   le intestazioni di 24px rispetto al logo, che in tavola sta sulla stessa
   riga. In tutto 96px in piu' del footer disegnato. Si azzera sui quattro
   contenitori interessati e non piu' in la': un reset sui gruppi del footer
   toglierebbe anche i 14px sotto il logo, che sono voluti. */
.fm-footer__inner,
.fm-footer__main,
.fm-footer__col,
.fm-footer__bottom,
.fm-footer__main > *,
.fm-footer__brand > *,
.fm-footer__blog > *{margin-block-start:0}
.fm-footer__channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);padding-top:var(--space-7)}
.fm-footer__channel{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--ink-900);border:1px solid var(--ink-800);border-radius:var(--radius-md);text-decoration:none}
.fm-footer__channel:hover{border-color:var(--ink-700);text-decoration:none}
.fm-footer__channel-ico{width:38px;height:38px;flex:0 0 38px;border-radius:var(--radius-sm);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--flash-pink)}
.fm-footer__channel b{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);color:#fff}
/* solo il sottotitolo: `.fm-footer__channel span` prendeva anche la piastra
   dell'icona, e il suo display:block vinceva sul flex della piastra
   (0,1,1 contro 0,1,0) lasciando l'icona in alto a sinistra invece che al
   centro. */
.fm-footer__channel b + span{display:block;font-size:var(--text-xs);color:var(--ink-400)}
.fm-footer__main{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:var(--space-6) var(--space-5);padding-block:var(--space-8) var(--space-6)}
/* Il filtro sta nel blocco unico del logo, piu' su: qui solo misura e velo. */
.fm-footer__brand img{height:28px;opacity:.92}
.fm-footer__brand p{font-size:var(--text-xs);line-height:1.6;color:var(--ink-300);margin-top:14px;max-width:240px}
.fm-footer__brand .wp-block-site-logo img{height:28px;width:auto;opacity:.92}
.fm-footer h2,.fm-footer h3{color:#fff}
.fm-footer__col-head{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 0 14px;font-family:var(--font-spec);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;font-weight:var(--fw-bold);color:#fff;background:none;border:none;padding:0;text-align:left}
.fm-footer__col ul,.fm-footer__col .wp-block-navigation__container{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}
.fm-footer__col a{display:flex;align-items:center;padding:5px 0;font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink-300);text-decoration:none;transition:color var(--dur-fast,.14s) var(--ease-out,ease)}
.fm-footer__col a:hover{color:#fff;text-decoration:none}
/* Cinque colonne per argomento (2026-09-24 sera): Flashmac · tre gruppi del menu
   flashmac-footer · Blog. I gruppi sono sottomenu del blocco Navigazione: la
   navigazione e la sua lista non fanno scatola (display:contents), cosi' ogni
   gruppo e' una cella della stessa griglia di Flashmac e Blog, e il Blog va
   prima dell'ULTIMO gruppo, qualunque sia. Le regole pesano (0,4,0) e le voci
   (0,6,0): gli stili dei blocchi core arrivano dopo i nostri, e il padding delle
   voci di un sottomenu il core lo scrive a (0,5,0). */
.fm-footer__brand{order:1}
.fm-footer__main .fm-footer__nav.wp-block-navigation,
.fm-footer__main .fm-footer__nav.wp-block-navigation > .wp-block-navigation__container{display:contents}
.fm-footer__main .fm-footer__nav .wp-block-navigation-item.has-child{order:2;display:block;min-width:0}
.fm-footer__main .fm-footer__nav .wp-block-navigation__container > .has-child:last-child{order:4}
.fm-footer__blog{order:3;min-width:0}
.fm-footer__main .fm-footer__nav .has-child .wp-block-navigation__submenu-container{position:static;display:flex;flex-direction:column;gap:0;visibility:visible;opacity:1;width:auto;min-width:0;height:auto;overflow:visible;padding:0;border:0;background:none;box-shadow:none}
.fm-footer .fm-footer__main .fm-footer__nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{display:flex;align-items:center;padding:var(--space-1) 0;font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink-300);text-decoration:none}
.fm-footer .fm-footer__main .fm-footer__nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{color:var(--white);text-decoration:none}
.fm-footer__nav .fm-nav-bottone{width:100%;margin:0;padding-inline:0;border:0;background:none;text-align:start;cursor:pointer}
.fm-footer__contatti{margin-block-start:var(--space-4)}
.fm-footer__brand .fm-footer__contatti-nome{margin:0 0 var(--space-2);max-width:none;font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--white)}
.fm-footer__contatti ul{list-style:none;margin:0;padding:0}
.fm-footer__contatti li,
.fm-footer__orari p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--ink-300)}
.fm-footer__contatti a,
.fm-footer__orari a{color:var(--ink-200);text-decoration:none}
.fm-footer__contatti a:hover,
.fm-footer__orari a:hover{color:var(--white);text-decoration:underline}
.fm-footer__orari{margin-block-start:var(--space-4)}
.fm-footer__orari p{margin:0;max-width:none}
.fm-footer__orari strong{color:var(--ink-200)}
.fm-footer__blog .fm-footer__col-head a{color:inherit;text-decoration:none}
.fm-footer__blog .fm-footer__col-head a:hover{color:var(--ink-200)}
.fm-footer__blog-lista.wp-block-latest-posts{list-style:none;margin:0;padding:0}
.fm-footer__blog-lista li{margin:0}
.fm-footer__blog-lista li + li{margin-block-start:var(--space-2)}
.fm-footer__blog-lista .wp-block-latest-posts__post-title{display:block;padding-block:var(--space-1);font-family:var(--font-body);font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--ink-300);text-decoration:none}
.fm-footer__blog-lista .wp-block-latest-posts__post-title:hover{color:var(--white)}
/* La fila dei canali ha tante colonne quanti canali; con uno solo e' una banda. */
.fm-footer__channels{grid-template-columns:repeat(var(--fm-canali,4),minmax(0,1fr))}
.fm-footer__channels--uno .fm-footer__channel > span:nth-child(2){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-3)}
.fm-footer__channel-freccia{display:flex;margin-inline-start:auto;color:var(--ink-300)}
@media(min-width:768px) and (max-width:1279.98px){ /* --bp-tablet … --bp-desktop */
  .fm-footer__main{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fm-footer__brand{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}
  .fm-footer__brand > .wp-block-site-logo{grid-column:1 / -1}
}
@media(min-width:768px) and (max-width:1023.98px){ /* --bp-tablet … --bp-laptop */
  .fm-footer__main{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.fm-footer__bottom{border-top:1px solid var(--ink-800)}
.fm-pay-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-block:18px}
.fm-pay-ico{display:flex;align-items:center;justify-content:center;height:32px;min-width:50px;padding:0 10px;background:rgba(255,255,255,.05);border-radius:6px}
.fm-pay-ico__inner{height:20px;display:flex}
.fm-pay-ico.is-wide .fm-pay-ico__inner{height:18px}
.fm-pay-ico svg{fill:#615e6c;width:auto;height:100%;display:block}
/* I colori forzati di Findomestic (grigio, bianco -> #ececf1) stanno nel
   simbolo `pay-findomestic-mono` dello sprite: una regola sui path interni non
   attraverserebbe lo <use> (2026-09-23). */
.fm-pay-ico.is-fallback{font-family:var(--font-mono);font-size:10px;font-weight:var(--fw-bold);letter-spacing:.04em;color:var(--ink-400)}
/* Il respiro verticale sta in una variabile e non nei due valori: il fondo lo
   riusa nel `calc()` della riserva qui sotto, e due letterali uguali a due
   righe di distanza divergono prima o poi. 18px non e' un token: la scala
   passa da --space-4 (16) a --space-5 (24), e questo e' il valore del kit. */
.fm-footer__legal{--fm-legal-pad:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-block:var(--fm-legal-pad);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--ink-400)}
.fm-footer__legal :last-child{color:var(--ink-300)}

/* Spazio riservato alla bolla della chat.
   La bolla e' fissa in basso a destra e passa sopra contenuto diverso a ogni
   posizione di scorrimento: quasi ovunque bastano cento pixel di rotella per
   liberarla. L'unico punto dove non basta e' **la fine del documento**, che e'
   questa riga: li' non si puo' scorrere oltre. Il censimento
   (`scripts/bolla-chat.mjs`, nove pagine × due temi × due larghezze; esito in
   qa/bolla-chat.txt e stato precedente in qa/bolla-chat-prima.txt) trova
   coperti per sempre soltanto l'ultima riga del piede — "© ... P.IVA ..." e
   "Metodi di pagamento accettati" — e, sul checkout, la riga aziendale e il
   link "Privacy" di .fm-cofoot. Si riserva lo spazio qui, una volta, invece di
   spostare la bolla pagina per pagina.
   Il numero non e' scritto: lo misura il widget stesso e lo pubblica come
   --fm-bolla-chat (inc/assets.php), 120px a 1280 e 116 a 390. Senza widget
   vale 0 e il piede resta identico a prima — il ripiego sta dentro la var(),
   non in una dichiarazione precedente (§1.11). */
/* La riserva si prende DA DOVE STA LA BOLLA, non su tutta la riga. Misurata:
   100x100 nell'angolo in basso a destra, cioe' gli ultimi 120px di larghezza a
   1280 e 116 a 390. Prima si riservavano 120px di altezza per l'intera riga, e
   il "© 2026 flashmac™ …" — che finisce a 850px dalla bolla — si portava
   dietro quel vuoto senza averne bisogno: e' lo "spazio tenuto anche quando
   non serve". Sopra --bp-tablet c'e' larghezza da cedere e si cede quella;
   sotto, la riga va a capo, il testo e' centrato e arriva davvero
   nell'angolo, quindi li' serve ancora l'altezza. */
.fm-footer__legal{padding-inline-end:var(--fm-bolla-chat-x,0px)}
@media(max-width:767.98px){ /* --bp-tablet */
  .fm-footer__legal{padding-inline-end:0;padding-block-end:calc(var(--fm-legal-pad) + var(--fm-bolla-chat,0px))}
}

@media(max-width:767.98px){
  .fm-footer__channels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-footer__main{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-4)}
  .fm-footer__brand,
  .fm-footer__blog,
  .fm-footer__main .fm-footer__nav .wp-block-navigation__container > .has-child:last-child{grid-column:1 / -1}
  /* queste colonne non si chiudono (la voce dei cookie non va nascosta dietro un tocco): niente freccia */
  .fm-footer__main .fm-footer__col-head{min-height:0;margin-block-end:var(--space-2);cursor:auto}
  .fm-footer__main .fm-footer__col-head::after{content:none}
  .fm-footer .fm-footer__main .fm-footer__nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .fm-footer__blog-lista .wp-block-latest-posts__post-title,
  .fm-footer__contatti a{min-height:var(--touch-min)}
  .fm-footer__blog-lista .wp-block-latest-posts__post-title{display:flex;align-items:center}
  .fm-footer__blog .fm-footer__col-head a{display:inline-flex;align-items:center;min-width:var(--touch-min);min-height:var(--touch-min)}
  .fm-footer__channels--uno{grid-template-columns:minmax(0,1fr)}
  .fm-footer__contatti a,
  .fm-footer__orari a{display:inline-flex;align-items:center;min-height:var(--touch-min)}
  .fm-footer__channel{padding:var(--space-3)}
  .fm-footer__brand{padding-bottom:var(--space-6)}
  .fm-footer__col{border-top:1px solid var(--ink-800)}
  .fm-footer__col-head{min-height:var(--touch-min);margin:0;cursor:pointer}
  .fm-footer__col-head::after{content:'';width:10px;height:10px;border-right:2px solid var(--ink-300);border-bottom:2px solid var(--ink-300);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast,.14s)}
  .fm-footer__col.is-open .fm-footer__col-head::after{transform:rotate(225deg) translateY(-2px)}
  .fm-footer__col ul,.fm-footer__col .wp-block-navigation__container{display:none;padding-bottom:10px}
  .fm-footer__col.is-open ul,.fm-footer__col.is-open .wp-block-navigation__container{display:flex}
  .fm-footer__col a{min-height:var(--touch-min);padding:0}
  .fm-footer__legal{justify-content:center;text-align:center}
}

/* Il template part avvolge l'header in un <div> alto quanto lui: position:sticky
   si ferma al bordo del proprio genitore, quindi l'header scorreva via subito.
   Con display:contents il wrapper sparisce dal layout e l'header diventa figlio
   diretto dello scroller. */
.fm-header-wrap{display:contents}

/* --- Modale della ricerca (plugin flashmac-smart-search) -----------------
   Il plugin dichiara le proprie variabili in `:root` e da li' dipinge tutto
   il modale. Il tema le ridefinisce sui token invece di combattere regola
   per regola: cosi' il tema scuro arriva da solo, perche' i token sono gia'
   tematizzati.

   Perche' su `body` e non su `:root`: le custom property si risolvono
   risalendo l'albero dall'elemento che le usa, e `.fss-overlay` e' figlio di
   body. Quindi `body` vince per PROSSIMITA' su `:root`, qualunque sia
   l'ordine di caricamento dei fogli — che dipende dal plugin e non da noi.

   `--fss-on-accent` e' testo sopra il rosa, non una superficie: resta chiaro
   in entrambi i temi, come su tutti i CTA. */
body{
  --fss-white:      var(--surface-card);
  --fss-light:      var(--surface-sunken);
  --fss-skeleton:   var(--border-subtle);
  --fss-border:     var(--border-subtle);
  --fss-border-2:   var(--border-default);
  --fss-dark:       var(--text-strong);
  --fss-gray:       var(--text-body);
  --fss-pink:       var(--accent);
  --fss-pink-dark:  var(--accent-hover);
  --fss-pink-light: var(--accent-soft);
  --fss-on-accent:  var(--on-accent);
}
/* Tipografia: il modale ereditava il sans di sistema perche' il plugin non
   dichiara una famiglia. Titoli e prezzi seguono le stesse regole del resto
   del sito — display per i titoli, mono per i prezzi. */
.fss-modal{font-family:var(--font-body)}
.fss-card-name,.fss-content-title,.fss-sidebar-title,.fss-filter-group-title,.fss-recent-label,.fss-modal h1,.fss-modal h2,.fss-modal h3{font-family:var(--font-display)}
/* L'occhiello di categoria segue quello delle card di catalogo: display,
   maiuscolo, rosa. */
.fss-card-category{font-family:var(--font-display);color:var(--text-brand-aa)}
.fss-modal .woocommerce-Price-amount{font-family:var(--font-mono)}
/* La foto prodotto resta su piastra bianca anche in scuro, come nelle card
   del catalogo (invariante 1.5). La classe giusta e' `.fss-card-image`: il
   plugin le da' `--fss-light`, che in scuro diventa una superficie scura, e
   siccome l'immagine ha `object-fit:contain` con 8px di padding il PNG — che
   ha gia' il suo fondo bianco — restava un rettangolo bianco piu' piccolo
   della card, con una cornice scura intorno. */
.fss-card-image{background:var(--surface-photo)}

/* --- Modale newsletter ---------------------------------------------------
   Il form lo stampa lo shortcode del plugin flashmac-emailit, che si porta
   dietro un <style> inline con colori fissi. Quello sta nel body, quindi
   arriva dopo i nostri fogli: si vince con la specificita' del contenitore
   (0,2,0 contro 0,1,0), non con !important.

   Il titolo del form e' nascosto perche' la modale ne ha gia' uno: sarebbero
   due "Iscriviti alla newsletter" uno sopra l'altro. */
.fm-nlmodal .fm-modal__dialog{max-width:34rem}
.fm-nlmodal__sub{margin:0 0 var(--space-4);color:var(--text-body)}
.fm-nlmodal .flem-nl-form{max-width:none;margin:0}
.fm-nlmodal .flem-nl-title{display:none}
.fm-nlmodal .flem-nl-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.fm-nlmodal .flem-nl-email{flex:1 1 14rem;min-width:0;min-height:var(--control-md);padding:0 var(--space-3);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-md)}
.fm-nlmodal .flem-nl-email::placeholder{color:var(--text-muted)}
.fm-nlmodal .flem-nl-email:focus{outline:none;box-shadow:var(--ring-focus);border-color:var(--accent)}
.fm-nlmodal .flem-nl-btn{flex:none;min-height:var(--control-md);padding:0 var(--space-5);border:none;border-radius:var(--radius-md);background:var(--grad-flash);color:var(--white);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-sm);cursor:pointer}
.fm-nlmodal .flem-nl-privacy{display:flex;gap:var(--space-2);align-items:flex-start;margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-body)}
.fm-nlmodal .flem-nl-privacy input{margin-top:2px;flex:none}
.fm-nlmodal .flem-nl-privacy a{color:var(--accent-text);text-decoration:underline}
.fm-nlmodal .flem-nl-msg{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--text-body)}
.fm-nlmodal .flem-nl-msg:empty{display:none}

/* Logo del modale di ricerca: la misura va vincolata dal TEMA, non lasciata
   al plugin.
   Il plugin dichiara `.fss-logo-img{height:28px}` — specificita' (0,1,0) — ma
   WooCommerce, su ogni pagina che porta la classe `.woocommerce-page` sul
   body (account, carrello, checkout), dichiara `.woocommerce img,
   .woocommerce-page img{height:auto}`, che con (0,1,1) vince: il logo tornava
   alla sua dimensione naturale, 601x197, e occupava mezza finestra.
   Qui si sale a (0,2,0) legandolo all'overlay, che c'e' sempre quando il
   modale c'e'. I 28px (24 sotto 768) non sono un valore nuovo: sono quelli
   del plugin, riaffermati dove vengono sovrascritti. */
.fss-overlay .fss-logo-img{height:28px;width:auto;max-width:none}
@media(max-width:767.98px){ /* --bp-tablet */
  .fss-overlay .fss-logo-img{height:24px}
}

/* --- Bolla della chat (plugin FlashMac Chat) ----------------------------- */
/* Il contenitore sta nel nostro DOM ma lo crea `embed.js` di chat.flashmac.eu,
   con gli stili in linea (position:fixed; bottom:0; right:0; z-index:999999) e
   la bolla vera dentro uno shadow DOM. Si sposta il **contenitore**: dentro lo
   shadow non si entra. Gli stili in linea si battono solo con `!important`.

   Due correzioni, misurate:
   - 999999 la metteva sopra qualunque cosa. Lo scrim del cassetto del carrello
     di WooCommerce e' a 9999: la bolla ci finiva sopra e copriva "Vai al
     pagamento". Scendeva a --z-sticky (30); dal 2026-09-21 sta un gradino
     sotto l'header, calc(var(--z-header) - 1), come la barra d'acquisto
     (woo.css, .fm-buybar): l'header sticky e' un contesto di impilamento chiuso
     e cio' che contiene — mega menu compreso — non puo' superare il suo 10,
     quindi tutto cio' che sta fuori e deve restargli sotto va sotto il 10.
     Sopra il contenuto, sotto ogni pannello, e sotto il menu aperto.
   - a bottom:0 si sedeva sulla barra d'acquisto fissa in fondo alla scheda
     prodotto sotto i 768px. Si alza dell'altezza della barra. A dichiararla e'
     la barra stessa (--fm-barra-bassa, misurata in inc/assets.php con lo stesso
     idioma di --header-offset): cosi' la regola non deve sapere su che pagina
     si trova, e non si lega a una classe del <body> (§1.10). Il ripiego sta
     dentro la var(), non prima: senza la variabile la dichiarazione si
     azzererebbe invece di tornare a zero (§1.11).

   Perche' una `transform` e non `bottom`: il `bottom` del contenitore non
   sposta niente. Dentro lo shadow c'e' `.flashmac-widget-wrapper`, a sua volta
   `position:fixed; bottom:0`, che si ancora alla finestra e ignora l'ospite —
   verificato, alzando il contenitore di 77px la bolla restava dov'era. Una
   `transform` sull'ospite invece **trasla il sottoalbero**, shadow compreso, e
   sposta la bolla senza entrarci. Sullo z-index il discorso e' opposto: il
   999999 del wrapper e' interno al contesto di impilamento che l'ospite crea
   (fisso + z-index), quindi a decidere e' il nostro valore, non il suo. */
#flashmac-chat-container{
  z-index:calc(var(--z-header) - 1)!important;
  transform:translateY(calc(-1 * var(--fm-barra-bassa,0px)))!important;
}
/* Quando la chat si apre, la traslazione va tolta. La `transform` sposta tutto
   il sottoalbero, pannello compreso: misurato sulla scheda prodotto a 390, il
   riquadro aperto passava da 144-844 a 67-767. Con la finestra alta 844 non si
   vedeva, ma il riquadro e' alto 700px con `max-height:100vh`: su un telefono
   piu' corto la stessa traslazione gli manda fuori schermo l'intestazione e la
   chiusura. Alzarsi sopra la barra ha senso per la bolla, che e' un bersaglio
   da 100px; il pannello a tutto schermo si prende la finestra intera, e sotto
   ha la barra che comunque copre.
   Lo stato lo dice il widget: `embed.js` toglie e rimette la classe
   `bubble-mode` sull'iframe dentro lo shadow, e lo shadow e' aperto. Lo legge
   l'osservatore in inc/assets.php. Trovato dalla revisione indipendente. */
#flashmac-chat-container[data-fm-chat="aperta"]{transform:none!important}